CSS 레이아웃

div, span

div의 display: block;

block : '박스'
크기 조정이 가능
레이아웃을 짠다는건 결국 이 박스를 조정하는 것
ex) div, header , section, article, nav 등등

span의 display: inline;

inline : 한 줄에 출력
크기 조정이 불가

display: inline-block;

inline-block 동시에 사용

display: none;

숨김

box model

• 박스모델의 기본
• content-box의 width는 border와 내부 padding을 제외한 width이다.
• 그래서 width를 정할 때 border와 padding값도 신경을 써주어야한다.

• width값이 내부 padding과 border값이 포함이 되어있다.
• 그래서 padding과 border 신경안쓰고 오직 width와 height만 신경써주면 된다는 장점이 있다.
• width = padding + border => box-sizing: border-box
• 다만 이것을 쓸때는 IE를 고려해주어야 한다.

---

모든 태그에 margin, padding 0으로 설정 (여백 없애기)

* {
    margin: 0;
    padding: 0;
}

또한 margin, padding에 px이 아닌 %(퍼센트)를 주는 이유는 반응형 웹을 위해 고정된 값이 아닌 유연하게.

rem

• root em: 16px

root : html (root element)
대부분의 브라우저의 디폴트 font-size는 16px입니다.

max-width & margin

• max-width: 1000px; 인 경우 만약 박스가 있을 때 박스는 브라우저의 폭이 1000px까지만 늘어나고 초과가 되면 더이상 늘어나지 않습니다.
• 그러면 박스가 왼쪽으로 치우쳐져 있는데 이는 margin으로 가운데 정렬이 가능합니다.
• margin: 0 auto; (왼쪽과 오른쪽에 auto 설정)

viewport

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

우리가 스마트폰으로 유명한 구글이나 네이버에 들어가보면 글씨 크기나 모든 것이 스마트폰에 최적화되어 보입니다. 그 이유가 viewport를 넣었기 때문입니다.
이를 안넣어주면 데스크탑처럼 보이는 어색함이 있습니다.

참고 사이트

1분코딩 유튜브