[웹1]
10강 - 복습
div레이아웃 - ex2.html
주석 : <!-- 내용 -->
<span> : 태그해도 안해도 상관 무, 보여주기용
0은 단위 생략가능 (ex. margin:0)
float : div 좌우 및 상하 배치
clear:both : 밑으로 정리되게 하라 (footer div에 주로 사용)
img alt="텍스트" : 이미지주소가 잘 못 됐을 경우 나오는 텍스트
* 예제2
<head>
<title>레이아웃2</title>
<style type="text/css">
body{
font-family:"맑은 고딕", "돋움";
margin:0;
}
#container{
width:696px;
margin:0 auto; ---> margin 값설정에서 0은 단위가 생략 가능하다.
}
#container h1{
font-size:30px;
color:#333; ---> color HEX단위는 숫자나 알파벳이 중복될 경우 1자릿수로 생략이 가능하다. (ex. #663355 -> #635)
border-bottom:5px solid #600; ---> 테두리 중 하단테두리 : 굵기 5px / 일직선으로 설정 solid / 색깔 #660000
}
.contents{
width:210px;
height:470px;
border:1px dotted #600; ---> 상하좌우 4곳의 테두리 모두 dotted 점선으로 표시
padding:5px; ---> 내부여백 5px (외부여백은 margin이며, 블럭엘리먼트에만 사용, text-align은 좌우정렬만 가능, 인라인엘리먼트에만 사용)
float:left;
margin-bottom:10px;
}
.contents:hover{ ---> 마우스를 올린 상태 (마우스로 누른 상태 : .contents:active) (중복주기 태그명:hover 태그명:active)
background-color:#FFC;
border-color:#00F;
}
.contents h2{
font-size:24px;
color:#600;
font-family:Verdana, Geneva, sans-serif; ---> 순서대로 폰트적용, 기본체(마지막) serif(모서리뾰족,인쇄용) / sans-serif(모서리둥글, 웹용)
}
.contents p{
font-size:12px;
line-height:18px; ---> 줄간격 (div height와 크기가 동일하다면 세로 중간정렬 효과남. but 여기선 중간정렬효과 안냄)
}
#footer{
clear:both; ---> footer div의 필수 태그, 양쪽흐름을 해제하여 div가 밑으로 빠질수 있게 해줌.
background-color:#036;
text-align:center; ---> 인라인엘리먼트의 좌우 중간정렬 태그
color:#FFF;
font-size:14px;
padding-top:15px; ---> 내부여백으로 세로 중간정렬 효과 냄
padding-bottom:15px; ---> 내부여백으로 세로 중간정렬 효과 냄
}
#arabica{
margin-left:15px; ---> 블럭엘리먼트의 외부여백 설정 태그
margin-right:15px; margin:0px 15px과 동일하지 않으므로, margin태그로 설정 불가능하다.
}
.highlight{
font-size:14px;
font-weight:bold; ---> 폰트 굵기 두껍게
color:#900;
background-color:#FFC;
}
.imgbox{
text-align:center; ---> 인라인엘리먼트 좌우 가운데정렬 태그
}
</style>
</head>
<body>
<div id="container">
<h1>커피 원두의 종류</h1>
<!-- 리베리카 -->
<div class="contents">
<h2>Coffe Liberica</h2>
<div class="imgbox">
<img src="images/Liberica.png" alt="" width="150" />
</div>
<p><span class="highlight">리베리카종(Liberica)</span>은 열대아프라 라이베리아가 원산지입니다. 로부스타 커피나무보다 크고 높이가 15m에 달하며 열매도 크고 저지대에서 지배하기 적당하나 병충해에 약하고 품질도 떨어져서 산지에서 약간 소비될 뿐 거의 수출되고 있지 않습니다. 리바리카종은 아라비카종보다는 향미가 떨어지고 쓴맛이 지나치게 강한편이라 지금은 거의 사라진 상태입니다. </p>
</div>
<!-- 아라비카 -->
<div class="contents" id="arabica">
<h2>Coffee Arabica</h2>
<div class="imgbox">
<img src="images/Arabica.png" alt="" />
</div>
<p>광고를 통해 우리에게 더 친숙한 <span class="highlight">아라비카종(Arabica)</span>은 세계 커피 생산량의 60~70%를 차지하는 대표적인 커피품종입니다. 원산지는 광고에서 본 것처럼 에티오피아고,주로 800m~2000m이상의 열대 고지대에서 재배되며 적정 강수량은 1,500m~2,000m라고 합니다.향미가 아주 우수하고 신맛이 좋은 것으로 알려져있으며 카페인 함량이 낮은 편입니다.</p>
</div>
<!-- 로부스타 -->
<div class="contents">
<h2>Coffee Robusta</h2>
<div class="imgbox">
<img src="images/Robusta.png" alt="" />
</div>
<p><span class="highlight">로부스타종(Robusta)</span>은 코페아 카네포라의 대표품종으로 세계 커피 생산량의 30~40%를 차지합니다. 원래 코페아 카네포라의 대표품종인데, 로부스타란 이름이 널리 알려저 카네포라와 같은 의미로 쓰입니다. 주로 700m이하의 고온다습한 지역에서 재배되며 적정 강수량은 2,000~3,000m입니다. 아라비카에 비해 카페인 함량이 많고 쓴맛이 강하고 향이부족하지만 경제적 이점이라는 장점으로 인스턴트 커피의 주 원료로 사용한다고 합니다. </p>
</div>
<!-- 하단 -->
<div id="footer">
<span>유명하고 비싼 커피보다 신선한 커피가 맛있습니다. </span> ---> 인라인엘리먼트, 텍스트에 사용, 기능은 없다. 보여주기용
</div>
</div>
</body>
</html>
댓글