2021-03-25
자신의 사용하고 있는 디렉터리 및 외부 요소를 가져오고자 할 때 link 태그를 사용한다. 주로 외부에 저장되어 있는 css 스타일 시트(stylesheet)를 연결하고자 할때 사용한다. 구체적인 사용법을 알아보도록 하자.
- 리소스 css 파일 준비
우선적으로 스타일시트로 사용하고자 하는 css 파일을 만들어주어야 한다. 해당 파일은 어디에 만들어 두었든 크게 상관은 없지만 앞으로 계속해서 사용할 스타일시트 (css)파일이라면 한 곳에 잘 정리해서 두는 것이 좋다.
이후 생성된 파일에 아래와 같은 옵션을 부여해주었다. div태그 중심으로 넓이와 높이 배경색을 지정하였다.
@charset "UTF-8";
/* div 태그에 공통된 속성 부여 */
div{
width: 300px; /* 넓이 속성 */
height: 300px;/* 높이 속성 */
background: gray; /* 배경색 속성 */
}- css 파일 link로 불러오기
이제 준비된 파일을 다른 html 문서에서 불러와 스타일시트를 적용해 보도록 하자. 아래는 스타일시트를 적용할 html 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href ="/자신이 저장한 파일위치/Test.css" rel="stylesheet">
</head>
<body>
<div>--------This is Test--------</div>
</body>
</html>
여기서 봐야할 코드 <link href ="/자신이 저장한 파일 위치/Test.css" rel="stylesheet">이다. 여기에서의 href의 속성 값은 해당 css 스타일시트가 저장된 위치를 넣어주면 된다. 다음 rel은 속성은 불러온 파일을 사용할 목적 정도로 해석할 수 있으며, 우리는 stylesheet로 사용할 거기 때문에 stylesheet로 적어주면 된다. 결과를 확인해 보면 아래와 같다. 직접적인 스타일은 html내부에서 부여하지 않고 link로 불러오는 것만으로도 스타일 정상적으로 적용되는 것을 확인할 수 있다.
- 이외의 속성들
* seizes: 파비콘등을 지정할 때 사이즈를 조정할 목적으로 사용된다.
* type: 지정된 파일의 MIME 타입을 지정해줄 때 사용한다. ex) image/jpg
* media: 미디어 유형이나 해당 유형의 쿼리문을 지정해 줄 때 사용한다.