7/20 - 모각소 3주차

하현수·2022년 7월 20일
0

0. 지난 회차 복습

https://velog.io/@skyhs990609/715-모각소-2주차-87vmoam3

1. relative 포지션

1-1. position : static

→ "원래 있어야 할 위치에 배치된다"라는 뜻

1-2.position : relative

→ 원래 있어야 할 기준에서 이동하여 지정한 공간에 여백을 준다. (지정한 요소만 움직임)

mergin과 차이점
: mergin을 하게 되면 요소가 이동할 때 옆에 요소도 같이 움직인다.

2. fixed 포지션

→ 브라우저를 기준으로 포지션을 지정해준다.
(스크롤한다 하더라도 브라우저 기준 포지션이기에 움직이지 않는다.)
→ 보통 '네이게이션바'에 사용된다.

3. absolute 포지션

용어정리
1. static(기본) : 포지셔닝이 안 된 요소
2. 그 외 : 포지셔닝이 된 요소

→ 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 움직인다.

4. float

→ 띄운다.
→ 띄워져 있기 때문에 다른 요소를 가린다.

float: left → 왼쪽에 띄운다.

5. multiple floats

공간을 채우다가 자리가 없으면 다음줄로 내려온다.

6. clear (: left / right)

→ 옆에 아무것도 없게 해준다.
→ float로 인해 발생하는 문제를 해결할 수 있다.
ex. clearfix { clear: left; }

7. 소감

오늘은 그동안 했던 것의 복습 + 포지션에 대해 배웠다. 점점 그럴듯한 홈페이지를 만들 수 있는 능력을 가지게 되는 것 같아 신기하고 재미있다.

profile
현수의 웹 TIL입니다!

0개의 댓글