스타일시트의 지정방법 및 사용 예제 2

스타일시트를 선언하는 방법1에 대해서 지난번에 글을 올렸습니다. 이번에는 실제로 사용예제를 통하여 스타일 시트를 선언하는 방법에 대한 글을 쓸까합니다.

아! 한가지 이번에 CSS 관련 포스팅하면서 준비한것이 있습니다. 바로 태그연습장입니다. 스타일시트 설명중에 나오는 소스를 태그연습장에 복사하여 넣거나 직접 연습할 수 있는 연습장입니다.

태그연습장은 화면 상단 메뉴에 있습니다.


:: 스타일시트의 선언형식

스타일시트의 선언형식은 아래와 같습니다.

        선택자 { 속성: 값 ; 속성: 값 ; }

먼저 선택자를 적고 중괄호({}) 안에 속성(attribute)과 값을 적습니다. 속성은 여러개를 적어줄 수 있으며 속성과 속성의 구분은 세미콜론(;)으로 해주고, 속성은 콜론(:)을 입력한 후 값(value)을 적어주면 됩니다.

시작부터 머리가 아프나요? 그럼 예제를 보면서 설명을 하도록 하겠습니다.

지금 설명하는 내용은 스타일 선언에 대해서만 이해하세요!
속성이나 값보다는 선언방법위주로만 보시면 됩니다. 속성의 뜻, 값의 종류는 나중에 설명드리겠습니다.

 <스타일 선언 예제>

위 예제에서 선언한 스타일은  b {font-size:12pt; color:yellow; } 입니다.  b는 선택자이고 font-size는 속성, 12pt는 값입니다. 의미는 본문에서 b 태그를 사용하면 12포인트(pt)크기의 노랑색 강조문자로 표시하라는 의미입니다. (<body>와 </body>사이가 스타일 b를 사용한 예입니다. )

b태그는 글자를 강조해주는 태그지만 위와 같이 스타일을 선언한 후에 b태그를 사용하면 이후부터는 12포인트(pt)크기의 노랑색 강조문자로 표시가 됩니다.
p에는 녹색글자에 밑줄문자로 스타일을 선언하였습니다.  위소스중 7번줄~10번줄의 결과는 아래와 같습니다.

 스타일을 이용하면 반복적인 작업을 줄일 수 있습니다.

 P태그는 문단을 구분하는 태그입니다. 녹색의 밑줄문자로 표시됩니다.

 

          < 선택자로 사용할 수 있는 요소 >

 
  • html 태그
  • 클래스
  • ID
  • 기타 그룹화 등

 

:: html 태그를 이용한 스타일시트 선언

이 방법은 html 태그(body, p,b,h1,h2, table, td, img, input, form 등)를 이용하여 스타일시트를 선언하는 방법으로 스타일시트를 선언하면 이후에 사용되는 태그에는 선언한 스타일시트가 적용되어 화면에 표시가 됩니다. 아래에 예제가 있습니다.

 * font-family : 여러종류의 폰트를 지정할때 사용하는 속성으로 제일 처음에 적어준 폰트로 화면에 표시가 되나 이용자PC에 첫번째 적어준 폰트가 없는경우 두번째 적어준 폰트가, 그것도 없으면 세번째 적어준 폰트를 대체하여 화면에 표시되도록 하는 속성임.

지금까지 예로 들은것들이 모두 태그를 이용한 예제였으므로 위의 스타일시트 사용예는 생략하겠습니다. 태그 연습장에서 직접 연습해보세요!

 

:: 클래스를 이용한 스타일시트 선언

클래스를 이용한 방법은 선택자의 이름을 태그가 아닌 임의의 이름을 정하는 방법으로 스타일시트를 선언하며 선택자앞에 점(.)을 적어줘야 합니다. 클래스는 전체적으로 적용이 되는 것이 아니고 html 문서에서에서 class를 지정한 태그에서만 style이 적용이 됩니다.

설명: 클래스는 위 예처럼 .red9, .khaki12 처럼 선택자를 지정합니다. 사용은 html 태그에 class="red9" 처럼 적어주면 적어준 태그에만 style이 적용이 됩니다. 아래는 결과입니다.

 빨강색 글자에 글자크기는 9포인트
 카키색 글자에 글자크기는 12포인트

또 다른 예제 한번 보겠습니다.

결과를 먼저 보면

 비앤아이 Blog - 녹색
 비앤아이 Blog - 파랑
 비앤아이 Blog - 노랑

같은 <P> 태그를 사용했는데 글자색이 다릅니다. 이유는 같은 태그를 사용했지만 클래스가 다르기 때문입니다. 클래스는 이렇게 다른 태그와 같이 사용할 수도 있습니다. 

 

:: ID를 이용한 스타일 선언

ID를 이용한 방법도 지정하는 방법은 클래스와 동일하나 선택자 앞에 #을 붙이며, 사용시는 ID="선택자" 와 같은 방식으로 사용을 합니다.

결과는 클래스와 동일합니다.

겉으로 보기에 클래스와 ID는 . 과 #의 차이, 사용시 class와 ID 두 차이밖에 없습니다. 하지만 클래스는 같은 클래스를 여러번이고 계속 사용할 수 있지만 ID 스타일은 html 문서내에서 한번만 사용합니다. 꼭 한번 사용해야 하는 것은 아니지만 ID는 자바스크립트에서 그 값을 컨트롤 할 수가 있습니다. 그런경우 의도하지 않는 문제가 발생할 수 있으므로 일반적으로 한번만 사용을 합니다.

<p id="red9">비앤아이</p>
<p id="red9">K의 블로그 비앤아이 </p>

위에서 같은 ID를 두번 사용했지만 오류는 나지 않습니다. 똑 같이 빨간색 글자로 표시가 됩니다. 하지만 자바스크립트로 값을 변경하는 경우 두번째 사용한 ID에 해당하는 값이 바뀌게됩니다. 이해안가시는분은 그냥 클래스는 여러번, ID는 한번 사용한다. 이정도만 알아두시면 될것 같습니다.

 

:: 그룹화 (복수선택)

그룹화는 한번에 여러개의 선택자를 선언하는 방식입니다. 여러개의 선택자에 지정되는 속성과 값이 모두 같을때 사용하는 방식입니다.

결과는 태그연습장에서 실행해보세요! 소스 복사는 소스 첫줄에 있는 copy to clipboard를 클릭하면 복사됩니다.
위의 예제를 보면 td, p, b 태그를 콤마(,)로 구분해서 나열하는 방식으로 스타일을 선언하였습니다. 이런 경우 td, p, b 모두 같은 스타일로 선언이 됩니다. (단, b는 자체적으로 강조기능이 있기 때문에 글자가 강조됨)

  *참고로 태그는 대.소문자를 구분하지 않습니다.

티스토리 사용자는 이제 style.css를 한번 들여다보세요! 그 안에 지정한 속성의 뜻은 모를지라도 선택자는 대부분 눈에 들어오지 않나요? ^^

다음에는 style.css를 들여다 보면서 설명을 할까 합니다.  궁금한 사항이 있으면 댓글로 남겨주세요!

스타일시트(CSS) 이해하기 for 티스토리
스타일시트(CSS)의 선언방법 1

댓글을 달아 주세요

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

  1. BlogIcon 드자이너김군 2008.10.27 09:49 신고  댓글주소  수정/삭제  댓글쓰기

    오호 요런 정보를 ~ ㅋ 깔끔하니 잘 배워가용~

  2. BlogIcon 시골친척집 2008.10.27 09:53  댓글주소  수정/삭제  댓글쓰기

    저희 홈페지에 이정보를 저장해 두고 싶은데요~~
    괜찮을까요?

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

      홈페이지에요? ^^ 예.. 그렇게 하세요!
      그런데 이 정보라면 CSS에 대한 모든 내용인가요?

    • BlogIcon 시골친척집 2008.10.27 21:53 신고  댓글주소  수정/삭제

      네~
      배우고 알아둬야할게 무지 많은데
      그냥 읽기만 헤서는 도통 모르겠고
      홈페지에 저장해뒀다가
      수시로 꺼내보면서 연습해볼까해서~~^^

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

      ^^ 예 그렇게 하세요! 제블로그 상단메뉴에 태그 연습장이 있으니까
      연습장에 태그나 스타일시트 복사해서 붙여넣은다음 결과보기를 해보세요!
      그런다음 수정도 해보고 하다보면 금방 익혀질꺼에요!

  3. BlogIcon 라이너스™ 2008.10.27 10:46 신고  댓글주소  수정/삭제  댓글쓰기

    멋진 정보입니다.
    제가 테그 초보라....
    초보도 잘하고싶은데 배울데가 없었는데
    늘 잘보고있답니다^^

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

      라이너스님! 반갑습니다.
      정보가 되었다니 다행입니다.
      저 설마 태그에 대한 설명도 올려야 하는것은 아니겠죠? ㅋㅋ

  4. BlogIcon 왕비 2008.10.27 15:15  댓글주소  수정/삭제  댓글쓰기

    어렵네요...머가몬지..ㅎ
    즐거운 한주 되세요

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

      왕비님은 지금은 별로 중요한 정보는 아니지만
      티스토리로 오게 되면 꼭 알아야 할 사항입니다. ^^
      설마 css로 요리 포스팅을 하시는 것은 아니겠죠? ㅋㅋ

  5. BlogIcon HEPI 2008.10.28 01:37 신고  댓글주소  수정/삭제  댓글쓰기

    너무 정리가 깔끔하네요. 많은 시간 투자하셨겠네요.
    고생하셨어요.

    • BlogIcon Kay~ 2008.10.28 08:59 신고  댓글주소  수정/삭제

      ㅋㅋ 감사합니다. 처음에는 생각없이 포스팅을 했는데
      하다 보니 아무래도 소스부분 처리하는게 불편해서 코드하이라이터 적용하고 하다보니
      시간이 좀 걸리네요! HEPI님! 속사정도 알아주시고 다시한번 감사합니다. ^^

  6. BlogIcon 의리형 2008.10.28 09:03 신고  댓글주소  수정/삭제  댓글쓰기

    저런 언어 관련 지식들은 어지간해서는 외워지지가 않는 것 같습니다. 매번 사용할 때 마다 새로 공부해서 해야 하는 제 경우는 뭘로 극복을 해야 할까요. -ㅅ-;

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

      모든 사람들이 다 그럴것입니다.
      관리를 위해서 필요한 부분만 수정하면 이다음에 다시 사용할 일이 거의 없으므로
      잊어버리게 될거에요!
      사실 외운다는 것은 별로 무의미한것 같습니다.
      특히나 컴퓨터 언어나 웹관련 언어들은 외워서 되는것보다..
      자꾸 스스로 작성을 해봐야 기억도 오래가고 저절로 외워지게 됩니다.
      좋은 방법이라면 자꾸 작성을 해보는 것이 가장 좋은것 같습니다.
      무엇이든 작성하고 값도 바꿔보고 해보세요!

  7. BlogIcon 메아리 2008.10.29 13:48 신고  댓글주소  수정/삭제  댓글쓰기

    이쪽에 문외한이다보니 이런 정보를 소개하는 분들이 참 부럽네요.
    블로그쪽에 아이디어가 있는데 웹프로그래밍이 전혀 안되니,
    좀 아쉽고 답답함을 많이 느낍니다ㅠ

    웹프로그래밍을 한번 배워볼려고 하는데 어떻게 하면 좋을까요 ? :)

    • BlogIcon Kay~ 2008.10.29 21:31 신고  댓글주소  수정/삭제

      메아리님! 반갑습니다. ^^
      웹프로그램은 종류가 많이 있습니다.
      저도 잘은 모르지만 어떤분야의 프로그래밍을 할것인가에 따라 달라집니다.
      제가 알고있는것은 크게 php, asp, jsp같은 서버기반 프로그램,
      자바스크립트, html같은 클라이언트 기반 프로그램이 있답니다.
      서버기반 프로그램은 서버에서 실행되는 웹프로그램으로 DB와 연동한 처리도 하고 소스보안도 된답니다.
      자바스크립트는 서버없이도 실행이 되는 것으로 동적인 웹페이지를 작성할수가 있답니다.
      정적인 html을 보완하고 각종 마우스나 키보드 이벤트를 처리할 수가 있습니다.
      무엇이든 하나를 배우면 나머지는 배우기가 쉽습니다.
      명령이나 문법이 비슷하거든요.
      관심이 있으시다면 배워두면 전문프로그래머는 못된다하더라도
      웹을 이용하는 만큼은 충분히 활용을 할 수가 있을것 같습니다.

  8. 웹아트 2009.01.19 17:42  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다
    그런데 <head></head>사이에 스타일시트를 제마음대로 정하고
    기본태그<p, b>없이 원하는 <body>아무부분에나 적용시키는
    것은 어떻게 하나요? 드림위버에서는 마우스로 블럭설정하고
    작성한 css 골라서 클릭만하면 변하잖아요..궁금해요~

    • BlogIcon Kay~ 2009.10.25 21:52 신고  댓글주소  수정/삭제

      css를 사용하기 위해서는 기본적으로 태그와 함꼐 사용을 해야 합니다.
      그러므로 <p>, <b>, <img> 등의 태그없이 적용하는 방법은 없습니다.
      드림위버나 나모웹에디터는 html 작성이 편하도록 해주는 프로그램으로
      그 사용이 마치 한글워드프로세서처럼 매우 편리하지만
      실제 소스에는 더 복잡한 태그들로 구성이 되어 있답니다.

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

    살짝씩 어려워집니다.ㅠ
    모두 한번 다 읽고
    돌아와서 다시 읽어봐야겠어요.
    이렇게 쉽게 설명해주시는데 못알아들으면
    블로그꾸미는거 포기해야겠지요?
    안돼요. 다시 올게요.ㅋㅋㅋ

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

      에구구.. 지금쯤 마스터 다 하셨나요? ㅎㅎ
      제가 너무 일직 댓글을 봤네요~~
      그런데 지금쯤이면 마스터 다 하셨죠? ㅋㅋ