[CSS스터디] 2회 - CSS 레이아웃

 

 

CSS 흑마법사가 되어봅시다.

 

CSS 레이아웃

 

- 레이아웃은 뭘까? 어떠한 것들을 어떠한 위치에 배치 (Layout)

- 어떤 요소가 어떤 위치에 있을 것인지

- Flex & Grid Layout - 이 두 개만 가지고도 대부분의 레이아웃 구성 가능

- 전통적인 방식 (IE를 기준으로)에서는 Float 레이아웃 사용

- 특수한 레이아웃 (table, ruby)

 

CSS Box Model

 

- 하나의 요소가 박스를 이루는 모델

- 모든 요소는 박스 형태를 취하고 있는데, 그 박스가 어떻게 생겼는지를 나타내는것

- Model은 여러가지 속성들이 합쳐진 개념을 말하는 것

- 박스

  - 콘텐츠 박스contents-box (사각형)

    - 특정한 요소가 본인의 콘텐츠를 담고 있는 영역, 전체 박스(+border, margin은 크기에 포함되지 않음)

    - 너비 width, 높이 height

    - padding : border에서부터 박스 내부의 여백

    - border : 박스의 외곽선

    - margin : 박스와 다른 박스 사이의 간격 - 콘텐츠 박스를 강제로 지정해놓은 상태에서, 콘텐츠가 콘텐츠 박스보다 길어지게 

    - 콘텐츠가 넘친 상황 overflow (hidden, scroll, auto ...

    - 콘텐츠가 넘치지 않은 상황 normal flow

    - 콘텐츠의 길이를 알 수 없다면 height 정하지 말자 (정해야 한다면 overflow를 잘 이용하자)

 

(+) 콘텐츠 영역

- contents-box : 콘텐츠 영역

- border-box : 보더를 포함한 박스의 영역

- box-sizing :

  - content-box(기본값)

  - border-box

    - 박스 크기 계산이 용이해짐

    - 전체에 적용하는 것이 좋음 (와일드 카드*)

 

(+) margin의 동작

- 박스와 박스 사이 간격

- 박스를 쌓아 놓을 때 간격을 주면 합쳐지는 경우가 있다.normal flow

- margin collapse 마진 병합 현상

  - normal flow인 형제 요소들끼리 의도해서

  - normal flow인 부모 자식 요소들끼리 의도해서

  - 부모요소에 padding이 있으면 부모자식요소들끼리 margin-collapse가 먹히지 않음

 

(+) overflow

- 박스 내에서 요소가 넘치는 경우 어떻게 할 것인가 -> hidden, auto

 

CSS Normal Flow

 

- 일반적으로 박스가 쌓이는 형태 

  - Block, Inline

  - Block (ex <div>)

    - 박스가 하나하나 한 영역이 위에서 아래로 쌓이는 구조 (normal flow)

    - 한 영역을 다 차지할 때 쓰는 속성 (margin)

    - 특정한 요소를 사용한 뒤에 해당 요소가 박스 전체 (한 줄) 다 차지하는 것 같다면 block

  - Inline

    - 텍스트로 취급이 되는 구조 (normal flow)

    - 텍스트처럼 한 줄 내에서 다른 텍스트와 함께 보이는 것

    - 특정한 요소 사용한 뒤에 해당 요소가 텍스트처럼 취급되면 inline

- 만약 레이아웃을 적용하여 레이아웃을 바꾼다면 normal flow에 해당하지 않는다.

 

 

CSS Position

 

- 배치의 시작

- 어떠한 요소를 어떠한 위치 (=좌표)에 배치하고 싶으면 사용

- CSS position을 쓰는 것은 좌표 시스템을 쓰는 것과 같다. 웹은 3차원 (X축, Y축, Z축)이지만 우리가 보는 화면에 2차원

- 속성

  - static : 기본값, 좌표 시스템을 사용하지 않겠다.

  - relative : 나 자신을 기준으로 움직이겠다. 박스 자체를 기준으로 X, Y축을 이동

  - absolute : 자신을 기준으로 하였을 때, 조상 요소 중 가장 가까운 좌표 시스템을 쓰는 요소를 기준으로 한다. 보통 absolute를 쓰면 부모나 조상에 relative 적용한다. absolute는 normal flow를 탈출한다. (부모가 absolut position인 요소의 ㅋ크기를 알 수 없다. 가출..) 아이콘이 특정 위치에 예쁘게 있어야 하거나 레이어를 띄워야 할 때 쓴다.

  - fixed : 모든 것을 기준으로 브라우저 기준으로 좌표를 지정해준다.

  - sticky : 비교적 최신 기술로 특정한  요소가 특정한 조건에 맞물렸을 때 fixed처럼 좌표를 지정해준다.

 

- 좌표 (좌표 시스템은 다른 박스를 무시하는 경향이 있음)

  - X축 : left, right

  - Y축 : top, bottom

  - Z축 : z-index (z축 관리를 잘 못하면 안보인다! - z-index 문서 만들기)