티스토리 뷰
안녕하세요! 😊
오늘은 React를 배우기 전에 웹 개발의 기본이 되는 HTML과 웹페이지 구조를 실습해보려고 해요.
React는 결국 HTML을 바탕으로 UI를 만들게 되지만, JSX 문법을 사용해 작성된다는 점에서 HTML에 대한 기초 지식이 매우 중요해요. 그래서 오늘은 HTML5의 기본 구조와 작성 방법을 먼저 익히고, 이를 바탕으로 React를 배울 준비를 할 거예요.
이번 실습에서는 간단한 HTML 페이지를 작성해보면서 웹 개발의 기초를 쌓고, 그 후 React에서 HTML을 어떻게 활용하는지에 대해서도 차근차근 다뤄볼 거예요. 😊
기초부터 잘 쌓아가면, React도 더 쉽게 다가올 거예요! 지금부터 함께 시작해볼까요? 💪
📌 학습 목표
✅ HTML5 기본 용어(태그, 요소, 속성 등)를 이해하기
✅ HTML 페이지의 기본 구조를 이해하기
✅ HTML, CSS, JavaScript를 사용하여 간단한 웹페이지 만들기
🔹 실습을 위한 준비: VS Code 설치 방법
저번 블로그에서 언급했던 것처럼, 코드를 작성하고 실행하기 위해서는 적절한 개발 환경이 필요해요.
그래서 이번 실습을 진행하기 전에, 먼저 VS Code를 설치하는 방법을 다시 한번 설명해드릴게요! 😊
1️⃣ VS Code 다운로드
🔗 VS Code 공식 사이트 로 이동
🔹 운영 체제에 맞는 버전 다운로드
• macOS → .zip 파일 다운로드 후 압축 해제
• Windows → .exe 파일 다운로드 후 설치 실행
• Linux → .deb 또는 .rpm 파일 다운로드 후 설치
2️⃣ VS Code 설치 및 실행
✅ 설치 완료 후 VS Code를 실행합니다.
✅ 첫 실행 시 원하는 테마를 설정할 수 있어요.
3️⃣ React 개발을 위한 필수 확장 프로그램
VS Code 왼쪽 확장 탭(🔌 아이콘)에서 아래 확장 프로그램을 검색 후 설치하면 더욱 편리해요!
🔹 ES7+ React/Redux/React-Native snippets → 빠른 코드 자동완성
🔹 Prettier - Code formatter → 코드 자동 정렬 및 가독성 향상
🔹 Live Server → HTML 파일을 실시간으로 브라우저에서 확인 가능
01. HTML5 기본 용어
🔹 1. 태그(Tag)와 요소(Element)
🔸 요소(Element)란?
HTML에서 요소는 페이지를 구성하는 각 부품을 의미해요.
우리가 흔히 보는 제목, 본문, 이미지, 버튼 같은 것들이 바로 요소에 해당하죠.
자바스크립트에서는 이 요소를 “객체(Object)”라고 부르기도 해요.
이 개념을 잘 기억해두면, 나중에 JavaScript로 HTML 요소를 다룰 때 더 쉽게 이해할 수 있을 거예요! 😊
🔸 태그(Tag)란?
태그는 요소를 만들 때 사용하는 작성 방법이에요.
태그를 사용하면 브라우저가 해당 요소를 인식하고 화면에 표시할 수 있죠.
예를 들어, <h1> 태그를 사용하면 제목 요소가 생성됩니다.
<h1>안녕하세요! HTML을 배워봅시다! 🎉</h1>
브라우저에서는 이렇게 보이겠죠?
🖥 출력 화면:
안녕하세요! HTML을 배워봅시다! 🎉
✔ 보너스 팁!
사람들은 흔히 “태그”와 “요소”를 구분 없이 사용하지만, 정확히 말하면 태그는 요소를 만들기 위한 도구, 요소는 웹페이지를 구성하는 부품이에요! 😊
🔹 2. 내용을 가질 수 있는 요소 vs 내용을 가질 수 없는 요소
HTML 요소는 크게 “내용을 가질 수 있는 요소”와 “내용을 가질 수 없는 요소”로 나뉘어요.
✅ 내용을 가질 수 있는 요소
• 시작 태그와 끝 태그로 감싸져 있어요.
• 텍스트나 다른 태그(자식 요소)를 포함할 수 있어요.
• 예시: <h1>, <p>, <div>, <a>, <ul> 등
<p>이것은 단락(paragraph) 요소입니다.</p>
❌ 내용을 가질 수 없는 요소
• 닫는 태그 없이 단독으로 사용돼요.
• 속성(attribute)을 이용해 추가 정보를 설정할 수 있어요.
• 예시: <img>, <br>, <hr> 등
<img src="image.png" alt="예제 이미지">
✔ 보너스 팁!
HTML5에서는 <img> 같은 요소를 “빈 요소(Void Element)”라고 부르기도 해요.
XHTML 표기법에서는 <img />처럼 슬래시(/)를 붙여서 명확하게 표시할 수도 있어요!
🔹 3. 속성(Attribute)
속성은 태그에 추가적인 정보를 부여하는 역할을 해요.
속성을 사용하면 요소의 성질을 바꾸거나, 특정한 기능을 추가할 수 있죠.
예를 들어, <img> 태그의 src 속성은 출력할 이미지의 경로를 지정해줘요.
<img src="image.png" alt="예제 이미지">
✔ 속성의 특징!
1. 태그 안에서 사용되며, 항상 속성명=“값” 형태로 작성돼요.
2. 여러 개의 속성을 사용할 수 있어요!
<a href="https://example.com" target="_blank">예제 링크</a>
여기서 href 속성은 링크 주소를, target="_blank"는 새 탭에서 링크를 열도록 설정하는 역할을 해요.
🔹 4. 주석(Comment)
주석은 HTML 코드에 설명을 추가하는 역할을 해요.
주석은 브라우저에서 보이지 않으며, 코드의 가독성을 높이는 데 사용돼요.
<!-- 이 부분은 주석입니다. 화면에 표시되지 않아요! -->
<p>이것은 일반적인 문단입니다.</p>
✔ 보너스 팁!
주석을 쉽게 추가하고 제거할 수 있는 단축키도 있어요!
• Windows: Ctrl + /
• Mac: Cmd + /
이 단축키를 사용하면 한 번에 주석을 추가하거나 제거할 수 있어요! 😊
📌 정리
• 요소(Element): HTML 페이지를 구성하는 각각의 부품
• 태그(Tag): 요소를 만들기 위해 사용하는 작성 방법
• 속성(Attribute): 요소에 추가 정보를 부여
• 주석(Comment): 코드에 설명을 추가하는 기능 (브라우저에는 보이지 않음)
이제 HTML의 기본 개념을 익혔으니, 바로 실습을 진행해볼 거예요! 🚀
02. HTML 페이지 구조와 작성법
React를 배우기 전에 HTML의 기본적인 구조와 작성 방법을 이해하는 것은 매우 중요해요.
React는 HTML을 기반으로 동작하므로, HTML의 구조를 잘 이해하고 있으면 React 코드도 훨씬 쉽게 이해할 수 있습니다.
이 섹션에서는 HTML5의 기본 구조와 페이지를 작성하는 방법을 다룰 거예요.
🔹 1. HTML5 페이지의 구조
HTML5 문서는 기본적으로 몇 가지 주요 태그로 구성됩니다. 각 태그는 웹 페이지의 특정 부분을 정의하는 데 사용돼요.
🔸 lang 속성
웹 페이지의 언어를 지정하는 속성입니다. 이 속성을 설정하면 검색 엔진이 페이지를 어떤 언어로 작성했는지 인식할 수 있습니다. 아래 태그를 통해, 페이지가 한국어로 작성된 것임을 알 수 있습니다.
<html lang="ko">
🔸 head 태그
문서의 메타데이터를 담는 부분입니다. head 안에는 스타일시트, 자바스크립트 파일, 페이지 제목 등을 포함할 수 있습니다. 다른 태그들을 head 안에 넣으면 웹 브라우저가 이를 자동으로 body로 이동시킵니다.
🔸 title 태그
웹 페이지의 제목을 정의하며, 이 제목은 브라우저 탭에 표시됩니다.
<title>My React Project</title>
🔹 2. HTML5 페이지의 작성과 실행
HTML 페이지를 작성할 때는 텍스트 에디터(예: 비주얼 스튜디오 코드)를 사용하여 작성하고 .html 확장자로 저장합니다. 그 후, 브라우저에서 실행할 수 있어요.
예시 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<title>HTML5 Basic</title>
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>
위 코드는 HTML5 기본 구조로, “Hello World”라는 메시지를 화면에 출력하는 웹 페이지입니다. 이 파일을 저장한 후, 웹 브라우저에서 더블 클릭하거나 드래그하여 실행할 수 있습니다.
🔹 3. 스타일시트 작성과 실행
HTML 페이지에 스타일을 추가하는 방법은 두 가지가 있습니다.
• 내부 스타일: HTML 파일 안에 <style> 태그를 작성하여 직접 스타일을 입력하는 방법입니다.
• 외부 스타일: 별도의 CSS 파일을 작성한 후, HTML 파일에서 link 태그를 사용해 이를 불러오는 방법입니다. 프로젝트가 커질수록 외부 스타일을 사용하는 것이 효율적이에요.
🔸 내부 스타일 - 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>HTML5 Basic</title>
<style>
h1 {
color: white;
background: black;
}
</style>
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>
🔸 외부 스타일 - 예시 코드
1. 먼저 style.css라는 외부 스타일 파일을 작성하고
h1 {
color: white;
background: black;
}
2. HTML 파일에서 link 태그를 사용해 이를 불러옵니다
<!DOCTYPE html>
<html lang="ko">
<head>
<title>HTML5 Basic</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>
외부 스타일 시트는 link 태그를 사용하여 HTML 문서와 분리된 상태로 관리할 수 있어, 여러 사람이 협업할 때 유리합니다.
🔹 4. 자바스크립트 작성과 실행
HTML 문서에 동적인 요소를 추가하고 싶다면 자바스크립트를 사용할 수 있습니다. 자바스크립트는 <script> 태그를 사용하여 작성할 수 있으며, 내부에 직접 작성하거나 외부 파일을 불러오는 방식으로 사용됩니다.
• 내부 자바스크립트: <script> 태그를 사용하여 HTML 파일 내에서 직접 작성합니다.
• 외부 자바스크립트: 별도의 .js 파일을 작성하고, script 태그의 src 속성을 사용해 이를 HTML 파일에 불러옵니다.
🔸 내부 자바스크립트 - 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>HTML5 Basic</title>
<script>
alert('Hello JavaScript..!');
</script>
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>
🔸 외부 자바스크립트 - 예시 코드
1. outerScript.js라는 외부 자바스크립트 파일을 작성하고
alert('OuterScript');
2. HTML 파일에서 이를 불러옵니다
<!DOCTYPE html>
<html lang="ko">
<head>
<title>HTML5 Basic</title>
<script src="outerScript.js"></script>
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>📌 정리:
• 외부 스타일시트는 link 태그를 사용해 불러옵니다.
여러 페이지에서 동일한 스타일을 적용하려면 외부 스타일시트를 사용하는 것이 효율적이에요.
• 외부 자바스크립트는 script 태그의 src 속성을 사용해서 HTML 문서에 불러옵니다.
이렇게 하면 자바스크립트 파일을 관리하기가 훨씬 수월해요.
03. 실습하기
이제 어느 정도 HTML에 대해 이해하셨을 거예요! 실습을 통해 더 잘 익혀볼까요? ☺️
아래의 사진을 참고하여 웹사이트를 작성해봅시다!
✔ 포함 항목
• 문서 제목: ~의 홈페이지입니다.
• 홈페이지 접속시 안내 팝업창: ~의 홈페이지에 오신 것을 환영합니다!
• 홈페이지 내용: 이름, 직업, 소개
✔ HTML, CSS, JS 파일로 분리해서 작성하기!
• 문서 내용의 각 소제목은 핑크색으로 표시해 주세요!
다들 쉽게 끝내셨을 것 같아요! 이번 실습 코드는 다음 블로그에 올려드릴게요!
이제 HTML의 기본적인 구조와 작성 방법을 잘 이해하셨죠? HTML은 React에서 UI를 만들 때 꼭 필요한 요소예요. JSX 문법을 사용할 때도 HTML의 기초가 중요한 역할을 하게 된답니다.
React에서 HTML을 다룰 때도 이렇게 HTML5의 기본 구조를 바탕으로 컴포넌트를 작성하고, 스타일을 적용하며 동작을 추가할 수 있어요. 앞으로 React와 JSX를 배우면서 HTML을 더욱 잘 활용할 수 있을 거예요.
리액트를 마스터할 그날까지 함께 열심히 공부해가면 좋겠어요! 앞으로도 꾸준히 배워가면서 더 나은 개발자가 되도록 해요. 💪
다음 블로그에서 또 만나요! 😊
'React(리액트)' 카테고리의 다른 글
| [React] 공부 기록 #1 - React란 무엇인가? 그리고 왜 배워야 할까? (0) | 2025.03.03 |
|---|