박스모델
HTML의 모든 요소는 CSS상에서 박스로 인식된다.
위의 사진과 같이 중앙에는 콘텐츠 영역이 있고, 그 위로 내부 여백(padding), 테두리(border), 외부 여백(margin)이 존재한다.
여백 상쇄
위의 이미지를 보면 section태그의 margin과 h1태그의 margin이 겹쳐지는 부분이 있다.
section태그의 아래쪽 margin은 20px, h1태그의 위쪽 margin은 19.92px로 둘 사이의 간격이 39.92px이 되어야할것같지만, 실제로는 겹쳐지는 부분이 있어 큰 쪽의 margin인 20px이 된다.
이와 같은 동작을 여백 상쇄라 하며, 이것은 버그나 오류가 아닌 의도적인 설계로 여백상쇄를 통해 두 요소간의 거리가 너무 멀어지지 않게 유지할 수 있다.
높이와 너비
width
width를 100%로 하면 페이지의 전체 너비를 사용하게 된다.
인라인 요소와 달리 블록 레벨 요소는 항상 기본 설정값에 따라 가용되는 전체 너비를 사용하기 때문에 whidth: 100%는 크게 의미가 없다.
width는 %값이나 300px과 같은 절대값을 가질 수 있다.
height
height를 100%로 설정하면 전체 페이지만큼 길어지는 것을 기대하겠지만, 실제로는 부모 컨테이너의 가용 높이만큼 그 길이가 길어진다.
따라서 페이지에 대해 높이를 조정하고 싶으면 페이지의 높이가 전체적으로 반영되도록 사슬 구조를 생성해야 한다.
height또한 width와 마찬가지로 %값이나 절대값을 가질 수 있다.
box-sizing
width와 height를 통해 높이와 너비를 바꿨을 때 바뀌는 대상이 어디까지일까?
박스 모델은 안쪽부터 content영역, padding, border, margin이 존재한다.
위에서 width를 700px, height를 500px로 변경했을 때 박스 모델의 크기 변화를 살펴보면 content부분만 변경된 것을 볼 수 있다.
따라서 padding, border, margin은 크기 변경의 영향을 받지 않았다.
하지만 박스모델은 모든 요소의 크기를 더한 값이 브라우저에 표시되기 때문에 원치않은 위치에 위치하게 될 수 있다.
이는 content-box라는 개념으로, 모든 요소에는 기본적으로 너비와 높이를 산출하는 특정 방법이 내재되어 있음을 의미한다.
이러한 동작은 해당 요소에 box-sizing이라는 프로퍼티를 추가함스로써 변경할 수 있다.
content-box는 사이즈의 변화가 content에만 국한되어있지만 box-sizing을 border-box로 바꿔주면 사이즈의 변화가 content, padding, border까지 포함되게 된다.
이러한 box-sizing: border-box;를 모든 요소의 기본값으로 사용하기 위해서는 universal선택자를 사용해야하며, 이는 모든 요소의 특정 동작을 초기화하고자 할 때 사용하는 방법이다.
* {
box-sizing: border-box;
}display: inline-block;
블록 레벨 요소와 인라인 요소
블록 레벨 요소는 블록으로 렌더링 하기 때문에 가능한 모든 수평 공간을 차지한다.
따라서 블록 레벨 요소끼리는 서로 다른 라인에 렌더링 되게 된다.
반면 인라인 요소는 콘텐츠가 들어가는 데 필요한 공간만을 차지하기 때문에 서로 다른 인라인 요소는 공간이 충분할 경우 같은 라인에 렌더링 된다.
또한 인라인 요소는 위아래 여백이 요소에 영향을 미치지 않고, 필요한 공간만을 차지하기 때문에 너비와 높이를 설정해도 아무 효과가 없다.
이러한 블록 레벨 동작과 인라인 동작이 모두 필요한 경우 display: inline-block을 통해 두 동작을 병합할 수 있다.
display: none; vs visibility: hidden;
display: none;을 통해 요소를 제거할 수 있으며, 이렇게 제거된 요소의 공간은 다른 요소들이 사용 가능하다.
하지만 요소를 숨기지만 해당 공간은 유지하고 싶은 경우 visibility: hidden;를 사용하면 된다.
Pseudo Classes & Pseudo Elements
Pseudo Classes
Pseudo Class는 스타일을 정의하거나 마우스 오버나 활성 상태와 같은 요스의 특수한 상태(state)에 대한 스타일을 정의할 수 있게 해준다.
Pseudo Class는 : 하나를 쓰고 hover나 active같은 클래스 이름으로 정의한다.
.main-nav__item a:hover,
.main-nav__item a:active {
color: white;
border-bottom: 5px solid white;
}예를들어 위와 같이 css코드를 작성하게 되면 main-nav__item의 a태그 위에 마우스를 올릴때나 클릭시에 해당하는 스타일을 적용해준다.
Pseudo Elements
Pseudo Element는 요소의 특정 부분의 스타일을 정의할 수 있다.
Pseudo Element는 : 두개를 쓰고 요소 이름을 추가하여 정의한다.
p::first-letter {
color: red;
font-size: 20px;
}예를들어 위와 같이 css코드를 작성하게 되면 p태그의 첫번째 글자에 해당하는 스타일을 적용해준다.
