[CSS] display / 초기화 / grouping 시행착오 기록

planted-ji·2023년 5월 1일
0
post-thumbnail

▶ img 하단 여백

▷ img에 display: block 을 적용하면 사라진다.
▷ img는 inline 요소. lnline 요소는 보이지 않는 가상의 기준선이 존재하는데 그것을 기본값으로 baseline에 위치한다. 그래서 보이는 원치 않는 공백이 block 요소에는 없기 때문에 block을 준다.

▶ viewport height 정렬 (스크롤 생김 문제)

▷ body의 마진 값 때문에 viewport height 정렬이 오래 걸렸다.
▷ 앞으로는 초기화 먼저 필수적으로 진행하자!

▶ 텍스트 박스와 img

▷ img를 텍스트와 같은 div안에 넣었더니, 텍스트 박스가 넓어질 때마다 이미지가 함께 커져서 문제를 발견할 때까지 수정이 어려웠다.

▷ 앞으로는 grouping을 할 때 알맞은 요소끼리만 묶도록 유의하자!

0개의 댓글