🍊 2022-08-30

Posted Aug 30, 2022 Updated Sep 6, 2022

By 예은

2 min read

🔥 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?

!important : cascading된 스타일을 모두 무시하고 해당 속성을 준 스타일이 강제 적용된다. 꼭 필요한 경우가 아니라면 사용하지말자.
display 속성
- inline : block 요소를 inline 요소처럼 사용할 수 있게 내부 컨텐츠에만 스타일을 적용한다.
- inline-block : 내부 컨텐츠의 크기와 상관없이 block 요소를 한 줄안에 표현할 수 있도록 한다.
- block : inline 요소를 block 요소처럼 하나의 요소가 한 줄을 차지하게 한다.
position 속성
- 기본 값으로 static을 가진다. top, left, bottom, right 속성값이 무시된다.
- relative : 원래 위치를 기준으로 배치된다.
- absolute : 자기 자신이 아닌 상위 요소를 기준으로 배치된다. DOM 트리를 타고 올라가다가 position이 static이 아닌 가장 가까운 상위 요소를 기준으로 한다.(position이 static이 아닌 요소가 없으면 <body> 요소를 기준으로 한다.) 보통은 부모 요소를 relative로 지정한다.
- fixed : 배치 기준이 브라우저 화면이 된다.
- sticky : 평소에는 static과 같지만 스크롤 위치가 임계점에 이르면 fixed와 같이 화면에 고정할 수 있다.

🐝 참고
CSS의 position 속성으로 HTML 요소 배치하기
CSS { position: sticky }

This post is licensed under CC BY 4.0 by the author.