[CSS] 배치, 레이아웃 설계, float

5. Element가 배치되는 방법(CSS layout)

Layout

= 엘리먼트를 화면에 배치하는 것

= Rendering 과정

= 배치

• display(block, inline, inline-block)

  block : 위에서 아래로,

  inline : 좌에서 우로 흐른다.

• position(static, absolute, relative, fixed)

• float(left, right)

블록으로 쌓이는 엘리먼트

display: block

​ div, p 등 대부분 엘리먼트

옆으로 흐르는 엘리먼트

display: inline

​ span, a(링크), strong(강조)

좀 다르게 배치시키기 (position 속성)

1. static

position 속성은 기본 static이다. 그냥 순서대로 배치된다.

2. absolute (top/left/right/bottom 등의 기준점에 따라 절대좌표 상의 위치)

top / left 기본 값을 주는 것이 좋다. 그렇지 않으면 엉뚱한 위치에 가있는다.

상위 엘리먼트를 단계적으로 찾아가며, 그 엘리먼트의 position이 기준점이다.

상위 엘리먼트의 static이 없다면, body를 기준으로 한다.

3. relative : 원래 자신이 위치해야 할 곳을 기준으로 이동

4. fixed : viewpoint(전체화면) 좌측, 맨위를 기준으로 동작

ex) 따라다니는 광고, 스크롤을 내려도 그대로 적용된다.

간격을 다르게해서 배치하기 (margin: 10px)

margin은 위/아래/좌/우 엘리먼트와 본인간의 간격이다.

기본 배치에서 벗어나서 떠있기 (float: left)

뒤에 block 엘리먼트가 float된 엘리먼트를 의식하지 못하고 중첩되서 배치된다.

Tip: css에서 1을 앞에 붙이면 주석처리가 된다.

하나의 블록엘리먼트는 box형태이다. (box-mdoel)

따라서 margin, padding, border, outline 속성들이 자동 생성됨.

box-shadow는 border밖에 테두리를 그릴 수 있는 속성이다.

padding: 25px 10px 0px 3px; 순서는 위, 오른쪽, 아래, 왼쪽

단축표기법 2개 쓰면 상하, 좌우

1개쓰면 상하좌우

box-sizing과 padding

padding 간격을 늘리면 전체 박스의 사이즈가 커진다.

하지만, box-sizing: border-box; 라고 하면, padding값을 늘려도 전체 박스 크기가 변하지 않는다.

box-sizing의 디폴트값은 content-box이다.(박스 사이즈 변함)

Layout 구현 방법은?

1) float를 잘 사용해서 2단, 3단 컬럼배치를 구현한다.

​ css-grid나 flex속성 등 layout을 위한 속성을 사용하기 시작했다. (브라우저 지원범위를 확인)

2) 특별한 위치에 배치하기 위해서는 position absolute, 기준점을 relative로 설정

3) nav와 같은 엘리먼트는 블록 엘리먼트를 inline-block으로 변경해서 가로로 배치할 수 있다.

4) 엘리먼트안의 텍스트 간격, 다른 엘리먼트간의 간격은 각각 padding과 margin 속성을 잘 활용한다.

6. Float 기반 샘플화면 레이아웃 구성

Hands-on

7. 디버깅 HTML, CSS

크롬 개발자도구의 Element panel을 잘 익혀두는 것이 중요합니다.

개발자도구를 통해서 쉽게 할 수 있는 일들을 정리하면 다음과 같습니다.

• CSS Style을 inline 방식으로 빠르게 테스트할 수 있습니다.
• 현재 엘리먼트의 값을 임시로 바꿀 수 있습니다.
• 최종 결정된 CSS 값을 확인할 수 있습니다.

[출처 - 부스트코스, 웹 프로그래밍]

https://www.edwith.org/boostcourse-web/