영국 척척석사 유학생 일기장👩🏻‍🎓

(HTML코딩일기) link, script, head, 시맨틱 태그 본문

코딩공부/HTML&CSS

(HTML코딩일기) link, script, head, 시맨틱 태그

life-of-nomad 2023. 9. 11. 10:04
728x90
반응형

1. link 태그

외부에 있는 것을 불러올 때 사용하는 태그입니다. 어떤 목적인지를 rel 속성에 적습니다. 위치는 href로 지정하면 됩니다. 주로 <head>태그 안에서 맨 마지막에 써 줍니다.

CSS 파일을 불러올 때는 res="stylesheet"라고 쓰면 됩니다.

<head>
...
  <link rel="stylesheet" href="style.css">
</head>

사이트 아이콘을 불러올 때는 rel="icon"라고 씁니다.

<head>
...
  <link rel="icon" href="favicon.ico">
</head>

 

2. <script> 태그

자바스크립트 파일을 불러올 때 사용하는 태그입니다. 파일의 위치는 src로 적어줍니다. 주로 <body>태그 안에서 맨 마지막에 써 줍니다. 이때 종료 태그인 </script>를 꼭 써주어야 합니다.

<body>
...
  <script src="like.js"></script>
</body>

3. <head> 태그

페이지에 대한 정보를 담고 있는 태그입니다. 주로 이 페이지에 대한 데이터를 담고 있는데 화면에 보여주기보다는 웹 브라우저가 읽어처 처리하는 용도입니다.

<head>
  <meta charset="utf-8"
  <title>코딩일기</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="tistory.ico">
</head>

4. 시맨틱 태그

<div>와 기능은 똑같지만 의미가 담겨있는 태그들을 시맨틱 태그라고 합니다. 사용법이 있는것은 아니고 작성하는 사람의 의도가 중요합니다. 시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEQ)나 접근성(Accessibility)를 높이는데 도움이 됩니다.

태그 이름 용도
<header> 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부
<main> 사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능
<footer> 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음
<article> 하나의 완성된, 독립적인 내용을 나타내는 영역
<section> 어떤 것의 일부분을 나타내는 영역
<figure> 이미지와 이미지 설명을 담고 있는 영역

 

728x90
반응형
저작자표시

'코딩공부 > HTML&CSS' 카테고리의 다른 글

(CSS코딩일기) Flexbox 플렉스박스  (0) 2023.09.21
(CSS코딩일기) position 포지셔닝  (0) 2023.09.18
(HTML코딩일기) form, label, input  (0) 2023.09.08
(HTML코딩일기) 유용한 인풋 태그 속성  (0) 2023.09.08
(HTML코딩일기) 여러 가지 인풋  (0) 2023.09.01
'코딩공부/HTML&CSS' Related Articles more