링크 태그의 속성 - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 HTML5/CSS3
  • 링크 태그의 속성
    learn
    Practice
    learn
    05 링크 태그
    링크 태그의 속성

    이제까지 링크 태그가 무엇인지, 어떻게 구성되어 있는지 살펴보았습니다. 사용법에 대해 감을 잡으셨겠지만, 앞서 본 구성은 한글로 작성되어 있기 때문에 실제 코드로는 사용할 수 없습니다. 이번 강의에서는 <a> 태그의 속성에 어떤 구문을 사용해야 하는지 알아보고, 실제 실습까지 진행하겠습니다.


    <a>의 속성, href


    <a> 태그는 태그, 컨텐츠 이외에 href라는 속성을 함께 사용해야 올바르게 동작합니다. href는 Hypertext Reference의 약자로, <a>가 참조하는 웹 사이트 주소(경로)를 값으로 가집니다. 간단한 예시를 들면, "<a>는 https://ide.goorm.io라는 사이트를 연결하고 있다"는 정보를 담습니다.

    그러면 href는 어디에 입력해야 할까요? 앞서 링크 태그의 구성에서 속성은 링크 태그의 이름 바로 뒤에 한 칸 공백을 가진 뒤 작성한다고 설명했습니다. 즉, <a> 태그에서는 a 다음에 공백을 입력한 뒤 href와 웹 페이지 주소 및 경로를 입력합니다. 여기서 웹 페이지 주소 및 경로는 href의 값입니다.


    <a>의 속성, target


    target 속성은 링크를 클릭했을 때 해당 페이지를 어디에서 열지 정하는 속성입니다. 링크를 열 때 오른쪽 마우스 버튼으로 클릭하면 새 창에서 링크 열기와 새 탭에서 링크 열기 등 다양한 선택지를 발견할 수 있습니다. 이처럼 링크를 여는 장소는 새 탭 혹은 새 창이 될 수 있고, 보던 탭 혹은 보던 창이 될 수 있습니다.

    target 속성에서 사용할 수 있는 대표 값은 _self와 _blank입니다. _self는 현재 탭에서 링크를 열고, _blank는 새 탭 혹은 새 창(옛 버젼 브라우저의 경우)에서 링크를 엽니다. 태그 안에 속성으로 입력할 때 다음과 같이 작성합니다.

    • target="_self"
    • target="_blank"

    앞선 강의에서 태그가 여러 개의 속성을 갖는 경우 띄어쓰기로 구분한다고 설명했습니다. 위 코드를 살펴보면 href 속성에 이어 공백을 기준으로 target 속성이 추가된 것을 볼 수 있습니다.

    Practice

    오른쪽에 미리 작성된 실습 코드를 실행한 뒤, 링크를 클릭하여 링크 태그의 동작을 관찰해봅시다. 또한, 링크 태그의 href 속성 값과 컨텐츠를 수정하여 원하는 링크 태그를 생성해 봅시다. 그 다음, target 속성으로 "_self"와 target="_blank"를 추가하여 두 차이점을 비교해 봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!
    Registered Questions(0)