네이버 기사 css로 만들어보자~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css 사용법</title>
<style type="text/css">
/* 기사 한줄 */
.item
{
margin-bottom:11px;
}
/* 기사 제목 */
.title
{
font-size:14px;
font-family:돋움;
font-weight:bold;
color:#444444;
letter-spacing:-3px;
}
/* 시간 편집 */
.time
{
font-size:10px;
color:#888888;
padding-left:10px;
}
.group
{
margin-bottom:35px;
}
</style>
</head>
<body>
<div id="list">
<div class="group">
<div class="item"><span class="title">노회찬 "누구도 박근혜에 대적 안된다"</span>
<span class="time">04-20 12:14 편집</span></div>
<div class="item"><span class="title">문대성 국민대 협박 “좌시하지 않겠다”</span>
<span class="time">04-20 12:16 편집</span></div>
<div class="item"><span class="title">"北전역 정밀타격.." 軍 이례적행보 알고보니</span>
<span class="time">04-20 14:05 편집</span></div>
<div class="item"><span class="title">잠적 '김구라' 그렇게 아들 걱정했는데 결국</span>
<span class="time">04-20 14:07 편집</span></div>
<div class="item"><span class="title">이재용이 움직인다… 삼성에서 지금 무슨 일이</span>
<span class="time">04-20 11:45 편집</span></div>
</div>
</div>
<div id="Div1">
<div class="group">
<div class="item"><span class="title">노회찬 "누구도 박근혜에 대적 안된다"</span>
<span class="time">04-20 12:14 편집</span></div>
<div class="item"><span class="title">문대성 국민대 협박 “좌시하지 않겠다”</span>
<span class="time">04-20 12:16 편집</span></div>
<div class="item"><span class="title">"北전역 정밀타격.." 軍 이례적행보 알고보니</span>
<span class="time">04-20 14:05 편집</span></div>
<div class="item"><span class="title">잠적 '김구라' 그렇게 아들 걱정했는데 결국</span>
<span class="time">04-20 14:07 편집</span></div>
<div class="item"><span class="title">이재용이 움직인다… 삼성에서 지금 무슨 일이</span>
<span class="time">04-20 11:45 편집</span></div>
</div>
</div>
<div id="Div2">
<div class="group">
<div class="item"><span class="title">노회찬 "누구도 박근혜에 대적 안된다"</span>
<span class="time">04-20 12:14 편집</span></div>
<div class="item"><span class="title">문대성 국민대 협박 “좌시하지 않겠다”</span>
<span class="time">04-20 12:16 편집</span></div>
<div class="item"><span class="title">"北전역 정밀타격.." 軍 이례적행보 알고보니</span>
<span class="time">04-20 14:05 편집</span></div>
<div class="item"><span class="title">잠적 '김구라' 그렇게 아들 걱정했는데 결국</span>
<span class="time">04-20 14:07 편집</span></div>
<div class="item"><span class="title">이재용이 움직인다… 삼성에서 지금 무슨 일이</span>
<span class="time">04-20 11:45 편집</span></div>
</div>
</div>
<div id="Div3">
<div class="group">
<div class="item"><span class="title">노회찬 "누구도 박근혜에 대적 안된다"</span>
<span class="time">04-20 12:14 편집</span></div>
<div class="item"><span class="title">문대성 국민대 협박 “좌시하지 않겠다”</span>
<span class="time">04-20 12:16 편집</span></div>
<div class="item"><span class="title">"北전역 정밀타격.." 軍 이례적행보 알고보니</span>
<span class="time">04-20 14:05 편집</span></div>
<div class="item"><span class="title">잠적 '김구라' 그렇게 아들 걱정했는데 결국</span>
<span class="time">04-20 14:07 편집</span></div>
<div class="item"><span class="title">이재용이 움직인다… 삼성에서 지금 무슨 일이</span>
<span class="time">04-20 11:45 편집</span></div>
</div>
</div>
</body>
</html>
네이버 블로그중 하나를 선택해서 css로 똑같이 만들어보자~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>블로그</title>
<style type="text/css">
/* 포스트 */
.post
{
width:95%;
/* 블럭요소를 가운데 정렬 하는 기능 블럭 요소 자체는 text-align의 대상이 안된다.
auto를 주면 가운데로 나누어 준다.
블럭 요소를 수평정렬 할때 margin으로 이용하도록 한다.
*/
margin:0px auto;
}
/* 포스트 헤더 */
.postHeader
{
margin-bottom:50px;
}
/*
포스트 제목
float : left, right
현재 객체를 현재라인의 오른쪽이나 왼쪽으로 배치하는 속성(인라인처럼 한줄로 쓸때 하기위해 존재한다.)
*/
.postTitle
{
color:lightgreen;
font-weight:bold;
font-size:12px;
font-family:굴림;
float:left;
margin-bottom:10px;
}
/* 카테고리 */
.postCategory
{
font-size:11px;
font-family:돋움;
color:#888888;
float:left;
}
/* 시간 */
.postTime
{
font-size:10px;
color:#999999;
float:right;
}
.postHeader hr
{
/* clear:both 나는 더이상 float에 맞춰 따라가지 않겠다. */
clear:both;
border:0px;
border-top:1px dotted lightgray;
margin-bottom:10px;
}
/* uid */
.postUID
{
font-size:10px;
color:#999999;
text-align:right;
}
/* 본문 */
.postContent
{
text-align:center;
}
/* 본문 텍스트 */
.postContentText
{
font-size:12px;
color:#888888;
line-height:280%;
}
/* 본문 이미지 */
.postContentImage
{
margin:50px 0px;
}
/* 태그 */
.postTag
{
font-size:11px;
color:#888888;
margin-bottom:20px;
}
/* 하단좌측메뉴 */
.postFooterLeft
{
font-size:11px;
color:#888888;
font-weight:bold;
font-family:돋움;s
}
</style>
</head>
<body>
<!--1차모델링 작업-->
<div class="post">
<div class="postHeader">
<div class="postTitle"> ♡。만원도 안들여 만든 저렴이 옷걸이! 그러나 있어보인다는 점~~!! ♥。</div>
<div class="postCategory"> | 소 품 / ♡。가구 ÐIY</div>
<div class="postTime">2012/04/20 10:14</div>
<hr />
<div class="postUID">http://blog.naver.com/mey2323/150136810864</div>
</div>
<div class="postContent">
<div class="postContentText">가구만들기, 옷걸이 만들기, 셀프인테리어, diy</div>
<div class="postContentImage"><img src="Css/images/01.jpg" /></div>
<div class="postContentText">
구~~~웃~~~~모닝!!! ^-^<br />
즐거운 금요일 아침입니다 ㅎㅎㅎ<br />
막상 주말보단 주말을 기다리는 요 시간이 참 즐거운거 같아요~<br />
전 내일 홈클래스가 있어서 더 즐거운 ㅋㅋㅋ
</div>
<div class="postContentImage"><img src="Css/images/02.jpg" /></div>
</div>
<div class="postFooter">
<div class="postTag"><img src="Css/images/tag.gif" /></div>
<div class="postFooterLeft">덧글 57 엮인글 공감 19</div>
</div>
</div>
</body>
</html>
