03. 링크 달기

프론트엔드/HTML

03. 링크 달기

짱구를왜말려? 2020. 9. 1. 17:31

SMALL

# What? 이게 뭔데?

a 태그 : 지정한 url로 이동시키고 싶을 때 사용

# How? 어떻게 쓰는데?

<!DOCTYPE html> <!-- 이 문서가 HTML5 문서라는 뜻 -->
<html lang="ko"> <!-- 웹 문서의 시작 -->
    <head> <!-- 웹 문서에 대한 정보를 담는 태그 -->
        <meta charset="UTF-8"> <!-- 문자 인코딩을 UTF-8로 하라는 뜻 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 초기엔 1배율로 페이지를 보여주라는 뜻 -->
        <title>Document</title> <!-- 문서 제목 -->
        <link rel="stylesheet" href="./style.css"> <!-- css를 연결하는 태그 -->
        <script src="./common.js"></script> <!-- js를 연결하는 태그 -->
    </head>
    <body>
        <!-- 현재 페이지를 해당 링크로 변경 -->
        <a href="https://naver.com">네이버로 이동</a>

        <!-- 새로운 페이지를 열고 그 페이지를 해당 링크로 변경 -->
        <a href="https://naver.com" target="_blank">네이버로 이동</a>
    </body>
</html>

* a 태그 옵션

1) href : 링크주소

2) target : _blank(새창을 열고 싶을 때)

* 예시 https://www.seoul.go.kr/main/index.jsp

서울특별시

서울특별시 메인, 핫이슈, 분야별정보, 서울은 지금, 소셜시장실, 주요서비스, 새소식, 이벤트 신청, 이달의 행사 및 축제, 생활정보 서비스를 제공

www.seoul.go.kr

# Practice 연습

실제 네이버, 다음으로 이동할 수 있는 링크 만들어보기(새창으로)

* 코드참고 : https://github.com/ShinHyungJune/publishing-course/tree/html-03-link

LIST