현재 오프라인 상태입니다. 인터넷에 다시 연결하기를 기다리고 있습니다.

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

중요: 본 문서는 전문 번역가가 번역한 것이 아니라 Microsoft 기계 번역 소프트웨어로 번역한 것입니다. Microsoft는 번역가가 번역한 문서 및 기계 번역된 문서를 모두 제공하므로 Microsoft 기술 자료에 있는 모든 문서를 한글로 접할 수 있습니다. 그러나 기계 번역 문서가 항상 완벽한 것은 아닙니다. 따라서 기계 번역 문서에는 마치 외국인이 한국어로 말할 때 실수를 하는 것처럼 어휘, 구문 또는 문법에 오류가 있을 수 있습니다. Microsoft는 내용상의 오역 또는 Microsoft 고객이 이러한 오역을 사용함으로써 발생하는 부 정확성, 오류 또는 손해에 대해 책임을 지지 않습니다. Microsoft는 이러한 문제를 해결하기 위해 기계 번역 소프트웨어를 자주 업데이트하고 있습니다.

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를 사용하여 양식 단추에 호버 효과를 만드는 방법

경고: 이 문서는 자동으로 번역되었습니다.

속성

문서 ID: 928715 - 마지막 검토: 12/09/2015 08:24:44 - 수정: 1.0

Microsoft Expression Web

  • kbnosurvey kbarchive kbmt kbexpertiseinter kbhowto KB928715 KbMtko
피드백