BD 23일차
CSS 위치 속성 학습 정리
1. 개요
오늘은 CSS 위치 속성에 대해 학습합니다. display, position, float 속성의 동작 방식과 요소들의 위치를 지정하는 방법을 살펴볼 예정입니다.
2. CSS의 위치 관련 속성
2.1 display 속성
요소의 표시 방식을 결정하는 속성입니다.
- 기본 성질
div태그의 기본 속성:display: block;(한 줄 전체를 차지)inline속성: 요소의 내용 크기만큼 공간 차지block속성: 한 줄 전체 차지
.first {
display: inline;
background-color: aqua;
}
.second {
background-color: green;
}
.third {
background-color: yellow;
}💡 Tip: 공통 속성은 개별적으로 지정하지 않고, 상위 선택자를 활용해 적용 가능
div {
display: inline;
}2.2 position 속성
요소의 위치를 지정하는 속성으로 다음과 같은 유형이 있습니다.
static(정적 위치 - 기본값)- 문서의 흐름을 따라 배치
- 특별한 위치 지정 없음
relative(상대 위치)- 현재 위치를 기준으로 조정 가능
- 예제:
.relative {
position: relative;
left: 30px;
top: 100px;
}fixed(고정 위치)- 화면(viewport) 기준으로 위치 고정
- 스크롤을 해도 고정된 위치 유지
- 팝업창 구현 등에 사용
.fixed {
position: fixed;
top: 50px;
right: 0;
}absolute(절대 위치)- 부모 요소(relative 속성을 가진 요소)를 기준으로 배치
- 부모가 없으면 문서 전체 기준
.absolute {
position: absolute;
top: 50px;
right: 0;
}sticky(스티키 위치)- 특정 스크롤 위치에 도달하면 고정
- 예제:
.sticky {
position: sticky;
top: 20px;
}중요 포인트
relative는 원래 위치를 기준으로 이동absolute는 부모 기준 이동fixed는 화면 기준 고정sticky는 특정 스크롤 위치에서 고정
2.3 float 속성
요소를 좌우로 배치할 수 있게 해주는 속성입니다.
- 속성 값:
float: left;→ 요소를 왼쪽으로 정렬하고, 오른쪽 공간 활용 가능float: right;→ 요소를 오른쪽으로 정렬하고, 왼쪽 공간 활용 가능
img {
float: left;
margin-right: 20px;
}💡 Tip: float 적용 후 다른 요소가 아래로 내려오도록 하려면 clear: both; 사용
.clearfix::after {
content: "";
display: block;
clear: both;
}3. CSS 선택자 활용
3.1 기본 선택자
- 전체 선택자:
* { color: red; } - 태그 선택자:
h1 { font-size: 20px; } - 클래스 선택자:
.title { color: blue; } - 아이디 선택자:
#header { background-color: grey; }
3.2 그룹 선택자
- 여러 요소에 동일한 스타일 적용 가능
h1, h2, p {
text-align: center;
}3.3 자식 선택자 (>), 자손 선택자 ( ``)
- 자식 선택자:
div > p { color: red; }(바로 아래p태그만 적용) - 자손 선택자:
div p { color: red; }(모든 하위p태그 적용)
4. 실습 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
.container {
position: relative;
width: 600px;
height: 300px;
border: 2px solid black;
}
.box {
position: absolute;
top: 50px;
left: 100px;
background-color: aqua;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">절대 위치</div>
</div>
</body>
</html>5. 요약 및 시사점
display속성으로 요소의 레이아웃을 제어할 수 있다.position속성으로 요소의 위치를 지정할 수 있다.float속성으로 이미지와 텍스트 배치를 조정할 수 있다.- 선택자를 활용해 CSS 적용 범위를 명확히 지정할 수 있다.
💡 Tip: 직접 실습해보면서 차이를 체험해 보는 것이 중요합니다.
