티스토리 스킨 만들기 (초보) - 2강. Html,CSS 란?

이번 강에서는 Html과 CSS에 대해서 알아보고,

간단한 html 문서를 만들어보도록 하겠습니다.

보시면서 '이게 뭔소리여~' 하시는 분도 계시겠지만, 차근차근 보다보면

내가 원하는 스킨을 만들 수 있고 html, Css도 정복할 수 있다는 걸 명심하세요.^^

Html 이란?

Html이란 웹 문서를 만들기 위해서 사용하는 기본적인 언어입니다.

티스토리 스킨의 skin.html 은 이 html언어로 만들어진 문서이지요.

html 문서는 많은 명령어들로 이루어져요.

"여기를 빨간색으로 색칠해!", "여기에 내가 찍은 사진을 나타내!" 하고 명령하는 거예요.

이러한 명령어를 tag라고 합니다.

tag 의 종류

tag 중에는 짝이 있는 태그와 단독으로 쓰이는 태그가 있습니다.

위의 예시를 보세요.

'p' 라는 태그와 'img' 라는 태그가 사용되었습니다.

※ p태그는 문단 삽입 태그이고, img태그는 이미지 삽입 태그입니다. 더 많은 태그의 종류는 다음강에서 설명드리겠습니다.

p태그는 로 시작해서 로 닫아주었지요. 이것은 짝이 있는 태그입니다.

반면 img태그는 단독으로 쓰인 것을 알 수 있지요? 이것은 짝이 없는 태그로 '빈태그' 라고도 부릅니다.

위의 예시처럼, 빈태그는 맨 끝에 공백+슬러쉬를 덧붙입니다. 스페이스바로 한 칸 띄우고 '/' 를 삽입하는 거예요.

어렵지 않죠?

게시판이나 블로그에 글을 쓸 때 'html 사용하기' 탭을 보신 적이 있을 거예요.

지금까지는 그 세계에 침범할 수 없었던 분도 오늘부터는 자랑스럽게 html을 사용해서 게시물을 작성하실 수 있습니다.

한 번 연습해 볼까요? 아래의 '더보기' 를 클릭해 보아요. ^^

더보기 - 이미지 태그 연습

짝짝짝! 여기까지 하셨으면 이미 html의 세계로 입문하신겁니다. ^^

여기에 css를 연계하여 더 다이나믹한 효과를 줄 수 있답니다.

CSS 란?

css는 html 언어에 'style'을 추가하는 속성으로 '스타일시트' 라고도 부릅니다.

html 태그 안에 직접 쓰기도 하고, html 문서의 상단에 따로 입력하기도 합니다.

하지만 가장 편리한 방법은 css 문서를 따로 만들어서 불러오는 것입니다.

그리고 위의 방법들 중 두 가지 이상의 방법을 중복해서 쓸 수도 있답니다.

티스토리 스킨의 경우 skin.html 에서 style.css 를 불러들이는 방식을 사용하지요.

이 스타일시트만으로 같은 html 문서라도 180도 다르게 보이도록 할 수 있습니다. @_@

그럼 아까 만든 a.html에 스타일을 입혀보도록 하겠습니다.

메모장을 벌써 닫으셨다면, 먼저 다시 메모장을 열어서 상단의 "파일" - "열기" 로 들어갑니다. 파일형식에 '모든문서'로 지정하고 a.html을 열어주세요.

이미지태그의 alt 속성 뒤에 아래 속성을 추가합니다.

style="border:#000000 3px solid; width:100px; height:50px"

다시 Ctrl+S 로 저장해서 a.html 파일을 인터넷 브라우저로 열어줍니다.

이미지가 조그맣게 줄어들고 두꺼운 검은 띠가 생겼나요?

잘 안됐다구요? 뭐가 뭔지 아직 모르시겠다구요?

그런 분들은 아래 소스를 검토해보세요.

메모장에 작성하신 소스와 비교하면서 무엇을 틀렸는지 분석해 보세요.

어렵지 않으니 찬찬히 보면 금방 아실 수 있을겁니다.

자. 확인하셨으면, 여기에 쓰인 스타일을 파헤쳐 보겠습니다.

style 속성의 큰 따옴표 안에 다음과 같은 소스가 입력되어있지요.

border:#000000 3px solid; width:100px; height:50px

자세히 보시면 각 섹션 마다 제목 뒤에 :을 붙여 값을 주고,

;로 각 섹션 분리하는 것을 알 수 있을겁니다.

그러면 위의 속성에는 몇 개의 섹션이 있나요?

정답은 세 개입니다.

border, width, height 로 나뉘어져있지요. 그리고 그 사이사이는 ;로 분리했습니다.

width 는 너비를 뜻하고,

height 는 높이를 뜻합니다.

가로와 세로의 길이를 이렇게 설정해주면 웹상에서 이미지를 불러들이는 시간이 절약된답니다.

border는 테두리를 말하지요.

border섹션을 살펴볼까요?

#000000 3px solid 라는 건 '3px의 검은색 실선' 을 뜻합니다.

그렇다면 10px의 빨간색 실선, 1px의 초록색 실선 등도 가능하겠지요.

그 뿐 만이 아닙니다. 땡땡이점선, 굵은점선, 두줄실선, 입체선 등도 가능합니다. olleh!

'#000000' 가 생소하신가요? 색상코드 라고 합니다.

색상코드를 잘 정리해 둔 어느 블로거님의 포스트를 링크하겠습니다.

http://neomyth.tistory.com/314

그리고 웹상에서 맘에 드는 컬러를 pick 할 수 있는 포스트를 링크하겠습니다.

http://listentomyheart.net/119

'3px' 는 3픽셀을 말하는데, 픽셀(pixel)이란 크기의 단위입니다. 1픽셀은 한 점이예요.

지금 보시는 이 글씨도 픽셀들이 모여 이루어진 것이죠. ........ <<1픽셀의 점들입니다.

'solid' 는 고체, 채워진 것 이라는 사전적 의미를 갖고 있지요? 여기서는 채워진 선, 곧 실선의 의미로 사용됩니다.

실선이 아닌 다른 선들은 어떻게 표시하는지 알아보겠습니다.

none - 없음

solid - 실선

double - 두 줄 실선

dotted - 땡땡이 점선

dashed - 굵은 점선

groove - 오목한 액자 테두리

ridge - 볼록한 액자 테두리

inset - 들어간 입체선

outset - 튀어나온 입체선

백문이 불여일견입니다.

색상, 크기, 스타일을 각각 달리해서 여러가지 테스트해보세요.

ex 1 ) border:#FF8200 2px dotted; width:500px; height:500px

ex 2 ) border:#A30FE2 10px groove; width:400px; height:700px

ex 3 ) border:#000069 1px dashed; width:231px; height:248px

신기하지요? 이 border와 width, height 는 앞으로 정말 유용하게 쓰일 거예요.

오늘 Html과 Css를 맛보셨어요. 어떤가요, 생각보다 어렵지 않고 재미있죠?

3강에서는 html과 css를 나누어 본격적으로 문서를 작성해보고,
여러가지 html 태그와 CSS의 용법을 알아보겠습니다. ^^

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

TRACKBACK 0 COMMENT 64

필넷 Edit/Del Reply
좋은 글 잘 봤습니다. 다음 내용도 기대하고 있겠습니다. ^^
2009/09/10 13:27

필넷
- Grace* Edit/Del
  
  2009/09/10 17:14
  
  네 감사합니다. ^^
홍랩 Edit/Del Reply
오우~ 저 스킨좀 만들라하는데~~ㅎㅎ 잘보고 가용 ^^
2009/09/10 13:31

홍랩
- Grace* Edit/Del
  
  2009/09/10 17:14
  
  화이팅~
지우개 Edit/Del Reply
^-----------------^*
2009/09/10 13:55

지우개
- Grace* Edit/Del
  
  2009/09/10 17:16
  
  ^------------------------^*
하루′ Edit/Del Reply
이해하기 쉽게 잘 설명 되어 있어서 좋네요~!
그레이스님.다음이 또 기다려져요^^*
2009/09/10 14:39

하루′
- Grace* Edit/Del
  
  2009/09/10 17:16
  
  네 감사합니다아 ^^

cdmanii Edit/Del Reply

스타일을 태그와 분리해서 설명해주셨다면 하는 바램이 있네요. 그래도 설명 너무 좋았어요. 그런데 티스토리같은데 글이 뜰때 그림도 같이 나오도록 연관된 그림 상단에 하나 올려주시는게 좋을듯해요. 안그러면 검색에 그냥 글만 나오거든요.

2009/09/10 16:44

cdmanii

Grace* Edit/Del

2009/09/10 17:15

3강에서는 html과 css를 나누어 본격적으로 문서를 작성해보고,
여러가지 html 태그와 CSS의 용법을 알아보겠습니다. ^^

라고 글 하단에 써 두었는데..

cdmanii Edit/Del

2009/09/10 17:44

헙 제가 마지막을 못읽었군요 죄송해요 ~~ ㅎ
엄청 기대중인거 알죠 ? +_+

콩 Edit/Del Reply
헉 오늘올라온거였군요 ㅠㅠ 언제 3강 올라오나 하고있었는데 ㅎㅎㅎㅎ
홈페이지보다 블로그 꾸미는게 훨씬 어려워요 ㅠㅠ
언젠가는 저두 블로그를 이렇게 꾸밀 수 있음 좋겠다는 생각으로
열심히 보고있습니당 또 올려주세요~ ㅋㅋ
2009/09/10 22:54

콩
- Grace* Edit/Del
  
  2009/09/11 10:30
  
  네 ^^ 조금만 기다려주세요~
sla Edit/Del Reply
초보에게도 거의 완벽한 설명이네요...감사드립니다.^^
2009/09/11 00:01

sla
- Grace* Edit/Del
  
  2009/09/11 10:30
  
  오오+_+ 최고의 칭찬이예요.
  감사합니다!
행복박스 Edit/Del Reply
설명을 너무 쉽게 쉽게 잘 해주셔서
이해가 금방.....
다음편도 기대됩니다~
2009/09/11 01:00

행복박스
- Grace* Edit/Del
  
  2009/09/11 10:30
  
  ^-^ 이해가 금방 된다니 다행이예요.
강짜 Edit/Del Reply
본격적인 강의가 시작되는군요. 강의에 그레이스님의 노고가 보이네요. ㅎㅎ
잘 보고 갑니다. 다음 강의도 기다릴께요~
2009/09/11 01:26

강짜
- Grace* Edit/Del
  
  2009/09/11 10:29
  
  네. 감사합니다. ^^
몸부림 Edit/Del Reply
허거걱 힘들지만, 처음부터 차근차근 다 마스터했습니다~
css용어만 외우면 조금 해결될것 같네요ㅎㅎ
감사합니다. 센스있는 강좌 계속 기대할게요^^
2009/09/11 20:52

몸부림
- Grace* Edit/Del
  
  2009/09/11 21:44
  
  이제 곧 몸부림님도 능력자~!
소감공(Sogamgong) Edit/Del Reply
모두들 스킨 마스터해서, 워드프레스 스킨에 뒤지지 않을만큼 스킨들이 쏟아져 나왔으면 좋겠네요. ㅎ_ㅎ
2009/09/12 10:38

소감공(Sogamgong)
- Grace* Edit/Del
 
 2009/09/12 13:22
 
 맞아요! 저도 원하는 바예요 >_<
바람나그네 Edit/Del Reply
멋진 강의네요 ㅎ 많은 분들이 도움을 받을 것 같네요..
예전에 리스투마이헐 / 그레이스님 해피도트 오래 썼었답니다. ^^

이번 스킨도 정말 이쁘네요.. 구작가님 솜씨 죽이네요..
그레이스님의 실력 또한 오래 봐와서 정말 감탄하고 있죠 ㅎ

행복하고 건강한 하루되세요^^
정말 멋진 스킨 띠용~ ㅎ 멋진 강의 띠용~ ㅎ
2009/09/14 19:38

바람나그네
- Grace* Edit/Del
  
  2009/09/14 20:44
  
  엄훠~ 감사합니다. ^^
  블로그에 가보니 유입경로 통해서 몇 번 가 보았던 곳이네요. ^^
  반가워요
투척 Edit/Del Reply
으흠 css가 대충 그런것이였군요 ㅋㅋ뭔데 저기 html이 또있는거야 라고 생각했는데

글만으로도 충분하지만 왠지 비교그림같은게 있다면 더 직관적이고 좋을것 같아요 ㅎㅎ
2009/09/17 22:39

투척
- Grace* Edit/Del
  
  2009/09/18 10:23
  
  의견 감사합니다.ㅎㅎ
fly Edit/Del Reply
html 메뉴만드는 법도 가르켜주시면 안될까요?ㅠ
2009/09/26 12:25

fly
- Grace* Edit/Del
  
  2009/09/26 20:46
  
  html메뉴라니 무슨 얘기인지..
  네이버에 '메뉴스크립트' 라고 검색해보세요.
애용이 Edit/Del Reply
안녕하세요~
강좌 잘 보고 있습니다.
정말 쉽게 잘 설명해주시네요.

예제까지 있고 하나하나 따라하는 재미가 있어요 : )

여태까지 블로그를 적당히 수정할 줄 몰랐는데
열심히 배워서 잘 한번 바꿔봐야겠네요~

블로그에 사용하신 이미지들이 정말 따뜻하고 좋네요
2009/09/30 22:50

애용이
- Grace* Edit/Del
  
  2009/10/02 16:26
  
  네. 제 블로그의 디자인은
  구작가님이 해주셨답니다. ^^
cjsam Edit/Del Reply
내용이 너무 쉽고 편해서 좋습니다...
초보자도 아주 쉽게 기초적인 내용을 자세하게 설명해 주시니 누구라도 쉽게
배울수있을것 같습니다...
열심히 배울께요^^*
감사합니다....
2009/10/26 06:47

cjsam
- Grace* Edit/Del
  
  2009/11/01 01:25
  
  감사합니다. ^^
하나크린 Edit/Del Reply
아빠의 사업장 홍보를 위한 블로그 제작중인데...예산이 없어 제가 대신 하다보니 넘 시간이 오래 걸리네요.
Grace님 블로그에서 많은 정보 얻고 갑니다.
넘 감사합니다 . ^^
2009/11/12 10:49

하나크린
- Grace* Edit/Del
  
  2009/11/13 07:49
  
  멋진 블로그 만드세요. ^^
Kyou_ Edit/Del Reply
하나씩 따라해봤는데 정말 쉽게 설명해주셔서 이해가 잘됬습니다^^

간단히 응용해서 직접만든 배너에 dashed 태그 추가해서 테두리도 만들었구요ㅎㅎ

이제 타이틀이랑 스킨을 만들어야하는데 훨씬 어려울 것 같아 걱정이네요~

앞으로도 좋은 정보 부탁드려요~
2009/11/16 21:59

Kyou_
- Grace* Edit/Del
  
  2009/11/16 22:05
  
  감사합니다. ^^
  Kyou_님의 댓글이 무척 힘이 되네요.
박성배 Edit/Del Reply
예전에 세이클럽 하던 기분도 나고 재밌네요 ㅎㅎ
지금은 정주행중 ㅎㅎ
2009/11/16 22:53

박성배
- Grace* Edit/Del
  
  2009/11/16 23:19
  
  아하.
  채팅할 때 태그를 사용하셨나보네요. ㅎㅎ
굳ㅋ Edit/Del Reply
아직 2강까지 밖에 안읽었지만, 명강의인듯.ㅋㅋㅋ 좋은 포스트 ㄳ요.ㅋㅋ
2009/11/24 11:05

굳ㅋ
- Grace* Edit/Del
  
  2009/11/25 15:28
  
  고마워요. ^^
성록2세 희선이 Edit/Del Reply
이제 블로그제목과 닉만 결정했는데 스킨을 한번잘 만들어 볼려고 알아보다 들렸습니다
쉽고 유용한 강의 앞으로도 잘보고 활용해볼수 있었으면 좋겠네요

조금더 낳은 모습의 블로그 초보 블로그 탄생을 응원해주세요

지금은 아무것도 아무글도 없습니다.

꾸준한 학습으로 차근차근 만들어 갈께요...

즐거운 주말 보내시라는 말.. 미리 드려요^^ - 성록 2세 희선이 올림 -
2009/12/18 18:53

성록2세 희선이
- Grace* Edit/Del
  
  2009/12/19 00:07
  
  성록2세 희선이님 만의 멋진 블로그 기대할게요. ^^
Edit/Del Reply
비밀댓글 입니다
2009/12/18 20:01
- Grace* Edit/Del
  
  2009/12/19 00:06
  
  '더보기'의 6번 항목을 빠트리셨나봅니다.
송 명훈 Edit/Del Reply
이해가 잘되게 설명 하셨네요, 감사합니다 !
2009/12/28 17:40

송 명훈
- Grace* Edit/Del
  
  2009/12/29 16:35
  
  고맙습니다. ^^
와! Edit/Del Reply
완전 컴맹이라 블로그스킨 만들고싶긴한데 어떻게 하는건지 몰라서 이것저것 찾아보던 와중에
여기서 완벽하게 이해하고 가네요! 정말 감사합니다^^
2010/01/02 04:50

와!
- Grace* Edit/Del
  
  2010/01/03 16:58
  
  넹. 화이팅! ^^
달림이 Edit/Del Reply
복습중인데 역시 최고라고 말씀드리고싶어요. ㅋㅎㅎ 너무 감사해요
2010/01/12 22:08

달림이
- Grace* Edit/Del
  
  2010/01/14 14:48
  
  고맙습니다.
버블타운 Edit/Del Reply
잘 보았습니다.
근데 전 메모장이 워드패드 밖에 없는데요
"유니코드 택스트" 문서 저장형식이 맞나요?
잘 모르겠네요
2010/01/14 16:49

버블타운
- Grace* Edit/Del
  
  2010/01/14 18:21
  
  일부러 지우지 않았다면 메모장 있을겁니다.
공타쿠 Edit/Del Reply
많이 배워야겠네요 ㅎㅎ
2010/01/26 14:30

공타쿠
- Grace* Edit/Del
  
  2010/02/05 10:41
  
  재밌는 공부 하시길..
J군 Edit/Del Reply
하다가 신기해서 깜짝 놀랐어요! 쉬운 설명 감사드려요ㅎㅎ
2010/02/17 13:04

J군
- Grace* Edit/Del
  
  2010/03/12 00:27
  
  신기하죠? ㅋㅋ 저도 감사해요. 보람되네요.
JLIFE Edit/Del Reply
예전에 html 을 잠깐 배운적이 있는데 다 잊어버렸다가 다시 해보려니 색다르네요.^^
2010/04/10 19:35

JLIFE
알삼 Edit/Del Reply
오오오오... 안그래도 스킨 만들려고 여기저기 뒤졌는데 ㅜ 정말 쉽게 잘 되있네요 ㅎ 꼭 만들어서 나중에 보여드릴게요!!!
2010/05/02 00:56

알삼
nana9900 Edit/Del Reply
요즘 html을 배우는 중인데 님덕분에 너무나 좋은정보를 배우고 있습니다.
너~~무 고맙습니다. 항상 행복하세요^^
2010/05/06 20:14

nana9900
p냥 Edit/Del Reply
우와우와...
블로그스킨 만드는법이 너무 궁금했었는데
강좌를 만드셨군요!
잘 보고 배워서 예쁜스킨만들께요^^*
2010/05/17 21:17

p냥
와이케이 Edit/Del Reply
우연히 님 홈페이지 알게되구
해피닷 적용한 후 파일검토해서 이미지만 바꾸어 사용해봤어요(수정해서 죄송;
새로운 스킨도 만들어 보고싶어 차근차근 배워보려구요^^
좋은 정보 감사합니다
열심히 배워볼게요!!
2010/06/10 14:10

와이케이
- Grace* Edit/Del
  
  2010/06/13 11:14
  
  홈페이지 주소 알려주시겠어요?
  어떻게 수정하셨는지 궁금해요.
zibanitu Edit/Del Reply
처음부터 하고있습니다^^ 너무너무 좋은 정보 감사합니다 !
2010/07/17 04:23

zibanitu