WEB/CSS

[CSS] CSS bottom 속성을 이용한 수직 위치 변경 방법 알아보기.

2021-03-17

top 속성이 있다면 bottom 속성도 있다. 이는 마찬가지로 수직 위치를 변경하는 태그로써 position: static을 제외한 이외의 position 들의 수직상의 위치를 조정하기 위해 사용한다.

- bottom: 0px or 100px

우선 부모 div태그에 relative를 적용함으로써 자식 태그들의 기준점이 될 수 있도록 position을 잡아주었다. 이후 각 자식 태그 'two' / 'three' 에게 각각 top : 0px / top : 100px 을 부여해 주었다. (기존의 top 예제와 같다)

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

#one{
	position: relative; /* 상대위치 지정 */
	
	/* div 영역과 테두리 설정 */
	border: 3px solid red;
	margin: 10px;
	width: 400px;
	height: 350px;
}


#two{
	position: absolute;
	border: 3px solid blue;
	bottom: 0px;
}


#three{
	position: absolute;
	border: 3px solid green;
	bottom: 100px;
}

</style>


</head>

<body>
<div id="one">
	<div id="two">
		여기는 div 태그 두 번째 영역입니다.
	</div>

	<div id="three">
		여기는 div 태그 세 번째 영역입니다.
	</div>
</div>
</body>
</html>

결과를 확인해보면 bottom: 0px에 가까울수록 bottom의 아래쪽과 가까워지며, 매개 값으로 주어진 px 값이 커질수록 bottom 즉 부모 태그의 하단 부분과 멀어지는 것을 확인할 수 있다.

- bottom: -10px or 355px

bottom의 속성역시 top과 마찬가지로 부모 태그의 범위를 벗어나는 값뿐 아니라 음수의 값도 매개 값으로 줄 수 있다. 이번에는 'two' / 'three' 에게 각각 top : -10px / top : 355px 값을 부여해 주었다.

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

#one{
	position: relative; /* 상대위치 지정 */
	
	/* div 영역과 테두리 설정 */
	border: 3px solid red;
	margin: 10px;
	width: 400px;
	height: 350px;
}


#two{
	position: absolute;
	border: 3px solid blue;
	bottom: -10px;
}


#three{
	position: absolute;
	border: 3px solid green;
	bottom: 355px;
}

</style>


</head>

<body>
<div id="one">
	<div id="two">
		여기는 div 태그 두 번째 영역입니다.
	</div>

	<div id="three">
		여기는 div 태그 세 번째 영역입니다.
	</div>
</div>
</body>
</html>

부모태그는 기준점일 뿐 자식 태그들을 가둬두는 요소가 아니기 때문에 부모태그의 넓이와 높이가 넘어가는 px값을 주었을 때는 아래의 이미지처럼 자식 태그들의 부모태그의 위치를 벗어나는 것을 확인할 수 있다.

- 기타

bottom 에 매개 값으로 % 값을 줄 수 있어 50%라는 값을 매개값으로 주면 아래에서부터 50% 영역에 해당 태그가 위치하게 된다.

bottom: 50%;

저작자표시 비영리

'WEB > CSS' 카테고리의 다른 글

[CSS] CSS Combinators Selector(선택자) (자식 형제 선택자 종류) (0)	2021.03.23
[CSS] CSS top: 50% 와 bottom: 50% 의 차이점 알아보기. (0)	2021.03.18
[CSS] CSS Top 속성을 이용한 수직 위치 변경 방법 알아보기. (0)	2021.03.16
[CSS] CSS opacity 를 이용한 background 의 투명도 조절 (0)	2021.03.15
[CSS] CSS background 와 background-color의 차이 알아보기. (0)	2021.03.13

Contents

새소식

인기 검색어