CSS3 - CSS 스타일 - 링크(link)스타일 설정하기 (18)

CSS3 - CSS 스타일 - 링크(link) 스타일 설정하기 (18)

오늘은 CSS3의 열여덟번째 내용으로 

링크(link) 스타일 

설정하는 방법에

 대해서 알아보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)

굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.

css 스타일 - 링크(link) 스타일

먼저 css에서 링크 스타일을 알기전 링크(link)란 사용자가 클릭하면 정해진 웹 페이지로 이동하는 수단을 말하며 이러한 수단을 css에서 링크에 스타일 효과를 줄 수 있는 방법을 말합니다.

링크의 스타일 효과는 아래와 같습니다.

사용법	설명
a:link	방문되지 않은 링크 스타일
a:visited	방문된 링크의 스타일
a:hover	마우스가 위에 있을 때의 스타일
a:active	마우스로 클릭되는 때의 스타일을 말합니다.

<링크 스타일 표>

추가로 위 링크 스타일은 링크가 어떤 상태이냐에 따라서 스타일을 다르게 하는 방법이며 링크 스타일을 설정할때는 반드시 지켜야 할 규칙이 있습니다.

<링크스타일 사용 규칙>

1. a:link - 해당 링크를 클릭 또는 방문하지 않은 초기 상태 링크를 초록색으로 지정 합니다.

2. a:visited - 해당 링크를 클릭 또는 방문하고 난 상태의 링크 색상을 하늘색으로 지정 합니다.

3. a:hover - 해당 링크에 마우스가 올라갔을시 링크 색상을 핑크색으로 지정 합니다.

4. a:active - 해당 링크를 마우스로 클릭시 일시적으로 링크 색상을 갈색으로 지정 합니다.

위 html 문서의 style 태그안에 a태그를 선택 후 위 표에 나와있는 스타일을 a:hover는 a:link와 a:visited 다음으로 위치시키고 a:active는 a:hover 다음으로 위치 시켰는데 위에 나와있는 것이 사용 규칙 입니다.

(잘 모르겠다 싶으신 분들은 그냥 위에 코드 그대로 써보시면 이해가 되실 겁니다.)

추가로 링크의 다른 스타일을 줄 수가 있는데 이러한 방법은 링크의 색상이 변경만 되는 것이 아니라 앞서 배운 font-size 속성도 추가해 텍스트의 크기가 변경 되도록 사용 하 실 수 있고 background 속성을 이용해 링크의 배경색상도 넣을 수 있으며 

이 두가지 속성 말고도 여러가지 속성이 적용해서 사용할 수 있는데 이러한 방법은 지금까지 포스팅한 속성 또는 앞으로 포스팅한 속성을 하나하나 적용해서 써서 응용 하시면 좋을 듯 싶습니다.

똑같이 스타일을 봐도 응용하는 사람에 따라서 전부 다르니 설명은 생략 하도록 하겠습니다.

이상 CSS3 - CSS 스타일 - 링크(link)스타일 설정하기 (18)에 관련된 포스팅을 마치도록 하겠습니다.