728x90
<CSS Position>
- static: default 상태(왼→오, 위→아래 로 쌓임)
- relative
- top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조정
- 태그가 static이었을 때 위치를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀( 안쪽: -, 바깥쪽: +)만큼 이동
- absolute
- position: static 이 아닌 부모를 기준으로 이동
- 부모 중에 position: relative, absolute, fixed인 태그가 없다면 최상위 태그(body)가 기준
- fixed
- 스크롤 움직여도 항상 고정된 위치
- top, bottom, right, left 값에 의해 최종 위치 결정
- sticky
- 해당 요소를 감싸고 있는 컨테이닝 블록이 지정된 임계값을 넘어서기 전까지는 relative로 작동하며 임계값을 넘기면 fixed로 작동
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
(CSS) CSS 포지션(position) - static, relative, absolute, fixed
안녕하세요! 이번 시간에는 지난 시간에 다루지 못했던 포지션에 대해 알아보겠습니다! 양이 조금 많고, 중요한 내용이기 때문에 따로 뺐습니다. 포지션이란 이름처럼 태그들의 위치를 결정하
www.zerocho.com
[CSS] Position(static / relative / absolute / fixed / sticky)
Position 종류 1. static 2. relative 3. absolute 4. fixed 5. sticky Position 속성은 도큐먼트(document) 에 요소를 배치하는 방법을 지정하고, top, right, bottom, left 속성들은 요소가 최종적으로 배치될..
jess2.tistory.com
<TEXT 중앙정렬>
- text-align: center
<이미지 버튼 추가하기>
1. fontawsome에서 원하는 icon 검색
2. icon 선택 후, <i> 태그 copy
- fa-2x: 크기 조절
<i class="far fa-plus-square fa-2x">2. html <body> 바깥에 <script> 추가하기
<script
src="https://kit.fontawesome.com/d440e8bfa7.js"
crossorigin="anonymous"
></script>
728x90
'주간 학습 > 주간 학습' 카테고리의 다른 글
| 4주차_210722 (0) | 2021.07.22 |
|---|---|
| 4주차_210721 (0) | 2021.07.22 |
| html 유용한 단축키 (0) | 2021.07.16 |
| 3주차_210716 (0) | 2021.07.16 |
| 3주차_210715 (0) | 2021.07.16 |
