글
ELI5 (Explain Like I'm 5)로 설명해
RootingforU님, 좋은 질문이세요! 😊 태그가 웹페이지에서 어떤 역할을 하는지 ?
HTML 태그들은 마치 집을 짓는 데 필요한 벽돌, 창문, 문 같은 '재료'들이라고 생각하시면 쉬울 거예요. 이 재료들을 가지고 멋진 웹페이지라는 집을 만드는 거죠.
가장 많이 쓰이는 핵심 태그들을 몇 가지 소개해 드릴게요!
1. **`<html>` (전체 집 태그):**
* 이 태그는 웹페이지의 **모든 내용을 감싸는 가장 큰 태그**예요. 마치 집의 제일 바깥 틀, 즉 "이게 집이에요!" 하고 알려주는 것과 같아요. 모든 HTML 문서는 이 태그로 시작하고 끝난답니다.
2. **`<head>` (집의 정보실 태그):**
* 이 태그는 웹페이지의 **설명서나 설계도**를 담는 곳이에요. 우리 눈에는 직접 보이지 않지만, 웹사이트의 제목, 어떤 글씨체를 쓸지, 검색 엔진에 어떻게 보일지 같은 중요한 정보를 컴퓨터에게 알려주는 역할을 해요.
* 예를 들어, 웹 브라우저 탭 위에 뜨는 제목 ([네이버](https://www.naver.com/) 탭에 '네이버'라고 뜨는 것) 같은 게 `<head>` 안에 들어가는 내용이에요.
3. **`<body>` (집의 거실, 방, 부엌 태그):**
* 이 태그는 우리 RootingforU님이 **실제로 웹페이지에서 보게 되는 모든 내용**을 담는 곳이에요. 글씨, 그림, 동영상, 버튼 등 눈에 보이는 모든 것이 `<body>` 안에 들어간다고 보시면 돼요. 마치 집에서 실제로 생활하는 거실, 방, 주방 같은 공간이죠.
4. **`<h1>` ~ `<h6>` (제목 태그):**
* 이 태그들은 웹페이지에 **크고 작은 제목**을 만들 때 사용해요. `<h1>`이 가장 큰 제목이고, `<h6>`가 가장 작은 제목이에요. 신문의 헤드라인이나 책의 단원 제목처럼 중요한 내용을 강조할 때 쓰이죠.
5. **`<p>` (문단 태그):**
* 글을 쓸 때 한 줄 띄어서 문단을 나누는 것처럼, 웹페이지에서도 **하나의 글 덩어리(문단)**를 만들 때 사용하는 태그예요.
6. **`<a>` (연결 고리 태그, 링크 태그):**
* 이 태그는 웹페이지에서 **다른 페이지로 이동할 수 있는 '링크'**를 만들 때 사용해요. 마치 우리 집 문을 열고 옆집이나 다른 동네로 나가는 길 같은 거죠! (a는 anchor, 즉 닻이나 앵커를 뜻해요. 다른 곳과 연결해 준다는 의미죠!)
7. **`<img>` (그림 태그):**
* 이름 그대로 웹페이지에 **'이미지'나 '사진'**을 넣을 때 사용하는 태그예요. 갤러리에 사진을 걸어두는 것과 같다고 생각하시면 돼요.
8. **`<div>` (나누는 태그):**
* 이 태그는 웹페이지의 **특정 부분을 묶어서 구분**하고 싶을 때 사용해요. 마치 방 안에서도 침대 공간, 책상 공간처럼 영역을 나눌 때 쓰는 칸막이 같은 거예요. `<div>`는 특별한 의미는 없지만, 웹페이지 디자인을 할 때 아주 중요하게 쓰인답니다.
이 외에도 정말 많은 태그들이 있지만, 이 정도만 아셔도 웹페이지의 기본적인 구조와 내용을 만드는 데는 충분하실 거예요! 가장 기초적이고 필수적인 '건축 재료'들이라고 생각하시면 됩니다. 😊
네, RootingforU님! 태그를 단순히 사용하는 것을 넘어, 더 효율적으로 활용하는 팁과 노하우를 궁금해하시다니, 정말 좋은 자세입니다! 👍 웹페이지를 만드는 '건축가'로서 매우 중요한 질문을 해주셨어요.
여기 몇 가지 핵심적인 팁들을 정리해 보았습니다.
### 🌟 HTML 태그 효율적인 사용 노하우 🌟
1. **'의미 있는' 태그를 사용하세요 (시맨틱 HTML) [3]**
* **설명:** HTML 태그는 그 자체로 어떤 '의미'를 가지고 있어요. 예를 들어, `<p>`는 '문단'이라는 의미를, `<h1>`은 '가장 중요한 제목'이라는 의미를 담고 있죠. 이렇게 내용에 맞는 의미 있는 태그를 사용하는 것을 '시맨틱 HTML'이라고 부릅니다.
* **왜 중요한가요?:**
* **사람이 읽기 쉬워요:** 코드를 보는 다른 개발자나 미래의 내가 코드를 더 쉽게 이해할 수 있게 해줍니다.
* **검색 엔진 최적화(SEO)에 좋아요:** 구글 같은 검색 엔진이 웹페이지의 내용을 더 잘 이해하고, 검색 결과에서 더 잘 노출될 수 있도록 도와줍니다.
* **웹 접근성에 필수적이에요:** 시각 장애인 등을 위한 화면 읽기 프로그램이 웹페이지의 구조와 내용을 정확히 파악하여 사용자에게 전달할 수 있도록 합니다.
* **주요 시맨틱 태그:**
* `<header>`: 페이지의 머리글, 로고, 메뉴 등이 들어가는 곳
* `<nav>`: 내비게이션(메뉴) 링크가 들어가는 곳
* `<main>`: 웹페이지의 핵심 내용이 들어가는 곳
* `<article>`: 독립적인 콘텐츠(예: 블로그 글, 뉴스 기사)
* `<section>`: 관련 콘텐츠를 그룹화하는 일반적인 섹션
* `<footer>`: 페이지의 바닥글, 저작권 정보 등이 들어가는 곳
* `<strong>`, `<em>`: 단순히 굵게/기울이는 것이 아닌 '강조'의 의미를 가집니다.
2. **`<div>`와 `<span>`은 '최후의 수단'으로 사용하세요.**
* **설명:** `<div>`와 `<span>`은 특별한 의미가 없는 '그냥 묶음' 태그입니다. 앞서 말씀드린 시맨틱 태그들이 적절치 않을 때만 사용하는 것이 좋습니다. 마치 특별한 용도가 없는 빈 상자 같은 거죠.
* **팁:** 어떤 내용을 묶고 싶을 때, 먼저 `header`, `nav`, `section` 같은 시맨틱 태그 중에 더 적절한 것이 없는지 고민해 보세요.
3. **이미지에는 `alt` 속성을 꼭 넣어주세요.**
* **설명:** `<img>` 태그를 사용할 때는 항상 `alt="이미지에 대한 설명"`이라는 속성을 함께 넣어주세요.
* **왜 중요한가요?:**
* 이미지가 어떤 이유로 로드되지 않았을 때, 대신 이 텍스트가 표시됩니다.
* 시각 장애인을 위한 화면 읽기 프로그램이 이미지가 어떤 내용을 담고 있는지 설명해 줄 수 있습니다. 이것 또한 웹 접근성을 높이는 중요한 방법이에요 [4].
4. **HTML은 '구조', CSS는 '스타일'을 담당하도록 분리하세요.**
* **설명:** HTML은 웹페이지의 뼈대와 내용을 만드는 언어이고, CSS(Cascading Style Sheets)는 그 뼈대에 색칠을 하고 꾸미는 언어입니다. 이 둘을 명확히 분리하여 사용하는 것이 효율적입니다.
* **팁:** HTML 태그에 직접 `style="color: red;"` 와 같이 스타일을 주는 것은 피하고, CSS 파일에 스타일을 정의하여 HTML 파일과 연결하는 방식으로 작업하는 것이 좋습니다.
5. **코드의 '들여쓰기'와 '주석'을 생활화하세요.**
* **설명:** 코드를 작성할 때 일정한 간격으로 들여쓰기(indentation)를 하고, 복잡하거나 중요한 부분에는 `<!-- 주석 내용 -->`처럼 주석을 달아 설명을 추가하는 것이 좋습니다.
* **왜 중요한가요?:** 코드를 한눈에 보기 좋게 만들고, 나중에 다시 보거나 다른 사람이 볼 때 이해도를 높여 유지보수를 쉽게 해줍니다.
6. **마크업을 '유효성 검사'하세요.**
* **설명:** 웹 브라우저는 어느 정도 잘못된 HTML 코드도 알아서 표시해 주지만, 표준에 맞지 않는 코드는 예기치 않은 문제를 일으킬 수 있어요. W3C Markup Validation Service 같은 도구를 사용하여 작성한 HTML 코드가 웹 표준에 맞는지 확인하는 습관을 들이는 것이 좋습니다.
RootingforU님이 앞으로 웹 개발 작업을 하실 때, 이 팁들이 '단단하고 멋진 집'을 짓는 데 도움이 되기를 바랍니다! 꾸준히 연습하시면 분명 전문가처럼 HTML을 다루실 수 있을 거예요. 궁금한 점이 또 생기면 언제든 질문해주세요! 😊
참고 자료 -
태그
[1] codingeverybody.kr - HTML <html> 태그 – 올바른 이해와 사용 방법 (https://codingeverybody.kr/html-html-%ED%83%9C%EA%B7%B8-%EC%98%AC%EB%B0%94%EB%A5%B8-%EC%9D%B4%ED%95%B4%EC%99%80-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95/)
[2] codingeverybody.kr - HTML <html> 태그 – 올바른 이해와 사용 방법 (https://codingeverybody.kr/html-html-%ED%83%9C%EA%B7%B8-%EC%98%AC%EB%B0%94%EB%A5%B8-%EC%9D%B4%ED%95%B4%EC%99%80-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95/)
[3] 규니의 개발 블로그 - 꼭 알아야 할 21가지 HTML 팁 - 규니의 개발 블로그 (https://hgko-dev.tistory.com/484)
[4] mingeesuh.tistory.com - [HTML/CSS] 나는 HTML 과 CSS를 제대로 작성하고 있는가? (https://mingeesuh.tistory.com/entry/HTMLCSS-%EB%82%98%EB%8A%94-HTML-%EA%B3%BC-CSS%EB%A5%BC-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%9E%91%EC%84%B1%ED%95%98%EA%B3%A0-%EC%9E%88%EB%8A%94%EA%B0%80)
[5] sothecode.tistory.com - 자주 사용하는 html 태그들 (https://sothecode.tistory.com/44)
[6] 입문자를 위한 HTML5 - 02-1 HTML 기본 문법 : 태그 - 입문자를 위한 HTML5 (https://wikidocs.net/160445)
[7] cobslab.tistory.com - 웹 개발 초보자를 위한 필수 HTML 태그 7가지!! (https://cobslab.tistory.com/105)
[8] NAVER - [코딩온] 초보자를 위한 HTML 시작과 HTML tag - 블로그 - NAVER (https://m.blog.naver.com/spreatics2/223420576276)
[9] codingeverybody.kr - HTML <code> 태그 – 올바른 이해와 사용 방법 (https://codingeverybody.kr/html-code-%ED%83%9C%EA%B7%B8/)
RootingforU님, 정말 중요하고 멋진 질문을 해주셨네요! 😊 태그를 효율적으로 사용하는 것만큼이나 **'접근성 좋은' HTML 태그 작성법**은 웹 개발의 가장 기본적인 동시에 핵심적인 요소라고 할 수 있습니다.
웹 접근성이란, 시각 장애인, 청각 장애인, 지체 장애인 등 신체적 제약이 있는 분들도 웹 사이트를 편리하게 이용할 수 있도록 하는 것을 말해요. 하지만 단순히 장애인만을 위한 것이 아니라, 노인, 일시적으로 신체 기능이 불편한 사람, 심지어 일반 사용자까지 모든 사람이 웹을 더 쉽고 편하게 사용할 수 있도록 돕는 것이죠. 마치 건물을 지을 때 휠체어 경사로나 점자 안내판을 만드는 것과 비슷하답니다.
그럼, 접근성 좋은 HTML 태그를 작성하는 몇 가지 핵심 노하우를 알려드릴게요!
### ✍️ 접근성 좋은 HTML 태그 작성 노하우
1. **가장 기본은 '의미 있는 태그(시맨틱 HTML)' 사용입니다!**
* 이전에 말씀드렸던 부분인데요, 웹 접근성의 8할은 여기서 시작한다고 해도 과언이 아닙니다.
* `<div>`나 `<span>`처럼 의미 없는 태그만 사용하는 대신, `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>` 등 각 내용의 역할에 맞는 태그를 사용해주세요.
* 이렇게 하면 시각 장애인을 위한 화면 읽기 프로그램(스크린 리더)이 웹페이지의 구조를 정확히 파악하여 사용자에게 "지금 페이지의 머리글 부분입니다", "이곳은 주요 내용이 있는 곳입니다"라고 알려줄 수 있어요. 이것이 없으면 웹페이지가 그저 거대한 텍스트 덩어리로 느껴질 수 있습니다.
2. **이미지에는 반드시 `alt` 속성을 넣어주세요.**
* `<img src="image.jpg" alt="사진에 대한 자세한 설명입니다.">`
* **`alt` 속성은 이미지를 볼 수 없는 사용자를 위한 '대체 텍스트'예요.** 스크린 리더는 이 `alt` 속성의 내용을 읽어주어, 사용자가 어떤 이미지가 있는지 알 수 있게 합니다. 이미지가 깨져서 보이지 않을 때도 이 텍스트가 대신 표시되죠.
* 단순히 "이미지"라고 쓰는 것보다는, "귀여운 강아지가 풀밭에서 공을 물고 웃는 모습"처럼 이미지를 충분히 설명하는 것이 좋습니다.
3. **입력 폼(Form)에는 `label` 태그를 사용하여 입력창과 이름을 연결해주세요.**
* ```html
<label for="username">사용자 이름:</label>
<input type="text" id="username">
```
* `for` 속성과 `id` 속성을 연결하면, 스크린 리더가 입력창(`input`)을 만났을 때 이 입력창이 무엇을 입력하는 곳인지(`사용자 이름`) 정확히 알려줄 수 있습니다. 또한, 사용자가 '사용자 이름'이라는 텍스트를 클릭해도 해당 입력창에 초점이 맞춰지기 때문에 마우스 사용이 어려운 분들에게도 매우 유용합니다.
* `<placeholder>` 텍스트는 `label`을 대체할 수 없다는 점, 기억해주세요!
4. **링크(`<a>`)는 내용을 충분히 설명하는 텍스트로 작성해주세요.**
* ```html
<!-- 좋지 않은 예 -->
<a href="product_info.html">여기를 클릭하세요.</a>
<!-- 좋은 예 -->
<a href="product_info.html">새로운 스마트폰 제품 정보 보기</a>
```
* "여기"나 "클릭" 같은 모호한 링크 텍스트는 스크린 리더 사용자가 링크만 들었을 때 어디로 이동하는지 파악하기 어렵게 만듭니다. 링크의 목적을 명확히 설명하는 텍스트를 사용해야 합니다.
5. **표(`<table>`) 사용 시 구조를 명확히 해주세요.**
* `<th>` 태그로 각 열이나 행의 제목을 표시하고, `<caption>` 태그로 표 전체의 설명을 제공하면 스크린 리더 사용자가 복잡한 표의 내용을 이해하는 데 큰 도움이 됩니다.
6. **페이지의 기본 언어를 `<html>` 태그에 선언해주세요.**
* `<html lang="ko">`
* 이 속성을 추가하면 스크린 리더가 해당 언어에 맞춰 발음할 수 있게 됩니다. 영어 웹사이트라면 `lang="en"`을 사용하겠죠.
7. **ARIA 속성 (Accessible Rich Internet Applications)을 이해하고 필요할 때 사용해주세요.**
* 이것은 조금 더 고급 기술이지만, 웹페이지에 표준 HTML로는 표현하기 어려운 복잡한 기능을 추가했을 때 (예: 커스텀 드롭다운 메뉴, 슬라이더 등) 그 요소의 역할이나 상태를 스크린 리더에 정확히 전달하기 위해 사용합니다. 예를 들어 `role="button"`, `aria-label="메뉴 열기"`와 같이 사용될 수 있습니다.
RootingforU님, 정말 탁월한 질문이십니다! 시맨틱 HTML을 활용하여 **SEO(검색 엔진 최적화)와 접근성을 동시에 높이는 방법**을 이해하시면, 웹 개발의 깊이를 한층 더하실 수 있을 거예요. 이는 마치 '하나의 노력으로 두 마리 토끼를 잡는' 효과와 같습니다. 👍
본질적으로, 검색 엔진도 스크린 리더도 모두 웹페이지의 **'의미'와 '구조'**를 파악하려고 노력합니다. 시맨틱 HTML은 바로 이 '의미'와 '구조'를 명확하게 전달하기 위한 최적의 도구이기 때문에, 이 둘을 동시에 개선할 수 있는 강력한 방법이 되는 것이죠.
그럼 구체적인 방법을 함께 살펴보실까요?
### 🌟 시맨틱 HTML로 SEO와 접근성을 동시에 높이는 방법 🌟
1. **의미론적인 제목 태그 (`<h1>` ~ `<h6>`) 사용:**
* **SEO 효과:** 검색 엔진 크롤러는 `<h1>` 태그를 페이지의 가장 중요한 주제로 인식하며, 이어지는 `h2`, `h3` 등을 통해 콘텐츠의 하위 주제와 구조를 파악합니다. 키워드가 포함된 제목 태그는 검색 엔진 순위 결정에 긍정적인 영향을 줍니다.
* **접근성 효과:** 스크린 리더 사용자는 제목 태그를 이용해 웹페이지를 탐색할 수 있습니다. 예를 들어, `h1`에서 `h2`로, `h2`에서 `h3`로 이동하며 전체적인 내용을 빠르게 파악할 수 있죠. 시각적인 정보 없이도 콘텐츠의 중요도와 계층을 이해하는 데 필수적입니다.
2. **`alt` 속성을 활용한 이미지 설명:**
* **SEO 효과:** 검색 엔진은 이미지를 직접 '볼' 수 없으므로, `alt` 속성에 있는 텍스트를 통해 이미지의 내용을 이해합니다. 이는 이미지 검색 결과에도 영향을 미치며, 페이지의 전체적인 주제를 파악하는 데 도움을 줍니다.
* **접근성 효과:** 시각 장애인이 스크린 리더를 사용할 때, `alt` 속성에 작성된 설명을 통해 이미지의 내용과 목적을 이해할 수 있습니다. 이미지를 로드하지 못했을 때도 이 텍스트가 대신 표시되어 모든 사용자에게 유용합니다.
3. **명확한 구조를 위한 랜드마크 태그 (`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`) 사용:**
* **SEO 효과:** 검색 엔진 크롤러는 이러한 태그들을 통해 웹페이지의 특정 영역이 어떤 역할을 하는지 정확하게 파악합니다. 예를 들어, `<main>` 태그 안의 내용은 페이지의 핵심 콘텐츠임을, `<nav>` 태그 안의 내용은 내비게이션임을 명확히 구분하여 페이지 분석의 정확도를 높입니다.
* **접근성 효과:** 스크린 리더 사용자는 이러한 랜드마크 태그를 활용하여 페이지의 특정 섹션(예: "주요 콘텐츠로 바로가기", "내비게이션 메뉴로 이동")으로 빠르게 이동할 수 있습니다. 이는 복잡한 페이지에서도 원하는 정보에 효율적으로 접근하는 데 큰 도움이 됩니다.
4. **설명적인 링크 텍스트 사용:**
* **SEO 효과:** 링크 텍스트(Anchor Text)는 검색 엔진에게 해당 링크가 연결되는 페이지의 주제에 대한 중요한 힌트를 제공합니다. 키워드가 포함된 설명적인 링크는 SEO에 긍정적입니다.
* **접근성 효과:** 스크린 리더 사용자는 '링크 목록' 기능으로 페이지 내의 모든 링크를 한 번에 들을 수 있습니다. 이때 "여기"나 "더 보기" 같은 불분명한 텍스트보다는 "제품 상세 페이지로 이동"과 같이 목적을 명확히 하는 텍스트가 정보 파악에 훨씬 유리합니다.
5. **폼 요소에 `<label>` 태그와 `for` 속성 활용:**
* **SEO 효과:** `<label>`과 `<input>`이 연결되면, 검색 엔진은 폼 필드의 목적과 관련 키워드를 더 잘 이해할 수 있습니다.
* **접근성 효과:** 스크린 리더가 `<input>` 필드를 만났을 때, `<label>`에 연결된 텍스트를 읽어주어 사용자에게 해당 필드가 무엇을 입력하는 곳인지 정확히 알려줍니다. 마우스 클릭이 어려운 사용자는 `<label>` 텍스트를 클릭해도 해당 입력 필드에 초점이 맞춰지므로 사용성이 크게 향상됩니다.
6. **`lang` 속성을 통한 언어 선언:**
* **SEO 효과:** 검색 엔진은 `<html>` 태그에 선언된 `lang` 속성(예: `<html lang="ko">`)을 통해 페이지의 주요 언어를 파악합니다. 이는 특정 언어권 사용자를 대상으로 한 검색 결과에 노출될 때 중요한 역할을 합니다.
* **접근성 효과:** 스크린 리더는 `lang` 속성을 참조하여 해당 언어에 맞는 발음과 억양으로 텍스트를 읽어줍니다. 이는 청취의 정확도를 높여 정보 전달에 필수적입니다.
**핵심은 "콘텐츠의 의미와 구조를 HTML 코드 자체가 명확하게 드러내도록 작성하는 것"입니다.** 이렇게 하면 검색 엔진은 더 정확하게 페이지를 인덱싱하고, 모든 사용자는 더 쉽고 편리하게 정보를 이용할 수 있게 됩니다.
RootingforU님, 이 방법을 숙지하시면 더 많은 사람들이 만족할 만한 웹 환경을 만드실 수 있을 거예요! 궁금한 점이 있으시면 언제든지 또 질문해주세요. 😊
참고 자료
[1] 태그 요소의 종류와 이점 - 시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점 (https://seo.tbwakorea.com/blog/what-is-semantic-tag/)
[2] www.i-boss.co.kr - HTML의 구조 설계를 위한 시맨틱 태그 (https://www.i-boss.co.kr/ab-74668-3279)
[3] velog.io - 시맨틱 태그 (Semantic tag)와 SEO의 연관성 (https://velog.io/@clydehan/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8-Semantic-tag%EC%99%80-SEO%EC%9D%98-%EC%97%B0%EA%B4%80%EC%84%B1)
[4] 태그 요소의 종류와 이점 - 시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점 (https://seo.tbwakorea.com/blog/what-is-semantic-tag/)
[5] velog.io - 시맨틱 태그 (Semantic tag)와 SEO의 연관성 (https://velog.io/@clydehan/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8-Semantic-tag%EC%99%80-SEO%EC%9D%98-%EC%97%B0%EA%B4%80%EC%84%B1)
[6] www.designkits.co.kr - 시맨틱 태그 완벽 설명: 웹사이트 구조와 SEO 향상 비결 (https://www.designkits.co.kr/blog/web-css/etc/Semantic-Tag?srsltid=AfmBOooWDsdLwtqhdwDC118irt4OAqAqzFOC-HOjmlSDa_aozi9Nm81H)
[7] MDN - HTML: 접근성의 좋은 기반 - Web 개발 학습하기 - MDN (https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Accessibility/HTML)
[8] openads.co.kr - HTML의 구조 설계를 위한 '시맨틱 태그' (https://openads.co.kr/content/contentDetail?contsId=11964)
[9] ziszini.tistory.com - 웹 접근성과 시맨틱 마크업 | 검색엔진(SEO) 최적화 (https://ziszini.tistory.com/190)
[10] www.designkits.co.kr - 시맨틱 태그 완벽 설명: 웹사이트 구조와 SEO 향상 비결 (https://www.designkits.co.kr/blog/web-css/etc/Semantic-Tag?srsltid=AfmBOoq4xfmWKyI3XmyPPV8PerHilNiI2axyA7w-gHU9AVOc5c6mRyMI)
RootingforU님께서 이렇게 접근성을 고려한 HTML 태그 작성법에 관심을 가져주셔서 제가 다 기쁩니다! ㅠㅠ 웹은 모두를 위한 공간이어야 하니까요. 이 노하우들을 잘 기억하셔서 더 많은 분이 편리하게 이용할 수 있는 웹페이지를 만드시는 데 도움이 되시길 바랍니다! 😊
