링크 지정 스타일 시트

링크 지정 스타일 시트

 

 

1. 링크관련 속성

 

의사 선택자 (psudo selector)를 이용하여 <a> 태그에 대해 여러가지 링크 관련 스타일을 지정

 

 

형식 : 항목명 (통상적으로 A 태그) : 태그 {속성:값}

 

 

CSS 태그	기능
LINK	링크 설정시 필요
ACTIVE	설정된 영역을 마우스로 클릭했을 때 링크 설정
VISITED	방문했었던 링크를 설정
HOVER	마우스 커서가 현재 설정된 링크에 위치했을 때 설정
FOCUS	현재 설정된 영역에 포커스가 존재할 때 설정

 

예)

A:VISIT {COLOR:VIOLET}  방문했던 곳의 링크 색상을 보라색으로 설정

A:HOVER {COLOR:YELLOW;

TEXT_DECORATION:NONE}   현재 링크된 곳에 마우스 위치할 때 글꼴 색상은 노랑, 밑줄 보이지 않게 설정

 

 

2. TEXT 관련 속성 -TEXT의 정렬과 배치 형식에, 속성에 대한 제어를 가능케 함

 

속성	값
Text-align	LEFT,RIGHT, CENTER, JUSTFIY(맞춤정렬)
Text-decoration	NONE(아무효과 없음), Underline(밑줄),Overline(윗줄)
Text-indent : 값	문단의 첫줄 들여쓰기 지정 (지정한 값 만큼 들여쓰기)
Text-transform	현재 문자를 대/소문자로 변환 작업 uppercase:(대문자), lowercase(소문자), capitalize(첫글자만 대문자)

 

예)

#font1{text-ident:10px}    내용의 첫줄을 10 픽셀만큼 들여쓰기 설정

 

 

3. 배경관련 속성 - 배경 이미지 제어 속성

 

속성	값
Background-image:url("파일경로")	배경이미지 사용할 파일의 경로를 지정하여 가져옴
Background-attachment:상수값	Fixed-배경이미지를 고정, scroll-배경 이미지를 문장과 함께 스크롤 하도록 함(기본값)
Background-repeat:상수값	No-repeat-배경이미지 반복없이 한번만 화면에 표시 repeat-바둑판으로 표시 repeat-x 가로방향으로 반복하여 표시 repeat-y 세로방향으로 반복하여 표시

 

 

예) body{background-image:url("images/sample.jpg);

background-attachment:fixed           sample.jpg 파일을 배경이미지로 표시하고 화면에 상관없이 크기를 고정시키도록 함

 

 

4. 레이어 속성

 

웹페이지 내에서 특정 영역을 좌표로 설정하여 레이어를 제작하는데 필요한 속성

 

속성	값
Top	왼쪽 상단의 위쪽 좌표를 지정
Left	왼쪽 상단의 왼쪽 좌표를 지정
Height	왼쪽 상단 위쪽 좌표를 기준으로 높이 설정
Width	왼쪽 상단 왼쪽 좌표를 기준으로 너비 설정

 

 

5. 포지션 속성

 

레이어의 위치를 화면에 표시

 

 

값	속성
Absolute	절대좌표를 의미 - 브라우저의 위치를 기점으로 위치 계산, 레이아웃에 영향을 미치지 않음
Relative	상대좌표를 의미 - 마지막 내용을 기점으로 상대적 위치를 계산하며 레이아웃에 영향 미침
Fixed	Relative와 흡사하나 화면이 스크롤 되어도 움직이지 않음

 

 

6. overflow 속성

 

지정된 영역보다 내용이 많아 넘칠경우 처리 내용 제어

 

 

값	기능
Visible	정해진 영역보다 내용이 많아도 보여줌(기본값)
Hidden	정해진 영역보다 내용이 많으면 영역 바깥의 내용을 보여주지 않음
Scroll	정해진 영역 안의 내용이 많아지며 스크롤 표시

 

 

7. float 속성

 

페이지의 왼쪽 혹은 오른쪽에 해당 항목의 레이어가 뜨도록 설정

 

 

값	기능
Left	왼쪽 방향으로  레이어가 뜨도록 설정
Right	오른쪽 방향으로 레이어가 뜨도록 설정
None	눈에 띄지 않게 레이어 표시 (기본값)