💻 개발/HTML, CSS
(HTML, CSS) display, position 웹사이트 레이아웃 만들기
foodev
2021. 3. 16. 14:49
728x90
(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이 적용
넓이, 사이즈를 주려면 position: relative로 주기!!!
position: absolute -> box를 포함한 container 기준 20px, 20px씩 이동한다.
position: fixed => 박스안이 아니라 '페이지'가 기준으로 20px, 20px이 적용된다.
position: sticky => 한 컨테이너안에서 스크롤 되어도 지정된 아이템은 고정 된다.
728x90