inline-block
<body>
<h1>시간이란...</h1>
<p>
내일 죽을 것처럼 오늘을 살고
</p>
<p>
영원히 살 것처럼 <span style="color: red;">내일을 꿈꾸어라.</span>
</p>
</body>
width-height
<style>
.box1{
width: 400px;
height: 100px;
background: orange;
}
.box2{
width: 50%;
height: 100px;
background: #0094ff;
}
div{
margin: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>display
display_1
<style>
div{
margin: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
#inline img{
margin: 10px;
/* 기본값 : inline */
display: inline;
}
#block img{
margin: 10px;
/* block : 너비가 100% */
display: block;
}
</style>
</head>
<body>
<div id="inline">
<img src="images/pic1.jpg">
<img src="images/pic2.jpg">
<img src="images/pic3.jpg">
</div>
<div id="block">
<img src="images/pic1.jpg">
<img src="images/pic2.jpg">
<img src="images/pic3.jpg">
</div>display_2
<style>
ul{
list-style-type: none;
}
ul li{
padding: 10px 15px;
margin-right: 20px;
/* 테두리가 위에 생김 */
border-top: 3px solid #222;
display: inline;
}
ul li a{
color: black;
/* 밑줄 없앰 */
text-decoration: none;
}
ul li:hover{
background-color: rgb(196, 196, 196);
}
</style>
</head>
<body>
<ul>
<!-- href="#" : 이동 안함 -->
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어기</a></li>
</ul>
</body>display_3
<style>
ul{
list-style-type: none;
}
ul li{
padding: 10px 15px;
/* margin-right: 20px; */
/* 테두리가 위에 생김 */
/* border-top: 3px solid #222; */
/* display: inline; */
/* inline-block : 아래/위 마진이 적용됨 */
display: inline-block;
margin: 20px;
}
ul li a{
color: black;
/* 밑줄 없앰 */
text-decoration: none;
}
ul li:hover{
background-color: rgb(196, 196, 196);
}
</style>
</head>
<body>
<ul>
<!-- href="#" : 이동 안함 -->
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어살기</a></li>
</ul>
</body>
</html>
border
border-1
<style>
div{
width: 200px;
height: 100px;
margin: 15px;
border-width: 5px;
}
.box1{
/* border-style: 선종류 */
border-style: solid;
}
.box2{
/* dotted : 점선 */
border-style: dotted;
}
.box3{
/*dashed : 선으로 된 점선 */
border-style: dashed;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>border-2
<style>
div{
width: 200px;
height: 100px;
margin: 15px;
/* border-width: 5px; */
/* thick : 가로, thin : 세로 */
/* border-width:thick thin; */
/* top right bottom left 순서대로 적용 */
border-width:5px 10px 15px 20px;
border-style: dashed;
display: inline-block;
}
.box1{
border-color: red;
}
.box2{
border-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>border-3
<style>
h1{
/* border-bottom : 테두리 아래 */
border-bottom: 3px solid #ccc;
/* padding-bottom : 아래 여백 */
padding-bottom: 5px;
}
p{
border: 3px dotted black;
padding: 10px;
}
</style>
</head>
<body>
<h1>박스 모델</h1>
<p>
박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인
패딩(padding), 박스의 테두리(border), 그리고 여러박스 모델
간의 여백인 마진(margin) 등의 요소로 구성되어 있습니다.
</p>
</body>
redius
redius_1
<style>
div{
width: 300px;
height: 1200px;
margin: 20px;
display: inline-block;
}
.round{
border: 2px solid red;
border-radius: 20px;
}
#bg{
background: url(images/pic1.jpg);
/* background-size: cover; */
background-size: contain;
}
</style>
</head>
<body>
<div class="round"></div>
<div class="round" id="bg"></div>
</body>redius_2
<style>
div{
width: 200px;
height: 100px;
margin: 15px;
display: inline-block;
border: 2px solid black;
background: #ffd800;
}
.round1{
/* border-top-left-radius : 위, 왼쪽 */
/* 100px 50px : 가로 세로 크기만큼 둥글게 */
border-top-left-radius: 100px 50px;
}
.round2{
/* border-bottom-right-radius: 오른쪽 아래 */
border-bottom-right-radius: 50% 30%;
}
.round3{
/* border-top-left-radius: 위, 오른쪽 */
border-top-left-radius: 50px;
}
</style>
</head>
<body>
<div class="round1"></div>
<div class="round2"></div>
<div class="round3"></div>
</body>
box-shadow
<style>
div{
width: 200px;
height: 100px;
margin: 15px;
border: 2px solid black;
background: #ffd800;
}
.box1{
/* 가로 세로 흐림 번짐 그림자색상을 순서대로 적용 */
box-shadow: 12px -12px 5px 0px black;
}
.box2{
box-shadow: -12px 12px 15px 10px black;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
margin
<style>
div{
width: 200px;
height: 100px;
background: #0094ff;
}
.box1{
/* top right bottom left 순서대로 적용 */
margin: 30px 50px 30px 50px;
}
.box2{
/* margin: 30px 50px 30px 50px; */
/* 상동, 위/아래 중첩되어서 30px 만 적용 */
margin: 30px 50px;
}
.box3{
/* margin: 50px 50px 50px 50px; */
/* 아래/위 중첩되어서 큰쪽 기준으로 적용 */
margin: 50px;
}
.box4{
/* margin: 30px 5px 10px 5px; */
/* 아래/위 주첩되어서 큰쪽 기준으로 적용 */
margin: 30px 5px 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
margin-center
<style>
.box{
width: 200px;
height: 300px;
background: #ff6a00;
/* margin: 0 auto 0 auto; */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
margin-overlap
<style>
div{
width: 200px;
height: 100px;
margin: 30px;
/* 박스 사이의 2개의 중첩이 안되서어 60px 적용 */
display: inline-block;
}
#box1{
background: rgb(0, 77, 243);
}
#box2{
background: rgb(255, 72, 0);
}
#box3{
background: rgb(18, 219, 0);
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
padding
<style>
div{
width: 200px;
height: auto;
background: #0094ff;
color: white;
margin: 15px;
}
.box1{
/* top right bottom left 순서대로 적용 */
padding: 10px 30px 10px 30px;
}
.box2{
padding: 10px 30px;
}
.box3{
/* padding: 10px 10px 10px 10px; */
padding: 10px;
}
</style>
</head>
<body>
<div class="box1">
패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말한다.
</div>
<div class="box2">
패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말한다.
</div>
<div class="box3">
패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말한다.
</div>
</body>
실습
1.
<style>
div{
border: 1px solid #ccc;
margin: 15px;
padding: 15px;
}
#ch1{
width: 960px;
padding: 20px;
margin: 0 auto;
}
.title{
padding: 20px;
margin-bottom: 20px;
display: block;
}
.side{
background: #eee;
width: 220px;
padding: 20px;
float: right;
}
.main{
width: 620px;
padding: 20px;
margin-bottom: 20px;
}
.footer{
padding: 20px;
}
</style>
</head>
<body>
<div id="ch1">
<div class="title"><h1>사이트 제목</h1></div>
<div class="side">
<h3>사이드바</h3>
<ul>
<li>
모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.
</li>
</ul>
</div>
<div class="main">
<h3>본문</h3>
재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을
편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까
지 이를 의결하여야한다.
<p>
대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다.
제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론.출판에 대한 허가나 검
열과 집회.결사에 대한 허가는 인정되지 아니한다.
</div>
<div class="footer">
<h3>푸터</h3>
<p>
이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.
</p>
</div>
</div>
</body>2.
<style>
div{
border: 1px solid #ccc;
padding: 15px;
}
#ch1{
width: 960px;
margin: 0 auto;
}
.title{
margin-bottom: 20px;
}
.side1{
width: 120px;
margin-bottom: 20px;
margin-right: 20px;
float: left;
}
.side2{
width: 120px;
margin-bottom: 20px;
float: right;
}
.main{
width: 580px;
margin-bottom: 20px;
float: left;
}
.footer{
clear: both;
}
</style>
</head>
<body>
<div id="ch1">
<div class="title"><h1>사이트 제목</h1></div>
<div class="side1">
<h3>사이드바</h3>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
</div>
<div class="main">
<h3>본문</h3>
예비비는 총액으로 국회의 의결을 얻어야 한다. 예비비의 지출은 차기국회의 승인을 얻어야한다.
이 헌법시행 당시의 법령과 조약은 이 헌번에 위배되지 아니하는 한 그 효력을 지속한다.
<p>
국가의 세입·세출의 결산, 국가 및 법률이 정한 단체의 회계검사와 행정기관 및 공무원의 직무에 관한 감찰을
하기위하여 대통령 소속하에 감사원을 둔다.
<p>
모든 국민의 재산권은 보장된다. 그 내용과 한계는 법률로 정한다. 대한민국의 국민이 되는 요건은 법률로 정한다.
법률이 헌법에 위반되는 여부가 재판의 전제가 된 경우에는 법원은 헌법재판소에 제청하여 그 심판에 의하여 재판한다.
</p>
</div>
<div class="side2">
<h3 >사이드바</h3>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
</div>
<div class="footer">
<h3>푸터</h3>
<p>
저작권 정보
</p>
<p>
연락처 등
</p>
</div>
</div>
</body>3.
<style>
div ul{
list-style-type: none;
padding: 0px;
}
a{
color: blue;
text-decoration: none;
}
.content{
padding-left: 10px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
div ul li{
font-size: 1.5em;
padding-left: 7px;
margin-bottom: 15px;
border-left-style: solid ;
border-left-color: #990066 ;
border-left-width: 5px ;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#" >더불어살기</a></li>
</ul>
</div>
<h2>강아지 용품 준비하기</h2>
<div class="content">
<h3>강아지 집</h3>
<p>
강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.
집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.
</p>
</div>
<div class="content">
<h3>강아지 먹이</h3>
<p>
강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다.
따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야합니다.
사람이 먹는 음식으 ㄹ먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.
</p>
</div>
Copyright 2012 funnycom
</body>4.
<style>
div ul{
list-style-type: none;
padding: 0px;
}
a{
color: blue;
text-decoration: none;
}
.content{
padding-left: 10px;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
margin-bottom: 10px;
}
div ul li{
font-size: 1.5em;
padding-left: 7px;
margin-bottom: 15px;
border-left-style: solid ;
border-left-color: #990066 ;
border-left-width: 5px ;
display: inline;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#" >더불어살기</a></li>
</ul>
</div>
<h2>강아지 용품 준비하기</h2>
<div class="content">
<h3>강아지 집</h3>
<p>
강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.
집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.
</p>
</div>
<div class="content">
<h3>강아지 먹이</h3>
<p>
강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다.
따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야합니다.
사람이 먹는 음식으 ㄹ먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.
</p>
</div>
Copyright 2012 funnycom
</body>5.
<style>
table{
caption-side: bottom;
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 10px;
}
.heading{
background: #eee;
}
</style>
</head>
<body>
<table>
<caption>2015 국민 독서실태</caption>
<col class="heading">
<thead>
<tr class="heading">
<th>구분</th>
<th>성인</th>
<th>학생</th>
</tr>
</thead>
<tbody>
<tr>
<th>독서율</th>
<td>65.3%</td>
<td>94.9%</td>
</tr>
<tr>
<th>연평균 독서량</th>
<td>9.1권</td>
<td>29.8권</td>
</tr>
<tr>
<th>공공도서관 이용률</th>
<td>28.2%</td>
<td>64.9%</td>
</tr>
</tbody>
</table>
</body>수업자료
'HTML CSS' 카테고리의 다른 글
| HTML5와 시맨틱 태그 (0) | 2024.04.12 |
|---|---|
| CSS-레이아웃 (0) | 2024.04.12 |
| 색상과 배경을 위한 스타일 (0) | 2024.04.12 |
| CSS - 텍스트 관련 스타일 (1) | 2024.04.12 |
| HTML - CSS기초 (0) | 2024.04.10 |
