CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성됩니다.
선택자는 CSS를 적용하고자 하는 HTML 요소(element)를 가리킵니다.
선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌉니다.
각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다.
이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마칩니다.
CSS 선택자
스타일을 적용할 HTML 요소를 가리키는 데 사용하는 선택자는 다음과 같습니다.
- HTML 요소 선택자
- 아이디(id) 선택자
- 클래스(class) 선택자
- 그룹(group) 선택자
HTML 요소 선택자
CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다.
예)
<style>
h2 { color: teal; text-decoration: underline; }
</style>
...
<h2>이 부분에 스타일을 적용합니다.</h2>
아이디(id) 선택자
아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다.
이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 줍니다.
예)
<style>
#heading { color: teal; text-decoration: line-through; }
</style>
...
<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>
HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용해도 별 문제없이 동작합니다.
하지만 이렇게 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생합니다.
따라서 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋습니다.
클래스(class) 선택자
클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다.
이러한 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름을 가지는 요소들을 모두 선택해 줍니다.
예)
<style>
.headings { color: lime; text-decoration: overline; }
</style>
...
<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>
<p>class 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>
그룹(group) 선택자
그룹 선택자는 위에서 언급한 여러 선택자를 같이 사용하고자 할 때 사용합니다.
그룹 선택자는 여러 선택자를 쉼표(,)로 구분하여 연결합니다.
이러한 그룹 선택자는 코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만들어 줍니다.
예)
<style>
h1 { color: navy; }
h1, h2 { text-align: center; }
h1, h2, p { background-color: lightgray; }
</style>
CSS 주석(comments)
주석(comment)이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미합니다.
이러한 주석은 다른 CSS 코드와는 달리 웹 브라우저에 의해 해석되지 않습니다.
CSS에서 주석을 표현하는 방법은 다음과 같습니다.
문법
/* 주석내용 */
예)
<style>
p { color: teal; /*이것은 한 줄짜리 주석입니다.*/ font-size: 30px; }
/*
이것은 두 줄짜리 주석입니다.
몇 줄이라도 가능합니다.
*/
</style>
CSS에서 주석을 작성할 때는 절대로 주석 내부에 또 다른 주석을 넣어서는 안 됩니다.
다음 예제는 첫 번째 주석 안에 한 줄짜리 두 번째 주석을 삽입한 예제입니다.
이때 첫 번째 주석의 두 번째 라인은 두 번째 주석의 */ 기호로 인해 정상적인 주석으로 인식되지 못합니다.
예)
/*
첫 번째 주석의 첫 번째 라인입니다. /* 두 번째 주석입니다. */
첫 번째 주석의 두 번째 라인입니다.
*/
CSS를 적용하는 방법
HTML 문서에 CSS 스타일을 적용할 때에는 다음과 같이 세 가지 방법을 사용할 수 있습니다.
1. 인라인 스타일(Inline style)
2. 내부 스타일 시트(Internal style sheet)
3. 외부 스타일 시트(External style sheet)
인라인 스타일(Inline style)
인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다.
이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다.
예)
<body>
<h2 style="color:green; text-decoration:underline">
인라인 스타일을 이용하여 스타일을 적용하였습니다.
</h2>
</body>
이 방식은 한 번 설정된 스타일을 변경하기가 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 됩니다. 따라서 이 방식은 될 수 있으면 꼭 필요한 경우에만 사용해야 합니다.
내부 스타일 시트(Internal style sheet)
내부 스타일 시트를 이용하는 방법은 HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS 스타일을 적용합니다.
이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다.
예)
<head>
<style>
body { background-color: lightyellow; }
h2 { color: red; text-decoration: underline; }
</style>
</head>
외부 스타일 시트(External style sheet)
외부 스타일 시트를 이용하는 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다.
외부에 작성된 이러한 스타일 시트 파일은 .css 확장자를 사용하여 저장됩니다.
스타일을 적용할 웹 페이지의 <head>태그에 <link>태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용됩니다.
예)
<head>
<link rel="stylesheet" href="/examples/media/expand_style.css">
</head>
위의 예제에서 사용된 CSS 파일의 내용은 다음과 같습니다.
expand_style.css
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }
스타일 적용의 우선순위
위에서 설명한 스타일 적용 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정됩니다.
1. 인라인 스타일 (HTML 요소 내부에 위치함)
2. 내부 / 외부 스타일 시트 (HTML 문서의 head 요소 내부에 위치함)
3. 웹 브라우저 기본 스타일
예를 들어 인라인 스타일이 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용됩니다.
또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용됩니다.
예)
<link rel="stylesheet" href="/examples/media/expand_style.css">
...
<h2>이 부분은 외부 스타일 시트만이 적용됩니다.</h2>
<h2 style="color:maroon; text-decoration:line-through"> 이 부분은 인라인 스타일과 외부 스타일 시트가 둘 다 적용됩니다. </h2>
따라서 웹 사이트의 스타일 적용은 외부 스타일 시트를 사용하는 것이 유지 보수도 편하며, 가장 안정적입니다.
CSS에서 색을 표현하는 방법에는 다음과 같이 세 가지 방법이 있습니다.
1. 색상 이름으로 표현
2. RGB 색상값으로 표현
3. 16진수 색상값으로 표현
HTML에서 색상 이름은 대소문자를 구분하지 않습니다.
<style>
.blue { color: blue; }
.green { color: green; }
.silver { color: silver; }
</style>
RGB 색상값으로 표현
모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현합니다.
따라서 HTML에서도 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용합니다.
RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가집니다.
예)
<style>
.blue { color: rgb(0,0,255); }
.green { color: rgb(0,128,0); }
.silver { color: rgb(192,192,192); }
</style>
16진수 색상값으로 표현
16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것입니다.
따라서 RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가집니다.
예를 들면, 녹색을 나타내는 RGB 색상값 rgb(0,255,0)은 16진수 색상값으로는 #00FF00이 됩니다.
예)
<style>
.blue { color: #0000FF; }
.green { color: #008000; }
.silver { color: #C0C0C0; }
</style>
CSS에서 사용할 수 있는 background 속성은 다음과 같습니다.
1. background-color
2. background-image
3. background-repeat
4. background-position
5. background-attachment
background-color 속성
background-color 속성은 해당 HTML 요소의 배경색(background color)을 설정합니다.
예)
<style>
body { background-color: lightblue; }
h1 { background-color: rgb(255,128,0); }
p { background-color: #FFFFCC; }
</style>
background-image 속성
background-image 속성은 해당 HTML 요소의 배경으로 나타날 배경 이미지(image)를 설정합니다.
설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타납니다.
예)
<style>
body { background-image: url("/examples/images/img_background_good.png"); }
</style>
배경 이미지를 사용할 때에는 이미지가 본문의 텍스트를 방해하지 않도록 주의를 기울여야 합니다.
예)
<style>
body { background-image: url("/examples/images/img_background_bad.png"); }
</style>
background-repeat 속성
배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두 반복되어 나타납니다.
background-repeat 속성을 이용하면 이러한 배경 이미지를 수평이나 수직 방향으로만 반복되도록 설정할 수 있습니다.
다음 예제는 배경 이미지의 수평 반복을 보여줍니다.
예)
<style>
body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-x; }
</style>
다음 예제는 배경 이미지의 수직 반복을 보여줍니다.
예)
<style>
body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-y; }
</style>
배경 이미지가 반복되지 않고 한 번만 나타나게 할 수도 있습니다.
예)
<style>
body { background-image: url("/examples/images/img_man.png"); background-repeat: no-repeat; }
</style>
background-position 속성
background-position 속성은 반복되지 않는 배경 이미지의 상대 위치(relative position)를 설정합니다.
예)
<style>
body {
background-image: url("/examples/images/img_man.png");
background-repeat: no-repeat;
background-position: top right;
}
</style>
이 속성에서 사용할 수 있는 키워드의 조합은 다음과 같습니다.
1. left top
2. left center
3. left bottom
4. right top
5. right center
6. right bottom
7. center top
8. center center
9. center bottom
또한, 퍼센트(%)나 픽셀(px)을 사용하여 상대 위치를 직접 명시할 수도 있습니다.
이때 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단(left top)이 됩니다.
다음 예제는 배경 이미지의 상대 위치를 픽셀 단위로 직접 명시한 예제입니다.
예)
<style>
body {
background-image: url("/examples/images/img_man.png");
background-repeat: no-repeat;
background-position: 100px 200px;
}
</style>
background-attachment 속성
background-attachment 속성을 사용하여 위치가 설정된 배경 이미지를 해당 위치에 고정시킬 수도 있습니다.
이렇게 고정된 배경 이미지는 스크롤과는 무관하게 화면의 위치에서 이동하지 않습니다.
예)
<style>
body {
background-image: url("/examples/images/img_man.png");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed;
}
</style>
background 속성 한 번에 적용하기
위에서 언급한 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다.
예)
<style>
body { background: #FFCCCC url("/examples/images/img_man.png") no-repeat left bottom fixed; }
</style>
CSS에서 사용할 수 있는 대표적인 text 속성은 다음과 같습니다.
1. color
2. direction
3. letter-spacing
4. word-spacing
5. text-indent
6. text-align
7. text-decoration
8. text-transform
9. line-height
10. text-shadow
color 속성
color 속성은 텍스트의 색상을 설정합니다.
웹 페이지에서 텍스트의 기본 색상은 검정색입니다.
<body>태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용됩니다.
하지만 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 <body>태그에 명시된 속성값보다 우선 적용됩니다.
예)
<style>
body { color: red; }
p { color: maroon; }
</style>
direction 속성
direction 속성은 텍스트가 써지는 방향을 설정합니다.
웹 페이지에서 텍스트는 기본적으로 왼쪽에서 오른쪽 방향으로 써집니다.
direction 속성이 left-to-right(ltr)일 때는 기본 설정처럼 텍스트가 왼쪽에서 오른쪽 방향으로 써집니다.
하지만, direction 속성이 right-to-left(rtl)일 때는 텍스트가 반대 방향인 오른쪽에서 왼쪽 방향으로 써집니다.
다음 예제는 "객체 지향 프로그래밍"이라는 문자열을 한글과 아랍어로 각각 나타낸 예제입니다.
예)
<style>
.rightToLeft { direction: rtl; }
</style>
아랍어는 한글이나 영어와는 달리 오른쪽에서 왼쪽 방향으로 텍스트를 읽고 쓰는 언어입니다.
따라서 아랍어와 같이 텍스트를 반대 방향으로 쓰는 언어를 나타낼 때는 텍스트가 써지는 방향을 direction 속성을 사용하여 변경해 줘야 합니다.
letter-spacing 속성
letter-spacing 속성은 텍스트 내에서 글자 사이의 간격을 설정합니다.
예)
<style>
.decLetterSpacing { letter-spacing: -3px; }
.incLetterSpacing { letter-spacing: 10px; }
</style>
word-spacing 속성
word-spacing 속성은 텍스트 내에서 단어 사이의 간격을 설정합니다.
letter-spacing 속성과는 달리 문자 간의 간격이 아닌 단어 간의 간격을 기준으로 설정합니다.
예)
<style>
.decWordSpacing { word-spacing: -3px; }
.incWordSpacing { word-spacing: 10px; }
</style>
text-indent 속성
text-indent 속성은 단락의 첫 줄에 들여쓰기할지 안 할지를 설정합니다.
웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않습니다.
예)
<style>
.paraIndent { text-indent: 30px; }
</style>
text-align 속성
text-align 속성은 텍스트의 수평 방향 정렬을 설정합니다.
text-align 속성으로 설정된 정렬 방향은 text-direction 속성과는 상관없이 우선적으로 적용됩니다.
예)
<style>
h2 { text-align: left; }
h3 { text-align: right; }
h4 { text-align: center; }
</style>
text-decoration 속성
text-decoration 속성은 텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용합니다.
예)
<style>
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }
a { text-decoration: none; }
</style>
text-decoration 속성값을 none으로 설정하여 링크(link)가 설정된 텍스트의 밑줄을 제거하는데 자주 사용합니다.
text-transform 속성
text-transform 속성은 텍스트에 포함된 영문자에 대한 대소문자를 설정합니다.
이 속성은 텍스트에 포함된 모든 영문자를 대문자나 소문자로 변경시켜 줍니다.
또한, 단어의 첫 문자만을 대문자로 변경시킬 수도 있습니다.
예)
<style>
h2 { text-transform: uppercase; }
h3 { text-transform: lowercase; }
h4 { text-transform: capitalize; }
</style>
text-transform 속성은 한글에는 영향을 주지 않으며, 오직 영문자에만 적용됩니다.
line-height 속성
line-height 속성은 텍스트의 줄 간격을 설정합니다.
예)
<style>
.narrowLineHeight { line-height: 0.8; }
.wideLineHeight { line-height: 1.8; }
</style>
text-shadow 속성
text-shadow 속성은 텍스트에 간단한 그림자 효과를 설정합니다.
예)
<style>
h2 { text-shadow: 2px 1px #3399CC; }
</style>
CSS에서 사용할 수 있는 font 속성은 다음과 같습니다.
1.font-family
2.font-style
3.font-variant
4.font-weight
5.font-size
CSS 글꼴 집합(font-family)
CSS에는 두 가지의 글꼴 집합(font family)이 존재합니다.
- generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등)
- font family : 특정 글꼴 집합 ("Times", "Courier" 등)
font-family 속성
font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있습니다.
font-family 속성값이 여러 개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 들입니다.
만약 사용자의 컴퓨터에 첫 번째로 읽어 들인 글꼴이 없으면 다음 글꼴을 확인하게 됩니다.
이런 방식으로 계속해서 읽어 들인 글꼴이 존재하는지를 확인하여, 읽어 들인 글꼴이 사용자의 컴퓨터에 존재하면 해당 글꼴로 표시하게 됩니다.
글꼴의 이름이 한 단어 이상으로 이루어지면 반드시 따옴표를 사용하여 둘러 쌓아야 합니다.
또한, 여러 개의 글꼴을 나열할 때에는 쉼표(,)로 구분 짓습니다.
예)
<style>
.serif { font-family: "Times New Roman", Times, serif; }
.sansserif { font-family: Arial, Helvetica, sans-serif; }
</style>
font-style 속성
font-style 속성은 주로 이탤릭체를 사용하기 위해 사용하며, 다음과 같이 3가지의 속성값을 가집니다.
- normal : 텍스트에 어떠한 스타일도 적용하지 않습니다.
- italic : 텍스트를 이탤릭체로 나타냅니다.
- oblique : 텍스트를 기울입니다. 이 속성값은 italic과 매우 유사하지만 지원하는 웹 브라우저가 거의 없습니다.
예)
<style>
.normal { font-style: normal; }
.italic { font-style: italic; }
.oblique { font-style: oblique; }
</style>
font-variant 속성
font-variant 속성은 속성값이 small-caps로 설정되면, 텍스트에 포함된 영문자 중 모든 소문자를 작은 대문자(small-caps) 글꼴로 변경시킵니다.
이때 영문자 중 대문자는 기존 크기 그대로 출력합니다.
작은 대문자(small-caps) 글꼴이란 텍스트의 기존 대문자보다는 약간 작은 크기의 대문자를 의미합니다.
예)
<style>
.normal { font-variant: normal; }
.smallCaps { font-variant: small-caps; }
</style>
font-variant 속성은 한글에는 적용되지 않으며, 영문자에만 적용됩니다.
font-weight 속성
font-weight 속성은 텍스트를 얼마나 두껍게 표현할지를 설정합니다.
사용할 수 있는 속성값에는 lighter, normal, bold, bolder 등이 있습니다.
또한, 100, 200, 300, ... , 900 등과 같이 숫자로 텍스트의 두께를 설정할 수도 있습니다.
예)
<style>
.normal { font-weight: normal; }
.bold { font-weight: 600; }
.bolder { font-weight: bolder; }
</style>
font-size 속성
font-size 속성은 텍스트의 크기를 설정합니다.
웹 디자인에서 텍스트의 크기는 매우 중요한 표현 요소입니다.
하지만 제목을 표현하기 위해서 텍스트의 크기만을 크게 해서는 안 됩니다.
이때에는 제목을 위한 HTML 요소인 <h1>태그부터 <h6>태그를 사용해야 합니다.
font-size 속성값
font-size 속성값은 다음과 같이 두 가지 방식으로 표현할 수 있습니다.
1. 절대적 크기
2. 상대적 크기
절대적 크기는 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용합니다.
절대적 크기로 설정된 텍스트는 모든 웹 브라우저에서 같은 크기로 표현됩니다.
상대적 크기는 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식입니다.
또한, 사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수도 있습니다.
font-size의 크기 단위
font-size 속성값에 자주 사용되는 대표적인 크기 단위는 다음과 같습니다.
백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정합니다.
배수 단위(em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정합니다.
픽셀 단위(px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정합니다.
예)
<style>
body { font-size: 100%; }
#large { font-size: 2.5em; }
#small { font-size: 0.7em; }
#fixed { font-size: 20px; }
</style>
배수 단위(em)로 설정된 텍스트는 사용자가 웹 브라우저를 통해 크기를 재조정할 수 있습니다.
링크(link)에는 color, font-family, background 속성 등 CSS의 다양한 속성들을 적용할 수 있습니다.
또한, text-decoration 속성값을 none으로 설정하여, 링크가 연결된 텍스트의 밑줄을 제거할 수도 있습니다.
<style>
a {
background-color: #FFFFE0;
color: darkslategray;
font-size: 1.3em;
text-decoration: none;
}
</style>
링크(link)의 상태
링크는 총 5가지의 상태를 가지며, 각 상태마다 다른 스타일을 적용할 수 있습니다.
1. link : 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태입니다.
2. visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태입니다.
3. hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태입니다.
4. active : 사용자가 마우스로 링크를 클릭하고 있는 상태입니다.
5. focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태입니다.
예)
<style>
a:link { color: olive; }
a:visited { color: brown; }
a:hover { color: coral; }
a:active { color: khaki; }
</style>
링크를 활용한 버튼(Button)
CSS를 이용하면 간단하게 링크를 버튼처럼 만들 수 있습니다.
예)
<style>
a:link, a:visited {
background-color: #FFA500;
color: maroon;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active { background-color: #FF4500; }
</style>
CSS에서 사용할 수 있는 list-style 속성은 다음과 같습니다.
1. list-style-type
2. list-style-image
3. list-style-position
list-style-type 속성
리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 합니다.
list-style-type 속성을 이용하면 리스트에 다양한 마커(marker)를 적용할 수 있습니다.
예)
<style>
.circle { list-style-type: circle; }
.square { list-style-type: square; }
.upperAlpha { list-style-type: upper-alpha; }
.lowerRoman { list-style-type: lower-roman; }
</style>
list-style-image 속성
list-style-image 속성을 이용하면 마커(marker)로 자신만의 이미지를 사용할 수 있습니다.
예)
<style>
.imageMarker { list-style-image: url("/examples/images/img_list_marker.png"); }
</style>
list-style-position 속성
list-style-position 속성을 이용하면 리스트 요소의 위치를 설정할 수 있습니다.
list-style-position 속성의 기본 속성값은 outside로 설정되어 있습니다.
예)
<style>
.outside { list-style-position: outside; }
.inside { list-style-position: inside; }
</style>
list-style 속성 한 번에 적용하기
위에서 언급한 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다.
예)
<style>
ul { list-style: square inside url("/examples/images/img_list_marker.png"); }
</style>
리스트에 배경색 적용
CSS를 사용하면 리스트 전체뿐만 아니라 리스트 요소별로도 각각의 배경색을 설정할 수 있습니다.
예)
<style>
ul { background: #D2691E; padding: 15px; }
ol { background: #6495ED; padding: 15px; }
ul li { background: #DEB887; margin: 5px; }
ol li { background: #00FFFF; margin-left: 15px; }
</style>
테이블에 다음 속성을 사용하여 CSS 스타일을 적용할 수 있습니다.
1. border
2. border-collapse
3. border-spacing
4. caption-side
5. empty-cells
6. table-layout
border 속성
border 속성으로 테이블의 테두리(border)를 설정할 수 있습니다.
이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 빈 테두리를 가지게 됩니다.
예)
<style>
table, th, td { border: 2px solid orange; }
</style>
위의 예제에서 테이블의 테두리(border)가 두 줄씩 나타나는 이유는 <th>태그와 <td>태그가 각각 자신만의 테두리를 가지고 있기 때문입니다.
위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 합니다.
border-collapse 속성
border-collapse 속성값을 collapse로 설정하면 해당 테이블의 테두리는 한 줄로 표현됩니다.
이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 테이블 요소별 테두리를 모두 표현하게 됩니다.
예)
<style>
table, th, td { border: 2px solid orange; }
table { border-collapse: collapse; }
</style>
border-spacing 속성
border-spacing 속성은 테이블 요소(th, td)간의 여백을 설정해 줍니다.
예)
<style>
table, th, td { border: 1px solid black; }
table { width: 100%; border-collapse: seperate; border-spacing: 20px 30px; }
</style>
text-align 속성
text-align 속성은 테이블 요소(th, td) 내부에서 텍스트의 수평 방향 정렬을 설정합니다.
<th>태그 내부는 가운데 정렬이, <td>태그 내부는 왼쪽 정렬이 기본 설정입니다.
예)
<style>
table, th, td { border: 1px solid black; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; }
td { text-align: center; }
</style>
vertical-align 속성
vertical-align 속성은 테이블 요소(th, td) 내부에서 텍스트의 수직 방향 정렬을 설정합니다.
<th>태그와 <td>태그 모두 가운데 정렬이 기본 설정입니다.
예)
<style>
table, th, td { border: 1px solid black; }
table { border-collapse: collapse; width: 100%; }
th { vertical-align: top; height: 50px; }
td { vertical-align: bottom; height: 50px; }
</style>
다양한 형태의 테이블 예제
CSS를 이용하면 HTML 기본 테이블을 훨씬 더 다양한 모습으로 설정할 수 있습니다.
다음 예제는 <th>태그와 <td>태그에 border-bottom 속성을 사용하여 수평 나눔선만으로 만든 테이블입니다.
예)
<style>
table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px; border-bottom: 1px solid #CD5C5C; }
</style>
다음 예제는 :hover 선택자를 이용하여 <tr>태그에 마우스를 올리면 행 전체가 하이라이트 되도록 만든 테이블입니다.
예)
<style>
table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px; border-bottom: 1px solid #CD5C5C; }
tr:hover { background-color: #F5F5F5; }
</style>
다음 예제는 background-color 속성과 :nth-child 선택자를 사용하여 얼룩무늬 효과를 설정한 테이블입니다.
예)
<style>
table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px; }
tr:nth-child(odd) { background-color: #F3F3F3; }
</style>
CSS 이미지 스프라이트(Image Sprite)
이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다.
웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다.
하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다.
이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다.
모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다.
또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편합니다.
다음 예제는 하나의 이미지를 가지고 네 개의 아이콘을 만드는 예제입니다.
네 개의 아이콘을 만들기 위해 네 개의 이미지를 사용하는 것이 아닌 다음 이미지 하나만을 가지고 작업하게 됩니다.
예)
<style>
.up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; }
.up { width: 21px; height: 20px; background-position: 0 0; }
.down { width: 21px; height: 20px; background-position: -21px 0; }
.right { width: 22px; height: 20px; background-position: -42px 0; }
.left { width: 22px; height: 20px; background-position: -65px 0; }
</style>
댓글