HTML [HTML] CSS 파일 불러오기

2024.08.09 00:56

졸리운_곰 조회 수:469

[HTML] CSS 파일 불러오기

 

CSS 파일 불러오기

 

html 안에 있는 <style> </style>에 CSS를 넣으면 CSS 코드를 넣을 수 있지만, html과 CSS가 섞여 나중에 구분하기 힘들 수가 있습니다. 그래서 html안에는 html만의 코드가 들어가고, link를 통해 CSS 만이 있는 파일을 불러와 봅시다. 간단한 CSS코드라면 <style>태그에 넣어도 상관이 없지만, 나중에 아주 복잡한 웹사이트를 만드려면 CSS를 <style>태그에 넣었을 때 코드가 매우 길어집니다.

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="파일 이름.css" rel="stylesheet" type="text/css" />
</head>
</html>

이런식으로 <head> </head> 안에 

1
<link href="파일 이름.css" rel="stylesheet" type="text/css" />

를 넣게 되면 그 파일에 있는 CSS 코드를 불러올 수 있게 됩니다. 파일이름.css부분은 자신의 파일 이름을 적어주세요. 이 코드는 CSS에 있는 파일을 html에 적용시킨다는 뜻의 코드입니다.

Visual Studio Code 와 같은 에디터를 사용하여 직접 코드를 짜봅시다.

코드를 배끼는 행동은 코딩을 제대로 배울 수 없게 됩니다. 무조건 직접 짜셔야 코딩 실력을 늘릴 수 있습니다. 아주 기초적인 내용이므로 외워주셔야 나중에 편하게 사용하실 수 있습니다. 코드들을 다 외우고 어떤 의미인지 다 파악하셨다면 코드를 배껴도 괜찮습니다. 이점 유의해주시면서 다음 강의로 넘어가보도록 하겠습니다!

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

[출처] https://opentutorials.org/module/4763/28470

 

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
126 [프론트앤드] 리액트(React) 간단 문법 정리 file 졸리운_곰 2025.11.19 549
125 [JavaScript] Algorithm | Fizz Buzz 졸리운_곰 2025.01.03 365
124 [Javascript] onload, ready file 졸리운_곰 2024.08.13 456
123 [HTML][JavaScript] jQuery .ready() vs .onload() 특징 및 차이 졸리운_곰 2024.05.23 442
122 [JavaScript] JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드 졸리운_곰 2024.05.18 402
121 [JavaScript] How to select all tag elements with JS 졸리운_곰 2024.05.18 11105
120 [JavaScript] 자바스크립트 javascript 정규식 replace html 제거 태그 제거 졸리운_곰 2024.05.18 615
119 [JavaScript] Checking if iframe contents are loaded? : iframe 로딩 완료 이벤트 확인 졸리운_곰 2024.05.18 533
118 [JavaScript] 자바스크립트 DIV 보이기, 숨기기(토글) 졸리운_곰 2024.05.16 501
117 [JavaScript] [JS] XPath로 element 찾기 file 졸리운_곰 2024.05.16 495
116 [JavaScript] Force-DOM-reflow-JS 졸리운_곰 2024.05.16 522
115 [JavaScript] Javascript XPath를 이용해서 Dom Element 가져오기 졸리운_곰 2024.05.15 496
114 [JavaScript] Introduction to using XPath in JavaScript 졸리운_곰 2024.05.15 504
113 [JavaScript] JavaScript :: 요소 가져오기 file 졸리운_곰 2024.05.15 579
112 [JS] 문자열의 위치 찾기 & 문자열 추출하기 file 졸리운_곰 2024.02.28 573
111 [JavaScript] lastIndexOf() : String에서 원하는 값의 마지막 위치(index) 찾기 졸리운_곰 2024.02.28 544
110 [Javascript] [Javascript] 자바스크립트에서 Class 사용하기-constructor, extends, file 졸리운_곰 2023.11.29 616
109 [Javascript] undefined와 null의 차이점이란 ? 졸리운_곰 2023.11.29 476
108 [JavaScript] [JS] CORS 정리 및 오류 해결 졸리운_곰 2023.05.09 454
107 [JavaScript] 자바스크립트 객체 배열에서 indexOf 사용방법 졸리운_곰 2023.01.26 480
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED