4장 CSS3로 HTML5 문서 꾸미기

4.1 CSS3란?

2장과 3장에서 HTML문서의 문자 색이나, 배경, 폰트 등 태그의 속성을 지정하는 방범에 대해 알아보았다. 대개 비슷한 문단은 같은 종류의 색이나 폰트를 많이 이용한다. 만일 각 문단마다 스타일을 지정하면 여러 개의 문단이 있을 경우 한번 정한 폰트나 색을 다른 것으로 바꾸기 위해서는 일일이 각 문단에 대해 지정을 다시 하여 불편할 수 있다.

이 경우 각 문단에 같은 스타일을 지정해 놓으면 문서를 만든 후 모든 문장을 쉽게 다른 색이나 모양으로 바꿀 수 있어 시간이 절약된다. 이때 사용되는 것이 계단형 스타일시트(Cascading Style Sheet; CSS) 언어로서 간단히 스타일이라 부른다. CSS는 HTML 문서를 웹브라우저에 어떻게 보여줄 것인지 디자인, 레이아웃, 색, 폰트 등의 스타일을 지정해주는 언어이다. CSS는 ᄒᆞᆫ글이나 워드의 스타일 기능과 유사하다.

CSS언어로 만든 스타일은 HTML 문서 내부에도 지정할 수 있지만 대개 외부 파일(확장자 css)로 지정하여 복잡하고 많은 HTML 문서를 작성할 때 많이 이용된다.

CSS는 2002년에 CSS1이 나온 후 계속 발전하여 CSS2, CSS3로 업그레이드 되었다. CSS3는 CSS가 업그레이드 된 최근 버전이다. CSS3에 포함된 중요한 모듈은 다음과 같다. 자세한 내용은w3schools.com/css/css3 를 참조하라.

– 선택자(Selector)

– 박스 모형(Box Model)

– 배경 및 경계(Background and Border)

– 이미지 및 콘테츠 대체(Image and Replaced Content)

– 텍스트 효과(Text Effect)

– 2D/3D 변환(Transformation)

– 애니메이션(Animation)

– 여러 컬럼 레이아웃(Multiple Column Layout)

– 사용자 환경(User Interface)

현재 CSS3는 수많은 기능을 포함하고 있어 이 책에서는 주로 많이 사용하는 기능을 중심으로 활용법을 설명한다.

CSS3로 꾸미면 어떻게 HTML 문서가 달라지고 어떠한 좋은 점이 있는지 예를 살펴보자. htm 웹문서는 <h3> <p> <hr> 등의 단순한 태그를 사용한 HTML 문서이다.

<그림 4.1.1> <h3>, <hr>, <p> 태그를 사용하는 간단한 HTML 문서

CSS3 스타일은 <head> </head> 태그 안에 <style> </style> 태그 안에 지정한다. EX040101.htm 문서에서 세 개의 태그 <h3>, <hr>, <p> 에 CSS3 스타일을 지정해 출력한 결과가 <그림1.2>와 같다.

<그림 4.1.2> <h3>, <hr>, <p> 태그에 스타일 지정한 HTML 문서

htmL 문서에는 태그 <h3>, <hr>, <p>가 두 곳 이상에 있는데 CSS3 스타일에서는 이 태그 등에 대한 색, 선의 굵기, 폰트 크기 등 속성을 지정하였다. 이렇게 지정된 스타일의 속성은 HTML 문서 전체의 해당되는 모든 태그 요소들이 적용을 받게 된다.

만일 <p> 로 지정된 모든 문단의 색을 노랑색으로 바꾸고 싶다면htm 문서의 p 스타일을 color:red에서 color:yellow로 바꾸면 된다. 이와 같이 CSS3를 활용하면 한번 만들어진 HTML 문서의 디자인, 레이아웃, 색, 폰트 등을 쉽게 바꿀 수 있다.

EX040102의 문서에서 CSS3 스타일은 <head> </head> 태그 안에 <style> </style> 태그 안에 지정하였는데 이를 스타일시트(style sheet)라고 한다. 이 스타일시트 내에는 주석문(/* … */)과 세 개의 스타일(h3, hr, p)을 지정하였다. 스타일시트 작성 방법은 4.1.1절에서 살펴본다.

CSS3 스타일은 선택자(selector)와 선언블록(declaration block)으로 구성된다. 선언블록은 중괄호 ‘{’ 로 시작하여 ‘}’로 끝나며 선언블록 내에는 여러 개의 속성:값 (property : value)이 세미콜론 ; 으로 구분하며 있을 수 있다. 마지막 세미콜론은 생략할 수 있다. EX040102.htm의 p 스타일에 대한 선택자와 속성:값을 구분하면 다음과 같다.

선택자는 CSS3 스타일을 지정받는 HTML 문서의 각 구성요소에 대한 이름이다. h3나 p와 같은 태그 이름이 될 수도 있고, 각 태그에 지정된 이름(id), 클래스(class), 속성(attribute)명 등 여러 가지 방법이 있다. 선택자에 대해서는1.2절에서 자세히 설명한다.

CSS3에서 지정할 수 있는 속성:값은 현재 대략 200개 정도가 있는데 앞으로도 계속 증가할 것이다. 4.2절에서5절까지 중요한 속성에 대한 설명을 한다.

4.1.1 CSS3 스타일시트 형태

CSS3 스타일시트는 작성하는 방법에 따라 인라인(inline), 내부(internal), 외부(external) 스타일시트의 세 종류로 나눌 수 있다.

가. 인라인 스타일시트

인라인 스타일시트(inline style sheet)는 HTML 태그 안에 style=“속성:값 ; 속성:값 ; … ”형태로 스타일을 지정하는 것으로 그 태그에만 속성들이 적용된다.

<h1 style=”color:red; font-size:12px; text-align:center”>HTML이란?</h1>

나. 내부 스타일시트

내부 스타일시트(internal style sheet)는 <그림1.2>와 같이 HTML 문서의 <head> … </head> 내부에 <style> … </style> 태그를 만들어 그 안에 여러 가지 선택자에 대한 스타일을 지정하는 것이다.

다. 외부 스타일시트

외부 스타일시트(external)는 HTML 문서에서 <style> … </style> 내부에 있는 모든 내부스타일을 별도의 외부 파일로 만드는 것이다. 이때 외부 파일의 확장자는 css를 이용한다.

외부 스타일시트를 사용하면 여러 개의 HTML 문서를 작성할 때 동일한 스타일을 적용하기가 매우 간편하고 전체 웹페이지 모양에 일관성을 줄 수 있다. 많은 웹페이지들이 이러한 외부 스타일시트를 이용한다.

예를 들어 <그림1.2>의 HTML 문서를 다음과 같이 EX040103.htm 파일과 스타일시트로 된 EX040103.css 파일로 분리하여 만든 후 실행해도 된다. 이때 css 파일은 태그 <head> … </head> 안에 <link type=”text/css” rel=”stylesheet” href=”EX040103.css”> 태그를 이용하여 불러오는데 각 속성의 의미는 다음과 같다.

 

type = “text/css”         링크되는 파일이 css언어로 작성된 텍스트 파일임을 의미

rel  = “stylesheet”       링크되는 파일이 스타일시트임을 의미

href = “EX040103.css”    EX040103.css 파일을 불러올 것을 지시

css 파일은 <style> … </style> 태그없이 순수한 스타일만 저장해야 된다. 한글을 사용할 경우 utf-8 방식으로 저장하여야 한다.

여러 개의 css 파일이 있을 수도 있는데 <link> 태그를 여러 번 사용하면 된다.

<link> 태그 대신 @import 문을 이용하여 css 파일을 HTML 문서로 불러 올 수 있다. @import 문은 다음 예와 같이 반드시 <style> 태그 안에 위치하여야 한다.

<style>

@import “EX040103.css”

</style>

4.1.2 CSS3 스타일 선택자 형태

CSS3 선택자(selector)는 스타일을 지정받는 HTML 문서의 각 요소에 대한 이름으로 다음과 같은 여러 가지 방법이 있다.

가. 태그명 요소 선택자

HTML 문서에 사용되는 각 태그명 요소(<p>, <h1> 등)를 선택자로 사용하여 해당되는 태그의 스타일을 지정한다. EX040102.htm의 HTML 문서가 이 태그명 선택자를 이용하였다.

<style>

h3 { color : blue }

hr { border : 2px solid green }

p  { color : red ; font-size : 20px }

</style>

여러 가지 선택자에 같은 속성을 지정해 줄 때는 태그명을 콤마(,)로 구분한다.

<style>

h3, hr, p { color : blue }

</style>

나. id 선택자

HTML 태그에 id 속성이 지정되어 있을 경우 이 id 앞에 기호 ‘#’를 붙어 스타일을 지정할 수 있다.

htm의 HTML 문서에서 <p> 태그에 대한 스타일을 id=”paragraph1″ 를 이용한 스타일로 바꾸면 EX040104.htm과 같다.

#paragraph1 {

color : red;

font-size : 20px;

}

htm에서 단순한 태그 <p>로 지정된 문단은 스타일의 영향을 받지 않았지만 <p id=”paragraph1″>으로 지정한 문단은 빨강색의 20px 폰트 크기로 바뀌었음을 알 수 있다.

<그림 4.1.3> id 선택자를 이용한 예

id 선택자 이름 앞에 태그 이름을 사용하여 특정 태그에만 적용되도록 제한할 수 있다. 다음은 <span> 태그에서만 사용할 수 있는 예이다.

span#para {

color : red;

font-size : 20px;

}

다. class 선택자

본인이 지정하는 클래스 이름을 주어 선택자로 이용할 수 있는데 클래스명 앞에 마침표(.)를 붙여야 한다.

htm 문서에서 <p> 태그에 대한 스타일을 클래스 para1 으로 다음과 같이 스타일을 바꾸면 <그림 4.1.4>과 같다.

.para1 {

color : red;

font-size : 20px;

}

클래스를 사용하면 특정한 HTML 요소에 위와 같은 스타일을 지정해 줄 수 있다. 다음 예는 단지 문서의 태그 <p> 요소만 클래스 center의 스타일이 적용된다.

p.center {

text-align: center;

color: blue;

}

<그림 4.1.4> 클래스 선택자를 이용한 예

한 태그 element는 여러 개의 클래스를 이용하여 스타일을 줄 수 있다. 예를 들어 다음과 같이 center와 blue라는 class 스타일을 지정하였다고 하자.

.center {

text-align: center;

}

.blue {

color: blue;

}

이 두 클래스을 이용한 <p> 태그는 다음과 같이 설계할 수 있다.

<p class=“center blue”>This paragraph is styled with CSS3.</p>

  • 이와는 반대로 같은 스타일 내용의 선택자가 다음과 같이 여러 개 있다고 하자.

h1 {

text-align: center;

color: blue;

}

h2 {

text-align: center;

color: blue;

}

p {

text-align: center;

color: blue;

}

이 경우는 다음과 같이 그룹으로 선택자를 정의할 수 있다.

h1, h2, p {

text-align: center;

color: blue;

}

라. 기타 선택자

두 개 이상의 선택자를 조합하여 적용할 수 있는 태그를 구체적으로 지정할 수 있다. 예를 들어 부모 자식 관계인 선택자 span, bold 를 ‘>’기호를 조합하여 다음곽 같이 만들 수 있다.

span > bold { color: blue; }

* 문자를 사용하여 모든 태그에 대한 선택자로 이용할 수 있다.

* { color: blue; }

HTML 태그의 특정 속성에 대해 값이 일치하는 경우에만 스타일을 적용하는 선택자도 정의할 수 있다. 예를 들어 다음은 <input type=“text”>인 모든 태그에 대해 글자색을 red로 지정한다.

input[type=“text”] { color: red }

마. 가상 클래스 선택자

가상 클래스(pseudo class) 선택자는 어떤 상황이 발생했을 때만 적용하도록 만들어진 선택자이다.예를 들어 다음의 a:visited 가상 클래스 선택자는 <a> 태그에서 지정된 웹사이트를 방문했을 때 태그 내용에 대한 색을 green으로 바꾸어 준다. li:hover 가상 클래스 선택자는 <li> 태그 위에 마우스를 올리면 이 부분의 배경이 yellow 색으로 바뀌게 된다.

a:visited { color: green }

li:hover { background: yellow }

다음은 가상 클래스를 사용하여 리스트를 만든 예이다.

<그림 4.1.5> 가상 클래스 선택자 이용 예

CSS3에서 활용할 수 있는 가상 클래스 선택자의 개수는 40여개가 넘는데 이 중에서 중요한 가상 선택자만 [표 4.1.1]에 정리하였다.

4.1.3 스타일이 여러 개 겹칠 때의 규칙

한 브라우저는 각 HTML 태그에 대한 기본 스타일을 모두 가지고 있다. 그런데 HTML 태그는1.1절에서 살펴보았듯이 외부의 css 파일에서 스타일을 지정할 수도 있고, 내부의 <style> … </style> 태그안에서 스타일을 지정할 수도 있으며, 태그 안에 style 속성으로 또 지정할 수도 있다. 이런 경우 여러 개의 스타일이 한 HTML 요소에 동시에 적용될 수 있다.

여러 개의 스타일시트가 한 HTML 요소에 동시에 적용될 때 중첩만 되지 않으면 스타일이 합쳐져서 적용된다. 만일 스타일이 중첩되면 다음과 같은 우선순위로 스타일이 적용된다.

예를 들어 다음과 같은 <p> 태그에 대한 스타일이 지정되어 있다고 하자.

브라우저 기본스타일      p { color : black }

외부 css 파일            p { color : blue }

내부 <style>…</style>  p { color : green }

<p> 태그내의 스타일      <p style=”color : red”> Hello</p>

이 경우 <p> 태그로 지정된 HTML 요소 Hello는 마지막 속성인 빨강색으로 지정된다.

한 태그 안에 다른 태그가 있는 부모-자식 태그 형태에서 부모 태그에도 스타일이 지정되어 있고, 자식 태그에도 스타일이 지정되어 있는 경우 속성의 중첩이 없으면 부모의 속성이 자식 태그에 상속된다. 만일 속성이 중첩되는 경우에는 자식 태그의 속성이 우선 적용된다. 예를 들어 다음과 같은 부모 태그 <p>와 자식 태그 <span>이 있다고 하자.

<p style=”color : blue”> 안녕하세요!

<span style=”font-size : 20px”>내 이름은 이정진입니다.</span>

</p>

위의 예제에서는 속성의 중첩이 발생하지 않아 부모 태그에 있는 color 속성 blue가 자식 태그에 상속된다. <span> 태그로 지정된 문단은 blue이며 폰트크기가 20px이 된다.

HTML 문서 전체에 적용하고 싶은 스타일은 <body> 태그를 이용하면 된다.

4.2 CSS3: 색 / 배경 / 텍스트

CSS3에서 많이 이용되는 색과 텍스트 꾸미기에 대해서 살펴보자.

4.2.1 색(color)

CSS3 스타일을 이용하면 HTML문서의 문자 색이나, 배경, 경계 등의 태그의 속성을 지정할 수 있다. [표2.10]에서 HTML문서에서 사용할 수 있는 RGB 표현 방식에 대해 살펴보았는데 이러한 색의 표현 방식은 CSS3에서도 사용할 수 있다. CSS3에서 다음과 같이 세 가지 형태의 색 표현 방식이 이용된다.

– 색이름 : 예 “red”

– RGB 값 : 예 “rgb(255,0,0)”

– HEX 값 : 예 “#ff0000”

일반 사용자들은 RGB 값이나 HEX 값은 기억하기가 쉽지 않아 대개 색이름을 많이 이용한다. CSS3에서는 100 여개 이상의 색 이름을 제공하는데 이 중에서 빈번히 이용되는 주요 색이름과 HEX값, 색은 [표 4.2.1]과 같다. [표 3.2.10]에서 더 많은 색을 보여 주었다.

색 관련 많이 사용되는 속성은 다음과 같다.

HTML 태그의 텍스트 글자색        color : 색이름

HTML 태그의 배경 색            background-color : 색이름

HTML 태그의 테두리 색           border-color : 색이름

htm은 <h2> 태그의 배경색과 폰트색을 지정해주는 예이다

<그림 4.2.1> 배경색과 폰트색 지정 예

4.2.2 배경(background) 꾸미기

CSS3에서 배경 효과를 지정하는 속성은 다음과 같다.

배경색           : background-color

배경 이미지      : background-image

배경 이미지 반복 : background-repeat

배경 이미지 고정 : background-attachment

배경 이미지 위치 : background-position : left-top(기본

배경 이미지 속성 background-image 는 url(“파일명”) 속성값을 갖는다.

배경 이미지는 브라우저 화면이 커지면 기본적으로 반복된다. 만일 반복을 막으려면 background-repeat: no-repeat;를, 수평적으로 반복을 막으려면 background-repeat: repeat-x; 속성값을 이용하여야 한다.

배경 이미지를 고정하려면 background-attachment: fixed; 를 사용하고, 위치를 고정하려면 background-position: right top; 등과 같은 값을 사용할 수 있다.

background-position은 left top(디폴트), left center, left bottom, right top, right center, right bottom, center top, center center, center bottom 등의 속성을 갖는다.

<그림 4.2.2>는 배경 이미지를 사용하는 예이다. 여기서 사용한 window_image1.jpg 파일은 윈도우 시스템에서 제공하는 그림으로 htm 파일이 위치한 폴더에 복사하든지 해당 파일의 경로를 지정하면 된다.

<그림 4.2.2> 배경 이미지 사용 예

4.2.3 텍스트 꾸미기

가. 높이 / 너비 / 두께 / 폰트 크기 단위

CSS3 스타일에서 태그 요소들의 높이, 너비, 두께, 폰트 크기 등에 px, %, em과 같은 단위가 사용되는데 [표 4.2.2]는 CSS3의 표준 단위를 요약한 것이다.

 

<그림 4.2.3>은 태그 <div>에 너비를 100px, 높이를 50px로 지정해 주는 예이다.

<그림 4.2.3> <div> 태그의 높이와 너비를 지정하는 예

나. 텍스트(text)

HTML문서를 구성하는 태그 <h3>, <p> 등은 텍스트(text)로 이루어져 있는데 이러한 문자열은 색이나, 폰트 종류, 문단 정렬 등을 CSS3 스타일을 이용하여 지정할 수 있다. [표 4.2.3]은 CSS3에서 지정할 수 있는 텍스트 속성을 정리한 것이다.

[표 4.2.3]의 CSS3 텍스트 속성 중 많이 사용하는 것은 텍스트를 좌,우,가운데로 정렬하는 text-align, 밑줄을 칠 수 있는 text-decoration, 들여쓰기 text-indent 등이다. 다음 예를 살펴보자.

h1 {

text-align: center;

text-decoration: underline;

text-indent: 2em;    /* 현재 폰트의 두 배 크기 */

}

다. 폰트(font)

폰트는 글자체를 의미하는데 모든 글자체는 글자체 끝 모양이나 너비에 따라 [표 4.2.4]와 같이 세리프(Serif; 삐침 형태), 산세리프(Sans-Serif; 삐치지 않은 형태), 고정폭(Monospace)의 세 가지로 구분한다.

CSS3에서 지정할 수 있는 폰트 관련 속성은 폰트 형태, 폰트 크기, 폰트 스타일, 폰트 두께 등으로 [표 4.2.5]에 요약하였다.

CSS3는 많은 글자체를 제공하는데 font-family 속성에서 지정한다. 하지만 폰트가 브라우저에서 지원되지 않을 경우를 대비하여 다음 예와 같이 여러 개의 글자체를 지정한 후 브라우저가 순서대로 선택하게 한다.

font-family : “Times New Roman”, Arial, Serif

위의 예에서는 브라우저가 먼저 “Times New Roman” 글자체를 시도한 후, 이 글자체가 없으면 Arial 글자체를 사용하고, 이것도 없으면 Serif형 글자체 중에서 유사한 것을 사용한다.

글자체가 한 단어가 아닐 경우 인용 부호 “…” 를 사용하여야 한다.

폰트 크기는 font-size 속성에서 지정하는데 [표2.2]의 px, em 등 표준 단위를 사용하거나 대략적으로 small, medium, large, x-large 등을 이용할 수 있다.

font-style은 normal(표준), italic(기울임꼴), oblique(경사체) 등의 값을 가질 수 있다.

font-weight는 100에서 900 사이의 숫자로 글자의 굵기를 지정하든가 대략적으로 normal(숫자로 400), bold(숫자로 700), bolder, lighter 등을 지정할 수 있다.

font 속성은 간단히 font-style, font-weight, font-size, font-family를 다음 예와 같이 한꺼번에 지정한다. font-size, font-family는 반드시 지정되어야 하지만 나머지는 생략할 수 있다.

font : italic, bold, 12pt, arial

CSS3 폰트 스타일 속성을 지정하는 다음 예를 살펴보자.

<그림 4.2.4> 폰트 스타일, 색 지정 예

라. 링크(link)

웹문서의 링크는 CSS3 속성으로 색, 폰트 등을 <그림2.5>와 같이 지정할 수 있다.

<그림 4.2.5> CSS3로 링크의 속성을 지정해주는 예

마. 텍스트 그림자(text-shadow)

text-shadow 속성값을 이용하면 텍스트에 그림자 효과를 줄 수 있다.

h-shadow       텍스트와 그림자 사이의 수평거리

v-shadow       텍스트와 그림자 사이의 수직거리

blur-radius      흐릿한 그림자를 만드는 효과의 길이 (선택사항)

color           그림자 색

none           그림자 효과 없음

위의 속성값 순서대로 text-shadow : 5px, 5px, red 와 같이 지정하면 된다. <그림 4.2.6>은 그림자 효과의 예이다.

<그림 4.2.6> CSS3로 텍스트 그림자 효과를 준 htm 예제

4.3 CSS3: 태그 요소의 박스(box)

HTML 태그 요소들은 모두 하나의 박스 모양을 하고 있어 박스 크기, 배경색, 여백 등을 제어할 수 있다.

이러한 태그의 한 박스는 <그림3.1>과 같이 다시 4개의 부분집합 사각형 영역, 즉 태그의 문자열이 위치하는 콘텐츠(content), 내부여백 패딩(padding), 테두리(border) 영역, 그리고 외부여백 마진(margin)으로 구성된다.

콘텐츠(content)  : 태그의 문자열 위치 영역

패딩(padding)  :   내부여백

테두리(border)   : 테두리 영역

마진(margin)     : 외부여백

[표 4.3.1]은 CSS3에서 제어할 수 있는 박스 영역 속성을 정리한 것이다.

<그림 4.3.1> HTML 태그 요소의 박스 구성

<그림 4.3.2>는 스타일을 적용하지 않은 단순한 태그 <p>와 CSS3 박스 스타일을 적용한 태그 <div>를 비교한 예이다. margin 20px은 눈에 보이지 않는 여백이다.

<그림 4.3.2> CSS3 박스 스타일

가. 박스의 색

태그의 배경색이 박스의 색이 되는데 패딩에 칠해진다. 마진은 투명하게 처리되어 태그의 배경색이 비춰 보인다. 테두리 색은 지정할 수 있지만 패딩과 마진 영역은 색을 특별히 줄 수는 없다.

나. 마진(margin)

CSS3의 마진(margin) 속성은 태그 테두리(border) 바깥쪽 하얀 투명한 공간에 대한 크기를 정해준다. 마진이 설정되는 부분은 배경색을 가질 수 없다. 마진은 위, 아래, 좌, 우측에 크기를 설정할 수 있는 다음과 같은 속성을 가지고 있다.

margin-top

margin-bottom

margin-right

margin-left

이러한 마진 속성은 다음과 같은 속성값을 가질 수 있다.

auto     브라우저가 자동으로 마진 계산

length   마진을 px, pt, cm 단위로 지정

%             요소의 너비에 대한 %로 마진 지정

inherit   부모 요소로부터 마진 상속

<그림 4.3.3>은 문단 태그 <p>에 여러 가지 마진을 보여주는 예이다.

 

<그림 4.3.3> CSS3 여러 가지 마진을 보여주는 예

htm의 스타일 클래스 p.ex의 위, 아래, 좌측, 우측 마진 속성은 다음과 같이 간단히 쓸 수도 있다.

p.ex {

border:1px solid red;

margin: 30px 20px 150px 50px;

}

다. 테두리(border) 너비/모양/색

테두리는 너비(width), 모양(style), 색(color)을 지정하는 여러 가지 속성을 가지고 있다([표 4.3.1] 참조).

[표 4.3.1]의 border-style 은 다음과 같은 속성값을 갖는다.

dotted – 작은 점들의 테두리

dashed – 굵은 점선의 테두리

solid  – 굵은 실선의 테두리

double – 두 줄로 이루어진 테두리

groove – 3D 홈(groove)의 테두리

ridge  – 3D 능선(ridge)의 테두리

inset  – 3D 인셋(inset) 테두리

outset – 3D 아웃섹(outset) 테두리

none   – 테두리 없음

hidden – 숨겨진 테두리

테두리의 위, 아래, 오른쪽, 왼쪽의 선 형태는 다음 예와 같이 각각 지정할 수 있다.

p {

border-top-style: dotted;

border-right-style: solid;

border-bottom-style: dotted;

border-left-style: solid;

}

border-width는 테두리에 대한 너비를 지정해 준다. 속성값으로 5px, medium, thick 등과 같이 지정할 수 있다.

border-color는 테두리의 색을 지정해 주는 속성으로 RGB 형식이나 HEX 형식 또는 색이름 등을 지정할 수 있다.

<그림 4.3.4>는 여러 가지 테두리 선을 보여주는 예이다.

<그림 4.3.4> CSS3 여러 가지 테두리를 보여주는 예

CSS3는 테두리에 대한 border-radius 라는 속성을 제공하는데 이것을 이용하면 테두리의 모서리를 둥글게 만들 수 있다.

border-radius : 10px      박스의 네 귀퉁이를 반지름이 10px인 원 형태로 만듦

테두리의 각 모서리를 서로 다른 둥근 형태로 만들려면 border-top-left, border-top-right, border-bottom-left, border-bottom-right 라는 속성을 이용하여야 한다. border-radius에 각 모서리 반지름을 주어도 된다. 이때 순서는 border-top-left, border-top-right, border-bottom-right, border-bottom-left 이다.

border-radius : 10px 20px 30px 40px   박스의 네 귀퉁이를 서로 다른 원 형태로 만듦

<그림 4.3.5>는 다양한 테두리 모양을 보여주는 예이다.

<그림 4.3.5> CSS3 여러 가지 둥근 테두리를 보여주는 예

<그림3.5>의 htm 문서에서 #rd4 {border-radius:0px 20px}는 네 모서리의 테두리 속성을 2개 0px, 20px 만 지정하였는데 이것이 반복되어 나머지 두 모서리를 둥글게 하였다.

border-image 속성을 이용하면 테두리에 이미지를 입힐 수 있다. 이 경우 테두리를 모서리(corner)와 엣지(edge)로 구분하여 이미지를 입힌다. 이 속성에 대한 자세한 설명은 w3school을 참조하기 바란다.

라. 패딩(padding)

CSS3의 패딩(padding) 속성은 태그 테두리(border) 안쪽 공간에 대한 여백 크기를 정해준다. 패딩은 배경색의 영향을 받는다. 패딩은 위, 아래, 좌, 우측에 크기를 지정할 수 있는 다음과 같은 속성을 가지고 있다.

padding-top

padding-bottom

padding-right

padding-left

이러한 패딩 명령어는 다음과 같은 속성값을 가질 수 있다.

length   패딩을 px, pt, cm 단위로 지정

%             요소의 너비에 대한 %로 패딩 지정

inherit   부모 요소로부터 패딩 상속

<그림 4.3.6>은 문단 태그 <p>에 여러 가지 패딩을 보여주는 htm 예제이다.

<그림 4.3.6> CSS3 여러 가지 패딩 예제를 보여주는 예

<그림 4.3.6>의 스타일 클래스 p.ex의 위, 아래, 좌측, 우측 패딩 속성은 다음과 같이 간단히 쓸 수도 있다.

p.ex {

border:1px solid red;

padding: 30px 20px 50px 40px;

}

4.4 CSS3: 태그 요소 배치

HTML 태그는 일반적으로 웹문서에 적혀진 순서대로 웹브라우저에 출력된다. 하지만 CSS3를 이용하면 HTML 태그를 브라우저의 특정 위치에 고정 출력시키거나, 숨겼다가 필요시 출력시킬 수도 있고, 스크롤바를 이용할 수도 있다. 이와 같이 HTML 태그가 출력되는 위치를 지정하는 것을 배치라고 부른다. 신문이나 책, 쇼핑몰 등의 웹페이지 디자인에 많이 이용된다.

배치와 관련된 CSS3 속성은 다음과 같다.

– 포지션(position)

– 디스플레이(display)

– 플로트(float)

– z-인덱스(index)

– 태그 보이기(visibility)

– 오버플로우(overflow)

4.4.1 포지션(position)

브라우저는 HTML 문서에 나타나는 태그들을 순서대로 출력하는데 이를 normal flow라 부른다. normal flow로 태그가 출력되는 위치를 ‘기본 위치라 부른다. position 속성을 이용하면 normal flow를 무시하고 원하는 위치에 태그 요소를 배치할 수 있다.

position 속성은 다음 속성값을 가질 수 있다

position:static    위치 지정을 하지 않음 (디폴트)

position:relative  상대적 위치 지정

position:fixed     고정 위치 지정

position:absolute        절대 위치 지정

position:float           유동배치

position 속성을 사용할 때 HTML 태그의 위치와 크기는 top, bottom, left, right, width, height를 이용하여 조절한다. 하지만 이들의 사용법은 position 배치에 따라 서로 다르게 작용한다.

가. position : static

위치 지정을 하지 않는 배치 방법으로 웹문서에 작성된 순서대로 HTML 태그가 출력된다. 이 static 배치 방법에서는 top, bottom, left, right 속성값은 위치에 영향을 주지 않는다. 태그의 크기도 콘텐츠 크기에 따라 브라우저에 의해 정해지므로 width, height 속성도 영향을 받지 않는다.

나. position : relative

이 배치 방법은 각 HTML 태그를 normal flow의 기본 위치에서 태그 박스의 왼쪽 위 좌표를 중심으로 top, bottom, left, right 값(음수도 가능)만큼 이동한 ‘상대위치’에 배치한다.

다. position : absolute

이 배치 방법은 각 HTML 태그를 부모 태그의 좌측 상단 좌표를 중심으로 top, bottom, left, right 값(음수도 가능)만큼 이동한 ‘절대위치’에 배치한다.

라. position : fixed

이 배치 방법은 브라우저의 보이는 영역(viewport라 부름)을 중심으로 top, bottom, left, right 값(음수도 가능)만큼 이동한 뷰포트의‘특정위치’에 배치한다.

<그림 4.4.1>은 태그의 position 속성을 지정하는 예이다.

<그림 4.4.1> CSS3의 position 속성을 지정해주는 예

4.4.2 디스플레이(display)

HTML 태그 요소들은 브라우저에 배치될 때 새로운 줄에 배치될 것인지 현재 줄에 배치될 것인지 기본적으로 정해져 있다. 예를 들어 <div> 태그는 새로운 줄에 배치되고 <span> 태그는 현재 줄에 배치된다.

display 속성을 이용하면 태그의 기본 배치 방법을 달리 지정할 수 있는데 세 가지 속성값이 많이 이용된다.

display:inline           <span>과 같이 현재 줄에 배치됨

display:block           <p>,<div> 등과 같이 블록으로 하여 새로운 줄에 배치됨

display:inline-block      현재 줄에 배치되지만 각 요소가 블록임

<그림 4.4.2>는 <span> 태그를 display 속성을 이용하여 새로운 줄에 배치되도록 한 예이다.

<그림 4.4.2> CSS3의 display:block 속성을 이용한 예

가. display : Inline-block

브라우저에 여러 개의 박스를 그리드 형태로 배치하기 쉽게 하는 속성값이 inline-block이다. <그림4.3>은 inline-block의 예이다.

<그림 4.4.3> CSS3로 테이블로 작성한 예

4.4.3 플로트(float)

마우스로 브라우저 크기를 변경하면 텍스트나 이미지가 다음 줄로 내려가는 등 위치가 바뀐다.

float를 이용하면 태그를 오른쪽 끝 또는 왼쪽 끝에 항상 배치시킬 수 있다. 웹페이지에 고정된 위치에 공고나 광고 등을 보이게 할 때 필요하다.

<그림 4.4.4>은 float 속성을 이용하여 사진 이미지를 오른쪽 끝에 배치되도록 한 예이다.

<그림 4.4.4> CSS3의 float 속성을 이용한 예

4.4.4 z-인덱스(z-index)

z-인덱스는 HTML 태그들을 컴퓨터 포커 게임에서 각 카드를 서로 겹치지 않게 3차원 입체 모양으로 쌓는 배치가 가능하게 하여 준다. z 축을 따라 수직으로 쌓는 순서(stacking order)를 속성값으로 준다. 예) div {z-index : 10}

단 z-인덱스는 position 속성이 absolute인 경우에만 작동한다.

<그림 4.4.5>는 z-인덱스 속성을 이용하여 그림 이미지가 텍스트 뒤로 배치되도록 한 예이다.

<그림 4.4.5> CSS3의 z-index 속성을 이용한 예

4.4.5 태그 보이기/숨기기(visibility)

visibility는 HTML 태그들을 브라우저에 출력할 것인지 숨길 것인지를 지정해 주는 속성이다. 속성값으로 visible 과 hidden을 가질 수 있다. EX040404.htm은 visibility 속성을 이용하여 질문의 정답을 숨긴 예이다. 태그가 숨겨지더라도 태그가 차지하는 공간은 그대로이다.

<그림 4.4.6> CSS3의 visibility 속성을 이용한 예

4.4.6 오버플로우(overflow)

한 태그의 내용이 정해진 영역보다 클 때 처리해주는 속성이다. 다음 네가지 값을 가질 수 있다. <그림4.7>은 overflow : scroll 을 이용하는 예이다.

visible  : (default) 내용이 element 밖으로 넘친다.

hidden   : 넘치는 내용이 숨겨진다.

scroll   : 내용이 스크롤되고 스크롤바가 생긴다.

auto     : 내용이 넘치면 자동으로 스크롤이 생긴다.

<그림 4.4.7> overflow : scroll 을 이용하는 예

4.5 CSS3: 리스트 꾸미기

2장에서 살펴본 HTML문서의 리스트 태그는 데이터를 나열하거나, 목차를 만들고, 관련 링크 모음을 만드는 등 다양하게 사용된다. CSS3를 이용하면 리스트를 예쁘게 꾸밀 수 있는데 CSS3에서 지정할 수 있는 리스트 속성은 [표 4.5.1]과 같다.

리스트는 background, padding, margin 등 CSS3의 모든 속성을 지정할 수 있다. <그림 4.5.1>은 CSS3로 리스트 스타일을 지정해주는 예이다.

<그림 4.5.1> CSS3로 리스트 스타일을 지정해주는 예

4.5.1 리스트를 이용한 내비게이션바(Navigation Bar)

내비게이션바는 메뉴와 같이 여러 개의 HTML 문서에 대한 링크를 효율적으로 할 수 있게 도와주는 속성으로서 리스트와 CSS3 스타일을 이용하여 만들 수 있다.

<그림 4.5.2>는 리스트로 만드는 네비게이션바 예이다.

<그림 4.5.2> CSS3로 리스트로 만드는 네비게인션바 예

4.6 CSS3: 테이블 꾸미기

2장에서 HTML문서의 테이블 만드는 것을 알아보았는데 CSS3을 이용하면 [표 4.6.1]과 같이 더 많은 속성을 지정할 수 있다.

<그림 4.6.1>은 테이블 속성을 이용한 테이블의 예이다.

<그림 4.6.1> CSS3로 테이블로 작성한 예

4.7 CSS3 스타일 응용

이 절에서는 CSS3 스타일 중에서 input[type=text] 선택자를 이용한 폼 꾸미기와 드롭다운 메뉴 응용을 살펴본다.

”4.7.1

를 이용한 폼 꾸미기” icon=”icon-angle-down” margin_top=”5px” margin_bottom=”-5px”]

input[type=text] 선택자는 <input> 태그에서 type=“text”인 경우에만 속성을 적용한다. 이것을 이용하면 텍스트 입력창에 입력되는 글자 색을 바꿀 수 있다.

input[type=text] {color : red}

input[type=text]:hover를 이용하면 마우스가 텍스트 입력창 위에 놓일 때 배경색을 바꿀 수 있다.

input[type=text]hover {background : yellow}

  • input[type=text]:focus를 이용하면 텍스트 입력창이 포커스(focus)를 받을 때 배경색, 글자 크기나 글자색을 바꿀 수 있다. 포커스란 한 입력창이 마우스를 클릭하여 키 입력을 받을 수 있는 상태를 말하는 것으로 전체 폼 요소 중 오직 하나만이 포커스를 갖는다.

 

input[type=text]focus {background : yellow; font-size:120%}

 

htm은 input[type=text] 속성을 이용한 폼 꾸미기 예이다.

<그림 4.7.1> input[type=text] 속성을 이용한 폼 꾸미기 예

4.7.2 드롭다운 메뉴

CSS3 스타일을 이용한 응용으로 <그림7.2>은 드롭다운 메뉴를 만드는 예이다.

<그림 4.7.2> CSS3의 드롭다운 메뉴 예

4.7.3 CSS3 반응형(Responsive) 디자인

반응형 웹 디자인은 모든 종류의 디바이스에서 웹페이지가 예쁘게 보일 수 있도록 하는 것으로서 HTML과 CSS3만을 이용한다.

<그림 4.7.3>은 데스크탑 컴퓨터나, 태블릿 또는 스마트폰 등에서 모든 콘텐츠의 손실없이 예쁘게 보이도록 디자인 한 예이다. 이 웹문서는 세 개의 <div> 태그를 가지고 있는데 브라우저의 크기에 따라 오른쪽 위와 같이 결과가 출력된다. 만일 브라우저 크기를 더 줄이면 오른쪽 아래와 같이 <div> 태그 요소가 밑으로 내려간다. 이와 같은 프로그래밍을 반응형 디자인이라 한다.

<그림 4.7.3> HTML과 CSS3을 이용한 반응형 웹디자인

4.8 CSS3: 태그에 동적 변화 만들기

웹문서의 태그 요소들을 동적으로 움직이게 하려면 대개 자바스크립트 프로그래밍이 필요하다. 그러나 CSS3는 자바스크립트의 도움이 없이도 태그에 다음과 같은 동적인 변화을 줄 수 있다.

애니메이션(animation)

전환(transition)

변환(transform)

4.8.1 애니메이션(Animation)

애니메이션은 HTML 태그의 모양 변화를 시간 단위로 설정하여 태그가 움직이듯 보이게 하는 것이다. 애니메이션에 사용되는 스타일 속성은 [표 4.8.1]과 같다.

애니메이션 코드의 예는 다음과 같다. %는 애니메이션 진행 시간 비율을 의미한다. 이 예는 처음 한 태그를 빨강색으로 한후, 25% 시간까지는 노랑색, 50% 시간까지는 파량색, 75% 시간까지는 초록색, 그리고 마지막에는 다시 빨강색으로 돌아가는 애니메이션이다.

@keyframes example {

0%   {background-color:red; left:0px; top:0px;}

25%  {background-color:yellow; left:200px; top:0px;}

50%  {background-color:blue; left:200px; top:200px;}

75%  {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

<그림4.8.1>은 위의 예를 이용하여 사각형 <div> 태그를 동적으로 움직이며 색을 변화시키는 애니메이션이다.

<그림 4.8.1> 애니메이션 예

4.8.2 전환(transition)

전환(transition)이란 HTML 태그에 적용된 CSS3 속성값이 변할 때 값의 변화를 서서히 진행시켜가며 애니메이션을 하는 것이다. HTML 태그의 색이나 모양, 위치에 대해 전환을 많이 사용한다.

한 태그 요소의 너비를 2초에 걸쳐 전환하는 예는 다음과 같다.

transition: width 2s;

한 태그 요소에 마우스가 위에 놓일 때 전환이 시작되는 예는 다음과 같다.

div:hover {width: 300px}

<그림 4.8.2>는 <div> 태그 위의 마우스를 올려 놓을 때 사각형에 대한 전환이 진행되는 애니메이션 예이다. 마우스를 태그에서 옮기면 다시 원 형태로 돌아간다.

<그림 4.8.2> 전환(transition) 예

4.8.3 변환(transform)

변환(transform)은 HTML 텍스트나 이미지 태그를 회전이나 확대할 수 있다. 변환에 사용되는 주요 transform 스타일 속성은 [표 4.8.2]와 같다.

변환 코드의 예는 다음과 같다.

div {transform : rotate(30deg)}

div {transform : rotate(30deg) scale(3,3)}

<그림 4.8.3>은 <div> 태그를 변환시킨 예이다.

<그림 4.8.3> 변환(transform) 예