(HTML, CSS) display, position 웹사이트 레이아웃 만들기

(1) display 

 

display: block:  가상의 가로 줄에 하나만의 상자만이 나타남

display: inline-block: 가로 줄에 여러 상자가 나타남, 지정한 사이즈 적용 됨

display: inline: 내용이 아무것도 없으면 나타나지 않음, 부모에서 정의해줬던 것은 무시하고 inline태그에서 설정한 내용을 표기

 

(2) position

position은 기본적으로 static 역할을 한다.

position을 이해할 때 어떤것이 기준이 되는가를 생각하면 이해하기 쉽다.

 

 

 

posion: static : 기본이 되는 고정역할이다. 그래서 left:20px, top20px이 먹질 않는다!

position: relative  ->  container에 포함된 박스 기준으로 20px, 20px이 적용

relative

 

넓이, 사이즈를 주려면 position: relative로 주기!!!

 

position: absolute -> box를 포함한 container 기준 20px, 20px씩 이동한다.

absolute

 

position: fixed => 박스안이 아니라 '페이지'가 기준으로 20px, 20px이 적용된다. 

 

position: sticky => 한 컨테이너안에서 스크롤 되어도 지정된 아이템은 고정 된다.