CSS의 mediaQuery를 사용하여 뷰포트(viewport) 너비에 따라 CSS 속성 값을 변경해보자❗ 📌 mediaQuery란 무엇인가요? 미디어 쿼리(mediaQuery)는 단말기의 유형 (출력물 vs. 화면)과, 어떤 특성이나 수치 (화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다. if 조건문과 비슷한 개념이라고 생각하면 이해하기 쉽습니다. ex) 뷰포트 너비가 62rem 이하이면 flex-direction을 row에서 column으로 바꿔줘~ @media 키워드로 시작하는 미디어 쿼리의 문법 구조 @media (조건) { 스타일 } 스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일..

CSS Units 1️⃣ Absolute length units 2️⃣ Relative length units Absolute length units 어떤 상황에서든 항상 고정된 길이를 나타내는 단위 여러가지가 존재하지만 주로 px(모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위)이 사용된다. Absolute length units의 문제점이 무엇일까? 컨테이너의 사이즈가 변경되어도 컨텐츠가 그대로 동일한 크기로 간주! 반응형 ❌ Relative length units 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위 주로 사용되는 5가지에는 em, rem, vw, vh, %가 존재한다. em - (동일 요소의 글꼴 크기)❌ → 부모 요소의 글꼴 크기 선택된 폰트 패밀..

웹 개발을 하면서 탭은 매우 유용하게 사용될 수 있습니다. 위 사진은 제가 직접 Bootstrap을 사용하여 만든 탭 입니다. 차례대로 탭 사용법에 대해 알려드리겠습니다. ● 외부 스타일시트 적용 기본적으로 태그 안에 넣어 주셔야 합니다. ● 탭 메뉴 구성 판매현황 구매현황 , 태그를 이용하여 순서 없는 목록을 만들고 버튼으로 탭 메뉴를 만들었습니다. ● 메뉴별 내용 구성 상품명 최고입찰가 경매상태 남은 마감시간 HTML CSS JAVASCRIPT ... 태그를 이용하여 메뉴별 내용을 구성하였습니다. 태그를 이용하여 각 열마다 너비를 지정하였습니다. ● 탭 전환 JS 적용 ● Bootstrap JavaScript plugin 적용 를 태그가 닫히기 전에 페이지 끝 부분에 넣어 활성화 시킵니다. 지금까지 ..