CSS 원칙1
모든 요소는 네모(box)이고, 위에서 아래로 왼쪽에서 오른쪽으로 쌓인다.
Box model
모든 HTMl 요소는 box 형태
하나의 box는 content, padding, border, margin 4가지 영역으로 이루어짐
Box-sizing
기본적으로 모든 요소의 box-sizing은 content-box이다.
padding을 제외한 순수 contents 영역만을 box로 지정한다.
우리가 일반적으로 box 영역을 볼 때 -> border 까지의 너비라고 생각함
box = border 사이즈로 맞추고 싶다면, box-sizing을 border-box로 설정해야한다.
CSS 원칙2
display에 따라 크기와 배치가 달라진다.
display
1. block : div / ui / ol / li / p / hr / form
- 기본 너비 = 가질 수 있는 너비의 100%
- 줄 바꿈이 일어나는 요소 ( 다른 요소를 밀어낸다 )
- 화면 크기의 전체 가로 폭을 차지 -> 하나를 만들면 걔가 가로 100% 한줄을 다차지함
- block 레벨 요소 안에 inline 레벨 요소가 들어갈 수 있다.
box의 크기를 지정해준다면 ?
.box{
width: 100px;
height: 100px;
}자동으로 지정한 크기 외에 나머지 가로 폭에 margin이 부여됨
2. inline : span / a / img / input / label / b / em / i / strong
- 기본 너비 = content 영역 만큼
- 본인이 정렬하는게 아닌, 싸고 있는 box가 정렬 시켜줌
- 줄 바꿈이 일어나지 않는 행의 일부 요소
- content를 Markup 하고 있는 만큼만 가로 폭을 차지
- width , height, margin-top, margin-bottom을 지정할 수 없다
- 상하 여백은 line-height로 지정
3. display : inline-block
- block과 inline 레벨 요소의 특징을 모두 가짐
- block 처럼 한 줄의 영역을 차지 한다.
- 형제 요소는 밀어내지 않고, 한 줄에 다나옴
- inline 처럼 한 줄에 표시가 가능 하다
- block 처럼 width, height, margin 속성을 모두 지정할 수 있다
4. display : none
- 해당 요소를 화면에 표시 X
- 공간 부여 X
-> visibility : hidden 과 차이점 : visibility는 화면에 표시 X 지만 공간은 차지한다.
CSS 원칙3
position으로 위치의 기준을 변경한다.
*Normal flow : 레이아웃을 변경하지 않았을 때 웹 페이지가 배치하는 일반적인 방식
CSS position : 문서 상에서 요소의 위치를 지정
1. static : 모든 태그의 기본 값 ( 기준 위치 )
- Normal flow
- 일반적인 요소의 배치 순서에 따른다. ( 왼 -> 오 / 위 -> 아래 )
- 부모 요소 내에서 배치될 때는 부모 요소의 위치를 기준으로 배치된다.
2. relative : 상대 위치 ( 본인의 원래 위치 )
- Normal flow
- 자기 자신의 static 위치를 기준으로 이동
- 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다
3. absolute : 절대 위치
- 요소를 일반적인 문서 흐름에서 제거 후, 레이아웃에 공간을 차지하지 않는다.
- static이 아닌 가장 가까이 있는 relative 부모/조상 요소를 기준으로 이동한다. ( 없다면 body를 기준으로 함 )
4. fixed : 고정 위치 ( 화면 상 위치 )
- 요소를 일반적인 문서 흐름에서 제거 / 레이아웃에 공간 차지 X
- 부모 요소와 관계없이 viewport를 기준으로 이동 -> 스크롤 시에도 항상 같은 곳에 위치함
5. sticky : 스크롤에 따라 static -> fixed로 변경
- 속성을 적용한 box는 평소에 문서 안에서 position: static 상태와 같이 일반적인 흐름에 따르지만, 스크롤 위치가 특정 지점에 이르면 position : fixed와 같이 박스를 화면에 고정
relative / absolute 차이
relative -> 본래 자신의 시작점에서 top + 100 left + 100한 지점으로,
내가 가야할 위치로 부터 position 세팅
absolute -> 부모의 시작점에서 top + 100 left + 100한 지점으로 position 세팅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
padding: 20px;
border: 1px solid #000;
color: black;
background-color: lightpink;
text-align: center;
}
.relative{
position: relative;
background-color: lightblue;
top: 100px;
left: 100px;
}
.absolute{
position: absolute;
background-color: lightgreen;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box">static</div>
<div class="box relative">relative</div>
<div class="box absolute">absolute</div>
</body>
</html>
'HTML & CSS' 카테고리의 다른 글
| [CSS] float 속성 (0) | 2023.03.10 |
|---|---|
| [CSS] 결합자 ( + / ~ ) (0) | 2023.03.08 |
| [CSS] 선택자 ( nth-child / nth-of-type ) (0) | 2023.03.07 |
| [HTML] form 만들기 ( label / input ) (0) | 2023.03.07 |
| CSS 기본 정리 ( 선택자 / 적용 우선 순위 / 상속 ) (0) | 2023.03.07 |