차례
- CSS Layout
- position property
- display property
- float property
- Flex
- Grid
1. CSS Layout.
- HTML elements들을 페이지 임의 위치에 자유롭게 배치하는 것을 CSS Layout이라고 한다.
- CSS Layout을 구현하기위해 다음과 같은 방법들이 존재한다.
- position property
- display property
- float property
- 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
6. Grid
'Frontend' 카테고리의 다른 글
Developer Tools (0) | 2020.10.24 |
---|---|
Semantic Web과 Semantic Tag (0) | 2020.10.24 |
HTML, CSS (0) | 2020.10.24 |
1. basic react (0) | 2020.10.24 |
0. React intro (0) | 2020.10.24 |