[Html/css] html,css 초간단 기초 문법 2 (패딩과 마진, 포지션)

1. Padding과 Margin

---

각 아이템 요소들의 크기를 결정해주는 옵션은 패딩과, 마진 2가지가 있다.

패딩과 마진의 차이점은

• Padding : 내 덩치를 키운다. (아이템요소 내부 크기)
• Margin : 다른 사람과의 거리를 둔다. (아이템 외부 크기)

라고 나는 외운다.

 

Padding, Margin 크기 정해주기(순서)

패딩과 마진 둘다 크기를 정해줄 때 4면 (위 아래, 왼쪽, 오른쪽)을 각각 다르게 줄 수 있다.

작성 방법

item {
 padding : 1px 5px 8px 12px;  /*위,오른쪽, 아래, 왼쪽*/
}

 

---

 

2. 포지션 (Position)

---

css 포지션은 크게 3가지 (relative, absolute, fixed)가 있다.

3가지 포지션의 차이점은

1. relative (반응형 위치) : 현재 위치를 기반으로 아이템이 움직인다. (위치를 변동시켜 줄때)

2. absolute (절대 위치) : 웹, html를 기반으로 위치가 선정된다. (고정된 위치)

3. fixed : 브라우저를 기반으로 위치가 선정된다. (고정되어있지만 브라우저를 스크롤해도 항상 그위치)

---

absolute 와 fixed의 차이점을 들며 쉽게 이야기 하자면,

 

둘의 위치를 좌상단에 위치시켰을때,

• absolute는 웹, 좌상단에 위치하여, 스크롤을 아래로 내렸을때는 그 아이템이 보이지 않는다.
• 반면 fixed는 좌상단에 위치시켰다면, 브라우저의 좌상단이 되므로, 스크롤을 아무리 내려도 항상 좌상단에 아이템이 표시된다.