웹페이지를 외부와 연결해주는 열쇠, <link> 태그 완전정복
1. <link> 태그가 뭐예요?
HTML 문서만으로는 디자인도 없고, 아이콘도 없고, 웹사이트가 딱딱하게 느껴질 수 있어요. 이럴 때 <link> 태그를 사용하면 외부의 리소스—예를 들어 CSS, 파비콘(favicon), 글꼴 등—를 불러올 수 있어요.
이 태그는 <head> 내부에 위치하며, 웹페이지가 로드될 때 필요한 외부 리소스를 브라우저에게 알려주는 역할을 해요. 즉, 스타일과 정체성을 입히는 출발점이라 할 수 있어요. 대부분의 웹사이트는 하나 이상의 <link> 태그를 포함하고 있으며, 이는 페이지가 전문적인 느낌을 주는 데 크게 기여합니다.
2. 기본 구조와 스타일 연결 예시
아래는 외부 스타일시트를 불러오는 가장 기본적인 예시입니다. rel 속성은 리소스의 관계를, href는 실제 파일 경로를 나타내요. type 속성은 생략 가능하지만 명시적으로 작성할 수도 있어요.
<link rel="stylesheet" href="style.css">Tip 💡
파일 경로가 잘못되면 CSS 적용이 되지 않아요! 내부 CSS보다 외부 CSS는 디버깅 시 경로 확인이 특히 중요합니다.
3. 파비콘(favicon)도 <link>로 연결돼요
브라우저 탭에 작은 아이콘 보신 적 있죠? 그게 바로 파비콘입니다. 이것도 <link> 태그로 연결합니다. 사용자가 탭을 여러 개 열어두었을 때 구분하기 쉽게 도와줘요.
확장자는 .ico 외에도 .png, .svg를 사용할 수 있으며, 고해상도 아이콘을 위해 sizes 속성을 함께 쓰는 경우도 많습니다.
<link rel="icon" href="favicon.ico" type="image/x-icon">렌더링 결과:
웹브라우저의 탭 좌측에 해당 아이콘이 표시됨.
4. 글꼴까지 불러오는 <link>
구글 폰트나 웹폰트를 쓸 때도 <link>를 사용해요. 아래는 Noto Sans KR이라는 한글 폰트를 불러오는 예입니다. 구글 폰트는 다양한 언어를 지원하고, 브라우저 캐싱을 잘 활용해 성능도 좋아요.
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">이렇게 연결된 폰트는 CSS에서 다음과 같이 사용할 수 있어요:
body {
font-family: 'Noto Sans KR', sans-serif;
}추가 팁 💡
웹폰트를 너무 많이 불러오면 페이지 속도가 느려질 수 있으니 꼭 필요한 것만 선택하세요. 대체 폰트를 지정해두는 것도 좋습니다.
5. 정리표 – 자주 쓰이는 <link> 태그 활용
| 용도 | 예시 코드 | 기능 설명 |
|---|---|---|
| 스타일시트 | <link rel=”stylesheet” href=”style.css”> | 외부 CSS 파일 연결 |
| 파비콘 | <link rel=”icon” href=”favicon.ico”> | 브라우저 탭 아이콘 설정 |
| 웹 폰트 | <link href=”https://fonts.googleapis.com/…” rel=”stylesheet”> | 웹폰트 로딩 및 적용 |
6. 마무리하며
<link> 태그는 비록 눈에 보이지 않지만, 웹페이지의 인상을 결정짓는 중요한 요소예요. 제대로 설정하면 가독성 좋고, 인상 깊은 사이트가 완성됩니다.
특히 외부 CSS와 파비콘, 웹폰트 등은 사용자 경험과 직결되니, 각 태그의 역할을 정확히 이해하고 실전에 활용해보세요. 페이지의 첫인상은 디자인에서 시작되고, 디자인의 출발점은 바로 이 <link> 태그라는 점을 기억해두세요.