(1) Selector(셀렉터)
셀렉터는 CSS의 정의(선언)가 실행될 수 있도록 선택된 개체 또는 위치를 말하는 것으로서 셀렉터는 세가지로 분류할 수 있다.
1. 태그 사용 방식 : td {text-align:center;line-height:20px;font-size:11px}
2. 클래스 사용 방식 : .aa {text-align:center;line-height:20px;font-size:11px} .(마침표, 도트)가 클래스를 셀렉터로 사용한다는 표시이며 aa는 클래스의 이름(keyword)이다.
3. 아이디 사용 방식 : #aa {text-align:center;line-height:20px;font-size:11px} #가 아이디를 셀렉터로 사용한다는 표시이며 aa는 역시 아디디의 이름(keyword)이다.
예 :
<style type="text/css">
td{text-align:center;line-height:20px;font-size:11pxbackground-color:yellow}
.aa {text-align:right;line-height:30px;font-size:15px:background-color:antiquewhite}
#aa {line-height:15px;font-size:8pt;font-family:새굴림,굴림:background-color:antiquewhite}
<style>
(2) 태그를 셀렉터로 사용하는 방식(Type Selecotr)
일반적으로는 태그를 셀렉터로 사용하는 방식이 많이 사용된다. 하지만 모든 동일한 태그에 일률적으로 적용된다는 단점이 있으므로 클래스방식을 병용하는 것이 바람직하다.
사용 예:
<style type="text/css">
td {text-align:center;line-height:20px;font-size:11px;background-color:yellow}
</style>
<소스와 실행 화면>
1. 스타일을 적용하지 않았을 경우.
소스 :
<html>
<head>
<title>스타일 시트의 셀렉터</title>
</head>
<body>
<table border=2 bordercolor="pink" width=400>
<tr>
<td>오늘의 날씨는?
</tr>l
<tr>
<td>맑음입니다.
</tr>
</table>
</body>
</html>
실행화면 :
2. 사용 예의 스타일을 적용했을 경우
소스 :
<html>
<head><title>스타일 시트의 셀렉터</title>
<style type="text/css">
td {text-align:center;line-height:20px;font-size:11px;background-color:yellow}
</style>
</head>
<body>
<table border=2 bordercolor="pink" width=400>
<tr>
<td>오늘의 날씨는?
</tr>
<tr>
<td>맑음입니다.
</tr>
</table>
</body>
</html>
실행화면 :
(3) 클래스를 셀렉터로 사용하는 방식 (Class Attribute Selector)
클래스를 셀렉터로 사용하게 되면 문서 내의 필요한 부분에만 정의를 사용할 수 있다는 장점이 있다. 다만 클래스 방식만을 사용하게 되면 상당히 복잡하게 정의하게 될 가능성이 높다. 따라서 보편적으로 사용할 부분은 태그를 셀렉터로서 사용하고 추가로 필요한 부분에 클래스 방식을 적용하는 것이 바람직하다.
사용 예:
<style type="text/css">
.aa {text-align:right;line-height:30px;font-size:15px;background-color:lightpink}
</style>
<스타일 적용 했을 때 소스와 실행 화면>
소스 :
<html>
<head><title>스타일 시트의 셀렉터</title>
<style type="text/css">
.aa {text-align:right;line-height:30px;font-size:15px;background-color:lightpink;}
</style>
</head>
<body>
<table border=2 bordercolor="pink" width=400>
<tr>
<td class="aa">오늘의 날씨는?
</tr>
<tr>
<td>맑음입니다.
</tr>
</table>
</body>
</html>
실행화면 :
(4) 아이디를 셀렉터로 사용하는 방식 (ID Attribute Selector)
아이디를 셀렉터로 사용하는 방식은 클래스를 셀렉터로 사용하는 방식과 언뜻 거의 동일해 보인다. 그러나 형태는 유사하지만 사용방법과 목적은 상당한 차이가 있다. 클래스를 셀렉터로 사용하면 한번 정의한 뒤에 동일한 키워드를 문서 내부의 어떤 곳이든 필요한 곳에 여러번 사용할 수 있지만 아이디를 셀렉터로 사용하는 방식은 단 한번만 사용이 가능하다. 문서내에 단 한 곳에서만 사용이 가능하기 때문에 하이퍼링크의 대상이 될 수도 있고 스크립트를 이용하여 특정 아이디의 스타일을 제어하는 것이 가능하다. 하지만 일반적으로 아이디방식은 많이 사용되지는 않고 있다.
사용 예:
<style type="text/css">
#aa {line-height:15px;font-size:8pt;font-family:새굴림,굴림;background-color:antiquewhite}
</style>
<스타일을 적용했을 경우>
소스 :
<html>
<head><title>스타일 시트의 셀렉터</title>
<style type="text/css">
#aa {line-height:15px;font-size:8pt;font-family:새굴림,굴림;background-color:antiquewhite}
</style>
</head>
<body>
<table border=2 bordercolor="pink" width=400>
<tr>
<td id="aa">오늘의 날씨는?
</tr>
<tr>
<td>맑음 입니다.
</tr>
</table>
</body>
</html>
실행화면 :
(5) 그룹 셀렉터 (Group Selector)
1. 서로 다른 태그 셀렉터에 동일한 정의를 사용했을 경우는 하나로 묶어서 사용할 수 있다.
p {font-family: 휴먼명조,굴림; text-align:center}
td {font-family: 휴먼명조,굴림; text-align:center}
라고 표현된 정의는
-> p, td {font-family: 휴먼명조,굴림; text-align:center}라고 합쳐서 정의할 수 있다.
2. 동일한 셀렉터가 여러개의 정의를 사용할 때는 물론 ;(세미콜론)을 사용하여 하나로 묶을 수 있다.
td {font-family}
td {휴먼명조,굴림}
td {text-align:center}
와
td {font-family: 휴먼명조,굴림; text-align:center}
는 완벽하게 같은 표현이다.
(6) 문장 셀렉터 (Contextual Selector)
특정 셀렉터 안에 포함된 셀렉터에만 스타일을 적용하고자 할 때 사용한다. 태그는 물론 클래스 아이디 선택자 끼리도 가능하고 섞어서 사용하는 것도 가능하다.
td a { font-style:italic} -> td 태그의 텍스트도 아니고 a 태그의 텍스트도 아니고 td 태그 안에 포함되어 있는 a 태그의 텍스트만 이탤릭체로 표현되는 것이다.
사용 예:
<html>
<head><title>문장 셀렉터</title>
<style type="text/css">
td a {font-style:italic}
</style>
</head>
<body>
<table border=2 bordercolor="pink" width=400>
<tr>
<td>오늘의 날씨는?
</tr>
<tr>
<td>오늘은 <a href=http://daum.net target=_blank>맑겠습니다.
</tr>
</table>
<p><a href=mailto:dongweed@hanmaiil.net>기상청 한동견케스터</a></p>
</body>
실행 화면 :
* CSS의 새로운 버전인 CSS2에서는 문장 셀렉터(Contextual Selector)라는 용어를 자손 셀렉터(Descendant Selector)라고 표현하고 있습니다.
(1) 글꼴 관련 속성
| 속성 |
값 |
설명 |
| font |
대표속성 |
|
color
|
색이름, RGB값 |
글자색
|
font-family
|
글꼴이름
|
글꼴(글씨체)
|
font-size
|
절대값, 상대값, 길이, 퍼센트
|
글자크기
|
font-style
|
normal, italic, oblique
|
글자모양
|
font-variant
|
normal, small-caps
|
작은 크기의 대문자로 지정하기
|
font-weight
|
normal, bold, bolder, lighter, 100~900
|
글자굵기
|
(2) 문자열 레이아웃 관련속성
| 속성 |
값 |
설명 |
text-indent
|
길이, 퍼센트
|
들여쓰기 |
text-align
|
left, right, center
|
문자열 정렬 |
line-height
|
normal, 숫자, 길이, 퍼센트
|
줄간격(행간격) * 행의 높이가 아니다. |
vertical-align
|
top, bottom, middle
|
수직 정렬 |
letter-spacing
|
normal, auto, 길이
|
문자 간격 |
word-spacing
|
normal, 길이
|
단어 간격 |
white-spacing
|
noraml, pre, nowrap
|
빈칸 및 줄바꿈 처리 |
text-decoration
|
none, underline, overline, line-through, blink
|
문자열 처리 |
text-transform
|
none, capitalize, uppercase, lowercase
|
문자열 대소문자 변경 |
(3) 목록관련 속성
| list-style |
대표속성 |
설명 |
| list-style-type |
disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none |
목록표시의 형태 |
| list-style-position |
inside, outside |
목록표시의 위치 |
| list-style-image |
URL, none |
목록표시에 이미지를
사용할 수 있다. |
(4) 경계선 관련 속성
| 속성 |
값 |
설명 |
border-width
|
대표속성 - thin, medium, thick, 길이
|
경계선의 색 |
| border-left-width |
thin, medium, thick, 길이 |
|
border-right-width
|
thin, medium, thick, 길이 |
|
| border-top-width |
thin, medium, thick, 길이 |
|
| border-bottom-width |
thin, medium, thick, 길이 |
|
| border-color |
대표속성 - 색이름,RGB값 |
|
| border-left-color |
색이름,RGB값 |
|
| border-right-color |
색이름,RGB값 |
|
| border-top-color |
색이름,RGB값 |
|
| border-bottom-color |
색이름,RGB값 |
|
| border-style |
none,dotted,dashed,solid,double,groove,
ridge,inset,outset |
경계선의 모양 |
| border-left-style |
none,dotted,dashed,solid,double,groove,
ridge,inset,outset |
dot는 점(.),
dash는 대시(- ), solid는 굵게... |
| border-right-style |
none,dotted,dashed,solid,double,groove,
ridge,inset,outset |
|
| border-top-style |
none,dotted,dashed,solid,double,groove,
ridge,inset,outset |
|
| border-bottom-style |
none,dotted,dashed,solid,double,groove,
ridge,inset,outset |
|
(5) 배경 관련 속성
| 속성 |
값 |
설명 |
background
|
대표속성 |
|
| background-color |
색이름, RGB값, transparent |
배경색 지정 |
| background-image |
url, none |
배경이미지 경로/파일 지정 |
| background-repeat |
repeat, repeat-x, repeat-y, no-repeat |
배경이미지의 반복여부, 반복방법 |
| background-attachment |
scroll, fixed |
배경이미지의 스크롤 여부 |
| background-position |
(퍼센트, 길이), (top,center,bottom = 세로위치), (left,center,right=가로위치) |
배경이미지의 시작위치 설정 |
(6) 위치 관련 속성
| 속성 |
값 |
설명 |
| position |
static, fixed, absolute, relative (초기값은 static) |
위치를 계산하는 방법 |
| float |
none, left, right |
Box(일반적으로 이미지)와 글의 위치 |
| clear |
none, left, right, both |
지정한 값의 방향에 떠다니는 박스를 허용하지 않는다. |
| z-index |
auto, 숫자 |
Box가 겹쳐있을 경우 보여지는 순서를 결정 |
| overflow |
visible, hidden, scroll, auto |
컨텐츠가 Box의 범위를 넘어가는 경우의 처리 |
(7) 외부여백(Margin)과 내부여백(Padding)관련 속성
| 속성 |
값 |
설명 |
| margin |
대표속성 - 길이, 퍼센트, auto |
박스(블럭=문단)의 경계선과 외부의 다른 요소의 간격 조절 |
| margin-left |
길이, 퍼센트, auto |
|
| margin-right |
길이, 퍼센트, auto |
|
| margin-top |
길이, 퍼센트, auto |
|
| margin-bottom |
길이, 퍼센트, auto |
|
| padding |
대표속성 - 길이, 퍼센트 |
박스(블럭-문단)의 경계선과 내부의 컨텐츠의 간격 조절 |
| padding-left |
길이, 퍼센트 |
|
| padding-right |
길이, 퍼센트 |
|
| padding-top |
길이, 퍼센트 |
|
| padding-bottom |
길이, 퍼센트 |
|
|
