티스토리 툴바

Daum
Tistory
로그인

스킨수정을 위해 이 정도의 CSS는 알아두자! #1

2007/12/15 11:37 | DesignStudy/CSS&XHTML

8개의 댓글

저는 이번 여름에 처음으로 태터툴즈를 접했습니다. 블로그를 시작하기로 맘 먹은것은 폐쇠적인  개인홈피에서
뭔가 커뮤니티가 강한 블로그가 낫겠다 싶어서 시작했습니다. 그래서 계정에 태터툴즈를 깔고 스킨을 찾고
있는데 딱히 마음에 드는게 없어서 수정을 할려고 skin.html을 그냥 열어 보았습니다. 그 때의 충격과 공포(?)를
아직도 기억하고 있습니다. 미스테리한 치환자에 전혀 보지못한 새로운 코딩방법등이 저를 좌절 시켰습니다.

이 신선한 사건을 접하기 전엔 저는 웹표준이나 웹2.0에 대한 관심은 눈꼽만큼도 없었고 스타일시트는 먹는건줄
알았습니다. 그 전에는 모두 웹에디터등에서 테이블로 레이아웃을 짜는 방법을 사용했었습니다. 하지만 차츰
공부해나가면서 이제는 어느정도 텍스트에디터만으로도 페이지를 짜낼 수 있게 되었습니다. 웹표준이나 웹2.0에
대해 접하신지 얼마 되지 않으신 분들께 많은 도움이 됬으면 하는 바람입니다. 웹2.0에 들어 더욱 중요성이
강조되는 스타일시트의 수정에 대해서 배워보겠습니다. 태터툴즈의 유저분들은 스킨을 수정하는데 꼭 필요한
내용이라고 생각됩니다.

먼저 Html파일에 어떻게 하면 스타일시트를 적용시킬 수 있을까요 ? <head>~</head> 부분에 다음과 같이
삽입해 주시면 됩니다.
<link rel="stylesheet" media="screen" type="text/css" href="스타일시트 경로및 파일명" />
참 쉽죠:)? 이렇게 하면 그 페이지에 스타일시트가 적용이 됩니다. 하지만 적용만 시켜서는 스타일이 먹히지
않는데요 이럴경우에는 id,class값등을 일치시켜 줘야지만 해당 스타일이 대입이 됩니다.

지난 포스팅에서 설명했듯이 스타일은 총 3가지 방법으로 설정해 지정 시켜줄 수 있습니다.
  • id값을 쓰실경우 css에서는 #id이름 {스타일:값;}
  • class값을 쓰실경우 css에서는 .class이름 {스타일:값}
  • 해당 오브젝트에 대해 모두 적용시킬 때는 오브젝트{스타일:값} (ex: input { 들어갈 스타일:샬라샬라; } )
이런 세 가지 방식으로 가능합니다.  각각의 스타일을 마치셨을때는 끝에 ; 를 붙여주셔야 합니다.

기본적으로 사용하는 방법은 모두 익히셨습니다. 이제 어떠한 스타일이 있고 어떤 값이 있는지에 대해 알아
보도록 하겠습니다. 이번 포스팅에서는 Body에 적용되는 값과 margin,padding등의 여백에 관련된 스타일을
알아보도록 하겠습니다.

먼저 Body에 적용된 스타일 시트입니다.

body{
        font:0.75em/1.7em Dotum, Verdana, AppleGothic, Sans-serif;
        background-color:#eee;
        color:#333; margin-top:0px;
}
먼저 body에서 font를 지정해주는 부분이 있습니다. 먼저 0.75em은 해당 페이지의 기본 글꼴 사이즈이고
슬래쉬 뒤에 나오는 1.7em 은 line-height(줄 간격) 에 관한 것입니다. 그 뒤로 나오는 것들은 기본폰트의
지정입니다. 다음으론 background-color는 배경 색상에 관련된 것입니다. 뒤에는 색상코드를 입력하시면
됩니다. 이미지를 넣고 싶다면 Background:기본 바탕색상 url(이미지 경로) 이미지 설정; 이런식으로 하시면
됩니다. 여기서 color는 페이지의 기본 글씨 색상입니다. 뒤에는 색상코드를 입력하시면 됩니다.
마지막 margin-top은 하단에서 설명하도록 하겠습니다.

그다음은 여백을 조절하는 스타일에 대한것입니다. 매우 중요한 부분을 차지하고 있습니다. 이 스타일은
padding,margin,border,offset이 주체적으로 여백을 조절합니다. 모두 여백에 관련된 스타일이지만 살짝 다릅
니다. 이 부분은 하단의 이미지를 보면서 설명을 하시면 이해가 빨리 되실 겁니다.

저 이미지가 각각의 여백이 어떻게 설정되나에 대해 가장 쉽게 이해할수 있는 그림이라고 생각합니다.

padding은 본문 안에서 여백을 조정하는 것입니다.padding값이 커질 수록 본문의 넓이는 작아집니다.
border은 테두리를 나타내는데 이 역시 여백에도 관련이 있습니다. 이 영역은 padding과 margind의 사이입니다.
margin은 본문의 바깥 부분의 여백을 조절하는데 쓰입니다.  offset은 그 밖의 영역을 추가로 조절합니다.

그리고 상하좌우 모두 따로 여백을 지정해줄 수 있습니다. margin-left:10px; 이런식으로 따로 할수도있고
아니면 margin:0 0 0 10px; 이렇게 할 수도 있습니다.
margin(혹은 다른 스타일도 가능):상단 우측 하단 좌측;
이렇게 각각의 값이 적용됩니다. 가운데 정렬을 할려면 다음과 같이 스타일시트를 적용해서 쓰실 수도있습니다.
margin:0px auto;
이 뜻은 스타일이 적용된 부분을 상단의 여백을 0px로 하고 좌우 여백을 auto 로 조절해서 중간으로 조절
하라는 뜻입니다. 가운데 정렬시킬때 무척이나 많이 쓰입니다.

일단 오늘은 여기서 마치도록 하겠습니다. 아마 이번 내용은 다음에서 모두 끝날것 입니다. 다 설명드리기엔
너무 많은 양이고 Firebug를 이용한다면 궂이 이런 설명없이도 충분히 가능하실 겁니다.

많은 도움이 되셨으면 하는 마음으로 이 글을 마칩니다 :)

Comments

« prev 1 ... 24 25 26 27 28 29 30 31 32 ... 61 next »