html

HTML - <link>태그

yun.seul 2023. 1. 17. 22:28
<link>태그란

 

 

<link> 요소는 현재 문서와 외부 리소스의 관계를 연결해 준다. 이 <link> 요소는 스타일 시트를 연결할 때 제일 많이 사용되어진다. 

 

 

 

 

<link> 사용법

 

<link>태그는 <head>와</head>사이에 넣는다. 기본 구조는 다음과 같다.

<link rel="stylesheet" type="text/css href="sample.css" />

 

 

 

1. rel : 현재문서와 연결문서의 관계를 표시한다

 

 

▶  rel의 속성값

  • stylesheet : 스타일시트로 연결할 때
  • alternate : 문서의 대안 버전으로 연결할 때 (프린트나 번역 사이트)
  • author : 저작자로 연결 할 때
  • help  : 도움말로 연결할 때
  • license : 문서의 저작권 정보로 연결할 때
  • search : 검색 도구로 연결할 때

 

 

 

 

2. type : 연결 문서의 MIME 유형

 

 

MIME란 Multipurpose Internet Mail Extensions의 줄임말로 원래 전자 메일 전송을 이한 인터넷 표준이었으나 현재는 웹에서 내용 유형(Content type)을 말할 때 자주 쓰인다.

 

 

MIME type은 대표적으로,

 

  • text/css : css파일
  • text/javascript : js파일
  • application/xml : xml파일

가 있다.

 

 

 

 

3. href : 연결할 곳의 주소

 

 

절대주소, 상대주소 모두 가능하다.

 

 

 

 

<link> 예시

 

/*css파일안에 mybuttons.css로 저장되어있음*/
.save {
    background-color: rgb(84, 84, 199);
    border: 1px solid #c6c6c6;
    border-radius: 8px;
    height: 35px;
    width: 120px;
    color: white;
    cursor: pointer;
}
button:hover {
    background-color: #c6c6c6;
}

 

<!-- html파일 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <link rel='stylesheet' type='text/css' href='/css/mybuttons.css'/>
</head>
<body>
    <button class="save" type ="button"> 다른문서 버튼</button>
</body>
</html>

위의 css파일을 들고와서 스타일시트로 연결시켜주었다. 연결할 곳의 주소로는 css폴더안에 mybuttons.css라고 저장되어있기 때문에 /css/mybuttons.css에 연결시켜 주었다. 이렇게 css파일을 연결시켜주었기 때문에 button태그에 class를 지정해주어 스타일시트를 쓸 수 있게 되었다.

 

한 파일안에 스타일시트와 html을 다 같이 넣어줄 수 있지만 나눠주는 이유는 스타일시트를 나눠 다른 html파일에서도 쓸 수 있기도 하고 스타일 영역과 본문 영역을 나누어 주어 가독성을 높일 수 있기 때문이다. 

 

결과화면은 다음과 같다.

 

 

Page Title