CSS layout 2

엘리먼트가 배치되는 방식 (float:left)

float 속성으로 원래 flow에서 벗어날 수 있고 둥둥 떠다닐 수 있다.

일반적인 배치에 따라서 배치된 상태에서 float는 벗어난 형태로 특별히 배치된다.

따라서 뒤에있는 block 엘리먼트가 float된 엘리먼트를 의식하지 못하고 중첩돼어 배치된다.

float의 속성은 이런 특이성 때문에 웹사이트의 전체 레이아웃 배치에서 유용하게 활용된다.

예시를 통해 알아보자.

float를 통해서 이렇게 녹색 사각형을 이렇게도 배치할 수 있는것을 볼 수 있다.

실제로 float가 어떻게 사용되고 있는지 naver 모바일 버전에서 확인해 보자

개발자 도구를 이용해서 확인해 보면 네이버 모바일 사이트는 왼쪽, 가운데, 오른쪽

세 부분으로 이루어져있다. 

이 때 이 부분들이 float 설정을 통해 배치된것을 위의 그림을 통해 확인할 수 있다.

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

블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정한다.

margin, padding, border, outline으로 생성되는 것이다.

엘리먼트 간에는 margin으로 간격을 주고

(마진에 값을 주면 그 값만큼 다른 엘리먼트와의 거리가 멀어짐)

border은 테두리 정보로 두께를 조절할 수 있다.

padding은 테두리와 컨텐츠 사이에 있는 여백을 의미한다.

위의 예시에서 padding에서 숫자를 주는 순서는 위, 오른쪽, 아래, 왼쪽 순이다.

배치가 멀리있는 이유가 margin을 통해 다른 엘리먼트와의 거리를 멀게 조정했기 때문이다.

box-sizing과 padding

padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있다.

box-sizing 속성으로 이를 컨트롤 할 수 있다.

box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정하면서 padding값만 늘릴 수 있다.

border-box로 설정된것에 비해 위에 있는 것의 크기가 padding에 의해

꽤 커졌음을 알 수 있다.

layout 구현방법

전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 배치를 구현한다.

최근에는 css-grid나 flex속성 등 layout을 위한 속성을 사용하기 시작했으며 브라우저 지원범위를

확인해서 사용하면 된다.

특별한 위치에 배치하기 위해서는 position absolute를 사용하고, 기준점을 relative로 설정한다.

네비게이션과 같은 엘리먼트는 block 엘리먼트를 inline-block로 변경하여 가로로 배치하기도 한다.

엘리먼트안의 텍스트의 간격과 다른 엘리먼트간의 간격은 padding과 margin 속성을 잘

활용하여 위치시킨다.

실습

codepen.io 라는 사이트에 들어가 회원가입을 한 후 실습을 해보자.

(온라인으로 간단하게 HTML,CSS를 만들고 공유하고 저장할 수 있는 사이트이다.)

실습 강의 : https://www.edwith.org/boostcourse-web/lecture/16678/

출처 : edwith

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