스타일시트(CSS)의 선언방법 1

시작을 했으니 끝을 봐야겠지요? 이번에는 스타일시트를 선언하는 방법과 사용법에 대해서 알아보도록 하겠습니다.  스타일시트에 대해서 모르시는 분은 먼저  스타일시트(CSS) 이해하기 for 티스토리 를 읽어보시기 바랍니다. 또한 html을 모른다면 이해가 어려울 수도 있습니다.

스타일시트 선언방법  

스타일시트를 선언하는 방법은 3가지가 있습니다. 원래 곧바로 예제를 보여주며 설명하는 것이 읽는 사람이 지루하지 않고 재미있겠지만 어차피 다 알아야 하는 사항이므로 기본 사용법을 알고 넘어가는 것이 좋을듯 합니다. 하긴 이글을 읽는 분이라면 관심이 있어서 보시는 분일테니 제가 걱정하는 것이 기우에 불과할지도 모르겠네요. ^^

스타일시트의 선언은 html 파일안에 선언을 해줍니다. <head>와</head>사이에 선언하는 방법과 <body>와 <body>사이에 선언하는 방법이 있으며 아래의 방법중 편리한 방식을 사용하면 됩니다.

  • embeded 방식 ( <style> )
  • 링크방식( <link> )
  • 인라인 방식 ( 태그 )

 

임베디드방식 (embeded)

이 방식은 스타일시트를 <style>태그를 이용하여 html소스에 포함시키는 방법입니다. 이렇게 html파일에 포함시키는 경우 다른 html 파일에서는 사용을 할 수가 없다는 단점이 있습니다.

선언은 아래 파랑색 부분처럼 <head>와 </head>사이에 하며, <style> 과 </style> 태그 사이에 스타일을 지정하면 됩니다.

지정방식 =>  선택자 { 속성 : 값 }

 

사용 예)

<body>
<head>
 <style type="text/css">
     
b {color:orange; font-size:12pt}
 </style>
</head>

<body>
임베디드 방식은<b>html에 스타일을 포함하는 방식</b> 입니다.
</body>

<소스 설명>

<b> 태그에 대해서 b {color:orange; font-size:12pt} 와 같이 스타일을 지정하였습니다. <b>태그는 글자를 강조하는 태그인데 글자색을 오렌지색으로 (color:orange), 글자크기는 12pt (font-size:12pt)로 스타일을 지정함으로써 앞으로 <b>태그를 사용하면 원래기능인 강조문자+오렌지색+12포인트(pt)로 글자가 표시 됩니다. 하나의 태그로 여러가지를 지정할 수 있으니 편리하죠?

             <예제 실행 결과>

 임베디드 방식은 html에 스타일을 포함하는 방식 입니다.
 
 
링크(link) 방식

링크방식은 스타일을 파일로 저장해놓고 html 파일에서 필요할때 호출하여 사용하는 방식입니다. 티스토리에서 기본적으로 사용하는 방식이기도 합니다.

 <사용하는 형식>

<LINK  href="mystyle.css"  rel="stylesheet"  type="text/css">

이 링크방식은 매우 간단하죠? 위에서 "mystyle.css"에는 스타일이 지정되어 있습니다.

티스토리 관리자 페이지에서 소스를 컨트롤 할 수 있는 부분은 skin.html 과 style.css 입니다.
티스토리도 링크방식으로 스타일시트를 사용하고 있습니다.
티스토리 skin.html의 내용중 윗쪽을 보면

     <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />

와 같은 내용이 있습니다. style.css에는 스타일이 정해져 있고 이 style.css를 skin.html에 호출하여 사용하는 방식입니다. 그러므로 티스토리에 스타일을 수정할때는 style.css를 수정해주면 바로 스킨에 적용이 됩니다.

 

인라인 방식

인라인 방식은 html 태그에 style속성을 이용하여 직접 지정하는 방식입니다.

<사용 예> 

<p style="color:chocolate; font-weight: bold; font-face:궁서">인라인 방식1</p>
<font style="color:#3366FF; margin-left:10px ;">인라인 방식2</font>

 <소스 설명>
<p> 태그에 스타일을 이용하여 글자색은 초컬릿, 글자속성은 볼드, 글자체는 궁서로 지정을 한 예입니다.
두번째 <font> 태그는 글자색과 왼쪽 마진을 주었습니다. 

           <예제 실행 결과>

 인라인 방식1
 
      인라인 방식2  ==> 왼쪽에서 10픽셀(pixel) 만큼 공백을 두고 내용이 표시됨

위의 3가지 방식을 이용하여 스타일을 지정하며 티스토리는 이미 링크방식으로 작성되어 있으므로 어떤 방식을 사용할것인지는 고민을 하지 않아도 됩니다.

다만, 저는 인라인 방식을 가끔 사용합니다. 특히 사이드바 설정할때 많이 사용하죠. 사이드바의 html 베너출력에서 정렬을 한다든지 줄간격을 맞춘다든지 할때 주로 사용합니다.

쉽게 설명한다고 설명했는데 어렵지 않은지 모르겠습니다. 다음에는 스타일 지정방식에 대해서 할까 생각합니다. 티스토리에서 많이 볼 수 있는 #article이나 .title 과 같은 방식으로 실제적으로 style.css를 이해하는데 필요한 내용입니다. 

저도 많이 알지는 못하지만 혹 궁금한점이 있으면 언제든지 댓글 환영합니다.

스타일시트의 선언방법 및 사용 예제 2

※ 이글이 도움이 되셨다면 RSS로 구독해보세요!  

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. BlogIcon 오백이 2008.10.24 01:04 신고  댓글주소  수정/삭제  댓글쓰기

    어렵다 어렵다 +_+;;;;;;;; 눈이 핑핑 돈다 @_@;;;;;;;;;
    혹시 블로그 왼쪽/오른쪽 사이드바, 본문 너비 조정방법 알수있을까요^_^?
    오른쪽 사이드바를 10px 늘리긴했는데 이상하게 일정이상은 안되더라구요=_=;;
    호기심이 많아서 하루종일 이것저것 스타일시트에서 쪼물딱거렸는데
    잘안되네요 ㅎㅎ 밤이 늦었네요^ㅡ^ 편안한 밤 되세요 (_ _)



    밤이 늦었습니다.

    • BlogIcon Kay~ 2008.10.24 09:25 신고  댓글주소  수정/삭제

      원래 첨에 스킨이나 스타일 만지다 보면
      하루 시간 다 가버립니다.
      처음에 시작할때는 최대한 포스팅을 많이 하는것이 좋다고 생각하는 사람입니다.
      그리고 본문폭은 스킨위자드에서 간단하게 할 수 있어요!
      사이드바는 style.css에 보면

      #sidebar {
      float:right;
      width:200px;
      padding:30px 10px 0 10px;

      이 있는데 여기서 width를 조정하면 될것 같습니다.

  2. BlogIcon kero 2008.10.24 05:38 신고  댓글주소  수정/삭제  댓글쓰기

    한가지 제가 사용하는 CSS 팁중에서 익스플로러나 파이어폭스에서 링크를 누르면 주변에 점선이 나와서 보기 흉할때가 있는데 자바스크립트 onfocus.this.blur()라는것을 그동안 많이들 사용했지만..

    CSS의 경우
    :focus { outline:none; -moz-outline-style: none; }

    이렇게 한줄만 적어주면.. 링크 걸린 부분에 아웃라인 점선이 안보이게 됩니다.
    점선 귀찮은 분들 한번 사용해 보세요 ^^

    • BlogIcon Kay~ 2008.10.24 09:29 신고  댓글주소  수정/삭제

      케로님! 팁감사합니다.
      가끔 메뉴클릭할때 아웃라인으로 점선이 나타나는 경우
      보기 싫을때가 있던데 간단하게 해결할 수가 있겠네요. ^^

  3. 빠리향기 2008.10.24 10:57  댓글주소  수정/삭제  댓글쓰기

    안녕하세요..kay님 처음 글 읽네요..
    이거 블로거로 가져가서 공부하려면 어떻게하죠?!
    못 퍼가나요??

  4. BlogIcon 함차 2008.10.24 15:07 신고  댓글주소  수정/삭제  댓글쓰기

    그러네요..사이트 찾아다니며 많은 분들이 기재하고 계시던데..쉽지 않네요 적용이

    • BlogIcon Kay~ 2008.10.25 00:38 신고  댓글주소  수정/삭제

      예전부터 알고 있던게 아니라면 처음엔 그리 쉽지 않을거에요.
      하지만 자꾸 쳐다보다 보면 알 수도 있지 않을까요?

  5. BlogIcon 사과벌뢰 2008.10.24 16:25 신고  댓글주소  수정/삭제  댓글쓰기

    아웅 저두 외국 무료 템플 다운받아사 해보는데 넘 어려워서 포기 ㅠㅠ

    • BlogIcon Kay~ 2008.10.25 00:37 신고  댓글주소  수정/삭제

      예. 배움에는 한도 끝도 없어요.
      저도 모르는 것은 배우면서 하고 그래요~
      시작하면 한만큼 이익이니 포기했던것 있으면 다시 해보세요~

  6. BlogIcon 시골친척집 2008.10.24 17:03 신고  댓글주소  수정/삭제  댓글쓰기

    조금 한가할때
    kay~님께 꼭 배우고 싶은데..
    갈쳐주실래나?~~^^;;

  7. BlogIcon 웨비토 2008.10.27 15:27 신고  댓글주소  수정/삭제  댓글쓰기

    블로그 디자인 좀 바꿀려고 하니. css에 대해 알아야 수정이 가능해서
    지금 공부중에 있습니다. kay~님 블록에서 공부 좀 해야 겠네요^^

    • BlogIcon Kay~ 2008.10.27 18:07 신고  댓글주소  수정/삭제

      웨비토님! 반갑습니다.
      제 블로그에서 공부하신다면 저야 당연히 영광이죠!
      그런데 공부하실만큼 내용이 충실할지 모르겠네요!

  8. BlogIcon 키르케 2009.09.08 12:13  댓글주소  수정/삭제  댓글쓰기

    아아ㅠ

    이건 좀 어렵네요;
    일단 제 블로그를 확인해보니
    <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
    요런 소스가 있군요.
    (지금 쎄바님의 결백증스킨을 사용중입니다.^^)

    그럼 링크방식으로 되어 있다는거죠?