반응형
CSS 파일을 HTML로 연결하는 방법은
두 가지 방법이 있는데
차례대로 알아보자면
<link rel="stylesheet" type="text/css" href="경로/CSS파일명.css">
<style type="text/css">
@import url("경로/CSS파일명.css");
</style>
여기서 경로는
css 파일이 위치한 폴더를 지정해주는 것으로
WebContent 안에 폴더 없이 css를 넣어놨다면
경로 없이 CSS파일명.css만 작성해주면 되고
WebContent 안에 css라는 폴더를 작성하고
그 안에 css 파일을 넣어놨다면
css/CSS파일명.css가 되는 것이다
마지막으로 두 방법 중에
주로 사용하는 방법은
<link rel=~
을 사용하는 것이 속도가 더 빠르기 때문에
실전에서도 대부분 link rel을
사용하는 것을 볼 수 있다
마지막으로 예제에 사용한 코드는 아래와 같다
<!DOCTYPE html>
<html>
<!-- css 가져오기 방법 1 -->
<link rel="stylesheet" type="text/css" href="css/NewFile.css">
<!-- css 가져오기 방법 2 -->
<style type="text/css">
@import url("css/NewFile.css");
</style>
<script type="text/javascript">
</script>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<input type="button" class="test" value="BUTTON" >
</body>
</html>반응형
'Language > HTML, JavaScript' 카테고리의 다른 글
| 자바스크립트 ~~ 를 이용한 정수 제외한 수 0으로 출력방법 (0) | 2020.07.05 |
|---|---|
| 특정 화면에만 CSS 스타일 변경방법 (0) | 2020.06.29 |
| 자바스크립트 값 JSON 형태로 만들기 및 파싱방법 정리 (0) | 2020.06.25 |
| 자바스크립트 현재 년월일시분초 요일 가져오는 방법 (0) | 2020.06.24 |
| 자바스크립트 올림 내림 반올림 자리수 반올림 방법 (0) | 2020.06.24 |
댓글