CSS 스타일시트 Expression Web 사용자 지정 하이퍼링크를 만드는 방법을

기술 자료 번역 기술 자료 번역
기술 자료: 928715 - 이 문서가 적용되는 제품 보기.
모두 확대 | 모두 축소

이 페이지에서

소개

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

추가 정보

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

이 다음은 문서의 텍스트와 동일한 색으로 있는 하이퍼링크의 텍스트 서식을 설정하는 예제입니다. 밑줄 하이퍼링크 중 서식만 다른 색으로 표시됩니다. 이러한 사용자 지정 하이퍼링크를 만들려면 다음과 같이 하십시오.
  1. Expression Web 시작하고 빈 페이지를 새로 만듭니다.
  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. 다른 이름으로 저장 대화 상자에서 파일을 저장할 위치를 지정하십시오.
  7. 파일 이름 상자에 Example1 을 입력한 다음 저장 을 클릭하십시오.
  8. 파일 메뉴에서 브라우저에서 미리 보기 를 가리킨 다음 페이지를 미리 보는 데 사용할 웹 브라우저를 선택하십시오.

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

이 예제에서는 단색 배경 지식이 호버 단추를 사용하는 하이퍼링크를 만듭니다. 이러한 사용자 지정 하이퍼링크를 만들려면 다음과 같이 하십시오.
  1. Expression Web 시작하고 빈 페이지를 새로 만듭니다.
  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. 다른 이름으로 저장 대화 상자에서 파일을 저장할 위치를 지정하십시오.
  7. 파일 이름 상자에 Example2 를 입력한 다음 저장 을 클릭하십시오.
  8. 파일 메뉴에서 브라우저에서 미리 보기 를 가리킨 다음 페이지를 미리 보는 데 사용할 웹 브라우저를 선택하십시오.

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

이 예제에서는 개요 호버 단추를 사용하는 하이퍼링크를 만듭니다. 이러한 하이퍼링크를 가리킬 때 하이퍼링크 텍스트 주위에 색이 지정된 상자가 나타납니다. 윤곽선 효과를 만듭니다. 이러한 사용자 지정 하이퍼링크를 만들려면 다음과 같이 하십시오.
  1. Expression Web 시작하고 빈 페이지를 새로 만듭니다.
  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. 다른 이름으로 저장 대화 상자에서 파일을 저장할 위치를 지정하십시오.
  7. 파일 이름 상자에 Example3 을 입력한 다음 저장 을 클릭하십시오.
  8. 파일 메뉴에서 브라우저에서 미리 보기 를 가리킨 다음 페이지를 미리 보는 데 사용할 웹 브라우저를 선택하십시오.

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

이 예제에서는 하이퍼링크가 밑줄이 없는, 기울임꼴, 소문자 텍스트를 사용할 형식을 지정합니다. 이러한 하이퍼링크를 가리킬 때 텍스트를 대문자 됩니다. 이러한 사용자 지정 하이퍼링크를 만들려면 다음과 같이 하십시오.
  1. Expression Web 시작하고 빈 페이지를 새로 만듭니다.
  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. 다른 이름으로 저장 대화 상자에서 파일을 저장할 위치를 지정하십시오.
  7. 파일 이름 상자에 Example4 를 입력한 다음 저장 을 클릭하십시오.
  8. 파일 메뉴에서 브라우저에서 미리 보기 를 가리킨 다음 페이지를 미리 보는 데 사용할 웹 브라우저를 선택하십시오.

참조

자세한 내용은 Microsoft 기술 자료에 있는 문서를 보려면 다음 문서 번호를 클릭하시기 바랍니다:
825450FrontPage 2003에서 CSS 스타일시트를 사용하여 사용자 지정 하이퍼링크를 만드는 방법
196488어떤 CSS 스타일시트가 있습니다?
222949DHTML 및 CSS의 FrontPage를 사용하여 양식 단추에 호버 효과를 만드는 방법

속성

기술 자료: 928715 - 마지막 검토: 2006년 12월 6일 수요일 - 수정: 1.0
본 문서의 정보는 다음의 제품에 적용됩니다.
  • Microsoft Expression Web
키워드:?
kbmt kbexpertiseinter kbhowto KB928715 KbMtko
기계 번역된 문서
중요: 본 문서는 전문 번역가가 번역한 것이 아니라 Microsoft 기계 번역 소프트웨어로 번역한 것입니다. Microsoft는 번역가가 번역한 문서 및 기계 번역된 문서를 모두 제공하므로 Microsoft 기술 자료에 있는 모든 문서를 한글로 접할 수 있습니다. 그러나 기계 번역 문서가 항상 완벽한 것은 아닙니다. 따라서 기계 번역 문서에는 마치 외국인이 한국어로 말할 때 실수를 하는 것처럼 어휘, 구문 또는 문법에 오류가 있을 수 있습니다. Microsoft는 내용상의 오역 또는 Microsoft 고객이 이러한 오역을 사용함으로써 발생하는 부 정확성, 오류 또는 손해에 대해 책임을 지지 않습니다. Microsoft는 이러한 문제를 해결하기 위해 기계 번역 소프트웨어를 자주 업데이트하고 있습니다.

피드백 보내기

 

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