[6주][5일][1~2th] HTML/CSS: 실습 해보기

용어 정리

* [-webkit-] : 크롬에서 적용

display: -webkit-box; 글자를 박스형태로 만들어줌

-webkit-box-align:center; 박스에서 가운데정렬(세로)

-webkit-box-pack: center; 박스에서 가운데정렬(가로)

-webkit-column-count: 3; //열 나누는 칸
-webkit-column-gap: 100px; //여백
-webkit-column-rule: 1px solid #ccc; //여백 사이에 선 그어주기

 

 

☆ 실습(1) : 그림과 같이 만들기(3개의 파일을 연결)

 - 아래와 같은 html 파일을 css를 연결하는 태그를 사용하여 "photoBox.css" 를 작성하고

 

요렇~게 만들어보자!

HTML파일은 3개고, CSS파일은 1개다.

 

 

1.photoBox.css

body{
 background: #ccc;
 font-family: "맑은 고딕";
 font-size:14px;
 font-weight: bold;
}
*{
 margin:0px;
 padding:0px; 
}
h1{
 font-size:45px;
 font-style:italic;
 color:#fff;
 text-shadow: 0 0 10px #666;
 text-align:center;
}
#photoBox{
 margin: 0 auto;
 width: 330px;
 
 position:relative;
 
}
#tabNavi{
 float:right;
 margin-top:30px;
 list-style-type: none;
 position:relative;
 margin-right:30px;
}
#tabNavi li{
 float: left;
}
#tabNavi li a{
 box-shadow: -1px -1px 2px #000;
 width:50px;
 text-align:center;
 text-decoration: none;
 color: #000;
 background: #ff0;
 display:block;
 padding: 6px 15px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
}
#tabNavi li a:hover{
 color:#fff;
 background-color:#f00;
}
#photo{
 padding: 10px auto;
 clear:both;
 position:relative;
 border-radius:10px;
 border: 5px solid #ff6633;
 background:#fff;
 margin: 50px 0;
}
#photo img{
 margin: 0 auto;
 padding-right: 0 20px;
}
#tabNavi li.activeS a{
 background: #f63;
}

 

2. HTML 소스 - li 안의 링크가 같은 css를 연결시켜준다!

 -- unit03_01.html --

헤드

<link href="photoBox.css" rel="stylesheet" type="text/css">

바디

<h1>Gold Line Clutch Bag</h1>
  <div id="photoBox">
   <ul id="tabNavi">
    <li class="activeS"><a href="unit03_01.html">Pink</a></li>
    <li><a href="unit03_02.html">White</a></li>
    <li><a href="unit03_03.html">Navi</a></li>
   </ul>
   <div id="photo">
     <img src="images/bag_hotpink.png" width="300" height="300" alt="Hot Pink"/>
   </div>
  </div>

 

 -- unit03_02.html --

바디

<h1>Gold Line Clutch Bag</h1>
  <div id="photoBox">
   <ul id="tabNavi">
    <li><a href="unit03_01.html">Pink</a></li>
    <li class="activeS"><a href="unit03_02.html">White</a></li>
    <li><a href="unit03_03.html">Navi</a></li>
   </ul>
   <div id="photo">
     <img src="images/bag_white.png" width="300" height="300" alt="White" />
   </div>
  </div>

 

 -- unit03_03.html --

바디

<h1>Gold Line Clutch Bag</h1>
  <div id="photoBox">
   <ul id="tabNavi">
    <li><a href="unit03_01.html">Pink</a></li>
    <li><a href="unit03_02.html">White</a></li>
    <li class="activeS"><a href="unit03_03.html">Navi</a></li>
   </ul>
   <div id="photo">
     <img src="images/bag_navy.png" width="300" height="300" alt="Navy" />
   </div>
  </div>

 

참 쉽죠잉~?

 

 

☆ 실습(2) : 간편하게 열 나누기

CSS

#bookPart{
   -webkit-column-count: 3; //열 나누는 칸
   -webkit-column-gap: 100px; //여백
   -webkit-column-rule: 1px solid #ccc; //여백 사이에 선 그어주기
  }

 

 

결과