CSS 레이아웃

차례

1. CSS Layout
2. position property
3. display property
4. float property
5. Flex
6. Grid

 

1. CSS Layout.

- HTML elements들을 페이지 임의 위치에 자유롭게 배치하는 것을 CSS Layout이라고 한다.

- CSS Layout을 구현하기위해 다음과 같은 방법들이 존재한다.

1. position property
2. display property
3. float property
4. Flexbox, Grid, etc

 

2. Position property

- position property는 HTML element의 포지셔닝되는 방법을 설정합니다

static

- 디폴트값, element들은 왼쪽에서 오른쪽, 위에서 아래로 차례대로 생성됩니다

relative

.position {
	position : relative;
	left: 20px;
}

- 원래의 위치에서 left, right, top, bottom 값만큼 element를 이동시킵니다.

absolute

.position{
	position : absolute;
	right : 0;
	bottom : 0;
}

- 해당 element의 position값이 설정된 첫번째 조상 element를 기준으로 left, right, top, bottom 값만큼 움직이게 됩니다

fixed

.position {
	position : fixed;
	top : 10px;
}

- element는 윈도우 브라우저창을 기준으로 left, right, top, bottom 값만큼 움직입니다.

 

3. Display property

- inline element : inline요소끼리는 서로 한 줄에, 바로 옆에 위치할 수 있는 HTML 요소

- block element : 항상 새 줄에서 시작하며 좌우로 최대한 늘어난 HTML 요소 

- display property는 box model의 배치방법을 설정합니다 

display : inline

- 해당 element를 inline element로 설정

display : block

- 해당 element를 block element로 설정

display : inline-block

- 해당 element를 inline element처럼 한줄에 여러 element들이 배치 되도록함과 동시에 block elementcjfja 요소들 사이에 margin, height, width 등의 value가 적용된다

 

4. Float property

- float property를 통해 해당 element를 문서에서 떠있도록 배치시킨다.

- float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어나는 문제 발생 

- 위의 문제는 float 요소의 다음요소에 clear속성을 부여하여 해결가능

 

5. Flex box

 

https://studiomeal.com/archives/197

https://flexboxfroggy.com/#ko

 

6. Grid

 

https://cssgridgarden.com/#ko

https://studiomeal.com/archives/533