시소당
CSS 응용
이제 문법도 아셨고, 여러가지 CSS 소스도 옆에 두셨으니 간단한 예제로 CSS 기초 배우시는걸 마무리 지으실수 있겠네요. ^^
XHTML 에서 이야기 하지만 구조적인 생각을 기르기 위해서 일단 아이디어 부터 잡아 보겠습니다. 그리고 그 후에 CSS 로 그것을 꾸미는것으로 예제를 들어보겠습니다. 자 숨을 크게 들이쉬고 들어가 봅시다.
<div id="wrap">
<div id="header"><h1>ILMOL'S BLOG</h1></div>
<div id="sidebar">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
<div id="content">
<div class="subject"><h2>title</h2><h3>date</h3></div>
<div class="writing">
<p>Hello my name is sem kim nice to meet you</p>
</div>
</div>
</div>
- 맨 처음의 wrap 으로 이름한 div는 모든걸 감싼다는 뜻으로 썼습니다. 모든 페이지를 감싸도록 만들었습니다.
- 빨간 부분은 이름을 header 라고 주었습니다. 어느곳을 가던지 헤더는 딱 한번밖에 없으니 id 로 정했죠.
- 메뉴부분도 id=sidebar 로 정했구요.
- 그리고 리스트 로 메뉴를 넣었습니다. 메뉴같은부분이 바로 리스트죠 그래서 정렬할 필요가 없는 <ul> 을 썼습니다. 정렬이 필요했다면 <ol> 을 썼었겠죠. 그리고<li> 리스트를 넣었습니다.
- 본문 부분은 content 라고 정했고, 그 안에 두 부분으로 나누었습니다.
- title 과 date 이 들어가는 subject 부분. 그리고 실제 글이 들어가는 부분. 헌데 이 부분들은 class 로 정해졌습니다. class 는 배우셨다싶이 반복적으로 씌일수 있기 때문에 그렇게 정했습니다. 그 부분을 다시 쓸수 있는것이죠 이렇게요
- 그리고 여기저기에 <h숫자> 가 보입니다. 네 바로 heading 이라고 하고, 보통 헤드라인 이라고 한국에서는 표기하는 제목
부분들 입니다. 맨 처음에 일모리의 블로그 부분에 h1, 가장 큰것으로 넣었구요, 그다음 각각의 글이 들어갈부분의 title 부분, 그리고
date 부분을 h2, h3 로 정했습니다. 제목으로 생각하실수 있는 부분은 h숫자 로 정해주세요
자 이렇게 끝났습니다. 여기서 부터는 바로 CSS 가 꾸미기 담당입니다.
이처럼 이제 꾸며 보겠습니다. 잘 따라와 주시면 어렵지 않습니다.
/*기본코드*/
html {
background: none;
padding: 0;
margin: 0;
text-align: center;
font-family: tahoma, verdana, gulim, 굴림,sans-serif;
font-size: 12px;
}
a {
text-decoration: none;
color: black;
}
/*wrap */
#wrap {
width: 300px;
padding: 0;
margin: 0 auto;
text-align: left;
}
/* header 부분 */
/* id= header 로 정해진곳을 부릅니다 */
#header {
background: url(gradient.gif);
border: 1px solid #ddd;
width: 300px;
height: 70px;
padding: 0;
margin: 0;
}
/* 이것은 header 안의 h1 을 부르는것이죠 */
#header h1 {
font-size: 20px;
}
/*sidebar 부분 */
#sidebar {
width: 100px;
padding: 0;
margin: 0;
background: #eee url(flower.gif) no-repeat top left;
float:left; /*왼쪽으로 붙입니다*/
}
#sidebar ul {
padding: 0;
margin: 0px;
}
#sidebar ul li {
padding: 0;
margin: 0;
list-style-image: none;
list-style-type: none;
}
/* menu 의 링크 꾸미기 없게*/
#sidebar ul li a {
text-decoration: none;
}
/* content 부분 */
#content {
float: right;
width: 200px;
padding: 0;
margin: 0;
text-align: left;
background: #24a524;
}
.subject {
margin: 0px 0px;
padding: 0;
}
.subject h2 {
font-size: 15px;
}
.subject h3 {
font-size 13px;
}
.writing {
line-height: 150%;
letter-space: .2em;
margin: 0px 0px;
width: 200px;
}
다 끝났습니다. 복잡한가요? 기초문법이나 사전들을 보셨으면 그렇게 복잡한거 같지는 않으실겁니다. 문법에다가 사전에 있는것들만 껴 넣었으니까요.
잠깐잠깐 다룰것들을 보겠습니다.
맨처음에 html 이 정해진거 보이시죠? html 앞에는 아무것도
없는것을 잘보세요. .html 도 아니고 , #html도아닙니다. a 도 마찬가지지요 a 는 모든 링크를 말합니다. a:link, a:hover
등 다요. 원하신다면 a:link a:hover 등을 잘 고려하셔서 넣으셔도 이쁘겠죠.
그리고 각각의 부분마다 나누어 넣었습니다. 알아보기 편하게 말이죠.
바로 위에 있는 #content 부분을 보겠습니다. content
에는 float: left 부분이 있죠. 왼쪽으로 붙입니다. IE 에서 인식 못하는 경우가 있으니 float 을 붙여주는게 좋습니다. 그리고 나서
width 너비가 정해졌고, 여느처럼 padding 과 margin 이 붙었습니다. 그리고 글자 정렬 text-align 은 left 로
되어있고 뒷배경을 24a524로 정해주었네요.