웹/HTML-CSS-자바스크립트
css, js 파일 HTML에 적용하기 (상세설명 + css 사용법 간략 설명)
공부가싫다가도좋아
2023. 3. 12. 00:58
반응형
1. 파일 구조
2. css와 js파일 html파일에 추가하기
- css 파일 추가하기
1) <head></head> 즉 헤드태그 사이에 아래 link태그를 삽입해 줍니다.
2) href에는 css파일이 있는 경로를 넣어주면 됩니다.
<link rel="stylesheet" href="./style.css">
- js 파일 추가하기
1) <body></body>하단 즉, body태그 사이의 제일 하단에 아래 <script>태그 삽입
2) src에는 현재 js파일이 있는 경로를 넣어줍니다.
<script src="script.js"></script>
- 작성된 예시 코드 보기
파일 경로 : ./index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- css 파일 추가 -->
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div id="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
<!-- js 파일 추가 -->
<script src="script.js"></script>
</body>
</html>3. css 파일 + 스타일 설명
파일 경로 : ./style.css
#container{ /* id 가 container인 태그 스타일 설정*/
width: 500px; /*너비:500px*/
height: 500px; /*높이:500px*/
/*테두리 두께1px, 테두리 타입: 직선, 테두리 색깔: 회색*/
border: 1px solid gray;
margin: auto; /*margin값 자동*/
}
.box{
width: 100px;
height: 100px;
text-align: center; /*텍스트 가운데 정렬*/
color: white; /*텍스트 색깔: 하얀색*/
font-size: 20px; /*텍스트 사이즈: 20px, 기본값은 16px*/
border: 3px solid black;
/*
margin-top: 0px
margin-left: auto
margin-bottom: 10px
margin-right: auto
즉, 가로 중앙정렬 및
아래 요소와 10px간격의 margin값 설정
*/
margin: 0 auto 10px auto;
}
.box1{
background-color: blue; /*배경색 :파란색*/
}
.box2{
background-color: red;
}
.box3{
background-color: green;
}
4. js 파일 + 이벤트 추가
// box1변수에 클래스 이름이 box1인 요소 담아주기
// 상세 설명: #container > .box1이란?
// 아이디 값이 container이라는 요소의 자식 요소 중 클래스 이름이 box1인 요소 담아주기
const box1 = document.querySelector("#container > .box1");
const box2 = document.querySelector("#container > .box2");
const box3 = document.querySelector("#container > .box3");
// lst에 box1, box2, box3 노드와 이름 담기
const lst = [
[box1, "box1"],
[box2, "box2"],
[box3, "box3"],
];
// 3개가 있으므로 반복문 3개를 돌려 각 노드에
// 클릭 이벤트 추가해주기.
for (let i = 0; i < 3; i++) {
lst[i][0].addEventListener("click", () => {
alert(`나는 ${lst[i][1]}이다!!!`);
});
}
위와 같은 코드를 작성하면 박스를 클릭했을시 알림창이 뜬다. (아래 사진 참고하세요)
5. 완성시 화면
반응형