CSS 응용
(이 글은 2005년에 쓰여진 글입니다. 추후에 수정하지만 그 전까지는 그대로 어체를 놔두겠습니다.)
이제 문법도 아셨고, 여러가지 css 소스도 옆에 두셨으니 간단한 예제로 css 기초 배우시는걸 마무리 지으실수 있겠네요. ^^
xhtml 에서 이야기 하지만 구조적인 생각을 기르기 위해서 일단 아이디어 부터 잡아 보겠습니다. 그리고 그 후에 css 로 그것을 꾸미는것으로 예제를 들어보겠습니다. 자 숨을 크게 들이쉬고 들어가 봅시다.
예제: 2개의 칼럼에 헤더를 넣어서 타이틀을 넣는식을 해보겠습니다.
자 그렇다면 틀을 잡으면서 문서를작성해 봅시다. “정말 내 머리와 같은 <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>
자 이렇게 짜 보았습니다.
- 맨 처음의 wrap 으로 이름한 div는 모든걸 감싼다는 뜻으로 썼습니다. 모든 페이지를 감싸도록 만들었습니다.
- 빨간 부분은 이름을 header 라고 주었습니다. 어느곳을 가던지 헤더는 딱 한번밖에 없으니 id 로 정했죠.
- 메뉴부분도 id=sidebar 로 정했구요.
- 그리고 리스트 로 메뉴를 넣었습니다. 메뉴같은부분이 바로 리스트죠 그래서 정렬할 필요가 없는 <ul> 을 썼습니다. 정렬이 필요했다면 <ol> 을 썼었겠죠. 그리고<li> 리스트를 넣었습니다.
- 본문 부분은 content 라고 정했고, 그 안에 두 부분으로 나누었습니다.
- 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>
- 그리고 여기저기에 <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로 정해주었네요.
이런식으로 XHTML 의 모든 부분을 다 제어를 하면서 더욱 정교하게 나아 갈수 있습니다.
* 실험삼아 해보시려면 인코딩과 DOCTYPE 모든것을 정확하게 하신후에 실험으로 해보시기 바랍니다.
Anonymous
Jun/28/05 @ 8:41 pm
:mrgreen::mrgreen::oops::razz::roll::wink::cry:
overflow
Jul/07/05 @ 2:14 pm
이런 유용한 정보제공에 감사드립니다
경국지색
Jul/08/05 @ 3:44 pm
:razz:정말 감사해요…-.- 벌어먹고 살려니 공부해야 하는데 정말 많은 도움이 되요..:shock:
chungdna
Jul/08/05 @ 9:43 pm
궁금한점이 있습니다.
이싸이트는 왼쪽 메뉴를 어떻게 관리합니까? 언뜻 보기에 쌩 html 페이지 같은데 그러면 메뉴가 바뀔경우 모든 페이지를 수정해야하는건가요? css거참 매력있네요..
일모리
Jul/08/05 @ 10:34 pm
^^ 그부분은 css 라기 보다는 단순 php 입니다.
php로 해더 왼쪽메뉴 부분으로 나누어서 바꾸고 싶은 부분만 바꾸면 모든 페이지에 적용이 됩니다. css 는 구조 보다는 디자인의 변화를 간단히 주는 부분입니다. ^^ 매력있죠
overflow님 경국지색님 chungdna님 나중에 홈 만들면 초대해 주세요 ㅎ
홉스
Aug/12/05 @ 10:28 pm
content쪽에는 p의 스타일을 지정하려면
#sidebar ul li a 이것처럼
#content p 이렇게 지정하면 되는건가요?
맘에드는 태터 스킨을 표준,xhtml,css,테이블없이 전환해서 쓰려고하는데… OTL
이거야 원.. 책도 별로 없어서 독학도 힘들고…
참 시간있으시면 ol, ul, li에 대해 정말로 자세히 설명좀 해주세요 >_
일모리
Aug/12/05 @ 11:04 pm
그렇죠 ^^;; 네 알겠습니다. 안그래도 xhtml 쪽을 준비중이네요 ^^
lion
Nov/19/05 @ 6:04 pm
chungdna님의 질문에 대한 답변 잘보았습니다. 그런데 부연설명좀 부탁드도 될까요.php를 제가 직접 써본적이 없어서 이해가 잘 안가요.
메뉴가 바뀔경우엔 번거로우니 전 인클루드 소스를 썼거든요. 디자인도 그렇고 하이퍼 링크도 바뀌니까요. 그럴땐 어떤 방법이 있나요?
Anonymous
Nov/20/05 @ 3:17 pm
php 를 인클루드하시는거라면 이미 정해진 값이 있습니다. sidebar header footer 인데요 http://codex.wordpress.org/Theme_Development 에서 참고합니다.
To include the header, use the get_header() template tag.
To include the sidebar, use the get_sidebar() template tag.
To include the footer, use the get_footer() template tag.
Here is an example of the include usage:
::HLIGHT_BLOCK_1::
물론 그 파일들은 header.php footer.php sidebar.php 로 이름을 정하시면 됩니다.
lion
Nov/28/05 @ 4:12 pm
가만보니 pading과 margin을 “0″으로 주어도 가장자리가 딱 붙지는 않네요 딱 붙이고 싶으면 어떻게 하나요? 특히 input form같은것을 넣을때 자꾸 밀리는데요
pachi
Jan/25/06 @ 10:49 am
form 같은 경우는 css에
form {
margin : 0 ;
}
을 주시면 됩니다.
padding : 0 ;을 추가해주셔도 좋구요.
국내 포털들의 경우 인풋폼에 클래스를 적용
margin 값을 (-)로 설정하는 경우도 있습니다.
A
May/10/06 @ 11:41 am
: ) 잘배워갑니다
다림
Jun/07/06 @ 6:22 pm
아..속이 뻥~ 뚫리는 느낌 이네요.
좋은 정보들 감사합니다~
궁금이
Jun/19/08 @ 5:53 pm
이곳에서 웹표준에 대해 많은 걸 배우고 있습니다.
위에 예제를 보고 질문드리는데요~
예제 결과를 보여주는 그림에서 sidebar와 content가 서로 똑같은 높이로 보여지고 있는데요 실제로 코딩을 해보면 sidebar와 content의 높이는 그 안에 들어가는 내용의 높이에 따라 다르게 됩니다. content의 내용이 많아지면 content만 아래로 늘어나고 sidebar는 그래도 있는 그런식이 되는데요~
만약 content의 내용이 많아져 늘어나게 되었을때 sidebar도 같이 늘어나게 하려면 어떻게 해야 하나요~
June 21, 2008 12:12 am
사이드바가 늘어나야 하는 이유가 단순한 디자인이라면 어렵지 않습니다.
contents 와 sidebar 를 담는 div 를 지정한 후 (혹은 wrap) 사이드바의 배경을 직접 둘을 담은 div 에 적용하게되면 컨텐츠가 늘어날경우 사이드바가 늘어나는 것 처럼 보이는 효과를 보일수 있습니다. :)
아침에
Dec/08/08 @ 5:54 pm
요즘 웹표준에 관해 공부하느라 좀 머리가 아픈데요 ^^;
코딩툴에 대해 알려주실 수 있으신가요?
(제가 워낙에 초보라…)
여지껏은 드림위버로 작업을 했었는데
웹표준 코딩은 어떤 프로그램을 사용하는게 좋은가요?
노트패드라는 프로그램을 다운받아서
(노트패드 사이트에 있는거 다운받아서
시키는대로 nativeLang.xml 했는데…)
한글패치를 해봤는데 전부 글씨가 깨지더라구요.
제가 지금 해외라서 다른 언어로 된 컴을 써서 그런건지…
그래도 한글을 사용할 수는 있는데…
답변 주시면 힘을 받아 웹표준 공부하는데 더 정진하겠습니다. ^^
조봉영
Jul/25/09 @ 2:05 am
책으로 공부할때는 너무 복잡하기만 했는데
정말 좋은 정보와 공부하는데 한층 더 도움되었습니다.
감사요 *^^*
namu
Sep/28/10 @ 12:03 pm
좋은 내용 진심으로 감사드립니다. 즐겁게 배우고 있습니다.
홍은혜
Jul/04/11 @ 5:22 pm
좀 혼동오던거~ 읽고 이해됐어요~ 감사합니다. 좋은 강좌를 앞으로도 부탁드려요 +_+
입문자라 아는게 없네요..;;;