Ruby Coin

Rails 와 프론트 엔드 기술을 이용해 흥미 위주의 빠른 웹 개발 방법론

코스 전체목록

닫기

a

정의

a요소는 텍스트에 링크를 설정합니다.

 

속성

  • href : 링크 주소를 지정합니다.
  • target : 링크를 어떤 프레임에 열것인지를 결정합니다.
    • _blank : 새창에 엽니다.
    • _parent : 부모창에 엽니다.
    • _self : 자신의 창에 엽니다.
    • _top : 화면이 여러 프레임으로 이루어져있는 경우 모든 프레임을 지우고 전체 화면에 엽니다.
    • [name] : 지정된 이름에 링크를 엽니다.

설명

  • a 요소는 문단, 목록, 테이블뿐만 아니라 섹션 전체를 감쌀 수도 있습니다.
  • a 요소안에 버튼이나 링크등 인터렉티브한 요소가 포함되어 있으면 안됩니다.

 

링크의 상태

아래 상태들은 순서대로 정의 해야 의도한 대로 스타일을 적용할 수 있습니다. 만약 active를 hover보다 먼저 정의 했다면 hover가 active를 오버라이드 하여 active상태를 볼 수가 없게 됩니다.

  • link : 기본적인 링크 상태로 아직 방문한적이 없거나 아무런 행동도 하기전인 상태를 말합니다.
  • visited : 방문한 적이 있는 링크의 상태를 말합니다.
  • hover : 마우스 커서가 링크위에 올라가 있는 상태를 말합니다.
  • focus : 링크에 키보드등을 이용해서 포커스가 위치해있는 상태를 말합니다.
  • active : 마우스를 눌렀다가 놓는 동안의 상태를 말합니다.

예제

기본적으로 다음과 같이 사용할 수 있습니다.

 

 

 

 

 

 

 

댓글

오류나 오타 신고 환영합니다. ^^;;
(도와주세요!)

댓글 본문
  1. 검정고무신
    예제 부탁드려요 plz...
  2. 안제경
    예제 좀 고쳐주세요
  3. 박진찬
    예제가 오류로 안보여요ㅠㅠ 수정해주세요
  4. 분홍신
    리체님 감사합니다~~ 최고!
  5. ppwater
    거의 모든 예제에
    404
    That page doesn't exist. 라고 뜨네요. 고쳐주시면 감사하겠습니다.
    그리고 HTML 잘 정리해주셔서 감사합니다!
  6. Inns
    예제에 오류가 있어요. 혹시 고쳐주실 수 있을까요?
  7. 중독된수퇘지
    맥북에서 네이버웨일이란 웹브라우저를 사용하는데 예제가 안뜨는 이유가 뭘까요?
  8. mike
    예제항목에서 '404 That page doesn't exist.' 메시지가 뜨네요
  9. キム ドンミン
    예제 부분에 오류가 있는것 같은데요...
    수정 부탁드려도 될까요???^^
  10. dragontail
    예제가 오류가있네요ㅜㅠ
  11. Kyunghyun Frank Kim
    예제 에러 수정 부탁드립니다.
  12. 민용남
    예제 오류네여
  13. ㅇㅇ
    a태그는 anchor 입니다
  14. ddoguglee
    404에러라네요
  15. gentleman
    예제가 안나오고 있어요.
  16. 쑤야니
    예제가 안나와용
  17. 나리나리비나리
    예제가 안 나옵니다ㅠㅠ
  18. 시골개발자
    정말감사합니다.
  19. solteee23
    anchor 예요~
    대화보기
    • 빈이
      a태그 원 영어단어가 뭔가요??^^::
    • 푸른하늘
      1
    • 바람과 나무
      감사합니다.
    • neverever
      정말 감사합니다..정리가 잘되서 이해가 쉽네요
      출처 써서 퍼갑니다
    • 옐리젤리
      title 속성도 포함해주세요^^
    • 알파고
      감사합니다.
    • 지구촌
      아주 좋습니다.
    • 이장원
      항상 감사합니다.
    • 아이드롭
      세상에 천사이신가....
    • tulip
      많이 도움이 될것 같습니다 너무 잘 정리해 주셔서 감사합니다 ^^
    • 쿠쿠다스
      헐..... 이제 아무것도 모른 생초보로, 열씸히 공부하는 사람인데
      정말 잘 정리해주신걸보고 놀랐고,
      아직도 가야할 길이 어마무쌍하다는것을 알고 또 한번 놀랐습니다 ㄷㄷ;;
      엄청 고생하셨을거같네요
      감사합니다
    • 이미래
      class는 태그에다 이름을 부여해주는 역할을 해요. 보편적으로 div에 이름을 많이 붙여요. 이름은 붙이는 이유는 style에서 그 div에 명령을 하기위해서 붙이는 거에요. 예를 들어서 감싸는 div에 이름을 wrap이라 주고 안에 든 div 이름을 box라고 지으면 head안에 style에서 .wrap{background:Red;}라고 하고 .box{background:green;} 이라고 하면
      wrap은 배경색이 빨강으로, box는 배경색이 초록으로 나타나죠.
    • 김동환
      감사합니다 ㅎ
    • 이거보고 많이 공부가 되었습니다 ^^ 이고잉님 쉅을 듣고 내가 알고있는 태그사항을 점검하고 싶었는데 마침 이렇게 정렬표가 있어서 큰도움이 되었어요 감사해요!
    • applekim
      예제->html->보고싶으예제 순으로 클릭하세요.^^
      대화보기
      • 송지애
        진짜 최고입니다!! 감사합니다
      • 오상민
        감사합니다.
      • 홍길동
        class 는 각 엘리먼트 요소에 이름을 부과하여 각각에 css속성을 적용하기 위한 html작업입니다.
        대화보기
        • phpfacebook
          예제가 안나옵니다 ㅇ.ㅇ
        • 양미연
          정말 대단하세요~ 많이 배우고 자주 도움받겠습니다~~ 감사드려요
        • 학생
          class 요소 가 무엇에쓰고 어떤 뜻인지 알수있을까요....

          다른 태그들 보면 class라는게 자주 껴있어서 궁금해서 여쭤봅니다 ㅠㅜㅠ
        • jwbae
          _parent

          부모창이 뭔가요?

          부모창과 자신의 창은 어떻게 구분하죠?
        • 리체:leezche
          고맙습니다. ^^
          대화보기
          • 리체:leezche
            고맙습니다. 저두 힘이 되네요... ^^
            대화보기
            • 스페샬홍
              좋은정보 감사합니다~
            • 누나
              대박이네요
              너무 멋져요..
              이제 막 html5 배우는 초보인데.
              좋은정보 마니 얻으러 올께용 >ㅁ<
            • 리체
              고맙습니다.. 수정되었습니다. ^^
              대화보기
              • minkyu.shim@gmail.com
                오타 신고요~
                active : 마우스를 눌렀다가 놓는 "당안"의 상태
              버전 관리
              리체
              현재 버전
              선택 버전
              graphittie 자세히 보기