
정렬 속성 설명
속성 예시
/*-------float-------*/
.class1{
float : left;
}
/*-------clear-------*/
.class2{
clear : both;
}
/*-------위치-------*/
.class3{
position : absolute;
top : 20px;
left : 20px;
bottom : 20px;
right : 20px;
}
속성 설명
속성 | 의미 | 값 |
float | 요소를 띄움. 수평 정렬할 때 주로 사용. float right일 경우 첫번째 요소가 가장 오른쪽으로 배치 됨 float를 해제하기 위해 두가지 방법을 사용. 최 하단 참고 |
none, left, right |
clear | 형제 요소에 적용하여 float 속성을 지움 | none, left, right, both |
position | 요소 배치 기준을 설정 1. static : 기준 없음. 배치가 불가능2. relative : 자신이 기준3. absolute : 부모 요소가 기준. 부모에도 position이 입력 되어야 작동.4. fixed : 브라우저 기준5. sticky : 스크롤 영역 기준. top/left/right/bottom 중 1개 이상은 설정이 되어있어야 하며, 익스플로러는 지원하지 않음 |
static, relative, absolute, fixed, sticky |
top | position 위를 기준으로 얼마나 움직일지 설정 | 숫자+단위 |
left | position 왼쪽를 기준으로 얼마나 움직일지 설정 | |
bottom | position 아래를 기준으로 얼마나 움직일지 설정 | |
right | position 오른쪽를 기준으로 얼마나 움직일지 설정 |
float를 해제하는 방법
/* float 부모 요소에서 float 해제 */
/* clearfix 자식 요소는 모두 float이 적용되어 있어야 함*/
.clearfix::after{
content : "";
clear : both;
display : block;
}
/* float 형제 요소에서 float 해제 */
.class{
clear : both;
}
요소가 쌓여 있을 경우 우선순위
- z-index가 높은 요소
- position이 입력 된 요소
- 코드 상 마지막에 입력 된 요소
'달밤에 코딩하기 > HTML CSS 공부하기' 카테고리의 다른 글
#21 - CSS 애니메이션 - 전환 (0) | 2021.05.13 |
---|---|
#20 - CSS 기초 - 배경 (0) | 2021.05.13 |
#18 - CSS 기초 - 폰트 (0) | 2021.05.13 |
#17 - CSS 기초 - 단위 / 속성 기본 (0) | 2021.05.13 |
#16 - CSS 기초 - 상속 / 우선순위 / Reset CSS (0) | 2021.05.13 |