😣오늘의 목표😣
width의 속성은 요소의 가로 크기를 정의하는 데 사용한다.
추가로 부모와 자식요소의 width속성 상속에 대해서 알아보자.
height는 content영역의 높이를 지정하는데 사용한다.
%값 지정의 경우 widthd의 동작방식과 다르므로 이를 유의하자.📕속성 width
- 요소의 content영역의 너비를 지정하는 값이다.
인라인 레벨 요소를 제외한 모든 요소에 적용된다.
📒속성값
auto: 기본 값으로 적용된다. 브라우저가 자동으로 계산해서 적용한다.length: 절댓값으로 px,em등의 값을 가질 수 있다.percentage: 컨테이닝 블록너비의 백분율이다.min-content: 최소한의 컨텐츠 크기max-content: 최대한의 컨텐츠 크기fit-content: 사용가능한 범위에서 가장 큰 크기(max-content대신 쓸 수 있다.)
📖 초보자가 자주 하는 실수
🔥 margin이 설정된 요소를 대상으로 width: 100%을 설정하면 자식요소가 부모요소를 벗어나게 된다.
🤔왜그럴까❓
- %는 부모요소의 너비를 기준으로 하기 때문에 요소의 전체 결과 값은 marging(padding,bording)의 크기와 content의 너비값을 합한 값이 되어 부모요소의 content를 빠져나오게 된다.
👉 %값은 부모의 padding과 border까지 더해진 요소의 전체 크기가 아닌, content 영역의 크기가 기준이라는 것
👉 width값은 content값만을 지정한다.
🔥컨테이닝 블록너비값은 무엇일까
👉 부모가 인라인 레벨 요소일 때, 자식(블록 요소)이 width 값에 %를 가지면, 가장 가까운 블록 레벨인 조상의 width를 기준으로 계산됩니다. 만일 최상단까지 블록 레벨 요소가 없으면 body를 기준으로 계산됩니다
📕 속성 height
- content의 높이를 제어할때 선언한다.
📒 속성값
auto: 기본설정값이며, 브라우저가 자동으로 계신해서 적용한다. (기본적으로 컨텐츠 영역의 내용만큼 높이를 가진다.)lenght: 절댓값으로 단위를 사용해 지정한다. (px,em)%: 컨테이닝 요소의 높이를 기준으로 백분율로 지정된다.
🔸부모요소의 height값이 명시적으로 지정되어있어여한다. (없으면 지정안됌)
📕 요소의 크기 결정
- content의 크기와 padding의 크기 bording의 크기를 합한것
😣오늘의 느낀 점😣
저번 글에서 정리했던 부분 중 헷갈리는걸 추가로 정리해봤고, 박스 모델에 관한 내용을 끝냈다.
(물론 심화과정은 못했겠지만..)
남은 방학동안 꾸준히 열심히 하고 싶다.
24년도까지 프로젝트 두개를 마치고 25년에는 개발 팀장을 할 수 있는 실력이 되자!