1. position 속성
static
-
static은 모든 태그들이 기본적으로 가지고 있는 default 값입니다.
-
position에 static을 넣었을 때
-
여기서는 left나 top을 사용할 수 없습니다.
relative
-
relative속성의 기본 모습은 static일 때와 같습니다.
-
하지만 여기선 left, top등의 위치를 지정할 수 있습니다.
-
결론: relative를 넣은 순간 해당 태그는 상대적인 위치를 갖게 된다.
absolute
-
absolute 속성은 기본 모습부터 다릅니다.
마치 span태그인 양 내용의 크기가 곧 태그의 크기가 되었습니다. -
left, top등의 위치를 지정했을 때 역시 그 위치가 다릅니다.
left, top등의 기준은 웹 페이지 전체(= body)가 됩니다. -
이 기준을 바꾸고 싶다면 부모 태그를 만들고 position을 relative로 바꿔야 한다.
(부모 태그가 relative이지 않을 경우)
(부모 태그가 relative일 경우)
fixed
- fixed속성은 absolute와 유사하지만 페이지를 드래그해도 동일한 위치게 지속적으로 따라온다.
또한 부모가 relative여도 관여 받지 않는다.
2. inline, inline-block, block
inline과 block의 차이
-
inline은 컨텐츠 만큼의 크기를 차지하고, block은 높이는 컨텐츠마다 다르지만, 길이는 페이지 전체를 차지한다.
-
inline은 width나 height를 지정할 수 없다.(block은 가능하다.)
-
inline은 margin -top/-bottom을 지정할 수 없다.(간격이 일정하니 span은 지정되지 않은 것)
-
inline은 line-height를 지정할 수 없다.
inline-block의 차이
-
화면의 차지하는 부분은 inline스럽다.
-
width나 height는 block스럽다.
-
마찬가지로 margin -top/-bottom, line-height는 모두 block스럽다.
3. float
-
대략 뭔가 떠있다. 는 의미이다.
-
현재 상태는 이미지 밑에 div태그가 있는 형태이다.
-
여기서 상위 태그(img)에
float: left;를 걸게 되면 상위 태그가 하위 태그 안에 떠 있는 모습이 된다.
글자의 손실은 없고 단지 안착해 있다. -
하위 태그는 이를 거부할 수 있다. 거부는 clear속성을 넣음으로써 가능해진다.
-
clear의 값은, 상위 태그의 float방향과 같아야 한다.
-
모를 경우 both를 써서 두 좌우 모두 막을 수 있다.
-
예전에는 float를 활용하여 화면의 레이아웃을 꾸몄지만( 예문 링크 ), 현재는 flex라는 아주 훌륭한 layout을 위한 css문법이 생겼다.
4. flex
생활코딩에서 flex강의와 예시 이미지를 활용할 수 있는 사이트를 만들었다.
한번 보면 완전히 알 수 있다.
