고래씌
[CSS] 3-4. 레이아웃(Layout) 스타일 ④ (배치 관련) 본문
1. 배치 관련 스타일(position)
: position은 요소의 위치를 지정하는 속성
▶ position : relative; (상대적인)
- 지정된 요소 내부에 다른 요소가 "상대적인" 위치를
지정할 수 있도록 기준이 되게 만드는 속성
- 내부에 작성되는 요소에 위치 지정시
top, bottom, left, right등의 속성을 사용할 수 있음
▶ position : absolute; (절대적인)
- 기본 요소의 배치 순서를 무시하고 지정된 위치에 요소를 배치한다
▶ position : fixed; (고정된)
- 항상 고정된 위치에 요소를 배치함(화면이 움직이든 말든 항상 같은 위치)
■ HTML
■ css 파일
☞ div{}
모든 div 태그에 정사각형을 만듦
☞ .container-1{}
position : relative => 내부에 작성되는 요소에 상대적인 위치(top/bottom/left/right)를 지정할 수 있게된다.
☞ 이제 이것을 모두 가운데로 모아서 아래와 같은 모양으로 만들어주려고 한다.
① second
|
.second{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
} |
=> position: absolute; 를 주게 되면 second가 빨간 박스 범위를 벗어난 것을 볼 수 있다.
☞ 요소 기준 배치순서를 무시할 수 있다.
+ 상위 요소가 relative인 요소 내부에 아무위치나 배치할 수 있다.
=> 여기에서 top : 50px; left: 50px 를 주게되면....
|
.second{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
/* 요소 기준 배치순서를 무시할 수 있다.
+ 상위요소가 relative인 요소 내부에 아무위치나 배치할 수 있음.
*/
top: 50px; /* 위에서 얼마만큼 떨어지겠다 */
left: 50px; /* 왼쪽에서 얼마만큼 떨어지겠다 */
}
|
=> 위, 아래 50px 만큼 떨어지고 배치순서를 무시하여 first 상자 안 내부로 들어간 것을 볼 수 있다.
=> third도 second와 같은 방식으로 적용해보겠다.
② third
|
.third{
width: 100px;
height: 100px;
background-color: red;
/* 안에 배치순서를 무시하게됨 */
position: absolute;
top: 100px;
left: 100px;
}
|
※ absolute의 특징 중 절대적인 위치에 배치되는 특징은 body 태그의 자식인 경우에만 가능하다!
2. 요소 정가운데 배치하기
=> position : relative; 사용
■ HTML
|
<h2>요소를 정 가운데에 배치하기</h2>
<div class="container-2">
<div id="center"></div>
</div>
|
■ ① css
|
/* 요소 정가운데 배치하기 */
.container-2{
width: 300px;
height: 300px;
}
#center{
width: 50px;
height: 50px;
background-color: pink;
/*
relative 내부 요소 중
position이 absolute인 요소에
4가지 방향을 활용
*/
}
|
=> 분홍색 상자가 이상한 위치로 잡히는 것을 볼 수 있다....
이것을 아래에 위치로 놓아야하는데 이때, 우리는 position : relative; 사용하겠다.
■ ② css(position : relative; 추가)
|
/* 요소 정가운데 배치하기 */
.container-2{
width: 300px;
height: 300px;
position: relative; /* 내부 요소 상대위치 지정 */
}
#center{
width: 50px;
height: 50px;
background-color: pink;
/*
relative 내부 요소 중
position이 absolute인 요소에
4가지 방향을 활용
*/
}
|
=> 이제는 이 분홍색 박스를 정가운데로 옮겨주도록 하겠다.
■ ③ css(분홍색 박스 정 가운데로 정렬)
|
#center{
width: 50px;
height: 50px;
background-color: pink;
/*
relative 내부 요소 중
position이 absolute인 요소에
4가지 방향을 활용
*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
|
=> 꼭 margin: auto; 옵션을 주고 top/bottom/lef/right 옵션을 주어야 정가운데 배치가 된다!
3. 고정된 위쪽으로 이동하는 박스 상자 만들기
=> position: fixed; 사용
■ HTML
|
<div class="fixed-area">
<a href="#body-top">위쪽으로 이동</a>
</div>
|
=> 맨 위 body 태그에 body id="body-top" 추가
|
<body id="body-top">
|
■ css
|
/* fixed */
.fixed-area{
width: 120px;
text-align: center; /* 문자열 가운데 정렬 */
position: fixed;
/*
fixed요소는 화면 기준으로 배치됨
다른 요소와 겹쳐질 수 있고, 별도로 화면을 차지하지 않음
*/
bottom: 50px;
right: 50px;
}
|
=> position: fiexed;를 추가하면 화면 기준으로 배치되는데 이것은 고정되어 있다! (별도로 화면을 차지하지 않는다)
'Front-End > CSS' 카테고리의 다른 글
| [CSS] 4-2. FlexBox ② (flex-container 전용 속성) (1) | 2023.11.03 |
|---|---|
| [CSS] 4-1. Flex Box ① (0) | 2023.11.03 |
| [CSS] 3-3. 레이아웃(Layout) 스타일 ③ (float / clear) (0) | 2023.11.02 |
| [CSS] 3-2. 레이아웃(Layout) 스타일 ② (영역 관련 속성) (0) | 2023.11.02 |
| [CSS] 3-1. 레이아웃(Layout) 스타일 ① (화면 분할)(+hidden) (0) | 2023.11.02 |
