css
- 정의 : 사용자에게 문서를 표시하는 방법을 지정하는 언어(스타일, 레이아웃 등)
- 규칙에 따라 작성되며, 특정 그룹의 식별자와 스타일을 구별하여 적음
- 아래는 h1태그에 빨간색을 적용하는 예
h1 {
color: red;
}position
- css 속성 중, '위치'에 관한 속성
- 적용 될 수 있는 값에는 static, relative, absolute, fixed, sticky 등이 있다.
- static과 sticky에 관하여는 간략하게 언급하고 넘어가도록 하겠다.
- static : position속성의 기본 값, 값이 static으로 지정되면 top, left 등 위치 이동 값이 적용되지 않는다.
- sticky : 스크롤 박스를 기준으로 위치가 설정되고, 특정 기준점에 이르면 위치가 고정된다.
position: relative
- 기준 : 해당 요소의 보통 상태일 때의 위치
- 기준으로부터 top, left, rigth, bottom(좌표)의 속성에 값에 따라 이동 (다른 값들도 마찬가지)
position: absolute
- 기준 :
- 부모 요소 중 position 값이 'relative', 'absolute', 'fixed'로 설정된 요소가 있는 경우 -> 그 요소의 위치가 기준이 됨
- 부모 요소 중 position 값이 'relative', 'absolute', 'fixed'로 설정된 요소가 없는 경우 -> viewport가 기준이 됨
- 박스요소를 absolute로 설정할 경우 width가 내용의 크기 만큼으로 설정됨(div같은 block요소)
position: fixed
- 기준 : viewport
- 페이지의 특정 위치에 항상 고정되어 있어야 할 때, 사용함
- 박스요소를 absolute로 설정할 경우와 마찬가지로 width가 내용의 크기 만큼으로 설정됨
배운점 :
- position은 위치 설정의 기준이 중요
- flex는 display속성의 값이고 position과는 상관 없음
- html,css를 작성할 때, 구현하고자하는 페이지의 모습을 확실히 정하고, 순서대로 하지 않으면 복잡해짐
- 과제 전반에 대하여는, 처음에 전체 과제를 훑어보고, 1일 할당량을 정하여 수행해야 완료할 수 있다.
참고
내가 몰랐던 HTML/CSS part 5. position:fixed 와 :sticky의 차이
CSS 포지션(position)
[css] 요소의 위치(position) 정리
