퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
제대로 배워보는 html과 css, 그리고 웹표준 7. 테이블 관련 스타일
6.1 테이블 관련 스타일 알아보기.
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tbl {
border: 1px solid black;
/* 이렇게만 하면 바깥쪽에만 border가 생김 */
border-collapse: collapse;
/* 셀과 셀 사이 공백을 없애줌 */
/* border-spacing은 collapse가 없을 때 셀과 셀 사이 공간을 만들 때 *그 사이즈 */
table-layout: fixed;
/* 이렇게 하면 테이블 각 열의 width가 똑같이 고정됨 */
}
.tbl td, .tbl th {
border: 1px solid red;
}
.tbl caption {
caption-side: bottom;
/* 제목의 위치, 국내에선 거의 캡션을 화면에 안 보이게 함 */
}
.tbl .ex2 {
empty-cells: hide;
/* border-collapse: collapse; 가 없을 경우 빈 셀을 가려줌
있으면 적용 안 됨 */
}
</style>
</head>
<body>
<table class="tbl">
<caption>table</caption>
<thead>
<tr>
<th scope="col">table header cell-1</th>
<th scope="col">table header cell-2</th>
<th scope="col">table header cell-3</th>
<th scope="col">table header cell-4</th>
</tr>
</thead>
<tbody>
<tr>
<td>table data-cell1-1</td>
<td>table data-cell1-2</td>
<td>table data-cell1-3</td>
<td>table data-cell1-4</td>
</tr>
<tr>
<td>table data-cell2-1, Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam, iure.</td>
<!-- 긴 글이 있으면 길이가 긴 글자 위주로 자동으로 감 -->
<td>table data-cell2-2</td>
<td>table data-cell2-3</td>
<td>table data-cell2-4</td>
</tr>
<tr>
<td>table data-cell3-1</td>
<td>table data-cell3-2</td>
<td>table data-cell3-3</td>
<td>table data-cell3-4</td>
</tr>
<tr>
<td>table data-cell4-1</td>
<td>table data-cell4-2</td>
<td class="ex1"></td>
<td class="ex2"></td>
</tr>
</tbody>
</table>
</body>
</html>
7. 배치(레이아웃 관련 스타일)
7.1 플롯 지정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.6 'Malgun Gothic', sans-serif;
/* font: weight style variant size/line-height family ; */
/* 필수는 사이즈와 family, 두 가지 중에 하나라도 빠지면 안 됨. */
/* size 뒤에 / 를 하면 line-height*/
}
.wrap {
margin: 0 auto;
/* 중간에 content가 위치하는 경우 */
width: 800px;
}
.wrap h1 {
padding: 15px 0;
}
.wrap .thumb {
float: left;
margin: 15px 0 15px 0;
/* left | right | none */
/* 이미지만 left로 정렬되고, 그 다음 content가 위로 올라온다. */
}
.wrap .text {
margin-left: 115px;
background-color: lime;
}
.wrap .text p {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="wrap">
<h1>float example</h1>
<p class="thumb"><img src="http://placehold.it/100x120" alt=""/></p>
<div class="text">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit, ducimus. Rerum, eaque excepturi repudiandae beatae tempore atque. Deleniti fuga earum quasi ut repellendus, officiis, harum nesciunt, qui, nam odio iusto. Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Exercitationem nesciunt repellendus nulla culpa maxime fugiat enim, asperiores esse, sint sequi necessitatibus laborum ipsa, libero modi? Obcaecati at, et iusto laudantium. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima cumque adipisci hic doloribus, aperiam harum nesciunt fugiat, labore, nihil, dolore et vero repellendus saepe voluptatum sit ullam distinctio sequi animi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quae, fugiat a maiores eaque totam dicta officia omnis nam quisquam at quam aliquid nesciunt obcaecati corporis distinctio nulla ipsum saepe.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit, ducimus. Rerum, eaque excepturi repudiandae beatae tempore atque. Deleniti fuga earum quasi ut repellendus, officiis, harum nesciunt, qui, nam odio iusto. Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Exercitationem nesciunt repellendus nulla culpa maxime fugiat enim, asperiores esse, sint sequi necessitatibus laborum ipsa, libero modi? Obcaecati at, et iusto laudantium. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima cumque adipisci hic doloribus, aperiam harum nesciunt fugiat, labore, nihil, dolore et vero repellendus saepe voluptatum sit ullam distinctio sequi animi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quae, fugiat a maiores eaque totam dicta officia omnis nam quisquam at quam aliquid nesciunt obcaecati corporis distinctio nulla ipsum saepe.
</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.6 'Malgun Gothic', sans-serif;
/* font: weight style variant size/line-height family ; */
/* 필수는 사이즈와 family, 두 가지 중에 하나라도 빠지면 안 됨. */
/* size 뒤에 / 를 하면 line-height*/
}
.wrap {
margin: 0 auto;
/* 중간에 content가 위치하는 경우 */
width: 800px;
}
.wrap h1 {
padding: 15px 0;
}
.wrap .thumb {
float: left;
margin: 15px 0 15px 0;
/* left | right | none */
/* 이미지만 left로 정렬되고, 그 다음 content가 위로 올라온다. */
border: 3px solid black;
}
</style>
</head>
<body>
<div class="wrap">
<h1>float example</h1>
<p class="thumb"><img src="http://placehold.it/100x120?text=1" alt=""/></p>
<p class="thumb"><img src="http://placehold.it/100x160?text=2" alt=""/></p>
<p class="thumb"><img src="http://placehold.it/100x120?text=3" alt=""/></p>
<p class="thumb"><img src="http://placehold.it/100x120?text=4" alt=""/></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam eius est id quibusdam. Voluptatem architecto unde mollitia eius quam autem nostrum, iure, id soluta facere laudantium, quidem provident omnis, voluptates. Lorem ipsum dolor sit amet consectetur adipisicing, elit. Odio, sed inventore velit modi tenetur eligendi exercitationem rerum magnam repellendus doloribus expedita dignissimos voluptas culpa eius deleniti quisquam consequuntur fuga at.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.6 'Malgun Gothic', sans-serif;
/* font: weight style variant size/line-height family ; */
/* 필수는 사이즈와 family, 두 가지 중에 하나라도 빠지면 안 됨. */
/* size 뒤에 / 를 하면 line-height*/
}
.wrap {
margin: 0 auto;
/* 중간에 content가 위치하는 경우 */
width: 800px;
}
.wrap h1 {
padding: 15px 0;
}
.wrap .thumb {
float: left;
margin: 15px 0 15px 0;
/* left | right | none */
/* 이미지만 left로 정렬되고, 그 다음 content가 위로 올라온다. */
border: 3px solid black;
/* 여기서 img와 border 사이에 틈이 있는 것은,
p 태그와 img 태그 사이에 틈이 있기 때문 */
}
img {
vertical-align: top;
/* img에 무조건 해주면 좋다 */
}
.wrap .text {
clear: left;
/* right | left | both, float 영향을 받지 않는다
즉 clear : left는 float : left로 지정한 것을 삭제하는 것 */
}
</style>
</head>
<body>
<div class="wrap">
<h1>float example</h1>
<p class="thumb"><img src="http://placehold.it/100x120?text=1" alt=""/></p>
<p class="thumb"><img src="http://placehold.it/100x120?text=2" alt=""/></p>
<p class="thumb"><img src="http://placehold.it/100x120?text=3" alt=""/></p>
<p class="thumb"><img src="http://placehold.it/100x120?text=4" alt=""/></p>
<div class="text">
<p> Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Quaerat, repudiandae commodi repellat ea aliquid a et. Tempore mollitia alias aut ea perspiciatis corporis repellat. Fuga error reprehenderit architecto perferendis magni!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
7.2 플롯 해지하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
vertical-align: top;
/* 이미지 불필요한 여백 제거 */
}
.area {
width: 800px;
margin: 0 auto;
/* 가운데 정렬 */
border: 3px dashed red;
}
.area .thumb {
border: 3px solid black;
float: left;
}
.cls {
clear: both;
}
</style>
</head>
<body>
<div class="area">
<div class="thumb">
<img src="http://placehold.it/100x120?text=1" alt="">
</div>
<div class="thumb">
<img src="http://placehold.it/100x120?text=2" alt="">
</div>
<div class="thumb">
<img src="http://placehold.it/100x120?text=3" alt="">
</div>
<div class="thumb">
<img src="http://placehold.it/100x120?text=4" alt="">
</div>
<div class="thumb">
<img src="http://placehold.it/100x120?text=5" alt="">
</div>
</div>
<p class="cls">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Nihil sed maxime, sint repellendus. Totam, corrupti impedit nihil laborum, voluptates cum perspiciatis adipisci facere a ipsa quo possimus. Eligendi, deleniti, ipsam!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.lore</p>
</div>
</body>
</html>위 상태로 area 클래스에 border를 주면 float을 인지하지 못해 아래와 같이 나온다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
vertical-align: top;
/* 이미지 불필요한 여백 제거 */
}
.area {
width: 800px;
margin: 0 auto;
/* 가운데 정렬 */
border: 3px dashed red;
}
/* clear를 해제하는 공식 */
/* 만약 IE 버전이 낮아서 after 태그를 인식하지 못하는 경우
area class의 스타일 안에 zoom : 1; 을 넣어주면 된다. */
/* 여기서 *zoom: 1; 이렇게 하면 IE6, IE7만 인식한다는 의미의 Hack이다 */
.area:after {
content: '';
display: block;
clear: both;
}
.area .thumb {
border: 3px solid black;
float: left;
}
.cls {
clear: both;
}
</style>
</head>
<body>
<div class="area">
<div class="thumb">
<img src="http://placehold.it/100x120?text=1" alt="">
</div>
<div class="thumb">
<img src="http://placehold.it/100x120?text=2" alt="">
</div>
<div class="thumb">
<img src="http://placehold.it/100x120?text=3" alt="">
</div>
<div class="thumb">
<img src="http://placehold.it/100x120?text=4" alt="">
</div>
<div class="thumb">
<img src="http://placehold.it/100x120?text=5" alt="">
</div>
<!-- clear 위치 -->
</div>
<p class="cls">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Nihil sed maxime, sint repellendus. Totam, corrupti impedit nihil laborum, voluptates cum perspiciatis adipisci facere a ipsa quo possimus. Eligendi, deleniti, ipsam!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.lore</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
vertical-align: top;
/* 이미지 불필요한 여백 제거 */
}
.area {
width: 800px;
margin: 0 auto;
/* 가운데 정렬 */
border: 3px dashed red;
*zoom: 1;
overflow: hidden;
/* 내가 지정한 영역에서 넘치는 부분을 가리킨다.
넘치는 부분을 지워버리는 것 */
}
.area .thumb {
border: 3px solid black;
float: left;
}
.cls {
clear: both;
}
</style>
</head>
<body>
<div class="area">
<div class="thumb">
<img src="http://placehold.it/100x120?text=1" alt="">
</div>
<div class="thumb">
<img src="http://placehold.it/100x120?text=2" alt="">
</div>
<div class="thumb">
<img src="http://placehold.it/100x120?text=3" alt="">
</div>
<div class="thumb">
<img src="http://placehold.it/100x120?text=4" alt="">
</div>
<div class="thumb">
<img src="http://placehold.it/100x120?text=5" alt="">
</div>
<!-- clear 위치 -->
</div>
<p class="cls">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Nihil sed maxime, sint repellendus. Totam, corrupti impedit nihil laborum, voluptates cum perspiciatis adipisci facere a ipsa quo possimus. Eligendi, deleniti, ipsam!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.lore</p>
</div>
</body>
</html>다만 overflow는 border 바깥에 아이콘이 있는 경우 그 요소는 지워버린다.
7.3 포지션 지정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* position : relative | absolute | fixed | static ;
가장 많이 쓰는 것은 relative,
absolute는 레이어처럼 다음 콘텐트가 인식하지 못해 위에 떠 있게 된다.
left: 100px;
top: 100px;
등으로 현재 위치 기준에서 이동하여 위치를 지정할 수 있다.
*/
width: 200px;
padding: 20px;
border: 5px solid black;
background-color: rgba(255,0, 0, .8);
font: 12px/1.6 verdana, sans-serif;
}
.box:first-letter {
font-size: 2em;
font-weight: bold;
}
.a {
background-color: rgba(255, 0, 0, .8);
position: absolute;
left:0;
/* z-index: 1; 큰 숫자가, 혹은 나중에 쓴 것이 앞으로 나온다. 겹칠 때 */
top:0;
}
.b {
background-color: rgba(0, 255, 0, .8);
position: absolute;
left: 50px;
top: 50px;
}
.c {
background-color: rgba(0, 0, 255, .8);
position: absolute;
left: 100px;
top: 100px;
}
.area {
position: relative;
width: 800px;
margin: 0 auto;
/* area class가 위 a b c를 감싸는 경우, abc가 position: absolute기 때문에 그냥 설정하면 인식을 하지 못하지만, relative를 적용하면 적어도 "position 기준"은 area로 둘 수 있다; */
border: 5px dashed red;
}
</style>
</head>
<body>
<div class="area">
<div class="box a">A Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="box b">B Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="box c">C Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo dolorem, natus quaerat et, amet veritatis a, voluptatum doloremque debitis veniam deserunt, aut ab magnam pariatur quis voluptate sit fuga quasi.lorem</p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit totam vitae, iure! Quos itaque, non hic impedit dicta quidem beatae exercitationem excepturi sint maiores dolores repellat necessitatibus aut a, quis!lorem Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Provident, aut excepturi eaque a quaerat, quibusdam corrupti numquam molestias neque minima ducimus repudiandae impedit rem earum, nobis vero quia saepe nam?<p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* position : relative | absolute | fixed | static ;
가장 많이 쓰는 것은 relative,
absolute는 레이어처럼 다음 콘텐트가 인식하지 못해 위에 떠 있게 된다.
left: 100px;
top: 100px;
등으로 현재 위치 기준에서 이동하여 위치를 지정할 수 있다.
*/
width: 200px;
padding: 20px;
border: 5px solid black;
background-color: rgba(255,0, 0, .8);
font: 12px/1.6 verdana, sans-serif;
}
.box:first-letter {
font-size: 2em;
font-weight: bold;
}
.a {
background-color: rgba(255, 0, 0, .8);
position: fixed;
/* fixed는 relative 컨텐츠가 있어도, 무조건 처음부터 시작한다. 고정 위치, 즉 가장 바깥쪽 위치 */
left:0;
/* z-index: 1; 큰 숫자가, 혹은 나중에 쓴 것이 앞으로 나온다. 겹칠 때 */
top:0;
}
.b {
background-color: rgba(0, 255, 0, .8);
position: relative;
left: 50px
top: 5px;
}
.c {
background-color: rgba(0, 0, 255, .8);
position: relative;
left: 100px;
top: -300px;
/* top이나 left를 -로 해서 겹치게끔 할 수 있고, (혼자만 움직임)
margin-top, left를 -로 해서 겹치게끔 할 수 있다. (밑에 있는 것도 같이 따라 움직임) */
}
.area {
position: relative;
width: 800px;
margin: 0 auto;
/* area class가 위 a b c를 감싸는 경우, abc가 position: absolute기 때문에 그냥 설정하면 인식을 하지 못하지만, relative를 적용하면 적어도 "position 기준"은 area로 둘 수 있다; */
border: 5px dashed red;
}
</style>
</head>
<body>
<div class="area">
<div class="box a">A Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="box b">B Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="box c">C Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo dolorem, natus quaerat et, amet veritatis a, voluptatum doloremque debitis veniam deserunt, aut ab magnam pariatur quis voluptate sit fuga quasi.lorem</p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit totam vitae, iure! Quos itaque, non hic impedit dicta quidem beatae exercitationem excepturi sint maiores dolores repellat necessitatibus aut a, quis!lorem Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Provident, aut excepturi eaque a quaerat, quibusdam corrupti numquam molestias neque minima ducimus repudiandae impedit rem earum, nobis vero quia saepe nam?<p>
</body>
</html>
7.4 포지션을 활용한 가운데 위치 정렬
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position, center</title>
<style>
.content {
position: absolute;
left: 50%;
top: 50%;
width: 800px;
height: 400px;
margin-left: -400px;
margin-top: -200px;
/* 가운데 맞춤을 하려면 margin으로 크기/2만큼 이동하자 */
background-color: lime;
/* box-sizing: border-box는 width, height 안에 padding이 들어간다 ; */
}
.content .inn {
padding: 20px;
}
/* width, height가 있는 곳에 padding을 두지 말고 따로 두는게 좋다 */
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure hic at quia laudantium corporis sit error, deserunt commodi labore modi ullam explicabo, voluptates dolor, sed, dolorum nisi iusto officiis reprehenderit.</p>
<div class="content">
<div class="inn">
<h1>content title</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel nemo reiciendis, alias asperiores numquam accusantium hic qui quasi. Incidunt laudantium culpa molestias doloremque eaque, laborum ipsa consequuntur corporis quibusdam neque! Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Fugit, officia nam voluptatem recusandae, ducimus iste adipisci alias ea at, quas vitae a numquam ipsa exercitationem modi voluptate pariatur perspiciatis voluptatibus?Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position, center</title>
<style>
/* relative로 가운데 지정할 때 */
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.content {
position: relative;
left: 50%;
top: 50%;
width: 800px;
height: 400px;
margin-left: -400px;
margin-top: -200px;
/* 가운데 맞춤을 하려면 margin으로 크기/2만큼 이동하자 */
background-color: lime;
/* box-sizing: border-box는 width, height 안에 padding이 들어간다 ; */
}
.content .inn {
padding: 20px;
}
/* width, height가 있는 곳에 padding을 두지 말고 따로 두는게 좋다 */
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure hic at quia laudantium corporis sit error, deserunt commodi labore modi ullam explicabo, voluptates dolor, sed, dolorum nisi iusto officiis reprehenderit.</p>
<div class="content">
<div class="inn">
<h1>content title</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel nemo reiciendis, alias asperiores numquam accusantium hic qui quasi. Incidunt laudantium culpa molestias doloremque eaque, laborum ipsa consequuntur corporis quibusdam neque! Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Fugit, officia nam voluptatem recusandae, ducimus iste adipisci alias ea at, quas vitae a numquam ipsa exercitationem modi voluptate pariatur perspiciatis voluptatibus?Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>absolute이며 width가 없을 때 가운데 지정하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position, center</title>
<style>
.content {
position: absolute;
/* 가운데 맞춤을 하려면 margin으로 크기/2만큼 이동하자 */
background-color: lime;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
/* box-sizing: border-box는 width, height 안에 padding이 들어간다 ; */
}
.content .inn {
padding: 20px;
}
/* width, height가 있는 곳에 padding을 두지 말고 따로 두는게 좋다 */
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure hic at quia laudantium corporis sit error, deserunt commodi labore modi ullam explicabo, voluptates dolor, sed, dolorum nisi iusto officiis reprehenderit.</p>
<div class="content">
<div class="inn">
<h1>content title</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel nemo reiciendis, alias asperiores numquam accusantium hic qui quasi. Incidunt laudantium culpa molestias doloremque eaque, laborum ipsa consequuntur corporis quibusdam neque! Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Fugit, officia nam voluptatem recusandae, ducimus iste adipisci alias ea at, quas vitae a numquam ipsa exercitationem modi voluptate pariatur perspiciatis voluptatibus?Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
'개발 공부 > html & css' 카테고리의 다른 글
| 제대로 배워보는 html과 css, 그리고 웹표준 10. 예제 만들어보기(네이버 Nuli) (0) | 2020.09.17 |
|---|---|
| 제대로 배워보는 html과 css, 그리고 웹표준 9. EMS, 이벤트 제작 실습 (0) | 2020.09.11 |
| 제대로 배워보는 html과 css, 그리고 웹표준 5. 폰트~6. 배경 스타일 (0) | 2020.09.10 |
| 제대로 배워보는 html과 css, 그리고 웹표준 5.css기초 (0) | 2020.09.09 |
| 제대로 배워보는 html과 css, 그리고 웹표준 4. 웹페이지 코딩 실습 (0) | 2020.09.09 |
