[웹1]
11강 - 복습
CSS 주석 : */ 내용 */
HTML 주석 : <!-- 내용 -->
* 예제3
<head>
<title>레이아웃3</title>
<style type="text/css">
body{
font-family:"맑은 고딕", "고딕", "굴림"; ---> 한글은 ""
}
#container{
width:80%;
margin:0 auto; ---> 0은 단위 생략 가능
min-width:750px;
}
#header{
padding:10px;
background-color:#069;
overflow:hidden; ---> 반응형웹에서 주로사용, div에 있는 text가 빠져나올 때 빠져나온 text를 감추는 방법.
}
#logo{
float:left; ---> 왼쪽 배정
}
#logo h1{
color:white;
}
#navi{
float:right; ---> ul 박스 오른쪽 정렬
width:60%; ---> div width크기에서 60% 크기 차지.
list-style:none; ---> #navi가 소속된 ul의 기본 스타일 없애기.
}
#navi li{
float:left; ---> ul 글 모두 왼쪽 정렬 (ul 크기60%, 오른쪽정렬 = li 왼쪽으로부터 40% 위치에서 시작)
margin:15px;
}
#navi a{
color:white;
text-decoration:none; ---> a태그의 기본 스타일인 밑줄과 색상 없애기
}
/* 컨텐츠 */ ---> CSS의 주석 (HTML 주석 = <!--주석내용-->)
#contents{
border:5px solid #333;
padding:5px;
}
#contents ul{
list-style:square; ---> ul의 기본 스타일인 가운데 점이 아닌 square(사각형)으로 표시.
}
#contents ol{
list-style:lower-alpha; ---> ul의 기본 스타일인 가운데 점이 아닌 lower-alpha로 표시(lower가 뭔표시인지모르겠다)
}
.boldtext{
font-weight:bold;
}
#footer{
background-color:#333333;
padding:10px;
text-align:center; ---> 인라인엘리먼트의 좌우 가운데정렬
color:white;
font-size:14px;
}
</style>
</head>
<body>
<div id="container">
<!-- 상단 --> ---> HTML 주석
<div id="header">
<div id="logo">
<h1>건강돌보기</h1>
</div>
<ul id="navi">
<li><a href="#">애완견종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어살기</a></li>
</ul>
</div>
<!-- 컨텐츠 -->
<div id="contents">
<h2>검사와 접종</h2>
<ul>
<li>예방접종</li>
<li>종합검진</li>
<li>스케일링</li>
<li>중성화수술</li>
</ul>
<h2>예방접종</h2>
<ol>
<li>종합백신(DHPPL), 코로나장염</li>
<li>종합백신(DHPPL), 코로나장염</li>
<li>종합백신(DHPPL), 켄넬코프</li>
<li>종합백신(DHPPL), 켄넬코프</li>
<li>종합백신(DHPPL), 광견병</li>
<li>코로나 장염</li>
<li>켄넬코프</li>
<li>광견병</li>
</ol>
<p>
<span class="boldtext">종합백신(DHPPL) :</span> 다섯가지 질병에 대한 예방 접종<br />
<span class="boldtext">코로나장염 :</span> 코로나 바이러스성 장염을 예방하는 백신<br />
<span class="boldtext">켄넬코프 :</span> 켄넬코프 감기 예방 접종
</p>
<p>
태어난 첫 해에는 6~8주 후부터 2주 간격으로 <span class="boldtext">총 5회 접종</span>을 하고 그 다음부터는 1년에 한번씩 접종하면 된다.
</p>
<h2>애완견에 해로운 음식</h2>
<dl>
<dt>닭뼈</dt>
<dd>닭뼈는 개의 이빨로 깨물수 없고 닭뼈를 그대로 삼키면 목이나 위를 찌를 수 있다</dd>
<dt>차가운 우유</dt>
<dd>강아지는 몸이 미숙하여 설사의 원인이 될 수있다</dd>
<dt>양파</dt>
<dd>개의 혈액에 한해 강한 독성을 가지고 있어 적혈구를 녹인다. 심하면 급성 빈혈로 목숨이 위태로울 수 있다. 파 종류는 모두 안좋다.</dd>
</dl>
</div>
<div id="footer">
<p>Copyright 2012 funnycom</p>
</div>
</div>
</body>
</html>
예제4
class 다중입력(box, marginbox 2개) : <div class="box marginbox">
외부 CSS 연결 : <link href="ex4.css" rel="stylesheet" type="text/css" />
* 예제4 - HTML
<head>
<title>레이아웃4</title>
<link href="ex4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<ul id="navi">
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어살기</a></li>
</ul>
</div>
<!-- 컨텐츠 -->
<div id="contents">
<h2>애완견 종류</h2>
<!-- box1 -->
<div class="box">
<h3>활달한 강아지</h3>
<dl>
<dt>요크셔 테리어</dt>
<dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고
우리나라 최고의 가정견으로 자리 잡고 있다.</dd>
<dt>말티즈</dt>
<dd>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</dd>
<dt>포메 라이언</dt>
<dd>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다. </dd>
<dt>골든 리트리버</dt>
<dd>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는 실내에서도 많이 길러지고 있다.</dd>
</dl>
</div>
<!-- box2 -->
<div class="box marginbox">
<h3>온순한강아지</h3>
<dl>
<dt>쉬즈</dt>
<dd>얼굴에서 풍기는 모습처럼 온순, 쉽게 친숙해지고 우호적이며,어린아이나 여성들이 기르기에 적합한 견종이다.</dd>
<dt>퍼그매우</dt>
<dd>사려가 깊고 사랑스러운 견종이며 그다지 손질이 필요하지 않고 식사량에 비해많은 운동량이 필요하지 않다.</dd>
<dt>래브라도 리트리버</dt>
<dd>침착하고 영리하여 어린이들을 안심하고 맡길 수 있다. 사람을 즐겁게 해주려는성질이 있다 공을 가지고 노는 것을 가장 좋아한다.
현재 맹인 안내견과 마약견으로 사용중이다. 온순한 강아지를 좋아하는 분에게는 적합한 견종이다.</dd>
</dl>
</div>
<!-- box3 -->
<div class="box">
<h3>사납지만 복종적인 강아지</h3>
<dl>
<dt>미니어쳐핀셔</dt>
<dd>경계심이 강하고 영리하며 작은 몸집에 비해 매우 용감하다. 주인에게 매우 복종적이며 작은 몸집에 보디가드 역할을 충실히 수행한다.</dd>
<dt>푸들</dt>
<dd>사납진 않으나, 상당히 복종적이며,지능지수가 애완견종 중 가장 뛰어나다.</dd>
<dt>폭스테리어</dt>
<dd>가정에서 키우기에 적합한 품종이다. 보호본능이 강하고 정이 많다. 하지만 사냥을 하던 본능이 조금은 남아있어 사나운 면이 있다.
이종을 좋은 품종으로 기르기 위해서는 어릴 때부터 엄한 훈련이 필요하기도 하다.</dd>
</dl>
</div>
<!-- 컨텐츠 하단 -->
<div id="conFooter">
<h3>건강한 강아지는</h3>
<ul>
<li>코가 젖어있고 눈꼽이 없어야 합니다.</li>
<li>털에 윤기가 있는 것을 골라야 합니다.</li>
<li>입에서 고약한 냄새가 나면 병이 있다는 증거입니다.</li>
<li>가장 활발하게 움직이는 녀석을 고르는게 좋습니다.</li>
<li>강아지들 중에서 적당한 체구를 유지한 강아지가 좋습니다.</li>
</ul>
</div>
</div>
<div id="footer">
Copyright 2012 funnycom
</div>
</div>
</body>
</html>
* 예제4 - CSS
/* CSS Document */
body{
font-family:"맑은 고딕", "고딕", "굴림"; ---> 한글은 ""
}
#container{
width:80%;
margin:0 auto;
min-width:700px; ---> 반응형웹에서 주로사용, 반응형으로 크기가 줄어드는 최소값
(세로는 자동으로 최소값 설정 됨?) min-height태그도 있으나 특별하지 않는한 설정은 안해준다.
}
/* 헤더 */
#header{
background-color:#069;
height:60px;
}
#navi{
float:right;
width:60%;
list-style:none;
}
#navi li{
float:left;
margin:10px;
}
#navi a{
color:#FFF;
text-decoration:none; ---> a태그의 기본 스타일 없애기
}
/* 컨텐츠 */
#contents{
border:5px solid #333;
padding:5px;
}
.box{
width:30%;
height:650px;
border:1px dotted #333; ---> dotted로 점선으로 표시됨.
float:left;
font-size:14px;
padding:5px;
margin-bottom:10px;
}
.box dd{
line-height:20px; ---> 줄간격
}
.marginbox{
margin-left:10px;
margin-right:10px;
}
#contents h3{
background-image:url(bg.png);
background-repeat:no-repeat; ---> 배경화면 이미지 반복없음
padding-left:30px;
}
/* 하단컨텐츠 */
#conFooter{
background-color:#99cc33;
clear:both;
padding:5px;
}
/* 하단 */
#footer{
background-color:#333;
text-align:center;
padding:10px;
color:#FFF;
font-size:14px;
}
댓글