웹은 일반적으로 HTML, CSS, JS 세가지 기술을 사용해서 만들 수 있다.
- HTML : 문서의 기본 틀을 만드는 도구(어떤 요소들이 들어갈 것인지)
- CSS : 요소의 색깔, 위치 등 기본 틀을 꾸며주는 도구
- JS : 기존에 정리되어 있는 HTML, CSS에 변화를 주는 도구
VSC 코드에서 .html 파일을 생성, ! 치고 엔터를 누르면 에밋(EMMET) 익스텐션에 의해 아래 소스가 자동완성된다.
<!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">
<title>Document</title>
</head>
<body>
</body>
</html>** 화면에 띄울 내용은 body 태그 내부에 CSS는 head 태그 안에 JS 코드는 body 태그 하단에 표기
간단한 문구를 웹페이지에 표시해보자
1. h1 태그를 사용해서 문구작성
<body>
<h1>할로~</h1>
</body>2. 작성한 문구를 빨간색으로 꾸미기
<style>
h1{
color: red;
}
</style>3. 문구 클릭시 색상 변경
<script>
const tag = document.querySelector("h1");
tag.addEventListener("click", ()=> {
tag.style.color = "blue";
});
</script>4. 라이브서버 익스텐션 설치 후 소스상에서 우클릭 Open With Five Server를 클릭
문구를 클릭 시 색이 파란색으로 바뀐다면 성공~👍
개발하는 개린이 개리