CSS 수업

HTML을 꾸며주는 아름다운 언어

CSS 수업 HTML을 꾸며주는 아름다운 언어

링크 꾸미기

 

링크의 상태

링크는 아래와 같이 4가지의 상태를 가지고 있고, 각 상태에 따라서 시각적으로 다른 모양을 가질 수 있다.

방문하지 않은 링크 a:link{}  
방문했던 링크 a:visited{}  
마우스를 오버한 링크 a:hover{} a:link과 a:visited 뒤에 와야 함
마우스를 누른 상태의 링크 a:active{} a:hover 뒤에 와야 함

예제

example1.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style>
			a:link {
				color: red;
			}/* unvisited link */
			a:visited {
				color: blue;
			}/* visited link */
			a:hover {
				color: green;
			}/* mouse over link */
			a:active {
				color: orange;
			} /* selected link */
		</style>
	</head>
	<body>
		<a href="http://opentutorials.org">오픈튜토리얼스</a>
	</body>
</html>

참고

댓글

댓글 본문
작성자
비밀번호
  1. 김종엽
    2016.08.24 완료!
  2. glad9090
    ^^
  3. Rhys Jung
    정말 꼼꼼한 부분까지 세밀하게 작업이 이뤄져야한다는 사실에 놀랍네요
    좋은강의 잘 봤습니다.
  4. 온달장군
    강좌 잘보고 갑니다. 좋은 하루 되세요.
  5. JustStudy
    고맙습니다
  6. 효니
    순서를 몰랐으면 나중에 헤맬뻔 했겠군요... 감사합니다!!
  7. Yong Jin Kim
    감사합니다 이고잉님~~^^
  8. 크레용샘
    이번에도 유익하게 잘 듣고 갑니다.
  9. 늘생릭코네
    듣고지나갑니다
  10. kush
    늘 감사히 잘보고있습니다!
    혹시 링크의 스타일에서 underline의 색깔이나 굵기를 세세하게 조절하는 방법도 있을까요?
    css는 담지 않는 컨텐츠인지 궁금합니다.
    혹시 더 세세한 옵션을 수정하려면 어떤 걸 다뤄야하는지 알려주시면 감사하겠습니다 :))
  11. YellowBall
    잘 들었습니다.
  12. 행인
    원하시는게 이게 맞는지 모르겠습니다만...

    <style>
    a { color:gray; text-decoration:none; }
    a:hover { text-decoration:underline; }

    a.mymail { color:red; }
    a.mymail:hover { font-weight:bold; }
    </style>

    <a href="mailto:test@naver.com">이메일</a>
    <a href="mailto:test@naver.com" class="mymail">이메일</a>
    대화보기
    • 수달
      이메일 링크 같은경우엔 a:link{ color: red} 처럼 색을 바꾸려면 어떤 명령어를 써야하나요?
    • 스마트
      강의 잘듣고 있는 1인입니다. ㅎㅎ
      감사합니다.
    • 이용주
      진짜 설명 최고다 ㅋㅋㅋ 우앙~
    • couaron
      /* 사이에 있는 내용 */ 은 주석이기 때문에 코드 작성 시 생략할 수 있습니다.
      대화보기
      • 유형찬
        감사합니다! 근데 웹 브라우저 종류에 따라 jsfiddle이 정상적으로 값이 적용되는 부분과 안되는 부분이 있네요. 크롬은 잘 먹히는데 익스플로어 11버전은 a:link{ color: red}가 안먹히네용. link빼고 visited, hover, active는 잘먹히는데...흠흠
      • 카페인중독
        설명을 너무 잘해주셔서 쏙쏙 들어와요 공부를 멈출수가 없네요^^ 항상 감사드립니다.
      • leeta
        궁금한게 있습니다!항상뒤에는
        /* mouse over link */
        이게 붙어 있어야 하나요?

        그리고 링크 꾸미기는 선택자와는 다르기 때문에 # 이런효과를 안넣어 줘도 되는것이죠?
      • egoing
        접속 URL을 https를 http로 바꿔주시겠어요?
        대화보기
        • LEEJA
          다른 동영상은 플레이가 잘 됬는데, 이 동영상만 안되네요..;-(
          저만 그런건가요??
        • huziya
          점점 이해가 되니 소스보는 재미가 생기네요^^
        • 빈누
          저도 css 경험이 약간은 있는데 순서가 있는건 처음 알았어요! LoVe & HAte라는 팁도 잘 받아갑니다. +_+ 생활코딩 넘 좋으네요<3
        • 창조경제
          창조경제 선두주자 이고잉님, 강의 너무 잘 보고 있어요.
        • nestgoer
          LoVe & HAte 로 외우곤 했지요.
        • 컴공남
          학교에서 웹프로그래밍을 배우고 있는 컴공과 학생인데 보면서 깜짝 놀랬습니다. 이렇게 잘 설명이 되어있다니 순서를 깜빡 할 수도 있는데 정말 괜찮네요b
        • 은비
          저는 보통 a{}, a:hover만 사용해서 순서가 있는건 몰랐네요..;;;;
          오래된 일이지만 저 네 가지를 모두 사용하던 때에 잘 실행이 안되던건 결국 순서때문이었군요 ㅎㅎ
          또 한가지 좋은 정보 배워갑니다~^^
        • 용12
          잘봤습니다ㅏ!~!
        • 김유진
          근데 키보드는 뭘 쓰시나요?
        • Harvey Kim
          순서 순서!!!
        • neO matpclub
          감사합니다.
        • Starmomo
          [강조] 순서대로 와야 작동을 한다. Link -> Visited -> Hover ->Active
        • 상범 김
          감사합니다 잘보고 있습니다.
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기