웹1 8일차 - 마켓컬리2

[✨코드짜는 순서]

가장 큰 박스부터 안쪽 방향으로 폴더 정리하듯이 오브젝트를 생성해준다. 

ex) div.top-popup-section

          > div.air-box

          + div.text-box

          + div.icon-box

              > close icon 

      + div.top-bar-section

          > div.left-box

          + div.nav

          + div.right-box

              ...

              ...

기본요소 넣기

css로 색상, 폰트, 좌우중앙 정렬, display 속성 등 처리하기

완성

 

 

 

 

 

 

[텍스트 세로 정렬]

line-height 설정 안 했을 때

line-height: 0px;

line-height: 42px;

 

line-height 속성의 속성값을 기본(혹은 상위 요소) 높이보다 높게 설정하면 자동적으로 세로 정렬이 된다. 

단, 여러 줄의 텍스트라면 행간이 굉장히 넓어질 수 있으므로,

텍스트를 div로 감싸서 div를 세로 정렬하는 식으로 하는 것이 좋다. 

 

 

 

 

---

 

 

 

**css팁

padding, border가 크기에 포함되는 css 속성 : box-sizing: border-box;

위에 있는 3개의 박스의 넓이가 상위 요소에 딱 맞게 설정되어 있음에도 줄바꿈없이 있는 모습을 확인할 수 있다.