HTML 수업

웹의 신체

HTML 수업 웹의 신체

링크

요약(Summary)

문서에서 다른 문서로 이동할 수 있는 수단을 의미한다.

문법(Syntax)

<a href="URL" title="설명" target="문서가 로드될 대상">링크이름</a>
  • href : 링크이름과 연결되어 있는 리소스(resource)의 주소
  • title : 연결되어 있는 리소스에 대한 설명, 롤오버 했을 때 툴팁으로 표시된다.
  • target : 문서가 로드될 대상으로 아래와 같은 것들이 있다.
    • _self : 현재의 문서가 로드된 프래임, 현재 문서 사라짐
    • _blank : 새로운 창(탭)을 띄우고 거기에 문서를 로드
    • _parent : 현재 문서가 frame나 iframe에 로드된 경우 현재 문서를 로드한 프래임에 문서로를 로드
    • 프래임의 이름

설명(Description)

하이퍼텍스트란 문서에서 다른 문서로 쉽게 이동할 수 있도록 연결되어 있는 문서시스템을 의미하는데, 이 연결성을 제공하는 것을 링크라고 한다.

  • 문서에서 문서로 이동하는 수단
  • 태그명 a(anchor)을 사용함
  • href에 #을 사용하면 같은 문서 내에서도 특정한 위치로 이동이 가능
  • target을 지정해서 문서가 로드될 위치를 지정할 수 있다.

예제(Example)

example1. 아래 예제는 여러가지 형태의 링크를 보여준다. (fiddle, github, ?)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <p>
            <a href="http://opentutorials.org/course/1">생활코딩</a> : 생활코딩 홈페이지로 이동한다.
        </p>
        <p>
            <a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a> : 새창에서 생활코딩 홈페이지를 연다.
        </p>   
        <p>
            <a href="http://opentutorials.org" target="_self">생활코딩</a> : 현재 프래임에서 생활코딩 홈페이지를 연다.
        </p>
        <p>
            <a href="http://opentutorials.org" title="생활코딩 홈페이지">생활코딩</a> : 링크에 부가 설명을 추가한다. 링크에 툴팁을 표시한다.
        </p>
        <p>
            <a href="http://opentutorials.org/course/11/10#reference" title="생활코딩 html이란 무엇인가 참조">HTML 소개 참조</a> : 생활코딩의 HTML소개 페이지 중 참조 부분으로 문서를 이동한다
        </p>
    </body>
</html>

example2. 아래 예제는 링크에 연결된 문서를 아이프래임으로 로드한다. (jsfiddle, github ,?)

<!DOCTYPE html>
<html>
    <body>
        <iframe name="sample" src="http://w3c.org/" width="100%" height="300"></iframe>
        <a href="http://opentutorials.org/" target="sample">아이프래임</a>
    </body>
</html>

참고

댓글

댓글 본문
작성자
비밀번호
  1. NAMO
    감사합니다!
  2. JustStudy
    고맙습니다
  3. 김명수
    정말 너무감사드려요 어떻게 이걸 무료로 제공하시는지.... 감사합니다
  4. 홍은표
    iframe에 name을 넣으면 강좌대로 잘 되는데
    id를 넣으면 그냥 새 창으로 떠버리네요
    이게 혹시 html 버전별로 차이가 있는건가요?
  5. 유종수
    _blank 와 title 이 정말 재미있습니다.
  6. HJHx3J
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>

    이걸 추가해주면
    글자가 안깨집니다

    jei님
  7. yeonghun
    저도 이게 궁금합니다! 동영상에 나온대로 name을 id로 바꿔서 해보면 아이프레임에서 안열리고 새창에서 열립니다! 신기하네요
    대화보기
    • 보현
      영상 감사합니다~~ iframe이 자주 쓰이는 곳이있나요?? 본적이 없는거 같아서 ㅠㅠ
    • pupack
      감사합니다 ㅜㅜ 해결됐어요
      대화보기
      • juok09
        메모장 사용하시나요? 에디트 플러스 사용하시나요?? 문서 저장하실 때 저장버튼 옆에 인코딩을 UTF-8로 바꿔보시길 에디트플러스는 UTF-8 BOM
        대화보기
        • 예제를 따라하는데
          '아이프레임' 이라고 안나오고
          '�꾩씠�꾨옒��'같이 깨져서 나오는데 글꼴이 없는건가요?
          해결방안 있으면 알고싶습니다.
        • <!DOCTYPE html>
          <html>
          <body>
          <iframe id="sample" src="http://w3c.org/" width="100%" height="300"></iframe>
          <a href="http://opentutorials.org/" target="sample">아이프래임</a>
          </body>
          </html>

          동영상에서 나온대로 써보니 아이프레임 내에서 로드되지 않고, 새탭이 열리면서 로드됩니다.
          그리고 동영상아래의 예제2 번에서는 id대신 name를 사용하였는데, 차이점이 있나요?
        • 제이크 리
          감사합니다 너무 잘들었어요~
        • 북경사자
          감사합니다~
        • 정윤호
          감사합니다
        • 개미
          좋은정보 감사합니다.
        • 어부바
          감사합니다.
        • YellowBall
          링크(3/3) 잘들었습니다. 2015/4/21
        • soccer
          사생활 보호 모드를 쓰시내요.
        • 야우
          <!DOCTYPE html>
          다음에 <meta charset="utf-8"> 이거 한번 써보세요
          아마 언어지원이 안되서 그럴꺼에요!!ㅋ utf-8쓰면 지원이 된답니당 ㅋㅋ 저도 잘 모르지만 댓글 달아욥
          대화보기
          • vifhwan
            저도 한글이 깨지네요;;
            대화보기
            • 땡글이
              웹 페이지로 열었을 때 한글이 깨지는 건 왜 그런거죠?ㅜㅜ
            • phpfacebook
              어제부터 틈틈히 들어와서 확인했는데 드디어 다시 되는군요!! 감사합니다!!
            • egoing
              약간의 문제가 있어서 수정했습니다. 다시 보시면 될꺼에요. :)
              대화보기
              • BTlink
                이번 수업은 동영상이 없나요? 영상이 않보이네요ㅠㅠ
              • 그렇군요.. 항상 답글 감사드리고 응원하고 있어요 ^^
                대화보기
                • egoing
                  그런 경우에도 명시적으로 해당 기능에 대한 값이 존재하는 것이라고 보시면 될 것 같습니다.
                  대화보기
                  • 질문 하나 드리겠습니다! _self 이 문법은 왜 존제하나요? 그냥 아무것도 쓰지 않았을 때랑 똑같지 않은가요?
                  • 초보왕
                    example2로 show in 크롬하면 아이프레임만뜨고 안에 w3c.og에 관련된 내용이 보이지않고 하얀색입니다
                    그런데 iframe 내용만 복사해서 example1에 body안에 넣으면 나옵니다 이거 왜이런것일가요?
                  • Bukzi
                    오픈윗 맞죠? 혹시 저장은 하셨나요 ㅎ.ㅎ
                    대화보기
                    • 카르테진
                      아랫분과 같은 질문인데요,
                      인터넷을 보니까 run-run configurations 하라고 해서
                      구글 크롬 세팅한 건 성공했는데
                      압타나에서 코딩 결과 보려고 할 때마다 일일이
                      run-run configurations-chrome click해야만 구글 크롬에서 볼 수 있더라고요.
                      더 간단한 방법은 없나요? 이거 번거로워서요;;;

                      동영상들 잘 보고 있습니다! 감사합니다^^
                    • impactcube
                      압타나에서 쇼인, 웹브라우져로 열기 해도 크롬에서 아무것도 보이지 않습니다. ㅜㅜ 어떻게 해야 하나요 ??
                    • 서현뿌뿌
                      감사합니다ㅎㅎㅎ
                    • alexmoon
                      #reference 를 인식을 못하네요 음..

                      example1.html에서 맨마지막 링크에 커서를 대면 연결된 주소가

                      http://opentutorials.org......nce

                      라고 밑에 뜨는데 정작 클릭을 하면

                      http://opentutorials.org....../10

                      으로 연결 되네요.

                      왜이럴까요?
                    • dropboxown
                      (iframe name="sample" src="http://www.daum.net/" width="100%" height="100")(/iframe)
                      a href="http://ok.org/" target="sample")wwowowwo(/a)



                      여기서 name 이랑 target 이거 뜻이 뭔가요???? 같이사용한거같은데.. sample 이란것을..



                      (iframe src="http://www.daum.net/" width="100%" height="100")(/iframe)
                      a href="http://ok.org/)wwowowwo(/a)


                      이렇게 해도 똑같더라구요.. 했을때랑 안했을때의 차이를 좀 알고싶습니다.

                      참고로 < 를 ( 이거로 바꿔적은건 이해바랍니다.
                    • egoing
                      지금은 중요한 내용이 아니니 일단 진행하시고요. 한글은 첨부하신 코드가 있으면 잘 나오는 게 맞습니다.
                      대화보기
                      • Haewon Lee
                        example2 소스를 압타나에 붙여넣기 하였더니, 에러가 2개 뜨네요. 에러내용은
                        1. "should insert missing 'title' element
                        2. should trim empty <iframe>
                        입니다.
                        압타나에서 뭔가 설정을 해야하는 건가요...?
                        저런 에러가 있어도 페이지가 정상적으로 로딩이 되긴되는데 한글이 깨져서 로딩되길래 <meta content="texxt/html; charset=UTF-8" http-equiv="Content-Type"> 이거 붙여넣었더니 정상적으로 실행되네요. 위 소스 없이 한글 안깨지게는 할 수 없나요ㅜ.ㅜ?
                      • egoing
                        name으로 변경했습니다. 감사합니다!
                        대화보기
                        • zxcv001
                          저도 id를 name으로 바꾸고 잘 적용되는데요~아이프레임이란 글자가 깨져서 나오네요~ㅜㅜ
                        • 샤핀
                          캬웃님 감사합니다.
                          덕분에 강의 처럼 동작하지 않길래 어리둥절했었는데, 말씀처럼 id를 name로 바꾸니까 동일하게 동작하네요.
                          이고잉님. (iframe 태그 강의) 강의 당시랑 지금 코드 문법이 조금 변경이 있었던 걸까요?
                          대화보기
                          • 큐빌
                            저도 아이프레임 안되길래 님 댓글보고 수정하니까 잘 되네요~
                            대화보기
                            • 환글
                              좋은 강의 고맙습니다.
                            • egoing
                              이런 문제는 쓰고 계신 컴퓨터와 프로그래밍의 문제라서 제가 도움을 드리기가 어렵네요. ㅠㅠ
                              대화보기
                              • 레레
                                aptana studio에서 show in 클릭해서, 폴더보기(windows exporler)까지는 되는데, 연결프로그램 구글 크롬을 선택하려고 파일이름에 마우스 오른쪽 버튼을 클릭하기만 하면 window 탐색기 작동이 중지됩니다.ㅠ 제 노트북이 이프로그램을 감당할만큼 메모리가 부족해서 그런건가요? 구글검색에 따라서 msconfig에서 서비스부분이랑 시작프로그램 대부분 해지했는데도 증상은 같습니다. cmd에서 볼륨섹터에 이상이 있는지 검색했는데 클린하다고 나오네요, 이대로 aptana는 실제로 열어보지 않고 그냥 구경하는 용으로 써야되는걸까요, ㅠㅠ
                              • SwordFish
                                저는 name, id 둘 다 잘되네요! 맥os, 압타나에서 진행했습니다
                                대화보기
                                • 터틀
                                  iframe src="" name=""인거같은데 id가아니라
                                • andy
                                  thank you for the good lecture.
                                • 최창원
                                  쭈니님~
                                  preparence - general - workspace - text file encoding을 utf-8인지 확인바래요 ㅎ

                                  윈도우에서 무언가를 작성할때 보통은 utf-8 인코딩을 따르지 않는 거라고 알고 있습니다.
                                  대신 ms949 라는 인코딩이 사용되죠. 음.
                                • 용쭈니주니
                                  한글깨지길래
                                  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
                                  이거 뺏더니 다 잘되요. 왜죠 ㅋ 크롬인데
                                • 모래
                                  압타나에서 웹으로보기를 하면 웹에서 아무런 내용도 보이지 않습니다.
                                  크롬이든, 인터넷 익스플로러든 아무 내용도 뜨지 않는데...
                                  비쥬얼 스튜디오에서는 잘보이거든요.
                                  왜그런걸까요?
                                버전 관리
                                egoing
                                현재 버전
                                선택 버전
                                graphittie 자세히 보기