학습 목표
1. HTML의 구조에 대해서 이해한다
2. HTML의 태그 작성 규칙에 대해 이해한다
3. 디자인 작업에 편리한 개발자 도구 사용법을 익힌다
4. HTML 코드와의 비교를 통해 React의 컴포넌트 재사용 개념의 편리함을 다시 한번 짚어본다.
웹 페이지란?
웹 페이지란 www(월드 와이드 웹) 상에 있는 개개의 문서를 뜻합니다.
.gif, .jpg, .Ai 와 같은 확장자 포맷이 있듯이 HTML은 .htm, .html의 확장자 포맷을 가지고 있습니다.
이 html 문서는 단순히 텍스트 파일에 불과하고,
텍스트 파일에 HTML 규칙에 맞게 HTML 코드를 작성 후 웹 브라우저를 통해 실행시키면(열면) 웹 브라우저(크롬, 사파리 등)가 해석을 해서 화면에 view를 그려줍니다.
html이란?
Hyper Text Markup Language
Hyper Text(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 기능)를 가진 문서를 만드는 언어입니다.
디자이너가 스케치를 할 때, 먼저 전체적인 레이아웃을 그리듯이,
HTML도 웹사이트의 기본 틀을 만들어 주는 역할을 합니다.
HTML은 웹사이트의 뼈대입니다. 집을 짓는다고 생각해 볼까요? 집을 짓기 위해서는 먼저 뼈대가 필요하죠. 벽, 문, 창문 같은 것들 말이에요. 물론 뼈대만으로는 살기 불편하겠지만, 그 뼈대 없이는 집을 지을 수가 없어요! 웹사이트도 마찬가지예요. HTML은 이런 뼈대를 만들어 주는 역할을 합니다.
이렇게 집짓는 과정으로 비교해 보면, HTML은 벽돌 하나하나를 쌓아서 그 집의 기본 모양을 만들어 가는 느낌이에요. 예쁘게 꾸미고, 색을 칠하는 건 아직 안 했지만, 최소한 어디에 무엇이 있을지, 그 구조는 HTML로 다 정해진 겁니다.
HTML의 구조
마치 우리가 집을 지을 때 꼭 따라야 할 순서가 있는 것처럼, HTML 문서도 정해진 기본 구조가 있습니다. 구조대로 짓지 않으면 집이 무너질 수 있는 것처럼, HTML 문서가 구조대로 제대로 작성되지 않으면 웹사이트도 제대로 작동하지 않을 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>우리의 웹사이트</title>
</head>
<body>
<h1>안녕하세요, 여기는 제목이에요!</h1>
<p>이건 문단이에요. 여기에 내용을 넣을 수 있어요.</p>
<a href="https://example.com">이 링크를 클릭해보세요!</a>
</body>
</html>
HTML
복사
1. <!DOCTYPE html>
"이건 웹사이트야!"라고 선언하는 부분입니다. 집으로 따지면 "우리는 여기에 벽돌로 집을 지을 거야"라고 말하는 것과 같아요.
2. <html>
우리가 만드는 집 전체를 감싸는 큰 틀이라고 할 수 있습니다. 웹사이트의 모든 내용은 이 태그 안에 들어가야 합니다.
3. <head>
집의 설계도 같은 부분입니다. 이 안에는 우리가 웹사이트에 대한 정보들, 예를 들어 제목, 글꼴 같은 설정들이 들어가게 됩니다. 집의 구조적인 정보는 보통 외부에서 잘 보이지 않지만 중요한 역할을 하는 것과 같이 head에도 웹사이트 내에 노출되지는 않지만 중요한 역할을 하는 내용들이 들어가게 됩니다.
4. <body>
이 부분이 바로 집의 방과 가구들이 있는 곳입니다. 웹사이트에서 눈에 보이는 모든 것들이 이 안에 들어가게 됩니다. 우리가 실제로 보게 되는 콘텐츠들이 여기에 모여 있습니다.
태그란?
태그(tag)는 HTML에서 웹페이지의 구조를 정의하고, 다양한 요소들을 표시하는 데 사용되는 기본 단위입니다. 태그는 특정한 정보를 감싸거나 지정하는 역할을 하며, 웹페이지에서 텍스트, 이미지, 링크, 버튼 등 다양한 콘텐츠를 나타내게 도와줍니다.
태그의 기본 구조
HTML 태그는 항상 여는 태그와 닫는 태그로 구성되며, 그 사이에 내용이 들어갑니다.
여는 태그는 < >로 시작하고, 닫는 태그는 </ >로 끝나게 됩니다.
<p>여기는 문단입니다.</p>
HTML
복사
•
<p>: 여는 태그. p는 문단(paragraph)을 나타내는 태그.
•
</p>: 닫는 태그. 여는 태그의 끝을 알려주는 역할.
•
여는 태그와 닫는 태그 사이에는 표시될 내용이 들어가게 됨
•
브라우저에서 볼 때에는 태그는 생략되고 안의 내용만 보여짐.
태그의 역할
태그는 웹페이지에서 텍스트의 구조를 잡고, 이미지나 링크를 삽입하거나, 화면에 표시될 여러 요소들을 정의합니다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<h1>안녕하세요, 여기는 제목이에요!</h1>
<p>이건 문단이에요. 여기에 내용을 넣을 수 있어요.</p>
<a href="./detail.html">이 링크를 클릭해보세요!</a>
</body>
</html>
HTML
복사
index.html
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<p>디테일 페이지입니다.</p>
</body>
</html>
HTML
복사
detail.html
•
<h1> 태그는 주요 제목을 나타내며, 이는 건물의 주요 입구를 표시하는 것과 유사하게 "이 부분이 중요한 내용이야!"라고 알려주는 역할을 합니다.
•
<p> 태그는 문장을 뜻합니다. 벽을 세우는 것처럼, 웹사이트에 글을 쓸 공간을 만들어 줍니다.
•
<a> 태그는 문처럼 웹페이지에서 다른 곳으로 이동할 수 있는 링크를 만들어 줍니다. 문을 열고 다른 방으로 가는 것과 비슷해요.
더 많은 태그를 보려면..
실습하기
태그의 속성
태그는 속성을 가질 수 있습니다. 속성은 태그에 추가 정보를 제공해 주는 역할을 합니다. 예를 들어, <a> 태그는 href 속성을 사용해서 링크의 목적지를 알려줍니다.
속성은 여는 태그 안에 작성해야 합니다.
<a href="https://example.com">이 링크를 클릭해보세요!</a>
HTML
복사
셀프 클로징 태그
일부 태그는 닫는 태그가 필요 없고, 혼자서 끝나는 것이 가능합니다. 이를 셀프 클로징 태그라고 부르고, 대표적인 예로 이미지 태그가 있습니다.
<태그 이름 />
<img src="image.jpg" alt="설명" />
HTML
복사
소문자로 태그 이름을 작성
HTML에서는 태그 이름을 소문자로 작성하는 것이 규칙입니다. 옛날에는 대소문자가 혼용되기도 했지만, 지금은 일관성을 위해 소문자로 적는 것이 표준이에요. 우리가 디자인할 때 일관성 있게 선을 맞추는 것처럼, 코드도 통일성이 중요합니다.
CSS와 JavaScript
HTML이 웹사이트의 뼈대라면, CSS와 JavaScript는 그 뼈대를 꾸미고, 집을 더욱 편리하게 만드는 도구들입니다.
CSS: 집을 예쁘게 꾸미는 페인트와 인테리어
CSS는 웹사이트를 더 예쁘고 보기 좋게 꾸며주는 역할을 합니다. 집을 지은 후에 벽에 페인트를 칠하거나, 멋진 가구를 배치하는 것처럼, CSS는 글자 크기, 색상, 배치 등을 조정해줍니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS 예시</title>
<style>
h1 {
color: blue;
font-size: 36px;
}
p {
color: gray;
font-size: 18px;
}
</style>
</head>
<body>
<h1>안녕하세요, 여기는 파란색 제목이에요!</h1>
<p>이 문단은 회색이에요.</p>
<a href="./detail.html">이 링크를 클릭해보세요!</a>
</body>
</html>
HTML
복사
index.html
여기서 CSS는 <style> 태그 안에 들어가고, h1 제목은 파란색, p 문단은 회색으로 꾸며줬습니다.
JavaScript: 집을 더 똑똑하고 편리하게 만드는 기능들
JavaScript는 웹사이트를 더 똑똑하게 만들고, 다양한 상호작용을 할 수 있게 도와주는 역할을 합니다. 집에 자동문이나 조명 스위치를 설치하는 것처럼, JavaScript는 버튼을 클릭하면 무언가 바뀌거나, 자동으로 일이 처리되도록 만들어줍니다.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 예시</title>
<style>
h1 {
color: blue;
font-size: 36px;
}
p {
color: gray;
font-size: 18px;
}
</style>
<script>
function changeText() {
document.getElementById("myText").innerHTML = "버튼을 눌렀어요!";
}
</script>
</head>
<body>
<h1>안녕하세요, 여기는 파란색 제목이에요!</h1>
<p>이 문단은 회색이에요.</p>
<a href="./detail.html">이 링크를 클릭해보세요!</a>
<h1 id="myText">여기를 바꿔보세요</h1>
<button onclick="changeText()">눌러봐!</button>
</body>
</html>
HTML
복사
index.html
여기서 JavaScript는 버튼을 누르면 제목이 바뀌는 일을 합니다. 집의 문을 열 때 자동으로 조명이 켜지거나, 버튼을 눌러 창문이 열리는 것처럼, JavaScript는 웹사이트에서 사용자와 상호작용을 가능하게 합니다.
개발자 도구로 웹사이트의 HTML을 살펴보자
개발자 도구 여는 법
키보드의 F12 를 누르거나, 웹페이지 위에서 마우스 오른쪽 클릭 > 검사 를 클릭합니다.
주황색 부분이 개발자 도구 입니다. 이렇게 개발자 도구가 켜졌다면 성공입니다!
개발자 도구를 통해 실제 웹사이트의 html 구조를 확인하고 조작해봅시다!
디자이너가 자주 사용하는 개발자 도구 기능 단축키
•
요소 잡기 모드: ctrl + shift + c / cmd + shift + c
요소 잡기 모드인 상태에서 웹 페이지의 요소에 마우스를 가져다 대면 요소에 해당하는 태그를 보여줍니다.
•
반응형 디바이스 모드: ctrl + shift + m / cmd + shift + m
여기서 해상도와 device를 변경하여 해상도에 따른 화면을 볼 수 있어요.
React가 편리한 이유
지난 세션 때 리엑트가 왜 편리한지 리액트의 컴포넌트를 구조를 설명했던 것 기억하시나요?
컴포넌트 재사용의 편리함을 직접 체감하기 위해 우리가 만든 웹 사이트에 header를 추가해봅시다.
먼저 메인 페이지인 index.html에 추가해 볼게요.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
<style>
h1 {
color: blue;
font-size: 36px;
}
p {
color: gray;
font-size: 18px;
}
.header {
width: 100%;
height: 60px;
background-color: red;
}
.header-text{
font-size: 50px;
color: white;
}
</style>
<script>
function changeText() {
document.getElementById("myText").innerHTML = "버튼을 눌렀어요!";
}
</script>
</head>
<body>
<div class="header">
<p class="header-text">헤더입니다</p>
</div>
<h1>안녕하세요, 여기는 파란색 제목이에요!</h1>
<p>이 문단은 회색이에요.</p>
<a href="./detail.html">이 링크를 클릭해보세요!</a>
<h1 id="myText">여기를 바꿔보세요</h1>
<button onclick="changeText()">눌러봐!</button>
</body>
</html>
HTML
복사
헤더를 위한 html 태그와 style을 추가해주었습니다.
헤더는 디테일 페이지에서도 보여야겠지요?
detail.html에도 헤더를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
<style>
h1 {
color: blue;
font-size: 36px;
}
p {
color: gray;
font-size: 18px;
}
.header {
width: 100%;
height: 60px;
background-color: red;
}
.header-text{
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div class="header">
<p class="header-text">헤더입니다</p>
</div>
<p>디테일 페이지입니다.</p>
</body>
</html>
HTML
복사
문서 두 개에 똑같은 작업을 해주었죠?
실제 서비스처럼 페이지가 많이 늘어나고 모든 페이지에서 헤더를 보여줘야 하는 상황을 상상해봅시다.
비효율적인 반복 작업이 엄청나게 생기겠죠!!!
React에서는 반복되는 요소를 하나의 컴포넌트로 만들어두어 재사용이 간편합니다.
import React from "react";
import styled from "styled-components";
const Header = () => {
return (
<StHeader>
<StText>헤더입니다</StText>
</StHeader>
);
};
export default Header;
const StHeader = styled.div`
width: 100%;
height: 60px;
background-color: red;
`;
const StText = styled.p`
font-size: 40px;
`;
JavaScript
복사
header.jsx
반복되는 header 컴포넌트를 만든 후,
import React from "react";
import { useNavigate } from "react-router-dom";
import Header from "./Header";
const Home = () => {
const navigate = useNavigate();
const handleButton = () => {
navigate("/detail");
};
return (
<div>
<Header />
<p>홈입니다.</p>
<button onClick={handleButton}>디테일로 이동!</button>
</div>
);
};
export default Home;
JavaScript
복사
Home.jsx
import React from "react";
import Header from "./Header";
const Detail = () => {
return (
<div>
<Header />
<p>디테일 페이지입니다.</p>
</div>
);
};
export default Detail;
JavaScript
복사
Detail.jsx
필요한 곳에 쏙 쏙 넣어 사용합니다!
여러분이 공부하신 Figma 컴포넌트도 한번 만들면 그 컴포넌트를 여러 곳에서 재사용 할 수 있죠?
그리고 만약 컴포넌트의 원본을 수정하면, 그 컴포넌트를 사용한 모든 곳에서 자동으로 업데이트 되는 것을 알고 계실거에요.
React 컴포넌트도 마찬가지로 한 번 정의하면, 그 컴포넌트를 여러 곳에서 사용할 수 있고, 컴포넌트의 구조나 스타일을 바꾸면 그 컴포넌트를 사용한 모든 곳에서 자동으로 업데이트가 되어 개발이 굉장히 편리합니다.