Layout만들기

레이아웃

레이아웃(layout)이란, 특정 공간에 여러 구성요소를 보기좋게 효과적으로 배치 하는 작업을 의미합니다.

---

레이아웃 : float

float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 자연스럽게 어울리게 하는 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성 할 때자주 사용됩니다.

clear 속성

컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다. 따라서 float속성이 적용하고자 하는 요소가 모두 등장하고 난 다음에 clear속성을 이용하여 이후의 요소들이 더이상 float의 속성에 영향을 받지 않도록 합니다.

See the Pen 레이아웃1 by jwor12427 (@jwor12427) on CodePen.

레이아웃 : flex

flex 속성은 같은 컨테이너안쪽에 flexible item들에 대한 속성값을 지정합니다. float 보다 손쉬운 방법으로 부모속성의 컨테이너에 적용해주면 이후 자식요소들이 영향을 받습니다.

display : flex; //사용 방법
flex-direction : 방향을 지정합니다.
flex-wrap : 컨테이너 끝에 닿으면 방향에 따라 줄 바꿈을 합니다.
flex-direction : row; // 기본값, 수평방향으로 왼쪽에서 오른쪽 정렬
flex-direction : column; //수직방향으로 위에서 아래도 정렬

See the Pen 레이아웃1-2 by jwor12427 (@jwor12427) on CodePen.

레이아웃 : grid

테이블과 마찬가지로 grid는 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS grid는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다.

display : grid ; // 사용방법
grid-area : " "; // 그리드의 템플릿 영역을 설정
grid-area-name : ; // grid-area 속성 값으로 설정한 임의의 그리드 영역 이름
grid-template-rows : ; // 그리드의 행(row)값 설정
grid-template-columns : ; // 그리드의 열(column)값 설정

See the Pen 레이아웃1-3 by jwor12427 (@jwor12427) on CodePen.