하루 하루 즐겁게

모든 element의 position의 default 는 static 이다

static

이 말은 내가 element의 위치를 정해주면 그 자리에 보여준다는 뜻이다.

ex) position: static;

fixed

해당 element가 화면의 위치에 fixed 되어서 스크롤을 하더라도 그 위치에 고정되어있다. (즉 화면 최상단에 element 가 고정됨)

position:fixed 를 사용하면 여러가지 properties 를 추가로 사용 할 수 있는데

top, bottom, left, right 으로 해당 방향 에 간격을 줄 수 있다.

ex) 

position: fixed;

top: 10px;

left: 10px;

right: 5px;

bottom: 20px;

absolute

fixed 랑 비슷한데 스크롤하면 사라짐

역시 top, bottom, left, right 사용 가능

absolute에서 중요한건 postion: absolute; 를 사용하면

html 상에서 해당 element 와 관계가 있는데 (position: relative) element 를 살펴보고 이에 상응해서 포지션이 결정됨

relative

단 position relative 가 없다면 그냥 설정한 그대로 놓여짐. 

(즉, 자식 element가 absolute 이고 그 위에 부모 element가 relative 이면 자식 element는 부모 element를 기준으로 움직이고, 

relative가 아예 없다면 body에 바로 올라감.)

display에서

block 은 해당 컨텐트 하나를 제외하고 그 옆에는 아무것도 없고

inlie-block 은 컨텐트 들이 서로서로 붙는 것

inline 은 block이 아니라 text가 됨. 그래서 높이, 폭이 존재하지않음, 컨텐츠의 길이만 존재

즉, 해당 컨텐트의 css의 property들을 다 지움

margin

border

padding

content

식으로 margin은 border 밖이고 padding은 border 안.

그리고 border 안에 content가 있음

Padding, margin

padding(or margin): top-bottom left-right;

ex) padding: 10px 20px;

padding(or margin): top right bottom left; (top부터 시계방향)

ex) margin: 20px 5px 10px 15px

border

border: width style color

ex) border: 5px dashed red;