코드잇 학습일기 챌린지가 끝났다. 동기부여도 되고 나름 재미있다고 생각했는데, 새로운 공지가 올라오지 않은 것을 보니 5월에는 챌린지를 진행하지 않는 것 같다. 그래도 뭐, 그거랑은 상관없이 앞으로도 계속 블로그에 공부한 내용을 정리해서 올릴 예정이다.
오늘은 다른 코드를 불러올 때 사용하는 링크(link) 태그와 스크립트(script) 태그에 대해서 소개하려고 한다.
외부에서 파일을 불러올 때는 <link>
<link> 태그는 외부에서 파일을 불러올 때 사용하는 태그이며, <head> 태그 안에서 사용한다. rel 속성에는 불러오는 파일이 어떤 종류인지 적고, href 속성에는 (현재 폴더를 기준으로) 파일의 경로를 적는다. css 파일의 경우 rel 속성값으로 stylesheet 라고 쓰면 된다.
<head>
<link rel="stylesheet" href="style.css(스타일시트 경로)">
</head>
구글 폰트를 적용할 때에도 link 태그를 사용한다.
파비콘을 지정할 때에도 link 태그를 사용한다. favicon.ico 라는 파일을 서버에 업로드 한 후에 해당 경로를 지정해주면 된다. rel 속성에는 icon 이라고 쓴다.
<head>
<link rel="icon" href="favicon.ico">
</head>
html에서 자바스크립트를 사용할 때는 <script>
요즘 웹사이트를 프로그램처럼 사용할 수 있는 이유는 자바스크립트라는 언어가 있기 때문이다. html에서 자바스크립트를 쓰는 방법에 대해서 알아보자.
<body>
<script>
console.log('안녕 친구하지 않을래?')
</script>
</body>
<script> 태그는 <link> 태그와는 달리 <body> 태그 안에 넣어서 사용한다. <script> 태그 안에 코드를 넣으면 자바스크립트를 실행할 수 있다. 자바스크립트도 CSS 처럼 파일로 불러올 수 있는데, 그 방법은 아래와 같다.
<body>
<script src="script.js(파일경로)">
</scrpt>
</body>
<script> 태그는 반드시 종료 태그인 </script>와 함께 사용해야 하니 이것도 함께 알아두도록 한다.
'퍼블리싱 & 프론트엔드 > html & CSS' 카테고리의 다른 글
| vs code 에서 html 한 번에 입력하기 - html 필수코드 자동완성 (0) | 2023.07.25 |
|---|---|
| 정보와 의미를 담고 있는 html 태그들(meta, link, title, 시맨틱 태그) (0) | 2023.05.03 |
| 코드잇 학습일기 Day17. 폼 태그 속성, 인풋 태그 종류와 속성 (0) | 2023.04.25 |
| 코드잇 학습일기 Day.16 폼(Form) - 인풋(Input), 라벨(Label), 버튼(Button) (0) | 2023.04.24 |
| 코드잇 학습일기 Day15. 아이프레임(iframe) (0) | 2023.04.22 |
댓글