01. relative 포지션
다른 요소와 겹치게 사용하고 싶을 때 relative 포지션을 사용한다.
이 포지션은 다른 요소와는 별개로 그 요소만 이동한다.
원래 있어야할 곳을 기준으로 움직인다.
position : relative;
top : 30px; 위의 경우는 원래 있어야하는 곳 윗쪽에 30px의 공간이 생긴다.
즉 요소가 아래로 30px 이동한다.
만일 margin-right : 30px 을 사용한다면 다른 요소와 함께 30px 옆으로 움직인다.
02. fixed 포지션
fixed 포지션은 흔히 네비게이션 바에 쓰인다. 아무리 움직여도 가만히 있어야 할 때!
브라우저를 기준으로 포지션해준다.position : fixed; top : 30px; left : 50px;위의 경우에는 요소가 브라우저에서 맨 위에서 30px 맨 왼쪽에서 50px에 위치하고 스크롤을 해도 움직이지 않는다(고정). 또한 원래 있던 흐름에서 완전히 빠져버린다.
03. absolute 포지션
<div class="red">
<div class="green">
<div class="blue">
.green {
position : relative
top : 40px
left : 90px
}
.blue {
position : absolute;
bottom : 40px;
}blue div에 가장 가까운 조상 요소 green div(position이 설정된)를 기준으로 위치를 잡게 된다. green div에서 아래로 40px 공간을 두고 자리를 잡는다는 것!
용어정리
static (기본) : 포지셔닝이 안 된 요소
relative : 원래 위치가 기준
fixed : 브라우저 윈도우가 기준
absolute : 가장 가까운 포지셔닝이 된 조상 요소가 기준
04. float
float를 설정하게 되면 사이트에서는 다른 요소와 겹치게 된다.
float의 목적은 사진이 글에 둘러써이게 만드는 것이다. ( 잡지/신문처럼 )
inline요소나 inline-block 요소는 float으로 인해 뜨게 된 자리에 갈 수 없다.
따라서 글이 사진을 피해 나열될 수 있다는 것이다.
05. multiple floats
여러개의 요소에 float을 설정하여 그리드를 만들 수 있다.
그리드란 ? 
body의 길이가 다 찬 뒤 다른 요소에 float : left를 하면 다음 줄로 넘어온다.
⭐️ float를 적용했을 때, display 속성은 무시된다.
06. clear
float와 같이 쓰여 float의 문제점을 해결해준다.
#div2 {
clear : left;
}위의 경우 div2 왼쪽에 떠있는 요소를 없애주는 역할을 한다. 따라서 div 왼쪽에 아무것도 없게 하기 위해서 다음 줄로 넘어가게 된다.
float를 사용하면 height가 0이 되는 문제가 있다. 그래서 테두리를 설정해줘도 그냥 맨 위에 선처럼 남게 되는 것이다.
<div class="clearfix"></div>
<style>
.clearfix {
clear: left;
}위의 코드를 추가한다면 clearfix div가 왼쪽에 떠있는 요소가 없는 곳을 찾다가 맨 밑까지 내려가게 되고, 이렇게 height가 늘어나 테두리가 제대로 설정되어 문제가 해결된다.
07. 리스트
- ol(Ordered List)태그
- li(List Item)태그
- ul(Unordered List)태그 : 그냥 동그라미로 매겨짐
ol type
type="a" : a, b, c 순서
type="A" : A, B, C 순서
type="i" : i, ii, iii 순서
type="I" : I, II, III 순서
<ol>
<li>집 청소</li>
<li>영어 단어 외우기</li>
<li>영화 보기</li>
</ol>위의 예시의 결과
1. 집 청소
2. 영어 단어 외우기
3. 영화 보기만일 ol에 type을 설정해준다면 ( ol type="a" )
아래의 결과가 나온다.
a. 집 청소
b. 영어 단어 외우기
c. 영화 보기list 스타일링
display : list item이기 때문에 옆에 점 혹은 숫자가 붙어있다. 만일 li { display : block }을 설정하면 다 없어진다.
만일 list의 스타일을 점 대신 네모로
list-style-type : squre
직접 list 스타일링을 한다면?
list-style : none 해주고, ul과 li에 여러가지 입혀주면 된다.
ul { padding-left : 0; } 등등
