박스모델
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
CSS BOXMODEL
Info: 👁️🗨️ **css의 박스모델 **
레이아웃을 제작하는데 있어 굉장히 중요한 개념으로 이 챕터를 이해못하면 아무것도 할수없음
01. width,height
Info: 👁️🗨️
| 속성값 | 속성설명 |
|---|---|
| width : 800px | 요소의 가로 800px |
| height : 100% | 요소의 세로 부모의 100% |
| min-width : 1024px | 요소의 최소가로 1024px |
| min-height : 200px | 요소의 최소세로 200px |
| max-width : 414px | 요소의 최대가로 414px |
| max-height: 591px | 요소의 최대높이 591px |
✔ BOXMODEL
- 배경이미지 모눈 한개의 크기는 10px 입니다. (모눈의 눈금을 보고 박스의 크기를 확인하세요)
- 빨간 박스의 너비는 600px
- 초록색 테두리는 20px
- 박스의 총 높이는 100px 조건에 맞는 박스를 만들어보세요
ex2-50.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요소의 크기</title>
<style type="text/css">
</style>
</head>
<body>
<h3>BOX MODEL</h3>
<p>언어란 무엇인가? 음성으로 의사를 표현하는 것.<br> 의지를 관철시키려는 의도가 있건 없건 음성으로 의사를 표현하기만 하면 그것은 언어인가?</p>
</body>
</html>
💬 ex2-50.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요소의 크기</title>
<style type="text/css">
body{
background:url(img/bg_grid.gif) ;
}
p{
background-color: rgba(255,0,0,.5);
width:600px;
/* 박스의 최소높이 100px 고정 */
min-height: 100px;
border: 20px solid rgba(0,255,0,.5);
/* width:640px */
}
</style>
</head>
<body>
<h3>BOX MODEL</h3>
<p>언어란 무엇인가? 음성으로 의사를 표현하는 것.<br>언어란 무엇인가? 음성으로 의사를 표현하는 것.<br>언어란 무엇인가? 음성으로 의사를 표현하는 것.</p>
</body>
</html>
02. padding 🔗박스모델보기
- 속성값 1개 작성
- 속성값 2개 작성
- 속성값 3개 작성
- 속성값 4개 작성
ex2-51.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요소의 안 여백</title>
<style type="text/css">
body {
background: url(img/bg_grid.gif);
font:16px "Malgun Gothic";
}
</style>
</head>
<body>
<h3>BOX</h3>
<p>철수가 영희에게 퍼블리셔란 무슨 일을 하는 직업이니? 하고 물었다.</p>
<p>그러자 영희는 철수에게 아~ 그건 다 함께 잘 살기 위해 인터넷 선장이 되는 일이야 라고 말했다.</p>
</body>
</html>
💬 ex2-51.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요소의 안 여백</title>
<style type="text/css">
body {
background: url(img/bg_grid.gif);
font:16px "Malgun Gothic";
}
p{
background: rgba(200,200,0,.5);
/* 너비를 600px로 ! */
width: 600px;
height:100px;
padding:50px 70px;
padding:50px 70px 100px;
padding:50px 70px 100px 20px;
}
</style>
</head>
<body>
<h3>BOX</h3>
<p>철수가 영희에게 퍼블리셔란 무슨 일을 하는 직업이니? 하고 물었다.</p>
<p>그러자 영희는 철수에게 아~ 그건 다 함께 잘 살기 위해 인터넷 선장이 되는 일이야 라고 말했다.</p>
</body>
</html>
03. margin 🔗박스모델보기
ex2-52.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요소의 바깥 여백</title>
<style type="text/css">
body { background:url(img/bg_grid.png); }
</style>
</head>
<body>
<p>유래없이 뜨거운 날씨이다. 섭씨 38도를 웃도는 온도에서 에어콘은 이제 살기 위한 도구가 되었다.</p>
<p class="art2">달걀을 사다 놓기만 해도 병아리로 부화된다는 농담같은 이야기가 현재 대한민국의 실화다.</p>
<p>드디어 섭씨 40도가 넘었다. 엄마 뱃속보다 뜨거운 날씨, 감사해야 할까? 해가 뜨거울 뿐인데 오존층이 파괴되어 오존주의보가 발령되었다.</p>
</body>
</html>
💬 ex2-52.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>요소의 바깥 여백</title>
<style type="text/css">
body {
background: url(img/bg_grid.png);
}
p{
background: rgba(0,100,200,.3);
width:600px;
padding:10px;
/* 상단마진겹칩현상발생
상하 마진 적용시 위/아래 한쪽방향으로만 코딩
*/
margin:20px;
/* 큰값으로 합체 */
margin-top:50px;
}
.art2{
/* 마진으로 중앙정렬은 수평만 가능
1. 너비가 있다.
2. 좌우를 auto 로 준다.
*/
width:300px;
margin: 0 auto;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
</style>
</head>
<body>
<p>
유래없이 뜨거운 날씨이다. 섭씨 38도를 웃도는 온도에서 에어콘은 이제 살기
위한 도구가 되었다.
</p>
<p class="art2">
달걀을 사다 놓기만 해도 병아리로 부화된다는 농담같은 이야기가 현재
대한민국의 실화다.
</p>
<p>
드디어 섭씨 40도가 넘었다. 엄마 뱃속보다 뜨거운 날씨, 감사해야 할까? 해가
뜨거울 뿐인데 오존층이 파괴되어 오존주의보가 발령되었다.
</p>
</body>
</html>
04. border 🔗박스모델보기
Info: 👁️🗨️ border 와 outline 에 대해 알아보자
ex2-53.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>테두리 모양</title>
<style type="text/css">
body { background:url(img/bg_grid.png); }
</style>
</head>
<body>
<div class="brdr">
<p class="p1">solid</p>
<p class="p2">dotted</p>
<p class="p3">dashed</p>
<p class="p4">double</p>
<p class="p5">groove</p>
<p class="p6">ridge</p>
<p class="p7">inset</p>
<p class="p8">outset</p>
</div>
</body>
</html>
💬 ex2-53.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>테두리 모양</title>
<style type="text/css">
body {
background: url(img/bg_grid.png);
}
.brdr {
border: 2px solid #ccc;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
/* 너비500px 수평중앙정렬 */
width: 500px;
margin: auto;
}
p {
width: 120px;
width: 94px;
display: inline-block;
padding: 10px;
text-align: center;
background: rgb(194, 208, 232);
font: 23px Times;
margin:10px 8px;
border-width:13px;
border-color:firebrick;
border-style:solid;
border:13px firebrick solid;
}
.p1{border-style:solid;}
.p2{border-style:dotted;}
.p3{border-style:dashed;}
.p4{border-style:double;}
.p5{border-style:groove;}
.p6{border-style:ridge;}
.p7{border-style:inset;}
.p8{border-style:outset;}
</style>
</head>
<body>
<div class="brdr">
<p class="p1">solid</p>
<p class="p2">dotted</p>
<p class="p3">dashed</p>
<p class="p4">double</p>
<p class="p5">groove</p>
<p class="p6">ridge</p>
<p class="p7">inset</p>
<p class="p8">outset</p>
</div>
</body>
</html>
ex2-53-1.html
<!DOCTYPE HTML>
<html>
<head>
<title> 테두리 외곽에 아우트라인 처리하기 </title>
<meta charset="UTF-8" />
<style type="text/css">
</style>
</head>
<body>
<div>
<p class="border1">
Whenever you are asked if you can do a job, tell
"Certainly I can!" Then get busy and find out how to do it.
(Theodore Roosevelt)
</p>
<p class="border2">
당신이 어떤 일을 해낼 수 있는지 누군가가 물어보면 대답해라.
"물론이죠!" 그 다음 어떻게 그 일을 해낼 수 있을지 부지런히 고민하라.
(시어도어 루스벨트)
</p>
</div>
</body>
</html>
💬 ex2-53-1.html
<!DOCTYPE html>
<html>
<head>
<title>테두리 외곽에 아우트라인 처리하기</title>
<meta charset="UTF-8" />
<style type="text/css">
body {
font:0.95em "맑은 고딕",sans-serif;
margin:40px;
}
div{
border:10px solid #ff6666;
outline-width:10px;
outline-style:solid;
outline-offset:15px;
outline-color:#ff6666;
padding:40px;
}
p{
line-height: 200%;
padding:10px;
width:330px;
height: 120px;
margin: 0 auto;
}
.border1{
border:20px solid #ffcc00;
outline: dashed 1px #000;
margin-bottom: 20px;
}
.border2{
border:10px double #ffcc00;
outline: double 10px rgb(10, 33, 240);
}
</style>
</head>
<body>
<div>
<p class="border1">
Whenever you are asked if you can do a job, tell "Certainly I
can!" Then get busy and find out how to do it. (Theodore Roosevelt)
</p>
<p class="border2">
당신이 어떤 일을 해낼 수 있는지 누군가가 물어보면 대답해라.
"물론이죠!" 그 다음 어떻게 그 일을 해낼 수 있을지 부지런히
고민하라. (시어도어 루스벨트)
</p>
</div>
</body>
</html>
04. border-radius
ex2-54.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>둥근 테두리</title>
<style type="text/css">
</style>
</head>
<body>
<span class="radius radius1">radius1</span>
<span class="radius radius2">radius2</span>
<span class="radius radius3">radius3</span>
<span class="radius radius4">radius4</span>
</body>
</html>
💬 ex2-54.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>둥근 테두리</title>
<style type="text/css">
.radius {
display: inline-block;
text-align: center;
line-height: 100px;
}
.radius1 {
width: 100px;
height: 100px;
background-color: #cc6;
border-radius: 100px;
}
.radius2 {
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
background-color: cadetblue;
}
.radius3 {
width: 100px;
height: 100px;
border-radius: 200px 0 0 0;
background-color: #d14419;
}
.radius4 {
width: 200px;
height: 100px;
background-color: cadetblue;
border-radius: 40px 15px 50px;
border: 4px dotted #800;
}
/*
3개 -> 좌상 우상+좌하 우하
2개 -> 좌상+우하 우상+좌하
*/
span:nth-child(5),
span:nth-child(6) {
display: block;
width: 430px;
height: 100px;
background: pink;
margin: 10px auto;
}
.radius5 {
border-radius: 15px / 70px;
}
.radius6 {
border-radius: 15px 70px 15px 70px / 70px 15px 70px 15px;
}
</style>
</head>
<body>
<span class="radius radius1">radius1</span>
<span class="radius radius2">radius2</span>
<span class="radius radius3">radius3</span>
<span class="radius radius4">radius4</span>
<span class="radius radius5">radius5 ///width:430px;height:100px; </span>
<span class="radius radius6">radius6</span>
</body>
</html>
05. border-image
Info: 👁️🗨️ 브라우저 호환성 https://developer.mozilla.org/ko/docs/Web/CSS/border-image
ex2-56.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>테두리 이미지</title>
<style type="text/css">
</style>
</head>
<body>
<div class="round">
It's impossible not only starting good but also keeping it firm!!</div>
<div class="repeat">
It's impossible not only starting good but also keeping it firm!!</div>
<div class="stretch">
It's impossible not only starting good but also keeping it firm!!</div>
</body>
</html>
💬 ex2-56.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>테두리 이미지</title>
<style type="text/css">
body {
margin: 20px;
}
div {
width: 600px;
height: 50px;
padding: 15px;
border: 10px solid transparent;
}
.round {
border-image: url(img/border.png) 20;
/* 이미지 | 슬라이스 */
border-image: linear-gradient(red, blue) 27;
}
.repeat {
border-image: url(img/border.png) 20 repeat;
}
.stretch {
border-image: url(img/border.png) 20 stretch;
}
</style>
</head>
<body>
<div class="round">
It's impossible not only starting good but also keeping it firm!!
</div>
<div class="repeat">
It's impossible not only starting good but also keeping it firm!!
</div>
<div class="stretch">
It's impossible not only starting good but also keeping it firm!!
</div>
</body>
</html>
border-image
예제
Info: 📁 0307-border-image 시작파일
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Border Image</title>
<style>
div {
/* 단위 안쓰면 px */
border-image: url(border.jpg) 45 fill / auto repeat;
width: 600px;
height: 300px;
margin: 150px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
border-image-slice
border-image-slice : 브라우저에게 테두리 조각을 만들기 위해 이미지를 슬라이스할 위치를 알려준다.
/* 모든 방향 */
border-image-slice: 30%;
/* 세로방향 | 가로방향 */
border-image-slice: 10% 30%;
/* 위 | 가로방향 | 아래 */
border-image-slice: 30 30% 45;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
border-image-slice: 7 12 14 5;
/* `fill` 키워드 */
border-image-slice: 10% fill 7 12;
/* 전역 값 */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;
이미지는 4개 모서리, 4개 측면, 중앙의 9개 섹션으로 나뉜다.
브라우저에게 테두리 조각을 만들기 위해 이미지를 슬라이스할 위치를 알려준다.
border-image-slice: [ number | percentage ] | fill | initial | inherit
06. box-sizing
Info: 👁️🗨️ 박스의 크기계산 기준설정
ex2-57.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body { background: url(img/bg_grid.png); }
</style>
</head>
<body>
<p>It's impossible not only starting good but also keeping it firm!!</p>
<p class="sizing">It's impossible not only starting good but also keeping it firm!!</p>
<ul class="sizing_list">
<li><a href="#">Company</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Custommer</a></li>
<li><a href="#">Community</a></li>
</ul>
</body>
</html>
💬 ex2-57.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>box-sizing</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: url(img/bg_grid.png);
}
p {
background-color: rgba(255,255,0,.5);
border:10px solid rgba(0,0,0,0.5);
width:600px;
height:100px;
padding:30px;
margin-bottom: 10px;
}
.sizing{
/* box-sizing :
border-box
크기=패딩+보더+콘텐츠박스
content-box
크기=(패딩)+(보더)+(콘텐츠박스 )
*/
width:500px;
height:200px;
padding:50px;
border:15px solid red;
box-sizing: border-box;
overflow: hidden;
}
.sizing_list{
width:500px;
margin-top: 20px;
margin: auto;
}
.sizing_list li{
list-style: none;
width:25%;
float:left;
background: rgba(0,0,0,0.5);
padding:10px;
box-sizing: border-box;
text-align: center;
}
.sizing_list li a{
text-decoration: none;
color:#fff;
}
.sizing_list li:hover a{
text-decoration: underline;
color:#fff;
}
.sizing_list li:nth-child(odd){
background: rgba(219, 95, 95, 0.5);
}
</style>
</head>
<body>
<p>It's impossible not only starting good but also keeping it firm!!</p>
<p class="sizing">
It's impossible not only starting good but also keeping it firm!!
</p>
<ul class="sizing_list">
<li><a href="#">Company</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Custommer</a></li>
<li><a href="#">Community</a></li>
</ul>
</body>
</html>
07. box-shadow
Info: 👁️🗨️ 박스 그림자
선택자 { box-shadow: Inset Horizontal-offset Vertical-offset Blur-Radius Spread Shadow-Color; }
ex2-58.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>box-shadow</title>
<style type="text/css">
</style>
</head>
<body>
<p class="shadow1">It's impossible not only starting good but also keeping it firm!!</p>
<p class="shadow2">It's impossible not only starting good but also keeping it firm!!</p>
<p class="shadow3">It's impossible not only starting good but also keeping it firm!!</p>
<p class="shadow4">It's impossible not only starting good but also keeping it firm!!</p>
<p class="shadow5">It's impossible not only starting good but also keeping it firm!!</p>
<p class="shadow6">It's impossible not only starting good but also keeping it firm!!</p>
</body>
</html>
💬 ex2-58.html
08. tranform
Info: 👁️🗨️ 변형
ex2-60.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>TRANSFORM</title>
<style type="text/css">
</style>
</head>
<body>
<p>Original</p>
<p class="t1">translate(30px,20px)</p>
<p class="t2">rotate(60deg)</p>
<p class="t3">scale(0.7, 1.3)</p>
<p class="t4">skew(15deg, 10deg)</p>
<p class="t5">matrix(1, -0.1, 0, 1, 0, 0)</p>
</body>
</html>
💬 ex2-60.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>TRANSFORM</title>
<style>
body {
margin-left: 100px;
}
p {
width: 500px;
padding: 15px;
background: #78a;
border: 5px solid rgba(0, 0, 0, 0.5);
font: 21px Times;
}
.t1 {
/* 위치 x,y */
-ms-transform: translate(-30px, -20px);
transform: translate(-30px, -20px);
}
.t2 {
/* 각도 deg */
transform: rotate(-30deg);
}
.t3 {
transform: scale(0.7, 1.3) rotate(45deg);
}
.t4 {
transform: skew(-30deg, -10deg);
}
.t5 {
/* scaleX, scaleY, skewX, skewY,translateX, translateY, */
transform: matrix(1, -0.1, 0, 1, 0, 0);
}
</style>
</head>
<body>
<p>Original</p>
<p class="t1">translate(30px,20px)</p>
<p class="t2">rotate(60deg)</p>
<p class="t3">scale(0.7, 1.3)</p>
<p class="t4">skew(15deg, 10deg)</p>
<p class="t5">matrix(1, -0.1, 0, 1, 0, 0)</p>
</body>
</html>
10. transition
Info: 👁️🗨️ 전이
ex2-61.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>TRANSITION</title>
<style type="text/css">
</style>
</head>
<body>
<h3>Moving menu</h3>
<ul class="menu">
<li><a href="#">Company</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Customer Support</a></li>
<li><a href="#">Community</a></li>
</ul>
</body>
</html>
💬 ex2-61.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>TRANSITION</title>
<style type="text/css">
.menu li {
list-style: none;
}
.menu li a {
text-decoration: none;
width: 300px;
height: 20px;
padding: 10px;
display: block;
background: #fcc;
margin-bottom: 5px;
color: #080872;
transition: all 1s;
transform: scale(1);
}
.menu li a:hover {
width: 450px;
background: #c00;
color: aqua;
transform: scale(1.5);
}
</style>
</head>
<body>
<h3>Moving menu</h3>
<ul class="menu">
<li><a href="#">Company</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Customer Support</a></li>
<li><a href="#">Community</a></li>
</ul>
</body>
</html>
11. animation
Info: 👁️🗨️ 애니메이션
ex2-62.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>ANIMATION</title>
<style type="text/css">
</style>
</head>
<body>
<p>
Animation..
</p>
</body>
</html>
💬 ex2-62.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>ANIMATION</title>
<style type="text/css">
p {
width: 100px;
height: 100px;
background: brown;
animation-name: mango;
animation-duration: 4s;
animation-fill-mode: forwards;
animation-iteration-count: 3;
/* 애니메이션 종료후 반대방향 */
animation-direction: alternate;
/* 일단정지 */
animation-play-state:running ;
}
p:hover{
animation-play-state:paused ;
}
@keyframes mango {
0% {
background: green;
width: 150px;
transform: translate(0,0);
}
50% {
background: blue;
width: 50px;
transform: translate(0,100px);
}
100% {
background-color: blanchedalmond;
transform: translate(100px,0);
}
}
.ball{
background-color: red;
width: 50px;
height: 50px;
border-radius: 50px;
animation: ball 5s 1s infinite alternate cubic-bezier(0.6, 0.39, 0.94, 1.63);
}
@keyframes ball{
0%{
transform: translate(200px, 200px);
}
100%{
transform: translate(0px, 0px);
}
}
</style>
</head>
<body>
<p>Animation..</p>
<div class="ball"></div>
</body>
</html>
ex2-63.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>ANIMATION2</title>
<style type="text/css">
</style>
</head>
<body>
<div class="ani_box">
<img class="flower flower1" src="img/ani_spade.png" alt="flower1">
<img class="flower flower2" src="img/ani_spade.png" alt="flower2">
</div>
</body>
</html>
💬 ex2-63.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>ANIMATION2</title>
<style type="text/css">
/*
부모요소 - position :relative
자식요소 - position :absolute
자식의 기준점이 부모로 바뀜
*/
.ani_box {
position: relative;
width: 100px;
height: 100px;
background: url(img/bg_animation.png) no-repeat center;
}
.flower {
position: absolute;
left: 10px;
top: 9px;
}
.flower1 {
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: myani1 3s infinite;
}
.flower2 {
animation: myani2 3s infinite;
}
@keyframes myani1 {
from {
transform: scale(0.3, 0.3);
opacity: 0.5;
}
to {
transform: scale(1.2, 1.2);
opacity: 0;
}
}
@keyframes myani2 {
from{
transform:scale(0.5,0.5);
opacity: 1;
}
to{
transform:scale(1.5,1.5);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="ani_box">
<img class="flower flower1" src="img/ani_spade.png" alt="flower1" />
<img class="flower flower2" src="img/ani_spade.png" alt="flower2" />
</div>
</body>
</html>
😀SpritesAnimation
sprtitesAnimation.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#spriteContainer {
width: 80px;
height: 80px;
background-image: url(./img/sprites_final.png);
background-position: 0, 0;
animation: sprite .3s steps(24) infinite;
background-size:2000px ;
}
@keyframes sprite {
100% {
background-position: -1920px;
}
}
</style>
</head>
<body>
<div id="spriteContainer"></div>
</body>
</html>
12. 다단편집
Info: 👁️🗨️ column
ex2-64.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>다단편집</title>
<style type="text/css">
</style>
</head>
<body>
<div class="gmother">
<h2>우리 형수님 <sup>발꿈치</sup> 땅에 닿기를... </h2>
<p>증조할머니께서는 몹시 아프셨다. 선비인 증조할아버지는 세 번째 부인마저 잃을까 봐 한번 올린 반찬을 그 이후로는 올리지 못하게 할 정도로 부인을 아꼈다.<br /> 할머니는 선비 시아버지와 병든 시어머니가 돕지 않는 일을 혼자 맡아 가사를 꾸리셨다. 할머니의 시동생 되는 이도 "우리 형수님 발뒤꿈치가 땅에 닿는 것 좀 보았으면 좋겠다." 라고 할 정도로 늘 바쁘게 종종걸음으로 다니셨다. 농사일은 물론이고 여자의 몸으로 소까지 몰며 시장에 가서 잡다한 먹거리를 사는 일까지 모두가 할머니 몫이었다.<br /> 게다가 배다른 큰 동서의 푸념을 들어야 했다. 제사 때마다 시아버지가 따로 지어 나온 새집에 와서 돌아가신 시어머니 제사를 지어야 했던 동서는 새집에서 시부모를 모시고 있는 할머니에 자신의 처지를 비교하며 헌 집에 사는 자기네를 "다 파먹은 김칫독에 빠졌다." 라고 표현하며 투덜대곤 하였다.<br /> 할머니는 가끔 그때 일을 이야기하시며 "제사 지낼 때는 묵묵히 조용히 지낼 뿐 군소리해서 좋을 게 없다." 라고 말씀하셨고 어머니와 작은어머니들에게 주지시키셨다.</p>
</div>
</body>
</html>
💬 ex2-64.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>다단편집</title>
<style type="text/css">
div,
h2,
p {
margin:0;
padding:0;
}
body{
margin:10px;
}
h2{
padding:0 0 20px;
text-align: center;
}
.gmother{
text-align: justify;
padding: 20px;
background: #f5f3eb;
column-count: 3;
column-gap: 30px;
column-rule: 2px dashed chocolate;
}
.gmother h2{
column-span:all ; /* all ,none*/
}
</style>
</head>
<body>
<div class="gmother">
<h2>우리 형수님 <sup>발꿈치</sup> 땅에 닿기를...</h2>
<p>
증조할머니께서는 몹시 아프셨다. 선비인 증조할아버지는 세 번째 부인마저
잃을까 봐 한번 올린 반찬을 그 이후로는 올리지 못하게 할 정도로 부인을
아꼈다.<br />
할머니는 선비 시아버지와 병든 시어머니가 돕지 않는 일을 혼자 맡아 가사를
꾸리셨다. 할머니의 시동생 되는 이도 "우리 형수님 발뒤꿈치가 땅에 닿는 것
좀 보았으면 좋겠다." 라고 할 정도로 늘 바쁘게 종종걸음으로 다니셨다.
농사일은 물론이고 여자의 몸으로 소까지 몰며 시장에 가서 잡다한 먹거리를
사는 일까지 모두가 할머니 몫이었다.<br />
게다가 배다른 큰 동서의 푸념을 들어야 했다. 제사 때마다 시아버지가 따로
지어 나온 새집에 와서 돌아가신 시어머니 제사를 지어야 했던 동서는
새집에서 시부모를 모시고 있는 할머니에 자신의 처지를 비교하며 헌 집에
사는 자기네를 "다 파먹은 김칫독에 빠졌다." 라고 표현하며 투덜대곤
하였다.<br />
할머니는 가끔 그때 일을 이야기하시며 "제사 지낼 때는 묵묵히 조용히 지낼
뿐 군소리해서 좋을 게 없다." 라고 말씀하셨고 어머니와 작은어머니들에게
주지시키셨다.
</p>
</div>
</body>
</html>
13. 종합예제-calc
Info: 👁️🗨️ 컨텐츠의 양과 무관하게 항상 아래에 위치하는 푸터만들기
ext2-3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>똑똑한 FOOTER</title>
<style type="text/css">
body,header,div,footer,h1,p,ul,li {margin:0; padding:0;}
li {list-style-type:none;}
</style>
</head>
<body>
<div id="wrap">
<header>
<h1><a href="#">How many contents is there?</a></h1>
</header>
<div id="container">
<ul class="lnb">
<li><a href="#">s1</a></li>
<li><a href="#">s2</a></li>
<li><a href="#">s3</a></li>
</ul>
<div class="content_area">
<p>1내용<br> 2smart footer...<br> 3smart footer...<br> 4smart footer...<br> 5smart footer...<br> 6smart footer...<br> 7smart footer...<br> 8smart footer...<br> 9smart footer...<br> last...</p>
</div>
</div>
<footer>
<p>copyright</p>
</footer>
</div>
</body>
</html>
💬 ext2-3.html