▒▒▒ [ 홈피 ] ▒▒▒

링크에 효과 주기

테이블 꾸미기

배경 그림 꾸미기

주소표시줄 아이콘

스크롤바 꾸미기

◈ 스타일시트를 이용한 하이퍼링크 꾸미기

우선 옆의 메뉴의 하이퍼링크가 된 글자에 마우스를 가져다 대면 글자의 색이 변하고 글자가 볼드체로 변하는 것을 볼 수 있을 것입니다. 이 강좌에서는 그 효과를 내는 것에 대하여 강좌를 진행하겠스니다.

※ 스타일 시트(Style sheet)란?

인터넷 문서의 가장 일반적인 형식은 HTML이지만, 문서를 자유롭게 편집하는 데에 많은 제약이 따른다. 이를 보완하기 위해 만들어진 것이 스타일 시트다. 스타일 시트의 문법과 형식은 W3C의 Cascading Style Sheet(CSS)로 표준화되어 있다.

넷스케이프의 커뮤니케이터4.0판, 마이크로소프트의 익스플로러3.x판에서부터 CSS을 지원함으로써 문서 제작에서 CSS의 자유로운 사용이 가능하게 되었다.

▶ 나모 웹에디터에서 하기

우선 나모 웹 에디터에서 하이퍼링크가 된 글자가 있는 HTML 문서를 [파일 -> 열기] 명령을 불러 드립니다.

그리고 [서식 -> 문서 스타일] 명령으로 문서 스타일 대화상자를 엽니다.

그러면 옆 그림과 같은 대화상자가 나타나는데 그 곳에서 + 모양의 아이콘을 눌러서 스타일시트를 새로 만듭니다.

+ 모양의 아이콘을 누르면 옆 그림과 같은 스타일 추가 대화상자가 나타납니다.

그 곳의 스타일 종료 항목에서 기타에 체크를 하시고 이름 콜롬보상자에서 :link를 선택하고 아래쪽에 '확인' 버튼을 누릅니다.

※ link : 웹 페이지 로딩시에 기본적으로 나타나는 설정
    hover : 하이퍼링크가 된 글자 위에 마우스가 올라가 있을 때 나타나는 설정
    active : 하이퍼링크가 된 글자를 마우스로 클릭 하는 순간 나타나는 설정
    visited : 이미 방문했던 웹 페이지 로딩시에 기본적으로 나타나는 설정

'확인' 버튼을 누르면 위 그림과 같은 스타일 대화상자가 나타납니다.

스타일 대화상자에서 꾸밈 항목에 '없음'을 선택합니다. (여기서 없음으로 선택하는 이유는 하이퍼링크가 된 글자에 밑줄을 없애기 위한 과정입니다.)

그리고 색깔 탭을 클릭해서 전경색에 알맞은 색을 선택하고 확인 버튼을 클릭 합니다.

'확인' 버튼을 누르면 문서 스타일 대화상자가 나타나는데 그 곳에서 + 모양의 아이콘을 클릭 하시면 다시 스타일 추가 대화상자가 나타납니다.

그곳에서 스타일 종료 항목에서 기타에 체크를 하시고 이름 콜롬보상자에서 :hover를 선택하고 아래쪽에 '확인' 버튼을 누릅니다.

그러면 위 그림과 같은 스타일 대화상자가 나타납니다. 그 스타일 대화상자에서 꾸밈 항목에 '없음'을 선택합니다.

그리고 폭 항목에 bold를 선택합니다. 그리고 색깔 탭을 클릭해서 전경색에 조금 전 link에서 설정한 색과 다른 색을 선택하고 확인 버튼을 클릭 합니다.

(여기서 bold를 선택하고 link에서 설정한 색과 다른 색을 선택하는 이유는 하이퍼링크가 된 글자에 마우스를 가져다 대면 글자의 색이 변하고 글자가 볼드체로 변하게 하기 위한 과정입니다.)

확인 버튼을 누르면 다시 문서 스타일 대화상자가 나타납니다. 그 곳에서 다시 + 모양의 아이콘을 클릭 하면 다시 스타일 추가 대화상자가 나타나면 스타일 종료 항목에 기타에 체크를 하시고 이름 콜롬보상자에서 :visited를 선택하고 아래쪽에 '확인' 버튼을 누릅니다.

'확인' 버튼을 누르면 스타일 대화상자가 나타납니다. 그 곳에서는 앞에서 link를 설정했을 때와 똑같이 설정을 하고 확인 버튼을 클릭 하시면 다시 문서 스타알 대화상자에서 확인 버튼을 클릭 하시면 끝입니다.

이제 HTML 문서를 저장시키고 웹브라우저에서 실행시켜보세요.

▶ 드림위버에서 하기

우선 이 강좌를 읽어보기 전에 나모 웹에디터에서 하는 방법을 읽어보시면 많은 도움이 될 것입니다.

드림위버에서 하이퍼링크가 된 글자가 있는 웹페이지를 [File -> Open] 명령을 불러 드립니다.

다시 [Window - CSS Styles] 명령으로 옆 그림과 같은 대화상자를 엽니다.

그 곳에서 책갈피 모양의 아이콘을 클릭 합니다.

그 아이콘을 클릭 하면 위 그림과 같은 대화상자가 나타납니다. 그 대화상자에서 Use CSS Selector를 선택하고 a:link를 선택하시고 OK 버튼을 클릭 합니다. (link,hover 등의 설명은 나모 웹에디터에서 하기를 참조하세요.)

OK 버튼을 클릭 하시면 위와 같은 대화상자가 나타납니다. 그곳에서 Decoration 항목에 none를 선택하시고 Color 항목에 알맞은 색을 선택하고 OK 버튼을 클릭 합니다.

OK 버튼을 클릭 하시면 또다시 New Style 대화상자가 나타납니다. 그 대화상자에서 Use CSS Selector를 선택하고 a:hover를 선택하시고 OK 버튼을 클릭 합니다.

OK 버튼을 클릭 하시면 위와 같은 대화상자가 나타납니다. 그곳에서 Weight 항목에는 bold를 선택하시고 Decoration 항목에 none를 선택하시고 Color 항목에 알맞은 색을 선택하고 OK 버튼을 클릭 합니다.

OK 버튼을 클릭 하시면 또다시 New Style 대화상자가 나타납니다. 그 대화상자에서 Use CSS Selector를 선택하고 a:visited를 선택하시고 OK 버튼을 클릭 합니다.

그리고 OK 버튼을 클릭 하면 나타나는 대화상자에서 전에 a:link를 설정했던 것과 같이 설정을 하고 OK 버튼을 클릭 합니다. 그러면 또다시 New Style 대화상자가 나타나는데 그 곳에서 OK 버튼을 클릭 하면 끝입니다.

이제 HTML 문서를 [File -> Save] 명령으로 저장시키고 웹브라우저에서 실행시켜보세요.

▶ HTML로 하기

우선 메모장에서 하이퍼링크가 된 글자가 있는 HTML 문서를 [파일 -> 열기] 명령을 불러 드립니다.

그리고 HTML 문서의 <HEAD>와 </HEAD> 사이에 아래의 소스를 삽입합니다.

<style type="text/css">

</style>

※ link, hover 등의 설명은 나모 웹에디터에서 하기를 참조하세요.

위의 소스를 삽입하였다면 수정을 하셔야 합니다. 수정을 할 부분은 color 부분입니다. 수정을 하려면 색상을 RGB 코드로 변환하여 넣어야 합니다.

※ RGB 코드란? RED-GREEN-BLUE 형식으로 색상을 조합한 것으로 16진수의 숫자로 표현되며 RRGGBB 형태로 표시됩니다.

예) RED = FF0000 , GREEN = 00FF00 , BLUE = 0000FF

RGB 코드 변환 프로그램은 CD-ROM 부록에 넣어두겠습니다.

이제 HTML 문서를 [파일 -> 저장] 명령으로 저장시키고 웹브라우저에서 실행시켜보세요.

TOP