YHole
on
Aug 23, 20212021-08-23T00:00:00+09:00
Updated
Aug 24, 20212021-08-24T23:26:25+09:00
3 min read
박스의 이해
box-sizing: content-box 가 기본값이기 때문
블럭의 가로는 100%
그래서 항상 변하는 브라우저 창에 따라 값이 변한다
display는 transition이 안먹음
1
2
3
4
| 렌더틀(렌더해야할 대상들(목록)을) 만드는데
목록에서 빠져버림
opacity로 해결 가능
|
글자들이 앉혀지는 과정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| 라인하이트 줄상자의 높이
[
[ 글자 px
[
21px 라인하이트 글자 14px 면 나머지 7px
위 라인 아래라인 하이라이트는 3.5px씩
img 태그
인라인으로 들어가서 밑에 공간 생김
display block 으로 바꿈으로 해결
또는 때에 따라서
vertical-align: baseline;
|
1
2
3
4
5
6
| .box2 a img{
/* display: block; */
vertical-align: top;
border: 4px solid black;
width: 92px;
}
|
1
2
3
| 또는
display block을 할 수 없을땐
line hight를 조절하는 방법도 있다
|
BFC
1
2
3
4
5
6
7
8
9
| 블록 포멧티드 컨텍스트
렌더링
DOM → CSSOM → 렌더 → 트리 → 레이아웃팅을 한다
어떤 속성을 적으면 레이아웃팅을 한번 더한다
overflow hidden
position absolute fixed 등등
table cell 등등
|
1
2
3
4
5
6
7
8
9
10
| div{
bacckground-color: red;
}
p{
border: 4px solid black;
padding: 23px 20px 5px;
width: 452px;
height: 114px;
margin-top:30px
}
|
1
2
3
4
| div의 높이가 늘어나면서 백그라운드가 넓어 져야하나
padding top 또는 border-top 을 줘야
원하는 결과가 나옴
또는 overflow: hidden;
|
느낀점
렌더링 되는 과정, 순서를 깊이 이해하고 있어야
이상하게 구현이 안 되는 문제를 해결할 수 있는 것 같다
상황에 따라 유연하게 해결하는 방법을 가지고 있어야 할 것 같다
