🚀 웹 개발의 트리플 스타: HTML, CSS, JavaScript 와 VScode 활용법 💻

1️⃣ HTML, CSS, JavaScript의 역할이 무엇인가요? 🤔

HTML (Hyper Text Markup Language) 📝

 
<!-- HTML 코드 예제 -->
<!DOCTYPE html>
<html>
  <head>
    <title>여기에 페이지 제목을 입력하세요</title>
  </head>
  <body>
    <h1>여기에 웹 페이지의 제목을 입력하세요</h1>
    <p>여기에 웹 페이지의 내용을 입력하세요</p>
  </body>
</html>

HTML은 웹페이지의 기본적인 구조를 정의하는 마크업 언어입니다. 마크업 언어는 웹페이지의 요소를 감싸 "표시"하거나 "마킹"하고, 이 요소들이 어떤 것인지를 설명해줍니다.

CSS (Cascading Style Sheets) 🎨

 
<!-- CSS 코드 예제 -->
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}
</style>

CSS는 웹 페이지의 디자인을 담당합니다. 색상, 레이아웃, 애니메이션 등 웹 페이지를 아름답게 만드는 모든 것을 담당하는 것이 CSS의 역할입니다. HTML이 웹 페이지의 '뼈대'라면, CSS는 그 '뼈대'에 '살'을 붙이는 역할을 합니다.

JavaScript (JS) 🧠

 
<!-- JavaScript 코드 예제 -->
<script>
function changeTitle(newTitle) {
  document.title = newTitle;
}
changeTitle('새로운 제목');
</script>

JavaScript는 웹 페이지를 생동감있게 만들어주는 프로그래밍 언어입니다. 웹 페이지의 동적인 부분(사용자와의 상호작용이 필요한 부분)을 담당하며, 클라이언트 측에서 실행되어 서버의 부담을 줄 일 수 있습니다.

2️⃣ VScode에서 폴더를 열고 새로운 파일을 생성하는 방법은 무엇인가요? 📁

VScode(Visual Studio Code)는 마이크로소프트에서 개발한 무료 코드 에디터입니다. VScode는 풍부한 기능과 확장성으로 인해 많은 개발자들에게 사랑받고 있습니다.

VScode에서 폴더 열기 👀

VScode를 열고 상단 메뉴에서 '파일' -> '열기...'를 선택하거나, VScode 홈 화면에서 '폴더 열기'를 선택하여 원하는 폴더를 엽니다.

VScode에서 새 파일 생성하기 📄

열려 있는 폴더에서 우클릭 후 '새 파일'을 선택하거나, 상단 메뉴의 '파일' -> '새 파일'을 선택하여 새로운 파일을 생성합니다. 파일 이름을 입력하고 엔터를 누르면 새 파일이 생성됩니다.

3️⃣ VScode를 이용하여 작성한 HTML, CSS를 브라우저에서 확인하는 방법은 무엇인가요? 🌐

VScode에서 작성한 HTML, CSS 파일을 브라우저에서 확인하는 방법은 다음과 같습니다. 1. HTML 파일에 CSS 파일을 연결합니다. 이를 위해 HTML 파일 내부의 <head> 태그 안에 다음 코드를 추가합니다.

 
<link rel="stylesheet" type="text/css" href="your_css_filename.css">

2. HTML 파일을 저장합니다. 3. 파일 탐색기에서 HTML 파일을 찾아 마우스 오른쪽 버튼을 클릭하고 '열기 방법 선택...'을 선택합니다. 4. 사용할 브라우저를 선택하고 'OK'를 클릭합니다. 5. 브라우저에서 작성한 HTML, CSS를 확인할 수 있습니다. 이로써 웹 개발의 트리플 스타인 HTML, CSS, JavaScript의 기본적인 역할과 VScode의 사용법에 대해 알아보았습니다. 💪 다음번에는 이를 활용해 간단한 웹 페이지를 만들어보는 실습을 진행해보겠습니다! 😄