2. CSS - 기본 속성

1) CSS 색 표현 방법

 

1-1) 색상 이름으로 표현

 

 

1-2) RGB 색상값으로 표현

 

모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현함.

 

따라서 HTML에서도 이 세가지 색을 가지고 색을 표현하는 RGB 색상을 사용함.

 

RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가짐.

 

 

1-3) 16진수 색상값으로 표현

 

RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가짐.

 

예를 들어 녹색을 나타내는 RGB 색상값 rgb(0, 255, 0)은 16진수 색상값으로는 #00FF00이 됨.

 

 

2) CSS 배경

 

CSS에 사용할 수 있는 background 속성은 다음과 같음

 

1. background-color

2. background-image

3. background-repeat

4. background-position

5. background-attachment

 

2-1) background-color 속성

 

해당 HTML 요소의 배경색(background color)을 설정함.

 

 

2-2) background-image 속성

 

HTML 요소의 배경으로 나타날 배경 이미지(image)를 설정함.

 

설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타남.

 

 

배경 이미지를 사용할 때에는 이미지가 본문의 텍스트를 방해하지 않도록 주의를 기울여야 함.

 

 

2-3) background-repeat 속성

 

배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두 반복되어 나타남.

 

background-repeat 속성을 이용하면 이러한 배경 이미지를 수평이나 수직 방향으로만 반복되도록 설정할 수 있음.

 

 

다음 예제는 배경 이미지의 수직 반복을 보여줌.

 

 

배경 이미지가 반복되지 않고 한 번만 나타나게 할 수도 있음.

 

 

2-4) background-position 속성

 

background-position 속성은 반복되지 않는 배경 이미지의 상대 위치(relative position)를 설정함.

 

 

이 속성에서 사용할 수 있는 키워드의 조합은 다음과 같음.

 

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)이 됨.

 

다음 예제는 배경 이미지의 상대 위치를 픽셀 단위로 직접 명시한 예제임.

 

 

2-5) background-attachment 속성

 

background-attachment 속성을 사용하여 위치가 설정된 배경 이미지를 해당 위치에 고정시킬 수도 있음.

 

이렇게 고정된 배경 이미지는 스크롤과는 무관하게 화면의 위치에서 이동하지 않음.

 

 

2-6) background 속성 한 번에 적용함

 

위에 언급한 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음.

 

 

2-7) CSS background 속성

 

속성	설명
background	모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음
background-color	HTML 요소의 배경색을 설정함
background-image	HTML 요소의 배경 이미지를 설정함
background-repeat	설정된 배경 이미지의 반복 유무를 설정함
background-position	반복되지 않는 배경 이미지의 상대 위치를 설정함
background-attachment	배경 이미지를 스크롤과는 무관하게 해당 위치에 고정시킴

 

3) CSS 텍스트

 

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

 

3-1) color 속성

 

텍스트의 색상을 설정하는 color 속성.

 

3-2) direction 속성

 

텍스트가 써지는 방향을 설정함.

 

direction 속성이 left-to-right(ltr)일 때는 기본 설정처럼 텍스트가 왼쪽에서 오른쪽 방향으로 써짐.

 

하지만 direction 속성이 right-to-left(rtl)일 때는 텍스트가 반대 방향인 오른쪽에서 왼쪽 방향으로 써짐.

 

다음 예제는 "객체 지향 프로그래밍" 이라는 문자열을 한글과 아랍어로 각각 나타낸 예제임.

 

아랍어는 한글이나 영어와는 달리 오른쪽에서 왼쪽 방향으로 텍스트를 읽고 쓰는 언어임.

 

따라서 아랍어와 같이 텍스트를 반대 방향으로 쓰는 언어를 나타낼 때는 텍스트가 써지는 방향을 direction 속성을 사용하여 변경해줘야 함.

 

3-3) letter-spacing 속성

 

텍스트 내에서 글자 사이의 간격을 설정함.

 

 

3-4) word-spacing 속성

 

word-spacing 속성은 텍스트 내에서 단어 사이의 간격을 설정함.

 

letter-spacing 속성과는 달리 문자 간의 간격이 아닌 단어 간의 간격을 기준으로 설정함.

 

 

3-5) text-indent 속성

 

단락의 첫 줄에 들여쓰기할지 안 할지를 설정함.

 

웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않음.

 

 

3-6) text-align 속성

 

텍스트의 수평 방향 정렬을 설정함.

 

text-align 속성으로 설정된 정렬 방향은 text-direction 속성과는 상관없이 우선적으로 적용됨.

 

 

3-7) text-decoration 속성

 

텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용함.

 

※ text-decoration 속성값을 none으로 설정하여 링크(link)가 설정된 텍스트의 밑줄을 제거하는데 자주 사용함.

 

3-8) text-transform 속성

 

텍스트에 포함된 영문자에 대한 대소문자를 설정함.

 

이 속성은 텍스트에 포함된 모든 영문자를 대문자나 소문자로 변경시켜줌.

 

또한 단어의 첫 문자만을 대문자로 변경시킬 수도 있음.

 

※ text-transfrom 속성은 한글에는 영향을 주지 않으며, 오직 영문자에만 적용됨.

 

3-9) line-height 속성

 

텍스트의 줄 간격을 설정함.

 

 

3-10) text-shadow 속성

 

텍스트에 간단한 그림자 효과를 설정함.

 

 

3-11) CSS text 속성

 

속성	설명
color	텍스트의 색상을 설정함
direction	텍스트가 쓰이는 방향을 설정함
letter-spacing	텍스트 내에서 문자 사이의 간격을 설정함
word-spacing	텍스트 내에서 단어 사이의 간격을 설정함
text-indent	단락의 첫 줄을 들여쓰기할지 안 할지를 설정함
text-align	텍스트의 수평 방향 정렬을 설정함
text-decoration	텍스트에 여러 가지 효과를 설정하거나 제거함
text-transform	텍스트에 포함된 영문자에 대한 대소문자를 설정함
line-height	텍스트의 줄 간격을 설정함
text-shadow	텍스트에 그림자 효과를 설정함
unicode-bidi	direction 속성과 같이 사용하여 텍스트의 기본 출력 방향을 설정함
vertical-align	HTML 요소 내의 수직 방향 정렬을 설정함
white-space	HTML 요소 내의 여백을 설정함

 

4) CSS 글꼴

 

1. font-family

2. font-style

3. font-variant

4. font-weight

5. font-size

 

4-1) CSS 글꼴 집합(font-family)

 

CSS에는 두 가지의 글꼴 집합(font family)이 존재함.

 

- generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등)

- font family : 특정 글꼴 집합("Times", "Courier" 등)

 

4-2) font-family 속성

 

font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있음.

 

font-fmaily 속성값이 여러 개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 들임.

 

만약 사용자의 컴퓨터에 첫 번째로 읽어 들인 글꼴이 없으면 다음 글꼴을 확인하게 됨.

 

이런 방식으로 계속해서 읽어 들인 글꼴이 존재하는지를 확인하여 읽어 들인 글꼴이 사용자의 컴퓨터에 존재하면 해당 글꼴로 표시하게 됨.

 

글꼴의 이름이 한 단어 이상으로 이루어지면 반드시 따옴표를 사용하여 둘러 쌓아야 함.

 

또한 여러 개의 글꼴을 나열할 때에는 쉼표(,)로 구분 지음.

 

 

4-3) font-style 속성

 

font-style 속성은 주로 이탤릭체를 사용하기 위해 사용하며 다음과 같이 3가지의 속성값을 가짐.

 

1. normal : 텍스트에 어떠한 스타일도 적용하지 않음.

2. italic : 텍스트를 이탤릭체로 나타냄.

3. oblique : 텍스트를 기울임. 이 속성값은 italic과 매우 유사하지만 지원하는 웹 브라우저가 거의 없음.

 

 

4-4) font-variant 속성

 

속성값이 small-caps로 설정되면 텍스트에 포함된 영문자 중 모든 소문자를 작은 대문자(small-caps) 글꼴로 변경 시킴.

 

이때 영문자 중 대문자는 기존 크기 그대로 출력함.

 

작은 대문자(small-caps) 글꼴이란 텍스트의 기존 대문자보다는 약간 작은 크기의 대문자를 의미함.

 

※ font-variant 속성은 한글에는 적용되지 않으며 영문자에만 적용됨.

 

4-5) font-weight 속성

 

텍스트를 얼마나 두껍게 표현할지를 설정함.

 

사용할 수 있는 속성값에는 lighter, normal, bold, bolder 등이 있음.

 

또한 100, 200, 300, ..., 900 등과 같이 숫자로 텍스트의 두께를 설정할 수도 있음.

 

 

4-6) font-size 속성

 

텍스트의 크기 설정함. (<h1> 태그부터 <h6> 태그 사용)

 

속성값은 다음과 같이 두 가지 방식으로 표현할 수 있음.

 

1. 절대적 크기

2. 상대적 크기

 

절대적 크기는 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용함.

 

절대적 크기로 설정된 텍스트는 모든 웹 브라우저에서 같은 크기로 표현됨.

 

상대적 크기는 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식임.

 

또한 사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수도 있음.

 

4-7) font-size의 크기 단위

 

대표적인 크기 단위는 다음과 같음.

 

백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정함.

 

배수 단위(em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정함.

 

픽셀 단위(px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정함.

 

※ 배수 단위(em)로 설정된 텍스트는 사용자가 웹 브라우저를 통해 크기를 재조정할 수 있음.

 

4-8) CSS font 속성

 

속성	설명
font	모든 font 속성을 이용한 스타일을 한 줄에 설정할 수 있음
font-family	텍스트의 글꼴 집합을 설정함
font-style	주로 이탤릭체를 사용하기 위해 사용함
font-variant	테그스트에 포함된 영문자 중 소문자만을 작은 대문자(small-caps) 글꼴로 변경시킴
font-weight	텍스트를 얼마나 두껍게 표현할지를 설정함
font-size	텍스트의 크기를 설정함

 

5) CSS 링크

 

링크(link)에는 color, font-family, background 속성 등 CSS의 다양한 속성들을 적용할 수 있음.

 

또한, text-decoration 속성값을 none으로 설정하여 링크가 연결된 텍스트의 밑줄을 제거할 수도 있음.

 

 

5-1) 링크(link)의 상태

 

1. link : 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태임.

2. visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태임.

3. hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태임.

4. active : 사용자가 마우스로 링크를 클릭하고 있는 상태임.

5. focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태임.

 

 

5-2) 링크를 활용한 버튼(Button)

 

CSS를 이용하면 간단하게 링크를 버튼처럼 만들 수 있음.

 

 

6) CSS 리스트

 

 

CSS에서 사용할 수 있는 list-style 속성은 다음과 같음.

 

1. list-style-type

2. list-style-image

3. list-style-position

 

6-1) list-style-type 속성

 

리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 함.

 

list-style-type 속성을 이용하면 리스트에 다양한 마커(marker)를 적용할 수 있음.

 

 

6-2) list-style-image 속성

 

 

6-3) list-style-position 속성

 

list-style-position 속성을 이용하면 리스트 요소의 위치를 설정할 수 있음.

 

list-style-position 속성의 기본 속성값은 outside로 설정되어 있음.

 

 

6-4) list-style 속성 한 번에 적용하기

 

위에서 언급한 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음.

 

 

6-5) 리스트에 배경색 적용

 

CSS를 사용하면 리스트 전체뿐만 아니라 리스트 요소별로도 각각의 배경색을 설정할 수 있음.

 

 

6-6) CSS list-style 속성

 

속성	설명
list-style	모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음
list-style-type	리스트 요소의 마커(marker)를 설정함
list-style-image	리스트 요소의 마커로 사용할 이미지를 설정함
list-style-position	리스트 요소의 위치를

 

7) CSS 테이블

 

1. border

2. border-collapse

3. border-spacing

4. caption-side

5. empty-cells

6. table-layout

 

7-1) border 속성

 

테이블의 테두리(border)를 설정할 수 있음.

 

이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 빈 테두리를 가지게 됨.

 

 

위의 예제에서 테이블의 테두리(border)가 두 줄씩 나타나는 이유는 <th> 태그와 <td> 태그가 각각 자신만의 테두리를 가지고 있기 때문임.

 

위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 함.

 

7-3) border-collapse 속성

 

border-collapse 속성값을 collapse로 설정하면 해당 테이블의 테두리는 한 줄로 표현됨.

 

 

7-4) border-spacing 속성

 

테이블 요소(th, td)간의 여백을 설정해 줌.

 

 

7-5) text-align 속성

 

text-align 속성은 테이블 요소(th, td) 내부에서 텍스트의 수평 방향 정렬을 설정함.

 

<th> 태그 내부는 가운데 정렬이, <td> 태그 내부는 왼쪽 정렬이 기본 설정임.

 

 

7-6) vertical-align 속성

 

vertical-align 속성은 테이블 요소(th, td) 내부에서 텍스트의 수직 방향 정렬을 설정함.

 

<th> 태그와 <td> 태그 모두 가운데 정렬이 기본 설정임.

 

 

7-7) 다양한 형태의 테이블 예제

 

CSS를 이용하면 HTML 기본 테이블을 훨씬 더 다양한 모습으로 설정할 수 있음.

 

다음 예제는 <th> 태그와 <td> 태그에 border-bottom 속성을 사용하여 수평 나눔선만으로 만든 테이블임.

 

 

다음 예제는 :hover 선택자를 이용하고 <tr> 태그에 마우스를 올리면 행 전체가 하이라이트 되도록 만든 테이블임.

 

 

다음 예제는 background-color 속성과 :nth-child 선택자를 사용하여 얼룩무늬 효과를 설정한 테이블임.

 

 

7-8) CSS table 속성

 

속성	설명
border	모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음
border-collapse	테이블의 테두리를 한 줄로 나타낼지를 설정함
border-spacing	테이블 요소(th, td)간의 여백을 설정함
caption-side	테이블의 캡션(caption)을 설정함
empty-cells	테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정함
table-layout	테이블에 사용되는 레이아웃 알고리즘을 설정함