티스토리 스킨 만들기 (초보) - 3강. Html,CSS의 실습

이번 강에서는 에디터를 이용해 Html과 CSS문서를 만들어보겠습니다.

지난 시간에 a.html을 만들어보았죠? (http://listentomyheart.net/196)

지금부터 a.html을 제대로 된 html문서로 만들어보겠어요.

그런데 메모장으로는 조금 불편한 감이 있지요?

원활한 소스 코딩을 위해 에디트 프로그램을 다운받아서 사용해 봅시다.

나모웹에디터나 드림위버같은 프로그램에 대해서 들어보신 적이 있을 거예요.

이 두 프로그램은 위지윅 방식으로 웹디자인에 수월한 프로그램입니다.

하지만 저는 위의 프로그램들을 사용하지 않고, 직접 소스를 입력하는 '하드코딩 방식' 을 선호하고 있습니다.

위지윅 방식에 비해 깔끔하고 오류 없는 소스를 작성할 수 있습니다.

티스토리에 글 작성하실 때 'html'모드에서 작성하는 것이 '하드코딩 방식',

그렇지 않은 것이 '위지윅 방식' 과 비슷하다고 할 수 있겠습니다.

이 강의를 하는 제가 하드코딩 방식을 이용하므로, 여러분도 저의 방식을 배우시겠습니다. ^^;

하드코딩을 위한 프로그램은 메모장 하나만으로 충분하지만

태그 별로 색깔을 알록달록하게 나타내 주고, 여러 개의 문서를 동시에 작업할 수 있게 해 주어

소스를 보기 좋게 정리할 수 있는 에디터를 다운 받을 거예요.

에디트플러스, 울트라에디트, 크림슨에디터 등을 많이들 쓰는데요

우리는 이 중 완전무료인 크림슨에디터를 다운받아서 사용해 보아요.

아래 주소의 다음 자료실로 들어가서 크림슨에디터 정식 버전을 다운로드 받습니다. (네이버 등 다른 포털의 자료실에도 있으니, 어디서 받으셔도 상관 없습니다.)

http://file.daum.net/pc/view.html?fnum=70395&cat=1&scat=30

다운받은 파일을 실행하여 설치하세요.

이제 윈도우즈의 시작버튼 - 프로그램 - Crimson Editor - Crimson Editor 를 클릭해 프로그램을 엽니다.

File - Open 으로 저번에 저장해 두었던 a.html 을 엽니다. (단축키: Ctrl+O)

a.html을 저장해 두지 않은 분은 저번 강의로 잠깐 돌아가서 노란 박스 안의 내용을 복사해 a.html을 만드세요.

그럼 메모장과 비교해 볼까요? (클릭해서 보세요)

크림슨에디터

메모장

확실히 눈에 잘 들어오는군요. 편집도 훨씬 편하겠지요?

만약 게시판에 올릴 소스라면야 이대로도 훌륭하지만,

html문서에는 형식이 존재한답니다.

<html>

</html>

위의 구조가 바로 html의 형식인데요,

<head>와 </head> 안에는 CSS, script 등을 삽입하고 (사람으로 따지면 뇌 기능의 역할)

<body>와 </body> 안에는 태그들을 삽입합니다. (사람으로 따지면 몸체의 역할)

우리가 만든 a.html 안의 소스는 <body>와 </body>사이로 고고싱해야겠네요.

그럼 a.html을 문서 구조에 맞게 바꿔볼까요?

복사해서 붙여넣지 마시고 직접 키보드 자판으로 입력해 보세요.

앞으로 스킨을 만들며 영타 칠 일이 많아질텐데, 지금부터 미리 연습해두면 도움이 되겠지요? ^^

결과물입니다. (클릭해서 보세요)

직접 입력하신 소스와 비교해 보세요. 똑같이 잘 되었나요?

다 똑같은데 와 <img>가 오른쪽으로 움푹 들어간 부분이 다르지요?

이건 소스를 한결 보기 좋고 편집이 용이하도록 정리하는 방법인데

키보드의 왼쪽에 있는 Tab 키를 이용한 거예요.

라인의 맨 앞을 마우스 커서로 클릭하고 키보드의 Tab을 누르면 아래처럼 쏙 들어가지요?

글씨도 한 번 입력해 볼까요?

문단태그가 종료되는 부분인 밑에 아래처럼 새로운 문단과 글귀를 입력해볼게요.

한 걸음 뒤에 항상 내가 있었는데

그대 영원히 내 모습 볼 수 없나요

결과물입니다. (클릭해서 보세요)

은 줄 바꿈 태그입니다. 그런데 왜 이라고 하지 않고 이라고 할까요?

저번 강에서 설명했듯이 짝 없이 단독으로 쓰이는 빈태그는 끝에 공백과 슬러쉬를 붙입니다.

기억이 안 나시면 다시 한 번 저번 강으로 고고싱.

인터넷에 올리면 a.html이 어떻게 보일지 궁금하시죠? 지금부터 확인해보겠습니다. (둑흔둑흔)

윈도우즈의 바탕화면으로 가서

a.html 이 저장된 경로로 들어가 (ex-내문서) 파일을 엽니다.

파일이 인터넷 브라우저로 열리지 않으면 마우스오른쪽버튼 - 연결프로그램 에서 사용하시는 브라우저를 선택해주세요. (인터넷 익스플로러나 파이어폭스 같은..)

아래처럼 보인다면 성공 ^^

여기서 윗줄은 그대로 두고 아래 줄의 글씨체와 색깔 등을 바꾸어볼까요?

아랫줄의 내용을 다음과 같이 바꾸어 줍니다.

그대 영원히 내 모습 볼 수 없나요

문구를 span으로 감싸고, span 안에 style을 지정해 준 것을 알 수 있죠?

span태그는 사실 아무런 의미도 갖지 않습니다.

다만 span에 둘러싸인 내용의 스타일만 브라우저에 알려주는 역할을 하는 것이지요.

'그대 영원히 내 모습 볼 수 없나요' 에 스타일을 지정해 주기 위하여 을 사용하는 거예요. 이해가 되시죠?

인터넷 브라우저로 열어서 보면 이해가 되실 거예요.

아래처럼 예쁘게 보이나요?

그럼 span 안에 쓰인 style속성을 알아볼게요.

font-family는 눈치채셨겠지만 글씨체를 말합니다.

font-size는 글씨 크기이구요,

color는 글씨 색깔입니다. 재미있죠?

자 이제 <head>와 </head>안에 스타일시트(CSS) 를 넣어 문서를 정리해 봅시다.

아래의 '더보기'를 클릭하세요.

문서에 CSS직접 입력하기 - 더보기

css에서 각각의 클래스 앞에는 .을 입력합니다. 그리고 { } 안에 스타일 내용을 입력해 주는 거예요.

클래스가 아닌 p나 span, img 자체에 스타일을 지정해 줄 수 있어요.

body 자체에도 지정할 수 있구요. (문서 전체의 배경색이나 배경그림은 body 자체에 지정하면 되겠지요?)

이럴 땐 클래스에서처럼 .을 입력하지 않습니다.

연습해 볼게요.

아래 소스를 <style type="text/css"> 아랫줄에 추가해줍니다.

span {font-family:궁서; background-color:#EFF1C7}

p {border:#6EB179 2px dotted}

span 안에 있는 글씨체를 궁서체로 지정했고, 배경색도 넣어줬습니다.

p에는 땡땡이 테두리를 둘러줬어요.

브라우저에서 확인해보겠습니다.

p(문단) 태그에 땡땡이가 둘러져있는 게 보이시죠?

그리고 span 태그 안의 글씨에는 배경색이 새로 칠해졌지만, 글씨체는 아까와 그대로 바탕체네요.

혼란스러워 하지 마시고 찬찬히 보세요. 재미있습니다.

모든 span에 #EFF1C7의 배경색을 둘러주고, 글씨체를 궁서체로 지정했고

hi 클래스에는 배경색은 설정하지 않았으며 글씨체만 바탕으로 지정했지요?

이럴 경우 배경색은 종속이 되고 글씨체는 가장 하위 클래스의 것으로 사용이 되는 것입니다.

여기까지 따라오셨으면 이미 코딩의 세계에 입문하신겁니다!

이번에는 CSS 파일과 html 파일을 분리해 보겠습니다!

티스토리 스킨도 이 방법을 사용하지요. ^^ 아래의 '더보기' 를 클릭하세요.

CSS 외부에서 불러오기 - 더보기

이제부터는 문서의 내용은 a.html에서, 문서의 스타일은 a.css에서 수정하면 되겠군요.

a.html은 그대로 두고 a.css만 마음껏 바꾸어봤어요. 아래의 '더보기'를 클릭해 보세요. ^^

신기하죠? html은 그대로 두고 css만 건드려도 이렇게 극적으로 변할 수 있어요!

오늘은 여기까지 할게요.

원래 여러가지 html태그 종류와 css용어도 이번 강에서 다루려고 했으나, 스크롤의 압박과 시간의 압박으로..ㄷㄷ

대신 다른 좋은 사이트를 링크해놓겠습니다.

CSS사전 (강추) http://ilmol.com/wp/css/

스킨을 만들며 실제로 많이 쓰이는 html태그 종류에 대해서 다음강에 더 자세히 다룰 예정이구요,

다음 강에서는 드디어! skin.html 을 들여다봅시다!

모두들 굳럭^^

중급자를 위한 티스토리 스킨 수정 팁 보러가기

TRACKBACK 0 COMMENT 52

cdmanii Edit/Del Reply

editplus 쓰고 있었는데 크림슨에디터 좋네요. 완전 무료이구요 굿 ~
사전으로 링크 알려주신곳도 좋네요. 기초 적립하기에는 너무 굿 !

탭 ~ 누르는거에서 이거야 이거 했습니다. 가능하면 이글 보시는분들 자신의 스킨 수정할때도 티스토리 관리자페이지에서 직접 수정하지 않고 에디터로 복사해서 넣은뒤 줄을 맞추어서 수정한뒤 다시 넣는식으로 하면 좋겠다는 생각을 했어요. 그래야 다음에 다시 꺼내볼때도 줄 정리가 잘 되어있고 좋을테니까요 흐

2009/09/16 21:12

cdmanii

Grace* Edit/Del

2009/09/17 10:24

넹~ 저도 editplus 써요.
완전 무료라서 크림슨에디터로 강의하기로 했어요. ^^

탭 기능 편하죠?
탭의 사이즈(움푹 들어가는 정도)를 다르게 지정할 수도 있어요.
크림슨에디터의 View - Tab size 에서요.

지우개 Edit/Del Reply
소중한 강의 감사합니다^^
2009/09/17 00:40

지우개
- Grace* Edit/Del
  
  2009/09/17 10:16
  
  감사합니다. ^0^
  동종업계의 지우개님이 보니 초큼 쑥스러운...ㅋㅋㅋ
강짜 Edit/Del Reply
...무료 에디터가 있었군요. 머리가 덜 터질것 같군요. ㅎㅎ 잘보고 갑니다-
2009/09/17 03:44

강짜
- Grace* Edit/Del
  
  2009/09/17 10:15
  
  네^^ 아마 '아크로에디터' 도 무료일 거예요.
드자이너김군 Edit/Del Reply
이야.. 정말 너무나 필요한 간지 포스팅이군요..ㅋ
다음 강의도 기다리고 있겠습니다.^^
2009/09/17 11:20

드자이너김군
- Grace* Edit/Del
  
  2009/09/17 11:51
  
  감사합니다! ^^
행복박스 Edit/Del Reply
오늘 저녁 알려주신 방법대로 차근차근 따라해봐야겠어요~^^
2009/09/17 13:13

행복박스
- Grace* Edit/Del
  
  2009/09/17 14:56
  
  네 ^^ 분명 성공하실거예여~
안아 Edit/Del Reply
안녕 하세요!전 필리핀인이에요 ^^
너의 패이즈 너무 너무 귀여워~~^^
2009/09/17 15:25

안아
- Grace* Edit/Del
  
  2009/09/17 15:33
  
  Thank you ^-^
  you're really good at Korean.
RollingStar Edit/Del Reply
안녕하세요! 질문있는데요~^^

연습해 볼게요.
아래 소스를 <style type="text/css"> 아랫줄에 추가해줍니다.

span {font-family:궁서; background-color:#EFF1C7}
p {border:#6EB179 2px dotted}

이렇게 써 놓으셨는데 span을 위처럼 바꿔야하는건지 아님
<stule type="text/css">란 태그?밑에 다시 쓰라는 건지 잘 모르겠어요.
또 <stule type="text/css">란 태그가 없는데요??
소스 캡쳐사진을 올려주셨으면 좋겠어요~
2009/09/17 23:00

RollingStar
- Grace* Edit/Del
 
 2009/09/18 10:19
 
 그 윗 부분에
 '문서에 CSS 직접 입력하기 - 더보기'
 를 보시면 쉽게 아실 듯.
몸부림 Edit/Del Reply
네네네 선생님ㅎㅎㅎ
이해안됐던 부분이 싹 풀리고 있어요^^
강의비를 드려야하나 고민되는걸요?ㅎㅎㅎ
뭔가 그레이스님 마술사같은0ㅅ0ㅋ
2009/09/18 01:16

몸부림
- Grace* Edit/Del
  
  2009/09/18 10:18
  
  마술사 ㅋㅋㅋㅋ 감사해여 ^0^
sla Edit/Del Reply
와 점점 흥미진진하네요....차근차근 해봐야겠습니당 강의 감사합니다.
2009/09/18 01:25

sla
- Grace* Edit/Del
  
  2009/09/18 10:18
  
  감사합니다. ^-^*
미콩쭌 Edit/Del Reply
우와 ~ 점점 ~ 빠져드네요 ㅋㅋ

잘봤어요 ㅎㅎ
2009/09/18 08:53

미콩쭌
- Grace* Edit/Del
  
  2009/09/18 10:17
  
  감사합니다. ^^ 4강은 오늘~내일 중에 올리겠습니다.
아리스ちゃん Edit/Del Reply
우왓 요즘 너무 바빠서 블로그할 시간이 잘 없었는데 벌써 3강까지 올려주셨네요!
아직 자세히는 못 봤는데 쉽게 써주셔서 잘 따라할 수 있을 것 같은 자신감이 '-' 으허헛
나중에 시간날 때 차근차근 따라해봐야겠네요. 강의 감사드려요! '-'
2009/09/18 21:27

아리스ちゃん
- Grace* Edit/Del
  
  2009/09/19 13:27
  
  넹~ 성공하실거예요~
소감공(Sogamgong) Edit/Del Reply
뭔가 웹페이지를 만들때면 나모 없이는 불가능했었는데,

이건 메모장 신공으로도 가능한 강의군요!!
2009/09/18 22:01

소감공(Sogamgong)
- Grace* Edit/Del
  
  2009/09/19 13:26
  
  메모장신공으로 가능하지만 초큼 불편하다는...ㅋㅋ
  에디터 프로그램 강추해요~
RollingStar Edit/Del Reply
아~죄송해요 제가 못보고 그냥 지나쳤네요ㅠㅠ
여튼 강의 잘 보고있습니다!
강의 전부다봐서 꼭 Grace님의 스킨을 만들어 보고싶네요ㅎㅎ
2009/09/18 23:59

RollingStar
- Grace* Edit/Del
  
  2009/09/19 13:26
  
  제 스킨을 똑같이 만들면 copyright 침해이고
  RollingStar님만의 멋진 스킨을 기대할게요 ^0^

sweet_star Edit/Del Reply

아 정말 좋은 정보 감사해요!
저도 스킨을 만들어보려고 고민중이었는데 보고나니 이해도 되고 뭔가 흐뭇하네요!
많은 사람들이 보고 있을 겁니다
힘내시고!
다음 강의도 기대할게요!!

2009/09/20 01:04

sweet_star

Grace* Edit/Del

2009/09/20 12:33

1강부터 찬찬히 보시면 더 쉽게 따라하실 수 있을거예요 ^^
다음강을 어서 올려야 하는데ㄷㄷ
월요일까지는 꼭 올리도록 하겠습니다.

큄맹 Edit/Del Reply

오랜만에 방문했습니다.

이건 뭐 스킬이나 테크닉이 중요한게 아니라 센스가 넘치셔야 되는 분야 같군요.ㅋ

저같은 사람을 절대 범접할수 없는 ㅋ 오랜만에 들어왔는데 스킨 너무 이쁘세요.

ㅋㅋ 자주 방문할께요^^ 잘보고 갑니다. ㅋ

2009/09/20 11:04

큄맹

Grace* Edit/Del

2009/09/20 12:34

센스가 있어도 스킬이 없으면 무용지물이고
스킬이 있어도 센스가 없으면 무용지물이지요...

그렇지만 센스와 스킬 모두 연습으로 나아질 수 있다는 것..^^

마이해피엔딩 Edit/Del Reply
와우~! 강의 너무 쉽고 재밌어요~~ 저도 참고해서 나중에 스킨 바꿀 때 써먹어야겠습니다 ^^ㅋ
지금 스킨의 댓글 창 너무 부럽네요~!!
2009/09/20 20:19

마이해피엔딩
- Grace* Edit/Del
  
  2009/09/21 10:31
  
  네. html과 css를 조금 아시면 참고하시고
  모르시면 처음부터 차근차근 보시는 게 좋을 거예여 ^^
미리누리는천국 Edit/Del Reply
강의 잘보고 있습니다. 감사합니다. 수고해주셔서^^
2009/09/21 15:01

미리누리는천국
- Grace* Edit/Del
  
  2009/09/21 15:51
  
  네^^ 4강의 압박 ㄷㄷㄷ 얼른 시작해야겠군여.
애용이 Edit/Del Reply
우와~~ 이해가 쉬워요
밤새도록 해도 재밌겠네요 : )

위에 미리누리는 천국님도 계시는 군요~

만화책 한권 한권 기다리는 심정으로 강좌가 기다려지네요~
2009/09/30 23:25

애용이
- Grace* Edit/Del
  
  2009/10/02 16:23
  
  와! 만화책 한권 한권 기다리는 심정이라니,
  최고의 칭찬이예요! 감사합니다. ^^
코네코 Edit/Del Reply
전 영원히 이런거엔 관심없을줄로만 알았는데 티스토리님의 홈페이지를 이렇게 우연히 알게되고나선
관심이 증폭하더군요...
처음엔 너무 성급한 마음에 보니까 무슨말인지 하나도 모르겠었는데,
마음을 다잡고 다시 차근차근 따라해보니까 저도 되는군요!!
정말 신기해요..
언제 티스토리님처럼 완파해서 홈페이지를 제가 원하는 스타일대로 꾸밀수있을지...의문이지만,
열심히 할게요!퐈팅!!
2009/10/10 23:15

코네코
- Grace* Edit/Del
  
  2009/10/12 12:41
  
  티스토리는 서비스 이름입니다. ㅋ
하이퍼펜 Edit/Del Reply
헉헉, 위지위그만 믿고살아온 인생인데.

으, 티스토리는 동작방식이 좀 다른건지 나모등으로 읽으면

뭔가 꺠지는 부분이 많더라구요.

해서 그레이스님 강좌보고 맨땅으로 하는법을 익히고 있습니다.

..만, 어렵네요 역시.
2009/12/20 21:46

하이퍼펜
- Grace* Edit/Del
  
  2009/12/21 11:42
  
  ㅎㅎ 건투를 빕니다~
밴드부장 Edit/Del Reply
좋은 강의 고맙습니다.

머리가 터질것 같지만

근데 궁금한거 물어봐도 되나요? 쪼금 귀찮은 질문인데...

알라뷰 그레이스님~
2009/12/29 07:14

밴드부장
- Grace* Edit/Del
  
  2009/12/29 16:32
  
  강의에 관련된 거라면 질문하세요.
달림이 Edit/Del Reply
나름 여러가지 실험을 해봤는데

글자크기도 하위클래스를 따르는군요 !!
2010/01/13 11:13

달림이
- Grace* Edit/Del
  
  2010/01/14 12:03
  
  네. 그렇지요.
리루 Edit/Del Reply
어제부터 막 티스토리 시작했어요 ㅜㅜ 제가 태그는 하나도 몰라서 이 스킨을 어찌해야 하나 고민하다가 네이버에 티스토리 태그 쳤다가 여기까지 왔습니다. ㅜㅜ 지금 강의 2강까지 들었는데 너무 친절하게 설명해주셔서 잘 따라왔어요 감사합니다 ㅜㅜ 시간나는대로 짬짬이 배워서 저도 그레이스님처럼 예쁜 티스토리 스킨을 만들었으면 좋겠어요 ㅜㅜ
2010/02/06 15:46

리루
- Grace* Edit/Del
  
  2010/03/12 00:40
  
  네. 예쁜 스킨 만드세요.
Edit/Del Reply
비밀댓글 입니다
2010/03/20 15:36
JLIFE Edit/Del Reply
재밋네요.^^ 실제로 스킨을 만들기 시작하면 css 만 따로 만드는데도 엄청 오래걸리겠네요.ㅜㅜ
2010/04/10 19:49

JLIFE
신윤영 Edit/Del Reply
그....그런데 너무 어려워요 ㅠㅠ 수학을 배우는 기분이랄까...

모든게 막힌것 같지만 하나라도 해결하고 싶어서 질문 드립니다. ㅠㅠ

음.. 제가 메모장에 의해 만든 파일을 불러오는 크림슨에디터라는 걸 다운 받아서

미리만든 파일을 불러왔는데, 님과 달리 전 모든 소스가 까만색으로 나오네요...

그리고 이걸로 중간에 그림과 글자까지 따라하고 익스플로러로 연결해서

켰더니; 그냥 익스플로러 창에 메모장 안 소스 내용이 그대로 보여집니다. ㅠㅠ

무슨 문제일까요...제가 글을 제대로 안읽어서 생긴 문제라면 죄송한데 다시 읽어 봐도

원인을 알 수 없네요.
2010/05/28 20:39

신윤영
- Grace* Edit/Del
  
  2010/05/30 01:08
  
  확장자 html로 저장하세요
도롱뇽 Edit/Del Reply
질문이요! 마지막에 Css와 html을 분리하고 span 그룹에 관한 상위 개념의
태그를 입력했어요. 그런데 다른 태그는 다 맞게 이뤄지는데

유독 back-ground 색깔이 입혀지지 않아요 ㅠㅠ
grace님의 태그를 복사해서 사용했는데도 말이졍..
제가 어딜 잘못한걸까요?
2010/07/30 01:51

도롱뇽
- Grace* Edit/Del
  
  2010/07/30 13:39
  
  back-ground가 아니라 background 입니다.