[실무] CSS 팁

1. Page 크기의 Height 설정하는 법

    + html 태그는 viewport height을 따름. body height 100%로 설정하면 html height을 따르는데 html height을 명시적으로 표시 안하면 parent height을 0으로 간주해서 body height도 0. 따라서 html height을 100%로 설정한 뒤 body height을 100%로 설정하거나, 아니면 body height을 100vh로 설정하는 식

        + min-height으로 설정할 경우, body가 viewport보다 커지면 오른쪽에 vertical scrollbar(10px width)가 생기면서 전체 page width가 viewport를 초과하여 horizontal scrollbar가 생기는 경우가 있음. 이 경우 100vw로 설정해서 그럼. default 값인 100% width로 body에 설정해두면 그럴 일 없음 (아니면 CSS resetting, 등, 적용하기. body 기본 margin 8px인데 이를 margin 0으로 한다든지)

    + body background color을 html이 reverse inherit해서 더 헷갈림

    + https://www.freecodecamp.org/news/html-page-width-height/

html {
    height: 100%;
}
body {
    min-height: 100%;
}

<!-- 또는 -->

body {
    min-height: 100vh;
}

 

 

2. Size

    + height은 기본적으로 intrinsic size를 따름. 예를들어 그냥 div면 height 0이어서 화면에 안나옴. 바로 위 div (parent)의 height 설정값이 중요 (body든, html이든, 마찬가지)

    + 즉, width %는 parent 크기에 맞춰서 적용되지만 height은 intrinsic size에 영향받음 (overflow 피하기 위함) (width는 default로 100%)

    + inline, block, 등, 요소에 따라서 height 무시되기도 함 (예: inline)

    + https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS

 

 

3. body, 등, 기본설정은 아래와 같음

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

<!-- React에서는 id=root인 div DOM이 있으므로 아래와 같이 -->

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div#root {
    height: 100%;
}

 

4. 가운데 정렬하는 법

    + https://brunch.co.kr/@skykamja24/514

 

 

5. 기본적인 layout 방법

 

6. 기본적인 Positioning 원리

 

7. css는 component끼리 확실히 구분되는지? className conflict 같은 건 발생 안하는지?

 

8. width, height, display, 등, 어떤 순서로 배치할지

 

9. dynamic, reactive page layout

 

10. infinity scroll

 

11. 밑에 태그 띄우는 방법

 

12. 

 

13.

 

14.

 

15.

 

 

References.