요소는 어떻게 배치할 수 있을까?
position 속성
--
HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치하는 속성이다.
기본 형식
position: 속성값;
좌표는 (x, y, z-index)로 존재한다.
x : 가로
y : 세로
z-index : 앞, 뒤 순서 (어떤 요소가 앞에 보이고, 어떤 요소가 뒤에 가려지는지)
모든 요소의 z-index 기본 값은 0이다.
relative
static처럼 요소의 기본 흐름에 따라 배치된 후, 배치된 현재 위치를 기준으로 좌표 속성을 통해 추가 이동할 수 있다.
예시 코드
<style>
.box{
width:100px;
height:100px;
}
.red-box{
background-color:red;
}
.green-box{
background-color:green;
position:relative;
left:100px;
}
.blue-box{
background-color:blue;
}
</style>
<!-- 생략 --->
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
<div class="box blue-box"></div>
</body>
absolute
좌표의 기준점은 가장 가까운 부모 요소의 위치(현재 위치)가 기준점이다.
예시 코드
<style>
.box{
width:100px;
height:100px;
}
.red-box{
background-color:red;
}
.green-box{
background-color:green;
position:relative;
left:100px;
}
.blue-box{
background-color:blue;
}
</style>
<!-- 생략 --->
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
<div class="box blue-box"></div>
</body>
1. 초록색 박스는 왜 파랑색 박스와 같은 줄에 위치하는가?
positnio: absolute; 속성을 가진 초록색 박스는 다른 요소들과의 배치 관계에서 벗어난다.
그래서 초록색 박스는 위치 흐름에서 빠지므로 빨간색 박스 다음에 바로 파란색 박스가 배치된다.
그리고 초록색 박스는 문서의 기본 흐름에서 빠질 때 당시 위치를 기준으로 좌표를 시작한다.
즉, 처음에 빨간색 박스가 배치된 후 좌표는 현재 (0, 100, 0)인 상태에서 초록색 박스가 빠졌으니 해당 좌표가 기준이다.
2. 초록색 박스는 왜 파랑색 박스와 겹쳐있는가?
위 그림에서 볼 수 있듯이 웹 브라우저 화면(검정선)에서 박스들이 일정 간격이 떨어져 있다.
이는 기본적으로 박스에 margin값이 적용되어 있기 때문이다.
즉, 초록색 박스는 좌표 (0, 100, 0)를 기준으로 100px 떨어졌기 때문에 겹쳐지게 되는 것이다.
만약 margin을 0으로 설정하면 겹치치 않고 딱 맞게 된다.
fixed
웹 브라우저의 특정 위치에 고정되어 스크롤을 내려도 해당 위치에 고정된다.
기준점은 브라우저(뷰포트) 기준이다.
예시 코드
<style>
body{
margin:0;
height:4000px; /* 스크롤을 만들기 위해 페이지 길이를 길게 만듬 */
.box{
width:100px;
height:100px;
}
.red-box{
background-color:red;
}
.green-box{
background-color:green;
position:fixed;
left:100px;
top:100px;
}
.blue-box{
background-color:blue;
}
</style>
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
<div class="box blue-box"></div>
</body>
sticky
스크롤 중에 일정 지점을 넘어서면 요소가 fixed값처럼 동작한다.
예시 코드
<style>
body{
margin:0;
height:4000px; /* 스크롤을 만들기 위해 페이지 길이를 길게 만듬 */
.box{
width:100px;
height:100px;
}
.red-box{
background-color:red;
}
.green-box{
background-color:green;
position:sticky;
top:0px;
}
.blue-box{
background-color:blue;
}
</style>
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
<div class="box blue-box"></div>
</body>
z-index
position 속성으로 배치한 요소의 z축 위치를 정의할 수 있다.
(속성값으로는 하나의 정수 값을 사용한다. 우선순위 느낌)
기본 값으로 모든 요소는 0으로 설정되어 있으며
같은 z-index 값 요소들은 나중에 작성된 요소가 우선순위가 높아
기본 형식
z-index: 정수값;
예시 코드
<style>
.box{
width:100px;
height:100px;
}
.red-box{
background-color: red;
position: relative;
}
.green-box{
background-color: green;
position: absolute;
left: 0px;
top: 0px;
}
</style>
<!-- 생략 -->
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
</body><style>
.box{
width:100px;
height:100px;
}
.red-box{
background-color: red;
position: relative;
z-index: 1;
}
.green-box{
background-color: green;
position: absolute;
left: 0px;
top: 0px;
}
</style>
<!-- 생략 -->
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
</body>
--
float 속성
--
요소를 화면에 배치하는 또 다른 방법이다.
기본 형식
float: 속성값;
예시 코드
<style>
img{
float: left;
margin-right: 1rem;
}
</style>
<!-- 생략 -->
<body>
<img src="spring boot.png" alt="스프링 부트">
<p> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
</body>
float 속성을 사용할 때에는 몇 가지 주의할 점이 있다.
float를 설정하게 되면 공중으로 띄어져서 배치를 하기 때문에
다른 요소들과는 영향이 전혀 없게 된다.
그래서 예기치 못한 문제가 발생할 수 있기 때문에 두 가지 방법을 통해 해결할 수 있다.
1. clear 속성 사용하기
2. overflow 속성 사용하기
--
clear 속성
--
float 속성을 해제할 때 사용되는 속성이다.
(clear 속성은 float 속성이 마지막으로 적용된 요소 다음에 사용한다.)
기본 형식
clear: 속성값;
예시 코드
<style>
.box{
width:100px;
height:100px;
}
.red-box{
background-color:red;
float:left;
}
.green-box{
background-color:green;
float:left;
}
.blue-box{
background-color:blue;
}
</style>
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
<div class="box blue-box"></div>
</body><style>
.box{
width:100px;
height:100px;
}
.red-box{
background-color:red;
float:left;
}
.green-box{
background-color:green;
float:left;
}
.blue-box{
background-color:blue;
clear:left;
}
</style>
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
<div class="box blue-box"></div>
</body>
--
'Language > CSS' 카테고리의 다른 글
| [속성] 애니메이션 속성을 통해 전환 효과 제어 (0) | 2025.03.14 |
|---|---|
| [속성] 기존 스타일 속성 값을 다른 속성 값으로 전환하는 속성 (0) | 2025.03.09 |
| [속성] 요소의 배경 관련된 속성 (0) | 2025.03.06 |
| [속성] 박스 모델을 구성하는 속성 (margin, padding 등) (0) | 2025.03.05 |
| [속성] 텍스트 관련 속성을 통해 텍스트 꾸미기 (0) | 2025.03.05 |
