숨

- 미디어 쿼리를 사용 할 때 브라우저의 폭을 인식해서 각 조건에 맞게 처리하기 @media (min-width: 1000px) {} /*최소 폭이 1000px 일 때 적용되는 코드 */ => 작은 사이즈의 레이아웃을 기본으로 하고 확장되는 형태로 작성 @media (max-width: 1000px) {} /*최대 폭이 1000px 이하인 경우 적용되는 코드 */ => 가장 큰 사이즈 레이아웃을 기본으로 축소하는 형태로 작성 예시) 전체 화면의 20%이지만 500px 이상으로 커질 땐 커지게 하고 싶지 않을 때 width: 20% max-width: 500px; 자식(li)이 부모(ul)의 width를 넘지 않게 할 때 ul{width: 500px;} li{max-width: 500px;} 참고 : ht..

공통점 - CSS의 font-size 값에 비례해서 결정되는 상대 단위 차이점 - font-size이 어느 기준(태그)이냐에 따라 차이가 발생 em : 해당 단위가 사용되는 스타일 지정 태그의 font-size 속성 값이 기준 (만약 없으면? 부모요소로 부터 font-size 값을 상속(inherit)받는다.) rem : r은 root, 즉 최상위 태그의 font-size 속성 값을 기준으로 한다. HTML에서 최상위 태그? 즉, html 태그의 font-size 속성 값이 기준 예시 1 html { font-size: 16px; } div { font-size: 20px; width: 10em; /* 200px */ } div { font-size: 20px; width: 10rem; /* 160px ..

반응형 페이지로 무언갈 만들고 있는 도중 문제점 : 윈도우의 가로 폭을 늘릴 때 아이콘&검색 영역이 전체 을 벗어난다 왜일까? => 아이콘&검색 영역의 폭을 잘못 설정해둬서! 폭을 왜 잘못 설정했을까? => CSS에서 box-sizing 속성에 따라 width와 height를 계산하는 방법을 몰랐기 때문 Box 모델의 크기 : 콘텐츠 크기 + padding(요소 내부 여백) + border(테두리) + margin(요소 외부 여백)값 ✨정리 box-sizing : content-box 요소의 크기 = 콘텐츠의 크기 최종 width = padding + border + 콘텐츠 크기(요소의 width) 예시) .box {width: 350px; border: 10px solid black;}을 적용한 요소의..