02 CSS(Cascading Style Sheet)-Part1

 원문 : http://kkamagui.springnote.com/pages/623396

 

들어가기 전에...

 

1.CSS(Cascading Style Sheet)?

 CSS는 웹페이지의 외형을 편리하고 능률적으로 바꿀 수 있도록 해준다. 대부분의 웹 브라우져(Web Browser)는 CSS와 HTML 코드를 연동하여 웹 페이지를 표시할 수 있다. 다만 브라우져간의  약간의 차이 때문에 특정 스타일은 정상적으로 표시되지 않을 수 있으나 대부분은 잘 동작한다.

 

 CSS를 사용하여 얻는 장점은 아래와 같다.

  • HTML 코드에서 디자인에 대한 코드를 줄일 수 있음
  • CSS를 수정함으로써 일괄로 페이지의 스타일을 수정 가능 
  • HTML 코드의 크기를 줄임으로써 웹페이지의 로딩 속도를 빠르게 할 수 있음(CSS는 브라우져에 의해 캐슁될 수 있으므로 효율적으로 동작 가능) 

 

 그럼 이제부터 CSS에 대해서 알아보자.

 

2.XHTML

 HTML의 차기버전으로 HTML의 문제점을 보완한 대체 HTML이다.  XHTML의 필수적인 조건은 아래와 같다.

  • Doctype을 반드시 명세해야 함
  • 태그(Tag)는 반드시 짝을 이루어야 함. ex) <p> </p> or <p />
  • 태그는 반드시 소문자로 써야 함. 
  • Attribute는 반드시 " "로 묶어줘야 함. ex) <a href="http://kkamagui.tistory.com" > 까마구의 블로그 </a> 

 

 아래는 XHTML로 구성된 스프링노트 페이지의 한 예이다. DOCTYPE 같은 경우는 거의 고정적이므로 저장해 놨다가 붙여 넣으면 된다.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
  2. <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
  3. <title> kkamagui의 블로그 </title> 
  4. </head> 
  5. <body> 
  6. <p> 페이지의 내용이다. </p> 
  7. </body> 
  8. </html> 

 

3.스타일 시트(Style Sheet)의 종류

3.1 내부 스타일 시트(Internal Style Sheet)

 내부 스타일 시트는 HTML 코드 내에 스타일 시트에 대한 내용이 포함된 것을 의미한다. 일반적으로 스타일 시트 코드는 <head> 태그 안에 포함되며 아래와 같은 형식으로 사용된다.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
     
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=EUC_KR" />
    <title> kkamagui의 블로그 </title>
    <!-- 스타일 코드 시작 -->
    <style type="text/css">
    h1
    {
        color : #FF7643;
        font-family : Arial;
    }
  2. p
    {
        color : red;
        font-size : 0.9em;
    }
    </style>
    </head>
  3. <body>
    <h1 /> 큰 제목입니다. ^^;;
    <p /> 내용 입니다.
    </body>
  4. </html> 

 <style type="text/css"> 태그를 이용해서 아래의 코드가 HTML이 아닌 css 임을 알려주고 해당 Element의 속성을 적어주면 된다.

 

3.2 외부 스타일 시트(External Style Sheet)

 외부 스타일 시트는 스타일 시트가 HTML 코드 외부에 있음을 나타낸다. HTML 코드에는 스타일 코드 대신에 스타일 시트의 경로가 포함된다. 아래는 XHTML의 내용이다.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
     
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=EUC_KR" />
    <title> kkamagui의 블로그 </title>
    <link rel="stylesheet" type="text/css" href="test.css" />
    </head>
  2. <body>
    <h1 /> 큰 제목입니다. ^^;;
    <p /> 내용 입니다.
    </body>
  3. </html> 

 

  아래는 text.css 파일의 내용이다.

  1. h1
    {
        color : #FF7643;
        font-family : Arial;
    }
  2. p
    {
        color : red;
  3.     font-size : 0.9em;
    } 

 

 실제 HTML 코드와 스타일 시트가 분리되므로 같은 스타일을 여러 페이지에 걸쳐서 적용하기가 편리한 장점이 있다.

 

4.CSS 기본

4.1 CSS의 스타일 구성

 CSS의 스타일은 2가지로 구분된다. 첫번째는 선택자(Selector)이고 두번째는 선언구간이다. 위의 예제에서 선택자와 선언구간을 나누어 보면 아래와 같다.

  1. h1 // 선택자, 페이지 내의 h1 태그를 의미
    {  // 선언 구간. 속성을 정의
        color : #FF7643;
        font-family : Arial;
    } 

  간단히 설명하면 속성을 정의할 태그를 먼저 정의하고 그 하부 속성들을 {}로 감싸면 된다.

 

4.2 클래스 선택자(Class Selector) 및 ID

 태그중 특별한 태그만 속성을 다르게 주고 싶을 때 사용할 수 있는 방법 중에 하나이다. 태그의 클래스를 정의해서 해당 클래스를 가진 태그에만 속성을 적용할 수 있다. HTML 코드에 아래를 추가하고 CSS에 .RedH1의 속성을 추가함으로써 h1의 속성을 재정의 할 수 있다.

  1. <h1 class="RedH1" /> 큰 제목2 입니다. abcdefg ^^;;
    <p /> 내용 입니다.
    </body>

 

 아래는 RedH1 이라는 클래스를 정의한 것이다.

  1. .RedH1 
  2. { 
  3. color : red; 
  4. } 

 주의할 점은 CSS에서 클래스를 정의할때 "." 기호를 사용해야 한다는 점이다.

 

 비슷한 역할을 ID로도 할 수 있다. ID는 #으로 CSS에 표시하며 아래와 같이 사용가능하다.

  1. <h1 ID="BlueH1" /> 큰 제목3 입니다. abcdefg ^^;;
    <p /> 내용 입니다.
    </body> 

 

  1. #BlueH1
    {
        color: blue;
    }

 

4.3 하위, 그룹, 전체 선택자 속성 정의

 위에서 언급했던 방식으로 간단히 스타일 시트를 구성하면 모든 태그 또는 모든 클래스에 스타일이 적용된다. 하지만 특정 태그 하위의 태그만 속성을 다르게 하고 싶다면 어떻게 할가? 클래스를 다 정의해서 클래스를 넣어주면 될까?

 간단히 해결할 수 있는 방법은 하위 선택자를 직접 기술해서 사용하면 된다. 만약 RedP 아래에 div 태그에만 특별한 속성을 주고 싶다면 아래와 같이 입력하면 된다.

  1. .RedP div 
  2. { 
  3.     color : red; 
  4. } 

 

 또 다른 방법으로는 아래와 같이 입력할 수도 있다. 아래는 RedDiv를 클래스명으로 가지는 div에 속성을 적용하는 방법이다.

  1. div.RedDiv 
  2. {
  3.     color : red;
    } 

 

 그룹 선택자는 "," 로 구분하며 클래스, ID, 태그 모두 표현 가능하다. 아래는 그룹 선택자의 예제이다.

  1. h1, p, .RedP { color : red; } 

 

 만약 .RedP의 모든 클래스에 속성을 적용하고 싶다면 "*"를 사용하면 된다.

  1. .RedP * { font-wieght : bold; } 

 

 많이 쓰는 태그중에 링크를 빠뜨릴 수 없는데, 링크는 크게 4가지의 상태를 가진다. 각 상태별로 특별한 속성을 지정해 줄 수 있다.

  • a:link : 미방문 링크 또는 마우스가 링크 위에 있을 때의 상태
  • a:visited : 이미 방문한 링크
  • a:hover : 마우스가 링크 위를 움직일 때
  • a:active : 방문자가 링크를 클릭할 때 

 

5.각 태그별 사용가능 속성

5.1 font

 font 태그는 아래과 같은 속성들을 가지고 있다.

  • font-family : 화면에 표시할 글꼴들의 집합. 대체 글꼴을 위해 여러가지 글꼴을 나열할 수 있음

    • font-family : "Arial", "돋움체", "굴림체"; 

  • color : 글자 색을 설정

    • font : #RRGGBB; or balck;
    • font : rgb( 255, 255, 255); or rgb( 100%, 100%, 100% );

  • font-size : 글자의 크기를 변경

    • font-size : 1em; or  100% or 12px;
    • %나 em 계산법은 하위 태그에 상속되므로 주의해서 써야 함 

  • font-style : 이탤릭으로 바꾸거나 되돌림

    • font-style : italic; or normal; 

  • font-weight : 폰트를 bold로 바꾸거나 되돌림

    • font-weight : bold; or normal; 

  • font-decoration : 줄을 긋거나 지움 

    • font-decoration : underline; or overline; or line-through; or none; or underline overline; 

  • letter-spacing : 자간(단어와 단어간의 간격)을 늘리거나 줄임. 양수의 경우 기본 간격보다 넓어지고 음수의 경우 좁아짐

    • letter-spacing : -1px; or 1px; or -.1em; 

  • line-height : 줄간격 조절. 하위 태그에 상속되니 주의해야 함. 단 아무 단위도 없는 숫자는 배수를 의미하므로 글자의 크기에 배수가 됨(많이 씀).

    • line-height : 150%; or 1.5em; or 10px; 1.5;

  • text-align : 글자의 배치를 결정 

    • text-align : center; or left; or right; or justify; 

  • text-indent : 첫줄을 들여쓰거나 내어씀. 양수이면 들여쓰고 음수이면 내어씀

    • text-indent : 25px; or 1em; 

  • margin : 단락 사이의 간격을 조절. left, right, top, bottom 이 있음

    • margin : 0; or margin-left : 0; 

 

5.2 리스트 목록 스타일(ul, ol)

  • list-style-type : 목록 앞의 첨자를 붙이는 방식 정의. square, disk, circle, none, decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman, lower-roman 중에서 선택 가능

    • list-style-type : square; or none; 

 

5.3 테두리(Border)

 테두리는 크게 아래의 3가지 속성을 가진다.

  • color : 테두리의 색깔

  • width : 테두리의 넓이

    • thin, medium, thick와 같은 키워드 사용가능 
    • px 값 사용 가능 

  • style : 테두리의 모양

    • solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden 사용 가능 

 

 속성을 설정하는 방법은 아래와 같다.

  • border 4px solid red; or border-left : 2px solid black;
  • border-width : 2px; 
  • border-style : double; 
  • border-color : red; 

 

5.4 배경색 및 너비/높이 그리고 오버 플로우(overflow) 처리

  • background-color : 배경색을 정의

    • background-color : red; 

  • height : 높이를 정의

    • height : 20px; or 2em; or 30%;

  • width :  너비를 정의

    • width :  20px; or 2em; or 30%;

  • overflow : content가 영역을 넘어갈 때 표시할 방법

    • overflow : visible; : 아무런 처리를 안함 
    • overflow : scroll; : 무조건 스크롤바 생성 
    • overflow : auto; : 넘어가면 스크롤바 생성. 안 넘어가면 아무 처리 안함
    • overflow : hidden; : 넘어가는 영역 표시 안함 

 

5.5 float and clear

 float는 간단하게 말하면 element를 좌측이나 우측으로 옮겨서 사이드 바와 같은 형태로 만들어 주는 것을 말한다.

  • float : 해당 element를 좌측 or 우측 으로 이동하거나 원래대로 되돌려 놓음

    • float : left; or right; or none; 

  • clear : float element가 여러개가 있을 때 표시 방식을 표시. left, right, both, none 속성을 가짐. 주위의 float element가 아래로 내려가도록 함

    • clear : left; or right; both; none;

 

 아래는 float을 테스트하기위한 간단한 코드이다.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
     
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=EUC_KR" />
    <title> kkamagui의 블로그 </title>
    <link rel="stylesheet" type="text/css" href="test.css" />
    </head>
  2. <body>
    <h1> 큰 제목1 입니다. abcdefg ^^;; </h1>
  3. <div class="subnote">아무것도 없는 허허벌판(??)에서 윈도우 라이브러리를 사용하기가 쉽지 않은데, 그래서 템플릿으로 사용할 수 있는 프로젝트를 올려놓았다. 26 윈도우 라이브러리(Window Library) 사용을 위한 프로젝트(Project) 만들기에서 프로젝트 파일을 찾을 수 있다.</div>
  4. <div class="subnote">아무것도 없는 허허벌판(??)에서 윈도우 라이브러리를 사용하기가 쉽지 않은데, 그래서 템플릿으로 사용할 수 있는 프로젝트를 올려놓았다. 26 윈도우 라이브러리(Window Library) 사용을 위한 프로젝트(Project) 만들기에서 프로젝트 파일을 찾을 수 있다.</div>
  5. <p> NDS에 윈도우 라이브러리가 구현되어있으므로(물론 내가 만들었다. 자세한 내용은 02 NDS 윈도우 시스템(Windows System)을 참고하자) 위에서 설명한 알고리즘 테스트 프로그램의 소스를 크게 수정없이 사용할 수 있다. 차이라면 개인적인 취향 때문에 함수 몇개가 덜 구현되거나 스타일이 조금 다르다는 정도...?</p>
  6. <p> 포팅에 대한 내용은 크게 다루지 않을 것이며 궁금한 사람은 Diff 프로그램으로 위의 테스트 프로그램과 NDS로 포팅된 소스의 내용을 비교해 보면 알 수 있을 것이다. 메인 소스는 거의 바뀌지 않았음을 알 수 있다. 이 얼마나 행복한 일인가... ㅜ_ㅜ </p> 
  7. </body> 
  8. </html> 

 

  1. body *
    {
        font-family : "돋움";
        zoom : 1;
    }
  2. h1
    {
        color : #FFFFFF;
        font-family : "굴림";
        font-size : 1.5em;
        background-color : #000000;
        margin : 20px 0px;
        padding : 10px;
        overflow : hidden;
    }
  3. p
    {
        margin : 5px 20px 5px 20px;
        padding : 0px 0px 0px 0px;
        font-size : 1em;
        color : black;
        line-height : 1.5em;
    }
  4. .subnote
    {
        border : 3px dashed #777777;
        margin : 5px 20px 5px 20px;
        padding : 5px;
        line-height : 1.5em;
    } 

 위를 익스플로러로 보면 아래와 같이 표시된다.

float1.PNG

<float 설정 이전>

 

 이제 float 속성을 넣어보자. subnote의 속성을 아래와 같이 float와 width를 추가한 뒤 확인하자.

  1. .subnote
    {
        border : 3px dashed #777777;
        margin : 5px 20px 5px 20px;
        padding : 5px;
        line-height : 1.5em;
        float : right;
        width : 200px;
    } 

 

 웹페이지를 확인하면 아래와 같이 div가 좌측으로 이동하고 글이 주위를 감싸는 형태로 표시된다.

float2.PNG

<float 후>

 

 이제 두개의 float element가 같이 나열되는 것이 아니라 순서대로 아래에 위치하도록 해보자. clear: both; 속성을 .subnote에 추가하면 끝이다.

  1. .subnote
    {
        border : 3px dashed #777777;
        margin : 5px 20px 5px 20px;
        padding : 5px;
        line-height : 1.5em;
        float : right;
        width : 200px;
        clear : both;
    } 

 화면을 표시해보면 아래와 같이 나온다.

float3.PNG

<clear 사용 후>

 

 float element의 경우 다른 속성들을 위에 표시되기 때문에 뒤에 있는 element가 그대로 표시되어 보기 싫게 되는 경우가 있다. 그런 경우 float element에의해 가려지는 element의 속성에 overflow : hidden; 속성을 추가해주면 된다. 익스플로러 6 이전 버전의 경우 그래도 잘 되지 않는 경우가 있는데 이때는 zoom: 1; 속성을 body에 추가해 주면 된다.

  1. body *
    {
        font-family : "돋움";
        zoom : 1;
    }

  2. h1
    {
        color : #FFFFFF;
        font-family : "굴림";
        font-size : 1.5em;
        background-color : #000000;
        margin : 20px 0px;
        padding : 10px;
        overflow : hidden;
    } 

 

 

6.참고

6.1 margin, border, padding 간의 관계

 간단히 설명하면 margin은 객체의 경계선 즉 border와 외부 객체 간의 여유공간을 설정하는 것이고 padding은 border 내부와 내부에 포함되는 Contents 간의 공간을 표시하는 것이다. left, right, top, bottom이 있으며 이것을 그림으로 표현하면 아래와 같이 나타낼 수 있다.

margin,padding,border.gif

<margin, border, content 간의 관계>

 

 

 

이 글은 스프링노트에서 작성되었습니다.

'프로그래밍(Programming)' 카테고리의 다른 글

D 언어로 만든 게임~!!! 상당한 완성도와 재미를 보장합니다. ^^  (4) 2007.12.02
GPL에 대한 잘못된 생각~!!  (8) 2007.12.01
메뉴 또는 버튼에 좋은 이름을 지어야 하는 이유~  (4) 2007.11.30
스프링 노트에서 보낸 코드 자동으로 문법 하일라이팅(Syntax Highlight) 하기  (0) 2007.11.27
압축된 자바스크립트 소스 예쁘게 보기  (5) 2007.11.24

+ Recent posts

티스토리툴바