[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 18회차 미션

6 * 3 = 18

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 18일차입니다!

오늘부터 6번째 커리큘럼, <HTML/요소 - 인라인 텍스트 & 수정>을 수강하기 시작했어요.

구체적으로 잘 몰랐던 HTML 요소나 속성에 대해 공부하면서,

나중에 어떤 걸 만들 때 도움이 되겠다는 생각을 하니 종종 즐겁습니다. 😊

 

 

오늘은 01~02. 인라인 텍스트 - A 태그에 관하여 공부했습니다.

A 태그는 하이퍼링크를 삽입할 때 주로 사용하는 태그인데, 이번 기회에 주요 속성과 그 쓰임새에 대하여 알아보았어요.

---

 

<a>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/a

 

◾ 현재 문서에서 외부로 링크를 "거는" 역할 ➡ a = anchor (닻)

◾ 하이퍼링크 설정, 외부로 내보내는 역할

 

◽ 속성 (1) download

: Boolean 속성, 이 태그의 컨텐츠를 클릭하면 다운로드가 될 것이라고 힌트를 주는 용도

 

◽ 속성 (2) href

: 생략 가능한 속성이나 생략하면 링크 기능 상실, 링크 경로(URL) 명시

 

◽ 속성 (3) rel

: 현재 문서와 링크 URL의 관계 설명

(ex) license, prev, next, ...

 

◽ 속성 (4) target

: 기본값 = "_self",

현재 탭에서 링크를 열고 싶으면 "_self"를,

다른 탭에서 링크를 열고 싶으면 "_blank"를 값으로 가지게 해야 함.

 

◽ 속성 (5) type:

링크 URL의 MIME 타입

(ex) text/html

 

<a 태그의 쓰임새>

◾ 외부 링크를 연결할 버튼을 만들 때

    : <a> 태그가 기본적으로 인라인 요소이기 때문에, display: block; 을 CSS 적용

◾ 같은 페이지 내에서 목차 이동: href 속성 값으로 '#' 사용

<ul>
    <li>
        <a href="#title1">제목1</a>
    </li>
    <li>
        <a href="#title2">제목2</a>
    </li>
</ul>

<h2 id="#title1">제목1</h2>
<h2 id="#title2">제목2</h2>

 

➡ 위와 같은 HTML 코드를 적용하면 목차 이동을 할 때 원래링크#title1 로 주소가 보임.

---

학습 내용 출처: https://heropy.blog/2019/05/26/html-elements/

강의 링크: https://bit.ly/3m0t8GM