이미지와 피규어
<!doctype html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이미지와 피규어</title>
<link rel="shortcut icon" href="/favicon/ikelion.ico" type="image/x-icon" />
<link rel="icon" href="/favicon/likelion.svg" type="image/xml+svg" />
<link rel="preload" as="font" href="/public/font/suit/SUIT-Variable.woff2" />
<link rel="stylesheet" href="/font/suit/SUIT-Variable.css" />
<link rel="stylesheet" href="/src/common/index.css" />
<link rel="stylesheet" href="/src/common/main.css" />
</head>
<body style="margin: 50px">
<div class="go-index"><a href="/index.html">Index로 이동</a></div>
<h1>이미지와 피규어</h1>
<div><img src="/src/assets/svg/chitchat.svg" alt="" width="50" height="50" /></div>
<!-- /src/assets/svg/chitchat.svg -->
<svg aria-labelledby="message" class="svg-img" width="50" height="50" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<title id="message">메세지</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
<stop stop-color="#2397B3" offset="0%"></stop>
<stop stop-color="#13577E" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b">
<stop stop-color="#73DFF2" offset="0%"></stop>
<stop stop-color="#47B1EB" offset="100%"></stop>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path
d="M28.872 22.096c.084.622.128 1.258.128 1.904 0 7.732-6.268 14-14 14-2.176 0-4.236-.496-6.073-1.382l-6.022 2.007c-1.564.521-3.051-.966-2.53-2.53l2.007-6.022A13.944 13.944 0 0 1 1 24c0-7.331 5.635-13.346 12.81-13.95A9.967 9.967 0 0 0 13 14c0 5.523 4.477 10 10 10a9.955 9.955 0 0 0 5.872-1.904z"
fill="url(#a)"
transform="translate(1 1)"
></path>
<path d="M35.618 20.073l2.007 6.022c.521 1.564-.966 3.051-2.53 2.53l-6.022-2.007A13.944 13.944 0 0 1 23 28c-7.732 0-14-6.268-14-14S15.268 0 23 0s14 6.268 14 14c0 2.176-.496 4.236-1.382 6.073z" fill="url(#b)" transform="translate(1 1)"></path>
<path d="M18 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM24 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM30 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#FFF"></path>
</g>
</svg>
<figure>
<img src="/src/assets/thumbnail/meeting-room.jpg" alt loading="lazy" />
<figcaption>회의실에서 미팅</figcaption>
</figure>
<!-- 상대 경로 -->
<div>
<img src="../assets/images/rabbit.png" alt="당근을 손에 쥐고있는 토끼" />
</div>
<!-- 절대 경로 -->
<div>
<img src="/src/assets/images/rabbit.png" alt="당근을 손에 쥐고있는 토끼" width="265" height="281" />
</div>
<!-- 지연 로딩 -->
<div>
<!-- alt 속성의 값을 공란으로 제공하면 스크린리더는 해당 이미지를 읽어주지 않음.
대체 텍스트를 공란으로 제공하는 경우는 정보 전달의 의미를 가지지 않는 장식성 이미지일 경우 -->
<img src="/src/assets/thumbnail/meeting-room.jpg" alt="" loading="lazy" />
</div>
</body>
</html>
이미지 요소를 공부하던 중 svg 요소에 들어가는 상세 요소들에 대한 공부가 부족하단 것을 알았다.
다음에 svg 요소를 원활하게 사용하는 데에 필요한 요소들을 모두 정리하며 공부하는 것으로 포스팅을 시작해야겠다.
img요소
결과
vite.config.js 생성
import { defineConfig } from 'vite';
import path from 'path';
import fs from 'fs';
// findAllHtmlFiles 함수 정의 추가
function findAllHtmlFiles(directory) {
const htmlFiles = {};
function scanDirectory(dir) {
const files = fs.readdirSync(dir);
for (const file of files) {
const filePath = path.join(dir, file);
const stat = fs.statSync(filePath);
if (stat.isDirectory()) {
scanDirectory(filePath);
} else if (file.endsWith('.html')) {
// 키 이름을 경로에서 추출 (확장자 제외)
const key = path.relative(__dirname, filePath).replace('.html', '');
htmlFiles[key] = filePath;
}
}
}
scanDirectory(directory);
return htmlFiles;
}
export default defineConfig({
build: {
rollupOptions: {
input: {
index: path.resolve(__dirname, 'index.html'),
...findAllHtmlFiles(path.resolve(__dirname, 'src')),
},
},
},
appType: 'mpa', // fallback 사용안함
server: {
// open: 'src/pages/main/index.html', // 서버 시작 시 브라우저에서 지정페이지 자동으로 열기
},
});
appType: 'mpa' -> *MPA(Multi-Page Application, 멀티 페이지 애플리케이션)
만약 mpa가 아니라 spa라면 (Single-Page Application, 싱글 페이지 애플리케이션)
리스트미지와 피규어
<!doctype html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이미지와 피규어</title>
<link rel="shortcut icon" href="/favicon/ikelion.ico" type="image/x-icon" />
<link rel="icon" href="/favicon/likelion.svg" type="image/xml+svg" />
<link rel="preload" as="font" href="/public/font/suit/SUIT-Variable.woff2" />
<link rel="stylesheet" href="/font/suit/SUIT-Variable.css" />
<link rel="stylesheet" href="/src/common/index.css" />
<link rel="stylesheet" href="/src/common/main.css" />
</head>
<body style="margin: 50px">
<div class="go-index"><a href="/index.html">Index로 이동</a></div>
<h1>이미지와 피규어</h1>
<div><img src="/src/assets/svg/chitchat.svg" alt="" width="50" height="50" /></div>
<!-- /src/assets/svg/chitchat.svg -->
<svg aria-labelledby="message" class="svg-img" width="50" height="50" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<title id="message">메세지</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
<stop stop-color="#2397B3" offset="0%"></stop>
<stop stop-color="#13577E" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b">
<stop stop-color="#73DFF2" offset="0%"></stop>
<stop stop-color="#47B1EB" offset="100%"></stop>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path
d="M28.872 22.096c.084.622.128 1.258.128 1.904 0 7.732-6.268 14-14 14-2.176 0-4.236-.496-6.073-1.382l-6.022 2.007c-1.564.521-3.051-.966-2.53-2.53l2.007-6.022A13.944 13.944 0 0 1 1 24c0-7.331 5.635-13.346 12.81-13.95A9.967 9.967 0 0 0 13 14c0 5.523 4.477 10 10 10a9.955 9.955 0 0 0 5.872-1.904z"
fill="url(#a)"
transform="translate(1 1)"
></path>
<path d="M35.618 20.073l2.007 6.022c.521 1.564-.966 3.051-2.53 2.53l-6.022-2.007A13.944 13.944 0 0 1 23 28c-7.732 0-14-6.268-14-14S15.268 0 23 0s14 6.268 14 14c0 2.176-.496 4.236-1.382 6.073z" fill="url(#b)" transform="translate(1 1)"></path>
<path d="M18 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM24 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM30 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#FFF"></path>
</g>
</svg>
<figure>
<img src="/src/assets/thumbnail/meeting-room.jpg" alt loading="lazy" />
<figcaption>회의실에서 미팅</figcaption>
</figure>
<!-- 상대 경로 -->
<div>
<img src="../assets/images/rabbit.png" alt="당근을 손에 쥐고있는 토끼" />
</div>
<!-- 절대 경로 -->
<div>
<img src="/src/assets/images/rabbit.png" alt="당근을 손에 쥐고있는 토끼" width="265" height="281" />
</div>
<!-- 지연 로딩 -->
<div>
<!-- alt 속성의 값을 공란으로 제공하면 스크린리더는 해당 이미지를 읽어주지 않음.
대체 텍스트를 공란으로 제공하는 경우는 정보 전달의 의미를 가지지 않는 장식성 이미지일 경우 -->
<img src="/src/assets/thumbnail/meeting-room.jpg" alt="" loading="lazy" />
</div>
</body>
</html>
img요소, figure요소, figcaption 요소
img요소
vite.config.js 생성
import { defineConfig } from 'vite';
import path from 'path';
import fs from 'fs';
// findAllHtmlFiles 함수 정의 추가
function findAllHtmlFiles(directory) {
const htmlFiles = {};
function scanDirectory(dir) {
const files = fs.readdirSync(dir);
for (const file of files) {
const filePath = path.join(dir, file);
const stat = fs.statSync(filePath);
if (stat.isDirectory()) {
scanDirectory(filePath);
} else if (file.endsWith('.html')) {
// 키 이름을 경로에서 추출 (확장자 제외)
const key = path.relative(__dirname, filePath).replace('.html', '');
htmlFiles[key] = filePath;
}
}
}
scanDirectory(directory);
return htmlFiles;
}
export default defineConfig({
build: {
rollupOptions: {
input: {
index: path.resolve(__dirname, 'index.html'),
...findAllHtmlFiles(path.resolve(__dirname, 'src')),
},
},
},
appType: 'mpa', // fallback 사용안함
server: {
// open: 'src/pages/main/index.html', // 서버 시작 시 브라우저에서 지정페이지 자동으로 열기
},
});
appType: 'mpa' -> *MPA(Multi-Page Application, 멀티 페이지 애플리케이션)
만약 mpa가 아니라 spa라면 (Single-Page Application, 싱글 페이지 애플리케이션)
하이퍼링크
a 요소
1. href - 파일의 경우 파일위치 / 홈페이지의 경우 주소가 들어간다.
2. tartget의 속성
| 속성값 | 설명 |
| _blank | 연결 문서를 새 창에서 연다. |
| _selt | (기본값) 지금 현재 문서에서 페이지를 연다 |
| _parent | 부모요소의 창에서 화면을 연다. |
| _top | 가장 상위 창에서 연다. |
| frame name | 지정된 프레임 안에서 연다 보통 iframe 태그를 활용했을때 해당 위치에 열리며 우리가 자주 접하는 블로그 안에 첨부되는 유튜브 동영상이 이와 같다. |
See the Pen Untitled by 김도혁 (@mnzipjlg-the-bold) on CodePen.
리스트(list) - list 요소
1. ol (Description Term) - 순서 있는 리스트 요소
2. ul (Description Details) - 순서 없는 리스트 요소
- li요소는 보통 ol, ul 요소의 자식요소로 많이 사용된다.
See the Pen 리스트 요소 by 김도혁 (@mnzipjlg-the-bold) on CodePen.
정의형 목록
설명 목록(description list) - dl 요소
1. dt (Description Term) - 그룹의 이름을 나타낸다.
2. dd (Description Details) - 그룹의 설명을 나타낸다.
See the Pen 정의형 목록 by 김도혁 (@mnzipjlg-the-bold) on CodePen.
컨테이너 요소
<!doctype html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>컨테이너 요소</title>
<link rel="shortcut icon" href="/favicon/ikelion.ico" type="image/x-icon" />
<link rel="icon" href="/favicon/likelion.svg" type="image/xml+svg" />
<link rel="preload" as="font" href="/public/font/suit/SUIT-Variable.woff2" />
<link rel="stylesheet" href="/font/suit/SUIT-Variable.css" />
<link rel="stylesheet" href="/src/common/index.css" />
<link rel="stylesheet" href="/src/common/main.css" />
</head>
<body style="margin: 50px">
<div class="go-index"><a href="/index.html">Index로 이동</a></div>
<h1>컨테이너 요소</h1>
<div>
<p>멋쟁이 사자처럼 프론트엔드 부트캠프 화이팅!</p>
<p>AI 코딩 도구를 활용하면 <span>코드 생성 및 자동화</span>, <span style="display: inline-block">개발 워크플로우</span>와의 통합 등이 가능하며 기존 개발 환경 대비 생산성을 높일 수 있습니다. 그러나 개발자를 꿈꾸며 학습을하는 예비 개발자에게 AI 코딩 도구는 양날의 검이 될 수 있습니다.</p>
</div>
<hr />
<div style="font-size: 96px; font-family: suit; font-weight: 900">
<p>
<span style="color: red">G</span><span style="color: orange">o</span><span style="color: yellow">o</span><span style="color: green">g</span><span style="color: blue">l</span><span style="color: purple">e</span>
</p>
</div>
</body>
</html>시멘틱 태그
Header 요소
Header 요소의 내부에는 Footer 또는 Header가 들어올 수 없으며, 사진과 같이 텍스트, 내장 콘텐츠를 포함한다.
body 요소 내부에 보통은 제일 윗단에 위치하며, 페이지의 주제 또는 제목 / 사용자가 제일 자주 접하는 내용들이 들어간다.
뿐만 아니라 하나의 글의 제목을 표시할 때도 필요한 시멘틱 태그중 하나이다.
article = 글
내부에 제목을 명시하는 header가 사용되어 h1태그와 time태그를 감싸고 있는 것을 확인해 볼 수 있다.
nav 요소
nav 태그는 보통 페이지의 전체를 한눈으로 볼 수 있도록 하는 목차와 같다.
때문에 네비게이션의 약자에서 나온 nav라는 태그를 사용하게 되고 위 사진과 같이 리스트 요소들과 함께 쓰인다.
물론 내부에 뿐만 아니라 플로우 콘텐츠 모두가 포함될 수 있으며, 코드 사용이 엄격한 XML 기준 권장 사용 방법은 아래 코드와 같다.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>main 요소
main 요소는 Header보다는 아래에 위치하여 페이지의 실질적인 본문이 들어간다.
main은 페이지에서 유일해야 하며, main 내부에는 플로우 콘텐츠 모두가 들어올 수 있다.
사이드 바, 검색 기능, 저작권 정보, 홈페이지 로고 등등 여러 홈페이지에서 자주 사용되는 내용은 main에 포함되어선 안되나, 구글과 같이 검색기능이 주된 사이트라면 예외로 둘 수 있다.
section 요소
많은 사람들이 section과 article의 사용법에 대해서 헷갈리곤 한다.
나도 이전 블로그 포스팅에서 해당 내용을 다룬 적이 있다.
https://hyeeoooook.tistory.com/22
HTML - 트위터 클론 코딩 - 1
트위터 URL : https://x.com/?locale=ko트위터의 회원가입페이지를 클론코딩 해보았다. HTMLHTML Happening now Join today. ..
hyeeoooook.tistory.com
이전에 트위터 클론 코딩을 할 때 section을 분류해서 개발을 진행한 적이 있는데, 이와 같이 혼자서는 사용되지 못하는 것들은 section으로 구분하며, 혼자서도 글이 완성되는 내용들은 article로 구성하는 경우가 많다.
그런데 MDN 사용 일람을 읽어보면 디자인적 요소에선 div 요소를 사용하라고 권장하고 있다.
즉, 트위터 클론 코딩을 진행할 때 이해를 돕기 위해 section을 사용하였는데 이는 디자인적 요소이기 때문에 올바른 사용법이 아닌 것을 알 수 있다.
때문에, 보통 section과 article을 자주 볼 수 있는 곳은 뉴스기사 정도가 있다.
해당 사진을 보면 네이버 뉴스기사에서 article을 사용하여 가져온 것을 확인할 수 있다.
다음으로는 이케아 공식홈페이지이다.
section을 사용하였는데 파란색 네모, 빨간색 네모처럼 하나의 구간을 나누어 활용하였다.
즉, 저 페이지가 갑자기 덩그러니 다른 페이지에 있다고 한다면 그것이 이케아 상품페이지라는 것을 알기는 힘들 것이며, 독립적으로 사용되기 어렵다고 판단되기에 section을 사용했다고 볼 수 있다.
즉, 스크린리더 사용자들은 스크린리더에 의존하여 시멘틱 태그들을 읽어 들이는데 만약 올바르지 않은 태그를 사용한다면 사용자들에게 불편함과 올바른 시스템을 제공하지 못한다는 의미이다.
aside 요소
asdie 요소는 보통 다음과 같이 글의 주제와 간접적으로 관련되어 있을 때 사용한다.
디즈니 만화 영화에 대한 주제를 말했고, 그것에 대한 부가설명을 aside로 첨부하였다.
즉, 해당 정보는 TMI와 같으며, 간접적으로 설명해 주는 것이라고 볼 수 있다.
footer 요소
보통 footer 요소는 페이지의 가장 아랫단에 위치하며 책으로 따지면 가장 뒷 페이지라고 볼 수 있다.
해당 페이지에 대한 정보, 저자 등등이 표시되며 기업의 경우 기업명, 기업 이메일 때로는 기업에서 제공하는 다른 사이트 정보도 확인할 수 있다.
네이버를 들어가 보면 가장 아랫단에 네이버에 대한 정보들이 담겨 있는 것을 볼 수 있다.
네이버에선 div로 만들고 class를 footer로 사용한 것을 볼 수 있다.
요약 및 회고
1. 기존에 시멘틱 태그에 대해서 공부를 진행했었지만, 늘 봐도 봐도 배울 점이 많은 요소 중 하나라고 생각한다.
시멘틱 태그에 대해서 공부를 하다가 레딧에서 사이트를 개발 중에 시멘틱 태그를 적절히 사용하고자 하는데 article과 section 중에 어떤 걸 사용해야 올바른가를 질문한 글을 본 적이 있다.
댓글들에는 "정말 그 개발 요소가 시멘틱 한 지를 먼저 판단해야 한다"라고 하였고, 나 또한 그 사람의 코드를 보면서 정작 중요한 시멘틱 태그 활용의 이유를 모르고 쓰는 것 같다는 생각이 들었다.
사실 크롤링봇이 올바른 시멘틱 태그를 활용한 페이지들을 위주로 데이터를 수집한다는 정보를 알고 있다. 때문에 시멘틱 태그를 사용해야 한다고 공부를 처음 접했었지만 공부를 하다 보니 시멘틱 태그는 그저 단순히 그런 용도가 아닌 A11y(접근성)이 올바른 형태로 될 수 있도록 하기 위한 도구라는 것을 깨달았다.
하지만 불필요한 시멘틱 요소는 오히려 독이 될 수 있다.
즉, 내가 개발하는 페이지가 얼마나 다양하고 많은 사람들에게 도움 되는지를 따지기보단, 다양한 사람들이 내 페이지를 접근하는데 불편함이 없는지부터 따졌어야 한다는 것이다.
2. 개발자의 시선(AI에 대한 생각)
나는 늘 올바른 개발자는 어떻게 행동해야 할까, 내가 가지고 있는 기술이 매우 유용한 기술인데 이를 어떻게 하면 많은 사람들에게 이로운 영향력을 끼칠 수 있을까에 대해서 고민한다.
하지만 사실, 내가 모두에게 좋은 서비스를 제공하기 위해서 노력을 한다고 하더라도 해당 서비스가 사람들에게 있어서 불필요한 서비스일 경우 사용하지 않게 된다.
그렇기 때문에 나는 생각을 바꿔먹었다.
"유일해지지 말자", "우물 밖은 어차피 또 다른 우물이다"
유치한 단어들일 수 있다. 하지만, 과거에 코딩에 대해 뽕이 차오르고 어느 정도 실력이 올라오자 웬만한 기술들은 모두 개발을 할 수 있을 것 같은 기분이 들 때가 있었다.
그땐, 더 다양한 사람들을 만나서 나의 실력이 어느 정도인지 궁금했기에 현업들도 다니는 온라인 스터디에 들어갔고, 그때 난 이루 말할 수 없는 벽을 느꼈다.
난생처음 접해보는 코드와 방대한 데이터의 양, 그리고 그 스터디원들의 생각과 고찰은 정말 경험에서 나오는 내용들이었다.
그래서 난 현재 바이브 코딩을 멀리했다. 물론 그때도 약 5년 전이었기에 AI 기술이 도입되기 전이었다.
지금도 웹페이지를 개발하다 보면 GPT, cursor AI, Colde AI 등등 많은 AI들을 사용하지만 그들이 말하는 개발 코드는 보통 다른 정보를 주거나, 오류를 덮기 위해 코드를 더 추가하고 예외를 둬버리는 행동들을 많이 한다.
처음 아무것도 모를 땐 그저 AI가 알려주는 대로 정말 옳은 내용인지를 구분하지 않고 받아서 개발을 진행한 적도 많다.
하지만 바이브코딩을 넘어서 혼자 AI 없이 개발하는 경험을 늘리다 보니 점차 보안성, 접근성 등이 눈에 들어오기 시작했고, Injection 공격에 대한 방어 방법, 로컬 스토리지와 세션 스토리지의 구분 이유, 서버의 보안 방법 등등이 궁금해졌고 이는 아무것도 모르고 바이브 코딩을 진행하던 때와는 많이 다르단 걸 느꼈다.
AI는 절대 이런 걸 주문하지 않으면 알려주지 않는다. 하지만 사용자 또한 모른다면 AI에게 주문하지 않는다.
때문에 기본적이 header도 없고, meta tag도 없는 사이트들이 즐비하게 생성되는 것이다..
난 절대 그런 개발자가 되고 싶지 않다. AI를 반대하는 것이 아닌 활용하자. AI에게 생각 회로가 먹혀서 저런 내용들도 모르고 웹사이트에 접하고 웹 프로그래밍 개발자라는 것은 정말 부끄러운 소리라고 생각하기 때문이다.
3. 수많은 강사님을 만나며
이번에 [멋쟁이 사자처럼]에서 슬비 선생님을 만났다.
다른 강사님들은 간단하게 알려주던 HTML을 슬비 선생님은 장애라는 키워드부터 하나씩 알려주었다.
처음에는 장애에 대해서 왜 이렇게 깊게 알려주실까? 생각을 했지만 그건 내 짧은 생각이었다.
개발자가 다양한 사용자들에 대해서 이해를 하지 못한다면 어떻게 올바른 프로젝트를 달성할 수 있을까?
그저 웹사이트를 개발하는 개발자는 매우 많다. 하지만 그중에 장애라는 텍스트를 이해하고 접근성을 개발하는 개발자는 절반도 안될 것이다.
올바른 방향으로 나아가는 개발자가 되기 위해선 정말 0부터 100까지를 모두 다 알고 있어야 하며, 모른다고 해도 알기 위해 노력하는 것이 개발자의 정신일 것이다.
결론적으로 나는 수업을 들으며 내가 원하던 "개발자란 무엇일까?"에 대한 답을 어느 정도 찾아가고 있다.
우물 밖은 어차피 또 다른 우물 밖이라 계속해서 생각이 달라지고 변화하겠지만 현재로서 내가 생각할 때 미래가 가장 밝은 개발자는 위의 설명과 같다고 생각되었다.
'멋쟁이사자 처럼(Front-End 17기)' 카테고리의 다른 글
| [멋쟁이 사자처럼 부트캠프] + 프론트엔드 17기 - 개인회고 (0) | 2026.01.27 |
|---|---|
| [멋쟁이 사자처럼 부트캠프] + 프론트엔드 17기 - 회고팀 (0) | 2026.01.22 |
| [멋쟁이 사자처럼 부트캠프] - 비디오, 이미지 넣기 (1) | 2026.01.16 |
| [멋쟁이 사자처럼 부트캠프] - HTML 올바른 속성 사용 및 스크린리더를 고려한 개발방식 (1) | 2026.01.12 |
| [멋쟁이사자처럼 부트캠프] + 프론트엔드 17기 - Vite 환경 구성 / HTML이란 ? (1) | 2026.01.08 |