HOWTO: FrontPage 2003에서 CSS 스타일시트를 사용하여 사용자 지정 하이퍼링크 만들기

기술 자료 번역 기술 자료 번역
기술 자료: 825450 - 이 문서가 적용되는 제품 보기.
이 문서의 Microsoft FrontPage 2002 버전에 대한 내용은 287706을 참조하십시오.
모두 확대 | 모두 축소

이 페이지에서

요약

이 문서에서는 Microsoft Office FrontPage 2003에서 CSS 스타일시트를 사용하여 사용자 지정 하이퍼링크를 만드는 방법을 설명합니다. 이 문서에는 CSS 스타일시트 기능을 사용하여 사용자 지정 하이퍼링크를 만드는 방법을 보여 주는 예제가 포함되어 있습니다.

참고 이 문서에서 사용하는 CSS 스타일시트 기능은 일부 웹 브라우저에서 지원되지 않을 수 있습니다. 자세한 내용은 FrontPage 도움말을 참조하십시오. 도움말을 보려면 도움말 메뉴의 Microsoft FrontPage 도움말을 누르고 검색 대상 상자에 CSS 스타일시트 호환성을 입력한 다음 Enter 키를 눌러서 나타나는 항목을 참조하십시오.

CSS 스타일시트를 사용하여 사용자 지정 하이퍼링크 만들기

다음 예제에서는 CSS 스타일시트 기능을 사용하여 사용자 지정 하이퍼링크를 만드는 방법을 보여 줍니다.

Microsoft는 모든 보증(상품, 특정 목적에 대한 적합성 및 비침해에 대한 묵시적인 보증을 포함하며 이에 제한되지 않음)을 배제하며 예를 보여주기 위한 목적으로만 이 프로그래밍 예제를 제공합니다. 본 문서의 내용은 프로시저를 작성하고 디버깅하는 데 사용되는 도구 및 여기서 설명하는 프로그래밍 언어에 익숙한 사용자를 대상으로 합니다. Microsoft 지원 엔지니어는 사용자에게 도움이 되도록 특정 프로시저에 대한 기능을 설명할 수 있지만 사용자의 특정 요구 사항에 맞도록 예제를 수정하여 추가 기능을 제공하거나 프로시저를 구성하지는 않습니다. 참고 이 문서의 예제를 직접 복사하여 FrontPage에 붙여넣을 경우 오류 메시지가 나타나거나 페이지가 제대로 표시되지 않을 수 있습니다. 꺾쇠 괄호(< 및 >)가 HTML 코드로 나타날 수 있습니다. 이 문제를 해결하려면 먼저 코드 예제를 메모장의 빈 문서에 붙여넣은 다음 메모장의 문서에서 FrontPage의 페이지로 복사합니다.

예제 1: 밑줄만 다른 색으로 표시되는 하이퍼링크 만들기

이 예제에서는 하이퍼링크의 텍스트가 문서의 텍스트와 동일한 색으로 표시되도록 서식을 지정합니다. 그러면 하이퍼링크의 밑줄만 다른 색으로 표시됩니다. 사용자 지정 하이퍼링크를 만들려면 다음 단계를 수행하십시오.
  1. FrontPage를 시작하고 비어 있는 새 페이지를 만듭니다.
  2. 보기 메뉴에서 페이지를 누른 다음 페이지의 맨 아래에 있는 코드를 누릅니다.
  3. 페이지의 <head></head> 영역에 다음 코드를 삽입합니다.
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { color: black; text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px }
    a:link    { border-bottom-color: blue }
    a:visited { border-bottom-color: purple }
    a:hover   { border-bottom-color: green }
    a:active  { border-bottom-color: red }
    </style>
    
  4. 페이지의 <body></body> 영역에 다음 코드를 삽입합니다.
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p>
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p>
    
  5. 파일 메뉴에서 저장을 누릅니다.
  6. 다른 이름으로 저장 대화 상자에서 페이지를 저장할 위치를 지정하고 파일 이름 상자에 Example1을 입력한 다음 저장을 누릅니다.
  7. 파일 메뉴에서 브라우저에서 미리 보기를 가리킨 다음 페이지를 미리 보는 데 사용할 웹 브라우저를 선택합니다.

예제 2: 호버 단추를 사용하는 하이퍼링크 만들기

이 예제에서는 단색 배경의 호버 스타일 단추를 사용하는 하이퍼링크를 만듭니다. 사용자 지정 하이퍼링크를 만들려면 다음 단계를 수행하십시오.
  1. FrontPage를 시작하고 비어 있는 새 페이지를 만듭니다.
  2. 보기 메뉴에서 페이지를 누른 다음 페이지의 맨 아래에 있는 코드를 누릅니다.
  3. 페이지의 <head></head> 영역에 다음 코드를 삽입합니다.
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { text-decoration: none; padding: 3px }
    a:link    { color: white; background-color: blue }
    a:visited { color: white; background-color: purple }
    a:hover   { color: white; background-color: green }
    a:active  { color: white; background-color: red }
    </style>
    
  4. 페이지의 <body></body> 영역에 다음 코드를 삽입합니다.
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. 파일 메뉴에서 저장을 누릅니다.
  6. 다른 이름으로 저장 대화 상자에서 페이지를 저장할 위치를 지정하고 파일 이름 상자에 Example2를 입력한 다음 저장을 누릅니다.
  7. 파일 메뉴에서 브라우저에서 미리 보기를 가리킨 다음 페이지를 미리 보는 데 사용할 웹 브라우저를 선택합니다.

예제 3: 윤곽선 단추를 사용하는 하이퍼링크 만들기

이 예제에서는 윤곽선이 있는 호버 스타일 단추를 사용하는 하이퍼링크를 만듭니다. 하이퍼링크 텍스트 주위에 색이 지정된 상자가 나타나 윤곽선 효과를 만듭니다. 사용자 지정 하이퍼링크를 만들려면 다음 단계를 수행하십시오.
  1. FrontPage를 시작하고 비어 있는 새 페이지를 만듭니다.
  2. 보기 메뉴에서 페이지를 누른 다음 페이지의 맨 아래에 있는 코드를 누릅니다.
  3. 페이지의 <head></head> 영역에 다음 코드를 삽입합니다.
    <style> 
    body      { color: black; background-color: white; font-family: arial } 
    a         { color: black; text-decoration: none; border-style: solid; border-width: 2px; padding: 2px } 
    a:link    { border-color: blue } 
    a:visited { border-color: purple } 
    a:hover   { border-color: green } 
    a:active  { border-color: red } 
    </style> 
  4. 페이지의 <body></body> 영역에 다음 코드를 삽입합니다.
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. 파일 메뉴에서 저장을 누릅니다.
  6. 다른 이름으로 저장 대화 상자에서 페이지를 저장할 위치를 지정하고 파일 이름 상자에 Example3을 입력한 다음 저장을 누릅니다.
  7. 파일 메뉴에서 브라우저에서 미리 보기를 가리킨 다음 페이지를 미리 보는 데 사용할 웹 브라우저를 선택합니다.

예제 4: 다른 텍스트 서식을 사용하는 하이퍼링크 만들기

이 예제에서는 하이퍼링크가 밑줄이 없는 기울임꼴 소문자 텍스트로 표시되도록 서식을 지정합니다. 하이퍼링크 위로 포인터를 이동하면 하이퍼링크의 텍스트가 대문자로 변환됩니다. 사용자 지정 하이퍼링크를 만들려면 다음 단계를 수행하십시오.
  1. FrontPage를 시작하고 비어 있는 새 페이지를 만듭니다.
  2. 보기 메뉴에서 페이지를 누른 다음 페이지의 맨 아래에 있는 코드를 누릅니다.
  3. 페이지의 <head></head> 영역에 다음 코드를 삽입합니다.
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { text-decoration: none; font-style: italic; text-transform: lowercase }
    a:link    { color: blue; font-weight: bold }
    a:visited { color: purple }
    a:hover   { color: green; text-transform: uppercase }
    a:active  { color: red  }
    </style>
    
  4. 페이지의 <body></body> 영역에 다음 코드를 삽입합니다.
    <p>Please see <a href="http://www.microsoft.com">http://WWW.microsoft.COM</a> for more.</p>
    <p>Please see <a href="http://www.msn.com">http://WWW.msn.COM</a> for more.</p>
    
  5. 파일 메뉴에서 저장을 누릅니다.
  6. 다른 이름으로 저장 대화 상자에서 페이지를 저장할 위치를 지정하고 파일 이름 상자에 Example4를 입력한 다음 저장을 누릅니다.
  7. 파일 메뉴에서 브라우저에서 미리 보기를 가리킨 다음 페이지를 미리 보는 데 사용할 웹 브라우저를 선택합니다.

참조

FrontPage 2003의 CSS 스타일시트에 대한 자세한 내용은 FrontPage 도움말을 참조하십시오. 도움말을 보려면 도움말 메뉴에서 Microsoft Office FrontPage 도움말을 누르십시오. 검색 대상 상자에 CSS 스타일시트를 입력한 다음 Enter 키를 눌러 나타나는 항목을 참조하십시오.

참조

자세한 내용은 Microsoft 기술 자료의 다음 문서를 참조하십시오.
196488 FP2000: CSS 스타일시트 정의
205996 HOWTO: FrontPage 2000에서 CSS 스타일시트 만들기
240972 HOWTO: FrontPage 2000에서 하이퍼링크의 밑줄 제거
222949 FrontPage 2000에서 DHTML 및 CSS 스타일시트를 사용하여 양식 단추에 대한 호버 효과 만들기




?Microsoft 제품 관련 기술 전문가들과 온라인으로 정보를 교환하시려면 Microsoft 뉴스 그룹에 참여하시기 바랍니다.

속성

기술 자료: 825450 - 마지막 검토: 2005년 10월 6일 목요일 - 수정: 2.0
본 문서의 정보는 다음의 제품에 적용됩니다.
  • Microsoft Office FrontPage 2003
키워드:?
kbhowto KB825450

피드백 보내기

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com