JunO3O
요소 배치
요소 배치
2023. 3. 21. 03:05ㆍCSS
요소 배치
ㅁ 절대 위치를 사용해 요소 배치하기
: 자손의 position 속성에 absolute 키워드를 적용하라면 부모의 position 속성에 relative를 적용해야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#container {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.circle {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50% 50%;
}
#black {
background: black;
left: 20px;
top: 20px;
}
#yellow {
background-color: yellow;
right: 20px;
top: 20px;
}
#purple {
background-color: purple;
right: 20px;
bottom: 20px;
}
#green {
background-color: green;
left: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<h1>도형의 절대 위치 지정</h1>
<div id="container">
<div id="black" class="circle"></div>
<div id="yellow" class="circle"></div>
<div id="purple" class="circle"></div>
<div id="green" class="circle"></div>
</div>
</body>
</html>
ㅁ 요소를 중앙에 배치하기
: 중앙 정렬 하려는 div 태그의 position 속성을 absolute로 지정하고, left 속성과 top 속성을 모두 50%로 지정합니다.
: 그 후 중앙에 정렬하려는 div 태그의 margin-left 속성과 margin-top 속성에 음수를 입력하면 요소가 왼쪽 위로 끌어당겨지면서 요소의 중심이 페이지 중앙에 위치하게 됩니다.
: 이때 입력하는 값은 div 태그 너비와 높이의 반이어야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 초기화 */
* {
margin: 0;
padding: 0;
}
/* 주제 */
body {
background-color: yellowgreen;
}
#container {
/* 색상 및 크기 적용 */
width: 500px;
height: 250px;
background-color: yellow;
/* 위치 설정 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -125px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<h1>요소를 중앙에 배치하는 방법</h1>
</div>
</body>
</html>
ㅁ 요소를 고정 위치에 배치하기
: 웹 페이지의 페이지 숫자 버튼 등 고정 바를 사용해야할 때 요소를 고정 위치에 배치하는 방법을 사용해야 합니다.
: position 속성에 fixed 키워드를 적용하고 left 속성, right 속성, bottom 속성 값을 입력하여 위치를 정합니다.
: 그리고 width 속성과 height 속성으로 고정 바의 크기를 정해주면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
margin-top: 50px;
margin-left: 50px;
}
.top_bar {
background-color: greenyellow;
position: fixed;
left: 0;
top: 0;
right: 0;
height: 50px;
}
.left_bar {
background-color: yellow;
position: fixed;
left: 0;
top: 50px;
bottom: 0;
width: 50px;
}
</style>
</head>
<body>
<div class="top_bar"></div>
<div class="left_bar"></div>
<div class="container">
<h1>네잎 클로버</h1>
<hr />
<p><b>네잎 클로버(영어: Four-leaf clover)</b>는 네 잎을 가지는
토끼풀속의 기형이다. 예부터 전해지는 미신에서는 행운을 가져온다고 한다.[1]
하지만 이 미신의 역사나 과학적 근거는 불분명하다. 콩과의 여러해살이풀인
토끼풀(Trifolium repens)의 돌연변이가 아닌, 일시적인 기형 현상으로 4잎이
된다.[2] </p>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<p><h2>발생</h2> 대략 10,000번에 한 번 꼴로 네잎 클로버가 핀다고 알려져
있다.[3](0.01%) 그러나 실제로 5백만 개의 클로버를 조사한 결과 네잎
클로버가 핀 것은 5000번에 한 번 꼴로 알려진 확률의 2배이다.[4](0.02%) 또한
네잎클로버는 옮겨심는다고 그곳에 또 다른 네잎클로버는 나지 않는다. </p>
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 반응형 웹 디자인 (0) | 2023.03.21 |
|---|---|
| 글자 생략 (0) | 2023.03.21 |
| 수평 / 중앙 / one true 레이아웃 (0) | 2023.03.21 |
| 그림자 / 그레이디언트 속성 (0) | 2023.03.21 |
| 유동 속성 (0) | 2023.03.21 |