CSS 기본 속성

CSS 기본 속성

공부한 곳

• tcpschool

---

공부 내용

 

색상 지정

<style>
	.blue { color: blue; }
    .green { color : rgb(0,0,255); }
    .silver { color : #C0C0C0; }
</style>

1. 색상 이름으로 표현

2. RGB 값으로 표현

3. 16진수로 표현

 

 

 

 

배경 속성

<style>
    background-image: url("/examples/images/img_man.png");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-attachment: fixed;
</style>

 

background 

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

background-color 

 - 해당 요소의 배경색을 설정

background-image

 - 해당 요소의 배경으로 나타날 배경 이미지 설정

 - 기본 설정으로 반복됨

background-repeat

 - 반복 방향을 설정하고나 안하도록 설정

background-position

 - 반복되지 않는 배경 이미지의 상대 위치를 설정

background-attachment

 - 위치가 설정된 배경 이미지를 해당 위치에 고정

 - 스크롤해도 움직이지 않음

 

 

 

 

텍스트 속성

 

color 

 - 텍스트의 색상

direction

 - 텍스트가 써지는 방향

letter-spacing 

 - 글자 사이의 간격

word-spacing

 - 단어 사이의 간격

text-indent

 - 단락의 첫 줄에 들여쓰기를 할지

tesxt-align

 - 텍스트의 정렬

text-decoration

 - 텍스트에 여러가지 효과(밑줄 등)

text-transform

 - 영문자의 대소문자 설정

line-height

 - 텍스트의 줄 간격

text-shadow

 - 텍스트에 간단한 그림자 효과

 

 

 

 

폰트 속성

<style>

</style>

 

font-family 글꼴을 설정하는 속성

 - font-family:family-name 또는 generic-family 

   여러개 등록시 첫번째로 등록된 폰트로 사용, 없다면 다음 폰트 사용

 - font-family:initial     기본값

 - font-family:inherit 부모 요소의 속성값을 상속받음

 

font-weight 텍스트의 두께

font-size 텍스트의 크기

 

 

 

 

링크

<style>

</style>

 

link

 - 기본 상태, 방문하지 않은 상태

visited

 - 링크를 방문한 상태

hover

 - 커서가 링크 위에 올라가 있는 상태

active

 - 클릭하고 있는 상태

 

 

 

 

테이블

<style>

</style>

 

border

 - 테두리 주기

border-collapse

 - 테두리 구분 없애기

border-spacing

 - 테이블 요소간의 공백

text-align 

 - 테이블 요소 내에서 정렬

vertical-align

 - 테이블 요소 내에서 (수직) 정렬

 

테이블에도 hover 쓸 수 있음