Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

Kim's Programming

HTML - CSS(Cascading Style Sheet) 본문

Programming/HTML

HTML - CSS(Cascading Style Sheet)

Programmer. 2015. 8. 22. 13:58

CSS


    • 일반적으로 문서는 내용과 스타일로 분리할 수 있습니다. 이제까지의 HTML에서는 문서의 내용에 글자 크기, 글꼴, 색상, 문단정렬, 레이아웃 등의 스타일 기능을 적절히 섞어서 써왔습니다. 하지만 스타일 부분을 별도로 분리하여 쓸 수 있다면 문서에 대한 가독성도 좋아지고 스타일 측면에서도 문서에 통일성을 기할 수 있습니다. CSS는 HTML문서에서 스타일에 관련된 부분을 별도로 분리하여 정의할 수 있도록 지원하는 기능입니다. CSS를 사용하여 스타일을 정의하면 문서의 유지보수 단계에서 스타일의 일관성을 유지할 수 있게 지원할 뿐 아니라, 스타일에 대한 수정이 용이해 집니다. 또한 CSS 코드는 브라우저의 캐쉬메모리에 상주하게 되므로 문서의 다운로드 시간을 줄여 줌으로써 응답속도도 높힐 수 있는 장점도 존재합니다. CSS는 "스타일시트라고도 부를 수 있습니다.

CSS사용 유형


CSS의 사용방법은 세 가지로 구분이 됩니다. 첫 번째는 태그 내부 삽입형입니다. 이 형태에서는 HTML 태그 내에 "syle"이라는 속성을 이용하여 CSS 코드를 기술합니다.
1
<P style="color:blue;font-weight:bold">
cs

위 코드는 문단 태그인 <P>태그 내에 글자 색상을 푸른색으로, 진하게 스타일을 적용한 예이다. 스타일을 설정할 때 위와같이 태그에 style속성을 적용하게 되며 큰따옴표 안에 스타일 코드를 나열합니다. 스타일 코드는 스타일 속성과 속성값은 콜론(:)으로 구분하며, 여러 개의 속성이 나열될 경우는 세메콜론(;)으로 구분합니다. 다음 소스는 태그 내부에 CSS코드를 삽입하는 경우입니다.

1
2
3
4
5
6
7
8
9
10
11
<HTML>
    <HEAD>
        <TITLE>
            CSS!
        </TITLE>
    <HEAD>
    <BODY>
        <P style="color:blue">문단 내용이 파란색</P>
        <P style="color:yellow">문단 내용이 노란색</P>
    </BODY>
</HTML>
cs

다음은 소스의 결과는 다음과 같습니다.



      • 두 번째는 문서 내 지정형입니다. 이 형태는 HTML문서 내에(주로 <HEAD> 부분)<STYLE>이란 태그를 사용하여 이 안에 스타일 코드를 삽입하는 방식입니다. 아래코드는 HTML내 모든 <H1>태그에 있는 내용을 글자크기 30pt로 나타내며 <BODY>태그 안에 있는 모든 내용에 대해 색상을 blue색으로, 배경은 회색으로 지정하는 예입니다.

        1
        2
        3
        <STYLE type="txt/css">
        H1{font-size:30pt;}BODY{color:blue;background-color:gray}
        </STYLE>
        		cs

        다음 소스는 HTML문서의 HEAD부분에 별도로 스타일 코드를 삽입하는 방식입니다.

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        <HTML>
            <HEAD>
                <TITLE>
                    CSS!(문서 내 지정형)
                </TITLE>
                    <STYLE type="text/css">
                        BODY{color : darkgray}
                    </STYLE>
            </HEAD>
            <BODY>
                다크 그레이 색 적용 글씨
            </BODY>
        </HTML>
        		cs

        다음 소스의 결과는 다음과 같습니다.


      • 세 번쨰 유형은 외부문서 삽입형입니다. 이는 외부에 별도 파일로 CSS코드를 기술해 두고 HTML문서에서 <LINK>태그를 이용하여 해당 스타일 코드를 연결하여 서식을 적용하는 형태입니다. 아래코드는 외부의 CSS문서를 연결하여 스타일을 적용하는 예를 보여 주고 있습니다. 외부 스타일 파일은 확장자가 .css로 만들어져야합니다. <LINK>태그는 보통 HEAD부분에 기술됩니다.

        1
        <LINK rel="stylesheet" type="text/css" href="style-1.css">
        		cs

        다음 소스는 외부 파일로 스타일 코드를 정의하고 이를 HTML 문서에서 불러와 사용하는 방식입니다.

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        <HTML>
            <HEAD>
                <TITLE>
                    CSS!(외부 문서 삽입)
                </TITLE>
                    <LINK rel="stylesheet" type="text/css" href="style01.css">
            </HEAD>
            <BODY>
                <P>그린과 빨간 경계 스타일이 적용된 글씨</P>
            </BODY>
        </HTML>
        -------------------------------------------------------------------예제4.html
        P{ color : green ; border : solid red;}
        -------------------------------------------------------------------style01.css
        		cs

        다음소스의 결과는 다음과 같습니다.



CSS 정의 방법


CSS 사용 방법
    • 스타일시트는 스타일을 적용할 대상을 정의하는 선택자(selector)와 스타일 속성과 송성값으로 구성되며 사용 형식은 다음과 같습니다.
      선택자 1, 선택자 2, … {속성1 : 속성값1 ; 속성2 : 속성값2 … 속성n : 속성값n}

    • 스타일 속성과 속성값은 콜론(:)으로 구분하다, 여러 개의 속성이 나열될 경우는 세메클론(;)으로 구분합니다. 문단태그인 P태그에 나타난 내용에 대해 글자는 푸른색으로 배경색은 빨간 색으로 스타일을 정의한 예입니다.
      P{color:blue; background:red}

중첩태그 선택자

    • 중첩태그를 선택자로 사용하여 스타일을 적용할 수도 있습니다. 예를 들면, 모든 <H2>태그가 아니라 <P>태그 안 나타난 <H2>태그의 내용에 대해서만 특정스타일을 적용하고 싶은 경우가 있는데 이경 아래와 같이 두 태그를 선택자로 사용하여 스타일을 정의하면 됩니다.
      P H2 {font-family:궁서 color:red}
다음 소스를 보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<HTML>
    <HEAD>
        <TITLE>
            중첩태그선택자
        </TITLE>
            <STYLE>
                P FONT {font-family:궁서;color:red;}
            </STYLE>
    </HEAD>
    <BODY>
        <P><FONT size=3>중첩태그 안에 있는 내용</FONT></P>
        <FONT size=4>중첩태그가 아닌 내용</FONT></P>
    </BODY>
</HTML>
cs
다음의 결과는 다음과 같습니다.


클래스 선택자

    • 동일한 태그이더라도 다른 스타일을 적용하고 싶은 경우가 있습니다. 이 경우에는 선택자에 CLASS속성을 추가하여 사용하는데 이를 클래스 선택자라고 부릅니다. 다음의 첫 줄은 클래스 선택자를 정의하는 형식, 두 번째는 본문에서 클래스 선택자를 이용 스타일을 정의하는 형식입니다.

      1
      2
      태그명.클래스명 {속성;속성값}
      <태그명 class="클래스명">.........</태그명>
      		cs
    • 클래스 선택자는 태그명을 생략하고 ".클래스명"의 형태로 정의할 수도 있습니다. 이 떄는 어느 태그에 사용되든지 관계없이 해당 클래스명이 속성으로 정의된 모든 태그의 내용에 스타일을 적용하게 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<HTML>
    <HEAD>
        <TITLE>
            클래스 선택
        </TITLE>
            <STYLE type="text/css">
                P FONT {font-family:궁서;color:red;}
            </STYLE>
    </HEAD>
    <BODY>
        <P><FONT size=3>중첩태그 안에 있는 내용</FONT></P>
        <FONT size=4>중첩태그가 아닌 내용</FONT></P>
    </BODY>
</HTML>
cs

다음의 결과는 다음과 같이 됩니다.





ID 선택자


    • 클래스 선택자와 유사한 기능을 수행하는 선택자로 ID선택자가 있습니다. ID선택자는 ID속성이 있는 특정태그의 내용에만 해당스타일을 지정한다는 점에서 클래스 선택자와 유사하지만, 특정 클래스 속성값은 한 문서 내의 여러 태그에 나타날 수 있는데 반해, ID속성 값은 한 문서에 한번만 사용할 수 있다는 점에서 차이가 있습니다. 아래 첫 번째 줄은 ID선택자를 정의하는 형식이고, 두번째 줄은 본문에서 ID 선택자를 사용하여 스타일을 정의하는 형식입니다.

      1
      2
      태그명#ID {속성;속성값}
      <태그명 id="ID명">.....</태그명>
      		cs


    • ID 선택자도 태그명을 생략하고 "#ID명"의 형태로 정의할 수도 있습니다. 이 떄는 어느 태그에 사용되든지 관계없이 해당 ID명이 속성으로 정의된 모든 태그의 내용에 스타일을 적용하게 됩니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <HTML>
          <HEAD>
              <TITLE>
                  ID 선택자
              </TITLE>
                  <STYLE type="text/css">
                      P#content1 {font-family:궁서;color:red;}
                      #content2 {font-family:굴림;background:yellow;}
                  </STYLE>
          </HEAD>
          <BODY>
              <CENTER>
                  <P id="content1">P#content1의 스타일</P>
                  <H2 id="content2">P#content2의 스타일</H2>
          </BODY>
      </HTML>
      		cs


가상 클래스 선택자

    • 가상 클래스 선택자는 실제로 HTML문서에 존재하지 않는 형식을 지정하는 선택자로 주로 하이퍼링크 설정에 사용됩니다. 아래 첫 번쨰 줄은 가상 클래스 선택자를 정의하는 형식이고, 두 번째 줄부터는 가상 클래스 선택자를 사용하여 스타일을 정의하는 형식입니다. 여기서 지정자는 자바스크립트의 예약어로 link, visited, hover, active 등이 있습니다. link는 기본링크의 스타일을 설정, visited는 방문한 적이 있는 링크의 스타일을 설정, active는 링크를 클릭하려는 순간의 스타일을, hover는 마우스가 링크 위에 올라가 있을 때의 스타일을 각각 지정하는 속성들입니다.

      1
      2
      3
      4
      5
      A:지정자 {속성 속성값}
      A:link {text-decoration:none}
      A:visited {text-decoration:none}
      A:hover {text-decoration:underline}
      A:active {text-decoration:underline}
      		cs

      다음 소스를 통해서 예시를 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<HTML>
    <HEAD>
        <TITLE>
            가상클래스
        </TITLE>
            <STYLE type="text/css">
                A:지정자 {속성 속성값}
                A:link {text-decoration:none}
                A:visited {text-decoration:none}
                A:hover {text-decoration:underline}
                A:active {text-decoration:underline}
            </STYLE>
    </HEAD>
    <BODY>
        <H3>가상 클래스 선택자</H3>
        <a href="http://www.google.co.kr">구글</A><BR>
        <a href="http://www.tistory.com">티스토리</A><BR>
        <a href="http://www.naver.com">네이버</A><BR>
    </BODY>
</HTML>
cs


CSS 속성


    • 여기서는 스타일시트에 대한 다양한 속성입니다. 표로 알아보겠습니다.

      속성

       설명

      pt(point) 

       1/72인치(2.54cm)를 72개로 나누었을 때 글자 크기

      px(pixel)

       모니터에서 한 개의 도트(점)을 나타냄(모니터 해상도에 따라 크기가 다를 수 있음)

      pc(pica)

       12pt를 1pc로 나태냄

      in,cm,mm

       각각 1inch(2.54cm), 1cm, 1mm의 크기

      %

       기준 글자에 대한 크기를 %로 나타냄

      em

       기준 글자에 대한 글자의 높이나 간격을 나타냄(pt,px,pc,in,cm,mm는 절대적 크기, %, em은 상대적 크기
    • 일반적으로 6pt는 각각 8px, 0.5em, 50%에 해당하며, 12pt는 각각 16px, 1em, 100%에 해당합니다.


클래스 선택자


    • 스타일시트에는 글꼴이나 색상, 여백, 텍스트 등을 지원하는 다양한 속성들을 가지고 있습니다. 표로 알아보겠습니다.

       속성

       설명

       font-family

       글자체(글꼴) : 굴림, 돋움, 궁서, Arial 등

       font-size

       글자 크기 : 20pt, 20px, 20pc, 20in, 120%, 2em, larger 등

       font-style

       글자 스타일 : normal, italic, olique 등

       font-weight

       글자 굵기 : thin, normal, bold,bolder, lighter 100, 200 등

       line-height

       줄간격 : 20pt, 20px, 20pc, 20in, 120%, 2em 등

       letter-spacing

       글자간격 : 0em, 0.5em, 1em 등

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<HTML>
    <HEAD>
        <TITLE>
            폰트 스타일
        </TITLE>
            <STYLE type="text/css">
            H3{font-family : 굴림 ; font-weight : lighter ; color : red}
            H3{font-family : Arial ; font-weight : border ; font-style : italic ; font-size:20pt;}.test{letter-spacing : 1em ; line-height : 3em;}
            </STYLE>
    </HEAD>
    <BODY>
        <H3>폰트 스타일</H3>
        <P>글자 크기는 20pt, 진하게, 이탤릭체, Arial 입니다.</P>
        <H4 class="test"> 음? 테스트 클래스를 써봤음</P>
    </BODY>
</HTML>
cs

위의 것들을 이용 구현해 보았으며 결과입니다.




텍스트 관련 속성


    • 스타일시트에는 정렬과 같은 텍스트 처리를 위해 제공되는 속성 들도 있습니다. 표로 보겠습니다.

      속성

       설명

      text-transform

       텍스트를 대문자 또는 소문자로 변환 capitalize, uppercase, lower, none 등

      text-align

       텍스트의 수평 정렬 지정 left, right, center, justify 등

      text-indent

       문단의 들여쓰기 지정 : 80em, 10%등

      text-decoration

       텍스트에 더해지는 다양한 장식 효과 underline, overline, line-through, blink, none

      verical-align

       텍스트의 수직 정렬 지정 baseline, sub, super, top, text-top, middle, bottom등

      line-height

       즐 간격 지정 : normal, 60units, 50% 등


배경 관련 속성

    • 여기서는 스타일시트에서 제공하는 배경 처리를 위한 속성들을 설명합니다. 표로 알아보겠습니다.

       속성

       설명

       background-color

       배경색:hexa값(16진수),RGB(R,G,B) 등

       background-color

       배경을 위한 이미지 지정(바복이 기본값) url(urlname)

       background-repeat

       배경 이미지의 반복 방법 지정 repeat, repeat-y, repeat-x, no-repeat등

       background-attachment

       이미지, 내용 고정여부 : fixed, no-fixed등

       background-position

       배경 이미지의 시작위치를 지정 keyword(top,bottom, left, right, center), %등

       background

       속성들을 한 문자열로 묶어서 한번에 설정

소스를 이용하여 알아보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<HTML>
    <HEAD>
        <TITLE>
            폰트 스타일
        </TITLE>
            <STYLE type="text/css">
                <BODY>{background-color:yellow background-image:url("untitled.png");}
                P.test1 {font-size : 15pt; line-height : 1.5;text-decoration : overline;}
                P.test2 {font-size : 18pt;text-decoration : overline;text-align : center;}
                P.test3 {font-size : 14pt; text-decoration : overline; text-align :right;}    
    
            </STYLE>
    </HEAD>
    <BODY>
        <H3>배경 스타일</H3>
        <P class="test1">test1 클래스 적용</P>
        <P class="test2">test2 클래스 적용</P>
        <P class="test3">test3 클래스 적용</P>
    </BODY>
</HTML>
cs

결과는 다음과 같습니다.



테이블 관련 속성


    • 여기서는 테이블과 관련된 스타일시트속성들을 설명입니다.

      속성 

       설명

       width

       테이블 내용의 폭 : pt, px, in, cm, % 등의 값

       height

       테이블 내용의 높이 : pt, px, in, cm, % 등의 값

       border-color

       테두리 색상 : 색상명 또는 RGB값

       border-style

       테두리 스타일 double(두줄 실선), inset(안쪽만 입체적으로 들어감),groove(입체적인 선), solid(실선)

       ride(입체적으로 돌출), outset(안쪽 돌출)

       border-width

       테두리 폭 : pt, px, in, cm, %등의 값

       margin

       위, 우, 하, 좌, 여백 : 예)margin: 5pt,10pt, 15pt, 20pt

       margin-top

       위 여백 : pt, px, in, cm, %등의 값

       margin-bottom

       아래 여백 : pt, px, in, cm, %등의 값

       margin-left

       왼쪽 여백 : pt, px, in, cm, %등의 값

       margin-right

       오른쪽 여백 : pt, px, in, cm, %등의 값

       padding

       안쪽 위, 우, 하, 좌, 여백 : 예)margin: 5pt,10pt, 15pt, 20pt

       padding-top

       안쪽 위 여백 : pt, px, in, cm, %등의 값

       padding-bottom

       안쪽 아래 여백 : pt, px, in, cm, %등의 값

       padding-left

       안쪽 왼쪽 여백 : pt, px, in, cm, %등의 값

       padding-right

       안쪽 오른쪽 여백 : pt, px, in, cm, %등의 값




저작자표시 비영리 동일조건

'Programming > HTML' 카테고리의 다른 글

HTML - 변수, 상수, 자료형, 연산자  (0) 2015.08.23
HTML - 자바스크립트(JavaScript)  (0) 2015.08.22
HTML - 프레임 태그 입력 태그  (0) 2015.08.22
HTML - 멀티미디어 태그 그리고 테이블  (0) 2015.08.21
HTML - 글자, 문단, 목록 태그와 링크 태그  (0) 2015.08.21
'Programming/HTML' Related Articles more