[응용 예제 7-1] 수평 정렬 레이아웃
1. overflow: hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 selector basic</title>
<style>
div.container{
overflow:hidden
}
div.item{
float:left;
margin: 0 3px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<p> 수평정렬 </p>
<div class="container">
<div class="item">메뉴 - 1</div>
<div class="item">메뉴 - 2</div>
<div class="item">메뉴 - 3</div>
<div class="item">메뉴 - 4</div>
</div>
<p> 수평정렬 </p>
</body>
</html>
2. overflow 속성 제거
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 selector basic</title>
<style>
/* div.container{
overflow:hidden
} */
div.item{
float:left;
margin: 0 3px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<p> 수평정렬 </p>
<div class="container">
<div class="item">메뉴 - 1</div>
<div class="item">메뉴 - 2</div>
<div class="item">메뉴 - 3</div>
<div class="item">메뉴 - 4</div>
</div>
<p> 수평정렬 </p>
</body>
</html>
[응용 예제 7-2] 중앙 정렬 레이아웃
margin: 0 auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 selector basic</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
width: 360px;
}
</style>
</head>
<body>
<h1>제목</h1>
<h2>부제목</h2>
<p>내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용</p>
<p>내용내용내용</p>
</body>
</html>
[응용 예제 7-3] One True 레이아웃
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 selector basic</title>
<style>
body {
width: 500px;
margin: 10px auto;
}
#top {
background: green;
}
#middle {
overflow: hidden;
}
#left {
float: left;
width: 150px;
background: red;
}
#right {
float: right;
width: 350px;
background: blue;
}
#bottom {
background: purple;
}
</style>
</head>
<body>
<div id="top">top</div>
<div id="middle">
<div id="left">middle-left</div>
<div id="right">middle-right</div>
</div>
<div id="bottom">bottom</div>
</body>
</html>
[응용 예제 7-4] 절대 위치를 사용해 요소 배치
부모 - position: relative;
자식 - position: absolute;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 selector basic</title>
<style>
#container {
width: 500px;
height: 300px;
border: 3px solid black;
overflow: hidden;
position: relative;
}
.circle {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50% 50%;
}
#red {
background: red;
left: 20px;
top: 20px;
}
#green {
background: green;
right: 20px;
top: 20px;
}
#blue {
background: blue;
right: 20px;
bottom: 20px;
}
#yellow {
background: yellow;
left: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<h1> 제목 </h1>
<div id="container">
<div id="red" class="circle"></div>
<div id="green" class="circle"></div>
<div id="blue" class="circle"></div>
<div id="yellow" class="circle"></div>
</div>
<h1> 제목 </h1>
</body>
</html>
[응용 예제 7-5] 요소의 중앙 배치
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 selector basic</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: red;
}
#container {
width: 500px;
height: 250px;
background: orange;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -125px;
}
</style>
</head>
<body>
<div id="container">
<h1> 요소의 중앙배치 </h1>
</div>
</body>
</html>
[응용 예제 7-6] 고정 바 배치
position: fixed;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 selector basic</title>
<style>
.container {
margin-top: 50px;
margin-left: 50px;
}
.top_bar {
background: red;
position: fixed;
left: 0;
top: 0;
right: 0;
height: 50px;
}
.left_bar {
background: blue;
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">
<p>내용ㅇ</p>
<p>내용ㅇ</p>
<p>내용ㅇ</p>
<p>내용ㅇ</p>
<p>내용ㅇ</p>
<p>내용ㅇ</p>
<p>내용ㅇ</p>
<p>내용ㅇ</p>
<p>내용ㅇ</p>
<p>내용ㅇ</p>
<p>내용ㅇ</p>
<p>내용ㅇ</p>
</div>
</body>
</html>
[응용 예제 7-7] 글자 생략
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 selector basic</title>
<style>
h1,
p {
width: 300px;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1 class="ellipsis">생략된다고하는데어ㄷㅣ까지나올까요</h1>
<p class="ellipsis">생략된ㄷ다고하는데어디까지나올까요더해야된다고하네요여기까진될까요</p>
</body>
</html>
'웹프로그래밍' 카테고리의 다른 글
| [javascript] 1~4 (0) | 2023.06.18 |
|---|---|
| [javascript] 생활코딩 3~7 (0) | 2023.06.09 |
| [CSS] css 속성 (0) | 2023.05.21 |
| [CSS] 기초 선택자와 단위 (0) | 2023.05.14 |
| [HTML] 입력 양식 태그와 구조화 태그 (2) | 2023.05.10 |
