이제 문법도 아셨고, 여러가지 css 소스도 옆에 두셨으니 간단한 예제로 css 기초 배우시는걸 마무리 지으실수 있겠네요. ^^

xhtml 에서 이야기 하지만 구조적인 생각을 기르기 위해서 일단 아이디어 부터 잡아 보겠습니다. 그리고 그 후에 css 로 그것을 꾸미는것으로 예제를 들어보겠습니다. 자 숨을 크게 들이쉬고 들어가 봅시다.

예제: 2개의 칼럼에 헤더를 넣어서 타이틀을 넣는식을 해보겠습니다.
example
자 그렇다면 틀을 잡으면서 문서를작성해 봅시다. “정말 내 머리와 같은 <head> 부분”. 을 읽고 <head> 부분은 만드시구요, 일단 <body> 안을 보겠습니다.

<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>

자 이렇게 짜 보았습니다.

  1. 맨 처음의 wrap 으로 이름한 div는 모든걸 감싼다는 뜻으로 썼습니다. 모든 페이지를 감싸도록 만들었습니다.
  2. 빨간 부분은 이름을 header 라고 주었습니다. 어느곳을 가던지 헤더는 딱 한번밖에 없으니 id 로 정했죠.
  3. 메뉴부분도 id=sidebar 로 정했구요.
  4. 그리고 리스트 로 메뉴를 넣었습니다. 메뉴같은부분이 바로 리스트죠 그래서 정렬할 필요가 없는 <ul> 을 썼습니다. 정렬이 필요했다면 <ol> 을 썼었겠죠. 그리고<li> 리스트를 넣었습니다.
  5. 본문 부분은 content 라고 정했고, 그 안에 두 부분으로 나누었습니다.
  6. title 과 date 이 들어가는 subject 부분. 그리고 실제 글이 들어가는 부분. 헌데 이 부분들은 class 로 정해졌습니다. class 는 배우셨다싶이 반복적으로 씌일수 있기 때문에 그렇게 정했습니다. 그 부분을 다시 쓸수 있는것이죠 이렇게요 
    <div class="subject"><h2>title</h2><h3>date</h3></div>
<div class="writing">
   <p>Hello my name is sem content now</p>
</div>

<div class="subject">
   <h2>title2</h2>
   <h3>date2</h3>
</div>
<div class="writing">
    <p>이것은 제 2번째 글입니다. 잘 봐주세요</p>
</div>
  7. 그리고 여기저기에 <h숫자> 가 보입니다. 네 바로 heading 이라고 하고, 보통 헤드라인 이라고 한국에서는 표기하는 제목 부분들 입니다. 맨 처음에 일모리의 블로그 부분에 h1, 가장 큰것으로 넣었구요, 그다음 각각의 글이 들어갈부분의 title 부분, 그리고 date 부분을 h2, h3 로 정했습니다. 제목으로 생각하실수 있는 부분은 h숫자 로 정해주세요 :)

자 이렇게 끝났습니다. 여기서 부터는 바로 CSS 가 꾸미기 담당입니다.

이처럼 이제 꾸며 보겠습니다. 잘 따라와 주시면 어렵지 않습니다.
small website

일단 기본을 성립하고 필요한곳에 주석을 달겠습니다.

/*기본코드*/
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로 정해주었네요.

이런식으로 XHTML 의 모든 부분을 다 제어를 하면서 더욱 정교하게 나아 갈수 있습니다.

* 실험삼아 해보시려면 인코딩과 DOCTYPE 모든것을 정확하게 하신후에 실험으로 해보시기 바랍니다.

tags: , , , , , ,