얕았던 CSS에 대해 조금이라도 깊게 알 수 있었다.
inline과 margin, padding
inline은 좌우 여백은 가능하지만 상하로는 불가능하다고 알고 있었다. 이건 맞는 말이기도 하고 틀린 말이기도 하다.
실제로 border를 설정하고 확인하면 여백이 생기긴 생긴다!
다만 다른 요소들을 밀어내지는 못한다. 여백은 생기지만 밀어내는 효과는 없다고 말하는 게 더 정확하겠다.
font-size?
직관적이다. 글자의 크기를 나타내는 속성이다. 하지만 정확히 어떤 기준으로 글자가 커지는 가에 대해 고민해본 적은 없다.
font-size는 글자가 들어가는 em 박스의 높이를 나타낸다. 각 글자마다 너비는 다를 수 있지만 높이는 font-size로 고정된다.
비슷하게 line-height도 font-size를 포함한 개념이다.
img 태그와 base line
CSS에서 inline 속성을 가진 요소들은 base line을 가진다. 영어에서 g나 y 같은 알파벳이 기준선 아래를 차지하는 것처럼 base line은 실제 차지하는 컨텐츠의 바닥보다 조금 위에 있다.
다음과 같이 이미지 태그에 border를 설정하면 여백을 확인할 수 있다.
이것을 해결하는 법은 간단하다. img 태그에 block 속성을 주거나 inline 속성을 가진 요소를 정렬하는 vertical-align을 top으로 지정하면 된다.
float과 BFC 재계산
BFC(Box Format Context)라는 개념은 처음 알았다. 간단하게 설명하자면 박스가 가질 크기를 계산하는 작업이다.
내부 요소를 float으로 설정하면 그 요소의 크기를 제외하고 박스의 크기를 계산하는데 몇몇 속성의 지정으로 이것을 재계산 할 수 있다.
.container {
overflow: hidden;
float: left(or right);
position: absolute;
display: inline-block;
}
.container::after {
content: "";
display: block;
clear: both;
}이처럼 다양한 속성들을 지정해 float까지 포함한 box 크기로 재계산한다.
float은 번역하면 '뜨다' 라는 뜻이 된다. 현재 normal-flow에서 벗어나 정말 공중에 뜬 것같은 상태. 그것이 float이었다...
그렇기 때문에 BFC 재계산이 필요하다.
remind 🐱
- 자식이 부모의 border-radius를 가릴 때 부모에 overflow: hidden
- position absolute, fixed면 display가 block으로 변경됨
- flex에서 align-items는 한 줄일 때, align-content는 여러 줄(wrap일 때)
- transition: transition-property(기본 값 all), transition-duration(기본 값 0, 값을 넣어야 적용), transtion-timing-function(ease 같은), transition-delay(대기 시간)
