반응형
1. caption-side 속성 – 표 제목 위치 정하기
① caption은 기본으로 표 위쪽에 표시됨.
② 기본형
caption-side: top | bottom
③ 속성 값
2. Border 속성 – 표 테두리 스타일 결정하기
① 표의 바깥 테두리와 셀 테두리 모두 지정해야 됨.
<예제 – table-css-001.html>
<!DOCTYPE html>
<html lang="ko">
<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>table-border</title>
<style>
body {
font-family: "맑은 고딕", "고딕", "굴림";
}
.table1 {
border: 1px solid black;
}
.table1 td {
border: 1px dotted black;
padding: 10px;
text-align: center;
}
.cap {
/*caption 위치 지정*/
caption-side: bottom;
}
</style>
</head>
<body>
<!--table.table1>(caption.cap+(tr>td*2)*3)-->
<table class="table1">
<caption class="cap">프로축구 경기 일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
</tr>
</table>
</body>
</html>
3. border-collapse 속성 – 테두리 통합, 분리하기
① 표 테두리와 셀 테두리를 합칠 것인지 설정
② 기본형
border-collapse: collapse | separate
③ 속성 값
<예제 – table-css-002.html>
<!DOCTYPE html>
<html lang="ko">
<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>table-border</title>
<style>
body {
font-family: "맑은 고딕", "고딕", "굴림";
}
.table1 {
border: 1px solid black;
/*각 테두리 합쳐서 하나로 표시*/
border-collapse: collapse;
}
.table1 td {
border: 1px dashed black;
padding: 10px;
text-align: center;
}
.cap {
/*caption 위치 지정*/
caption-side: bottom;
}
</style>
</head>
<body>
<!--table.table1>(caption.cap+(tr>td*2)*3)-->
<table class="table1">
<caption class="cap">프로축구 경기 일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
</tr>
</table>
</body>
</html>
4. border-spacing 속성 – 인접한 셀 테두리 사이 거리 지정하기
① border-collapse: separate를 사용해 셀들을 분리했을 때, 인접한 셀 테두리 사이의 거리 지정
② 값 개수에 따른 차이
- 1개 : 수평 거리 & 수직 거리를 같게
- 2개 : 첫 번째 값은 수평 거리, 두 번째 값은 수직 거리
③ 기본형
border-spacing: <크기>
5. empty-cell 속성 – 빈 셀의 표시 여부 지정하기
① border-collapse: separate를 사용해 셀들을 분리했을 때, 내용이 없는 빈 셀들의 표시 여부 지정
② 기본형
empty-cells: show | hide
6. width, height 속성 – 표 너비와 높이 지정하기
① 너비나 높이를 지정하지 않으면 셀 안의 내용이 표시될 만큼 표시
② width 값을 지정할 경우 padding 속성을 이용해 여백을 넣어주면 보기 좋게 꾸밀 수 있음
<예제 – table-width-001.html>
<!DOCTYPE html>
<html lang="ko">
<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>table-border</title>
<style>
body {
font-family: "맑은 고딕", "고딕", "굴림";
}
.table1 {
border: 1px solid black;
/*인접한 셀 테두리간의 간격 조절*/
border-spacing: 20px;
width: 600px;
height: 800px;
}
.table1 td {
border: 1px dotted black;
padding: 10px;
text-align: center;
/*빈 셀 표출 여부 결정*/
empty-cells: hide;
}
.cap {
/*caption 위치 지정*/
caption-side: bottom;
}
</style>
</head>
<body>
<!--table.table1>(caption.cap+(tr>td*2)*3)-->
<table class="table1">
<caption class="cap">프로축구 경기 일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
7. table-layout 속성 – 콘텐츠에 맞게 셀 너비 지정하기
① 셀 안의 내용 양에 따라 셀 너비를 변하게 할지, 고정시킬지 결정
② 기본형
table-layout: fixed | auto③ 사용 가능한 속성 값들
<예제 – table-layout-001.html>
<!DOCTYPE html>
<html lang="ko">
<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>table-layout</title>
<style>
body {
font-family: "맑은 고딕", "고딕", "굴림";
}
.table1 {
border-collapse: collapse;
width: 30px;
table-layout: fixed;
word-break: break-all;
height: auto;
}
.table1 td {
width: 150px;
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<h1>Table Layout</h1>
<table border="1" class="table1">
<tr>
<td>한글로띄어쓰기없이길게붙여쓰기</td>
<td>long_description_without_space</td>
</tr>
</table>
</body>
</html>
8. text-align 속성 – 셀 안에서 수평 정렬하기
① 셀 안에서의 수평 정렬 방법 지정
② 기본형
table-align: left | right | center
9. vertical-align 속성 – 셀 안에서 수직 정렬하기
① inline이나 inline-block으로 배치한 요소의 세로 정렬 방법 지정
② 셀 안에서의 수직 정렬 방법 지정
③ 기본형
vertical-align: top | bottom | middle
④ 속성 값들
<예제 – table-align-001.html>
<!DOCTYPE html>
<html lang="ko">
<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>Table align</title>
<style>
td {
height: 100px;
padding: 20px;
}
.val1 {
vertical-align: top;
}
.val2 {
vertical-align: bottom;
}
.val3 {
vertical-align: middle;
}
.val4 {
vertical-align: baseline;
}
</style>
</head>
<body>
<table border="1">
<caption>vertical-alignment</caption>
<tr>
<td class="val1">alignment</td>
<td class="val2">alignment</td>
<td class="val3">alignment</td>
<td class="val4">alignment</td>
</tr>
</table>
</body>
</html>
실습해보기 / 퀴즈
<실습 – index.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>블루베리</title>
<link href="css/blueStyle1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<header>
<h1>블루베리(Blueberry)</h1>
<h2>베리로는 크랜베리(넌출월귤), 월귤(링곤베리), 빌베리</h2>
</header>
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법</a></li>
<li><a href="#">예약 하기</a></li>
</ul>
</nav>
<section class="content">
<h2>블루베리 소개</h2>
<article>
<h3>한국에서는 2010년 무렵부터 전북 정읍, 경기도 평택을 중심으로 재배, 생산이 본격화되며</h3>
<p>시력에 좋다는 광고와 함께 블루베리 원액을 파는 곳도 많아졌다. 그러나 이들 중 상당수가 원가 절감과 미각 등을 이유로 포도주스와 섞어 팔아 뉴스에 오르기도 하였다. 것도 그럴것이 블루베리 열매나 그 원액은 단 맛이 약하거나 없고, (종이나 재배 환경에 따라) 떨떠름한 맛까지 나기에 (밑에서도 다루겠지만) 대중적인 호응을 위해선 좋든 싫든 당분[6]을 첨가해야 팔리기에 시판되는 순수 블루베리 원액들 중 단 맛이 나는 것들은 거의 당분을 첨가했다고 볼 수 있다. </p>
<p>서유럽에서는 아주 흔한 과일인데 어느 정도냐면 산에만 가면 발에 채일 수준. 게다가 한국과 정반대로 기후도 다르고 사민주의 정서 때문인지 자연향유권(freedom to roam))[8] 개념이 있어서 자유롭게 숲에서 블루베리를 채취할 수 있다.</p>
<div class="banner">
<img src="images1/banner2.png" width="700"
height="233" alt="블루베리">
</div>
</article>
</section>
<aside class="sidebar">
<h3>알립니다</h3>
<p>맛은 새콤달콤한 편이지만[14] 강렬하지 않고 밍밍하다. 과일사탕 수준의 새콤달콤을 기대하고 있었다면, 입에 넣는순간 어째서 밍밍하다는 것인지 알 수 있다.</p>
<p>맛은 새콤달콤한 편이지만[14] 강렬하지 않고 밍밍하다. 과일사탕 수준의 새콤달콤을 기대하고 있었다면, 입에 넣는순간 어째서 밍밍하다는 것인지 알 수 있다.</p>
<img src="images1/2.jpg" alt="">
<img src="images1/1.jpg" alt="">
<img src="images1/4.jpg" alt="">
</aside>
<footer>
<address>
<p>제주특별자치도 남제주군 성산읍 수신리 199번지 블루베리</p>
<p>blueberry@naver.com</p>
</address>
<p>Copyright. All rights reserved.</p>
</footer>
</div>
</body>
</html>body{
font: 14px "맑은 고딕";
}
.container{
position:relative;
width:960px;
margin:0 auto;
background-color:#fff;
border:1px solid #e7e7e7;
}
header{
position:relative;
height:280px;
background-image:url("../images1/bg.png");
background-repeat:no-repeat;
background-position:left top;
}
header h1{
position:absolute;
right:20px;
bottom:70px;
font-size:3em;
color:#ffc;
text-shadow:1px 2px 2px #000;
}
header h2{
position:absolute;
right:20px;
bottom:30px;
font-size:2em;
color:#ff0;
text-shadow:1px 1px 1px #000;
}
.navi{
position:relative;
background:#271717;
margin-top:-15px;
width:960px;
height:60px;
}
.navi ul{
list-style:none;
height:40px;
padding-top:10px;
padding-bottom:5px;
}
.navi ul li{
display:inline;
float:left;
font-size:15px;
}
.navi a, .navi a:visited{
padding:10px 5px 5px 35px;
display:block;
color:#fff;
width:150px;
text-decoration: none;
}
.navi a:hover, .navi a:active, .navi a:focus{
text-shadow:0px 2px 2px #000;
color:#fc0;
}
.sidebar{
float:right;
width:200px;
/* height:550px; */
background-color:#dfd;
padding-top:20px;
padding-left:10px;
padding-right:10px;
}
.sidebar img{
margin-bottom:5px;
border:1px solid #ccc;
opacity:0.5;
text-align:center;
}
.sidebar img:hover{
border:1px solid #000;
opacity:1.0;
}
.content{
background-color:#ffffff;
padding-top:5px;
padding-left:10px;
width:720px;
float:left;
}
footer{
padding:10px 0;
background-color:#030;
color:#fff;
text-align:center;
clear:both;
}
header, section, footer, aside, article{
display:block;
}
.banner{
margin:0 10px 15px 10px;
padding:0;
}
<실습 – layout.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2단 레이아웃</title>
<style>
div{
border:1px solid #333;
}
#container{
width:960px;
padding:20px;
margin:0 auto; /*좌우의 가운데 위치*/
}
#header{
padding:20px;
margin-bottom:20px;
}
#sidebar{
width:220px;
padding:20px;
float:right;
margin-bottom:20px;
background:#eee;
}
#contents{
width:620px;
padding:20px;
float:left;
margin-bottom:20px;
}
#footer{
clear:both;
padding:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>블루베리(Blueberry)</h1>
</div>
<div id="sidebar">
<h2>사이드 바</h2>
<ul>
<li>Wells delight (웰스딜라이트)</li>
<li>노스랜드 (Northland)</li>
<li>노스블루 (Northblue)</li>
</ul>
</div>
<div id="contents">
<h2>본문</h2>
<p>육성된 품종이 아닌 야생종이며 일반 블루베리처럼 관목성이 아닌 무려 덩쿨성 수세로(creeping)[32] 크랜베리와 비슷한 면이 있다. 잎의 육질은 질기고 두꺼운 편이며 회양목과 비슷한 정도이고 열매의 크기는 매우 작은 소립에 청색이 아닌 흑자색으로 루벨과 비슷하고 꽃의 크기 또한 매우 작다. </p>
<p>성숙기 6월 상순. 당도 13.5% 극조생 품종이며 내한성이 매우 강하다. 크기는 평범하지만 단맛이 강하다보니 오산 공군기지는 블루베리 납품을 노스랜드 품종으로 제한한다.</p>
</div>
<div id="footer">
<h2>푸터</h2>
<p>해당 계열 중 열매의 크기와 맛이 우수해 유명하다. 모 농장주 설명으로는 전정 등을 대충 해도 (물이랑 비료만 적당히 주면) 잘 자란다고 한다.</p>
</div>
</div>
</body>
</html>
<퀴즈 1번>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML5 레이아웃</title>
<style>
body{
font-family:"맑은 고딕", "고딕", "굴림";
}
a:link {
text-decoration:none;
}
nav ul{
list-style-type:none;
margin:0px;
padding:0px;
}
nav ul li{
float: left; /*내비게이션 항목으로 왼쪽부터 차례대로 배치*/
font-size:1.5em;
padding-left:7px;
margin-bottom: 20px;
margin-right: 15px; /*내비게이션 항목의 오른쪽 마진을 15px로 지정*/
border-left-width:5px;
border-left-color:#990066;
border-left-style:solid;
}
section {
clear: left; /*float의 영향을 받지 않도록 clear 속성 사용*/
}
section article {
padding-left:10px;
margin-bottom:10px;
border-top:1px #a6a6a6 dashed;
border-bottom: 1px #a6a6a6 dashed;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어살기</a></li>
</ul>
</nav>
<section id="content">
<h2>강아지 용품 준비하기</h2>
<article>
<h3>강아지 집 </h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</article>
<article>
<h3>강아지 먹이 </h3>
<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
</article>
</section>
<footer>
<p>Copyright 2012 funnycom</p>
</footer>
</body>
</html>
<퀴즈 2번>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 스타일</title>
<style>
table {
border: 1px solid black; /* 표의 테두리 그리기 */
border-collapse: collapse; /* 표와 셀의 테두리 합치기 */
caption-side: bottom; /* 표의 설명 글은 표 아래쪽에 표시*/
}
th, td {
border: 1px solid black; /* 셀의 테두리 그리기 */
padding: 10px;
}
.heading {
background: #eee;
}
</style>
</head>
<body>
<table>
<caption>2015 국민 독서실태</caption>
<col class="heading">
<col>
<col>
<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>
<퀴즈 3번>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML5 레이아웃</title>
<style>
body{
font-family:"맑은 고딕", "고딕", "굴림";
}
#wrapper{
width:800px;
margin: 0 auto;
}
header {
width: 100%;
height: 150px;
background-color: #F46075;
/*헤더에 백그라운드 이미지 지정 - 반복없이 위치는 right center*/
background-image: url(images/nav2.png);
background-repeat: no-repeat;
background-position: right center;
}
header nav {
/* 내비게이션을 아래쪽에 표시하기위해 inline-block 으로 바꿔줌*/
float: left;
width:70%;
margin-top: 50px;
}
nav ul{
list-style-type:none;
}
nav ul li{
/*내비게이션 왼쪽부터 차례로 정렬*/
display: inline;
float: left;
font-weight:bold;
margin: 15px;
}
nav ul li a{
color:white;
text-decoration:none;
}
footer p {
padding:20px;
}
h1{font-size:2em;}
h2{font-size:1.5em;}
h3 {font-size:1.0em;}
p {
line-height:20px;
font-size:12px;
}
section {
/* 강아지 사진이 아래에서 위로 올라오도록 float 속성 사용*/
float: left;
width:580px;
padding:5px;
}
section article{
/*article 왼쪽부터 차례로 정렬*/
float: left;
width:250px;
height:220px;
margin:5px;
padding:10px;
border:1px solid #ccc;
}
aside{
/*강아지 사진 오른쪽에 정렬*/
float: right;
width:200px;
height:auto;
margin-top:80px;
/*테두리 1px 실선 darkgreen*/
border: 2px solid darkgreen;
/*텍스트 가운데 정렬*/
text-align: center;
}
footer{
/*footer부터는 clear로 속성 해제*/
clear: both;
width: 800px;
margin-bottom:0;
background-color:#333;
color:white;
text-align:center;
}
.at1, .at2, .at3, .at4 {
transition:2s;
-webkit-transition:2s;
-moz-transition:2s;
-o-transition:2s;
-ms-transition:2s;
}
.at1:hover{
background-color:#cf9;
border:1px solid green;
}
.at2:hover{
background-color:#a2d0ff;;
border:1px solid blue;
}
.at3:hover{
background-color:#ebcbfe;
border:1px solid purple;
}
.at4:hover{
background-color:#fc3;
border:1px solid red;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어살기</a></li>
</ul>
</nav>
</header>
<section>
<h2>강아지 용품 준비하기</h2>
<article class="at1">
<h3>강아지 집 </h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</article>
<article class="at2">
<h3>강아지 먹이 </h3>
<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
</article>
<article class="at3">
<h3>밥그릇, 물병 </h3>
<p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
</article>
<article class="at4">
<h3>이름표, 목줄</h3>
<p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
</article>
</section>
<aside>
<img src="images/1.png" alt="">
<img src="images/2.png" alt="">
<img src="images/3.png" alt="">
</aside>
<footer>
<p>Copyright 2012 funnycom</p>
</footer>
</div>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글
| [CSS] 05-2 다단으로 편집하기 (0) | 2021.09.05 |
|---|---|
| [CSS] 05-1 CSS 포지셔닝과 주요 속성들 (0) | 2021.09.05 |
| [CSS] 04-3 여백을 조절하는 속성들 (0) | 2021.09.05 |
| [CSS] 04-2 테두리 관련 속성들 (0) | 2021.09.05 |
| [CSS] 04-1 CSS와 박스 모델 (0) | 2021.09.05 |
댓글