<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 배경관련 속성</title>
<link rel="stylesheet" href="../css/normalize.css">
<style>
#box1 {background-color: red}
#box2 {background-color: #0000ff}
#box3 {background-color: rgb(0,0,255, 0.5) }
#box4, #box5, #box6,
#box7, #box8, #box9,
#box10, #box11,#box12, #box13, #box15
{width:450px; height:200px; background-image: url("../img/plane.png") }
#box6 {background-color: blanchedalmond; background-repeat: no-repeat }
#box7 {background-color: greenyellow; background-repeat: repeat-x }
#box8 {background-color: greenyellow; background-repeat: repeat-y }
#box9 {background-color: gainsboro; background-repeat: no-repeat;
background-size: 300px 200px}
/*cover: width, height 중 큰 값을 기준으로 배경이미지를 최대로 키워 화면에 표시 */
#box10 {background-color: gold; background-repeat: no-repeat;
background-size: cover}
/*contain: 배경이미지의 비율을 유지하면서 지정한 영역에 이미지 전체가 표시 */
#box11 {background-color: lightpink; background-repeat: no-repeat;
background-size: contain}
#box12 {background-color: ivory; background-repeat: no-repeat;
background-size: contain; background-position: 100px 30px }
#box13 {background-color: powderblue; background-repeat: no-repeat;
background-size: contain; background-position: center } /*문서에 이미지*/
body {background-image: url("../img/rubber-duck.png");
background-repeat: no-repeat;
background-size: 512px 512px;
background-position: center;
background-attachment: fixed }
#box14 {width:450px; height:200px;
background:chartreuse
url("../img/rubber-duck.png")
no-repeat center; background-size: contain }
#box15, #box16, #box17 {width: 45px; height: 43px;
/*border: 1px solid blue;*/
background:url(../img/img_navsprites.gif);
margin-bottom:100px}
#box15:hover {background: url("../img/img_navsprites.gif") 0px 44px}
#box16 {width:43px; background-position: 43px 0 }
#box16:hover {background: url("../img/img_navsprites.gif") 43px 44px }
#box17 {width:43px; background-position: 87px 0}
#box17:hover {background: url("../img/img_navsprites.gif") 87px 44px }
</style>
</head>
<body>
<h1>CSS background 속성 </h1>
<h2>outline</h2>
<p>해당요소의 배경으로 색상 또는 이미지를 지정할 수 있음</p>
<h2>색상지정</h2>
<p>background-color 속성으로 요소의 배경색을 지정</p>
<div id="box1"> </div>
<div id="box2"> </div>
<div id="box3"> </div>
<h2>배경이미지 지정</h2>
<p>background-image 속성으로 요소의 이미지를 지정</p>
<p>이미지의 크기가 요소의 크기보다 작으면 반복됨</p>
<div id="box4">sdsdsdasdgerwgvr</div>
<h2>배경이미지 반복설정</h2>
<p>background-repeat 속성으로 배경이미지와 반복여부 설정</p>
<div id="box5"> </div>
<div id="box6"> </div>
<div id="box7"> </div>
<h2>배경이미지 크기 지정</h2>
<p>background-size 속성으로 배경이미지의 크기를 설정</p>
<p>단, 배경이미지를 지나치게 키우면 이미지의 가장자리가 계단처럼 깨짐
-배경이미지가 bitmap인 경우 </p>
<p>이미지 계단현상 줄이는 기능 anti-aliasing </p>
<div id="box8">hhhhhhhh</div>
<div id="box9"> </div>
<div id="box10"> </div>
<div id="box11"> </div>
<h2>배경이미지 위치 지정</h2>
<p>background-position 속성으로 배경이미지의 위치를 설정</p>
<div id="box12"> </div>
<div id="box13"> </div>
<h2>배경이미지 스크롤 고정 </h2>
<p>background-attachment 속성으로 화면스크롤시 배경이미지를 고정시킬 수 있음</p>
<h2>축약</h2>
<p>background 속성을 축약해서 설정할 수 있음</p>
<p>설정순서는 color, image, repeat, attachment, position 임</p>
<div id="box14"> </div>
<h2>스프라이트 sprite</h2>
<p>스프라이트란 여러개의 개별이미지를 하나의 이미지에 합쳐서 관리하는 이미지를 의미</p>
<p>웹페이지에 이미지를 사용하는 경우 해당 이미지를 다운로드하여 화면에 표시하기 위해 서버에 요청함</p>
<p>사용하는 이미지가 많을수록 서버에 요청하는 횟수 증가
=> 웹페이지 로딩시간 증가 </p>
<p>따라서, 스프라이트를 사용하면 서버에 이미지 요청횟수를 단 몇번으로 줄일 수 있음</p>
<p>또한 다량의 이미지파일 관리의 용이성도 있음음</p>
<div id="box15"> </div>
<div id="box16"> </div>
<div id="box17"> </div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 테이블 관련 속성</title>
<link rel="stylesheet" href="../css/normalize.css">
<style>
table {width: 50%; border: 1px solid black;
/*border-spacing: 10px; 테두리간 간격*/
border-collapse: collapse /*테두리 하나로 합침*/ }
th,td {border: 1px solid black; padding: 10px;
text-align: center }
#tb2 {width: 300px; table-layout: fixed }
#tb2 td:first-child{width:30%}
#tb2 td {overflow: hidden; text-overflow: ellipsis}
#tb3 {width:500px; height: 300px }
#tb3 tr:first-child td{vertical-align: top}
#tb3 tr:nth-child(2) td{vertical-align: bottom}
#tb3 tr:last-child td:first-child{text-align: right}
#tb3 tr:last-child td:nth-child(2){text-align: left}
#tb3 tr:last-child td:last-child{text-align: left}
/* display : table - 블록요소를 테이블처럼 보이게 함 */
/* display : table-row - 블록요소를 테이블 행처럼 보이게 함 */
/* display : table-cell - 블록요소를 테이블 셀처럼 보이게 함 */
#tb4 {width: 50%; height: 60px;
border: 1px solid black; display: table;
border-collapse: collapse}
#tb4 .tr {display: table-row;}
#tb4 .th, #tb4 .td {border:1px solid black;
display: table-cell; padding: 10px}
#tb4. th {font-weight: bold; text-align: center}
#tb4. td { text-align: center}
#tb5 {border-top: 3px solid black;
border-bottom: 3px solid black;}
#tb5, #tb5 th, #tb5 td{
border-left:none;
border-right: none;
padding: 15px}
#tb5 tr:nth-child(odd) {background: ivory}
#tb5 tr:nth-child(even) {background: cornsilk}
#tb5 tr:hover{background: gainsboro}
</style>
</head>
<body>
<h1>CSS 테이블 관련 속성</h1>
<h2>개요</h2>
<p>데이터를 2차원의 표 형태로 나타냄</p>
<p>테이블 관련 속성으로 다양한 형태의 표를 만들 수 있음</p>
<h2>border</h2>
<p>테이블의 테두리를 나타내는데 사용</p>
<p>border-collapse 속성으로 테이블의 테두리를 어떻게 표현할지 설정</p>
<p>border-spacing 속성으로 테이블의 테두리 간격 설정</p>
<table class="tb1">
<tr><th>이름</th><th>국어</th><th>영어</th><th>수학</th></tr>
<tr><td>혜교</td><td>99</td><td>98</td><td>99</td></tr>
<tr><td>지현</td><td>54</td><td>77</td><td>87</td></tr>
<tr><td>수지</td><td>78</td><td>45</td><td>32</td></tr>
</table>
<h2>테이블 레이아웃</h2>
<p>테이블의 내용에 따라 테이블의 크기를 어떻게 나타낼 것인지 결정 </p>
<p> 셀의 크기보다 많은 내용을 포함시키면 테이블 크기 늘어남 </p>
<p>이러한 상황 방지하려면 table-layout:fixed 속성 사용 </p>
<p>테이블 크기를 고정시켰을때 넘쳐나는 내용은 overflow속성들로 적절히 처리 가능</p>
<table id="tb2">
<tr><td>내용</td>
<td>1234567890123456789012345678901234567890 </td>
</tr>
</table>
<h2>테이블 내용의 수직정렬</h2>
<p>테이블 내용을 위, 아래, 가운데로 정렬하고 싶으면
virtical-align 속성 사용 </p>
<table id="tb3">
<tr><td>123456789 </td><td>123456789 </td><td>123456789 </td></tr>
<tr><td>123456789 </td><td>123456789 </td><td>123456789 </td></tr>
<tr><td>123456789 </td><td>123456789 </td><td>123456789 </td></tr>
</table>
<h2>display 속성으로 테이블 표현하기</h2>
<p>display 속성은 일반적으로 인라인 요소나 블럭요소로
변환해서 화면에 출력하는데 사용</p>
<p>하지만, display 속성에 table을 지정하면 블록요소가 테이블의 성질을 가지게 할 수 있음</p>
<div id="tb4">
<div class="tr">
<div class="th">이름</div>
<div class="th">국어</div>
<div class="th">영어</div>
<div class="th">수학</div>
</div>
<div class="tr">
<div class="td">혜교</div>
<div class="td">99</div>
<div class="td">98</div>
<div class="td">99</div>
</div>
</div>
<h2>테이블 세련되게 만들기</h2>
<p>테이블의 짝수행과 홀수행의 배경색을 다르게 지정 - 얼룩말, 스트라이트 무늬</p>
<p>hover 클래스 선택자를 이용해서 현재 행에 배경색을 다르게 지정할 수 있음 </p>
<p> 테이블 테두리도 행기준 아래쪽에만 표시하도록 함 </p>
<table id="tb5">
<tr><th>이름</th><th>국어</th><th>영어</th><th>수학</th></tr>
<tr><td>혜교</td><td>99</td><td>98</td><td>99</td></tr>
<tr><td>지현</td><td>54</td><td>77</td><td>87</td></tr>
<tr><td>수지</td><td>78</td><td>45</td><td>32</td></tr>
<tr><td>혜교</td><td>99</td><td>98</td><td>99</td></tr>
<tr><td>지현</td><td>54</td><td>77</td><td>87</td></tr>
<tr><td>수지</td><td>78</td><td>45</td><td>32</td></tr>
<tr><td>혜교</td><td>99</td><td>98</td><td>99</td></tr>
<tr><td>지현</td><td>54</td><td>77</td><td>87</td></tr>
<tr><td>수지</td><td>78</td><td>45</td><td>32</td></tr>
</table>
</body>
</html>
