[1] 학습 내용
- HTML 문서의 기본 구조
- <!DOCTYPE html>로 문서의 버전을 선언하고, <html>, <head>, <body>의 3구성으로 HTML 문서를 작성함
- <title>은 검색 결과에서 사이트 이름이 되며, <meta charset="UTF-8">은 인코딩을 명시해 한글 깨짐 방지함
- 콘텐츠 태그 실습
- 텍스트 구성 태그: <h1>~<h6>, <p>, <br>, <hr> 등등
- 목록 태그: <ul>, <ol>, <li>를 사용한 순서/비순서 목록 실습
- 링크와 이미지: <a href="">로 외부 링크 연결, <img src="" alt="">로 이미지 표시 및 설명 제공
- 표(Table): <table>, <thead>, <tbody>, <tr>, <td>, <th> 태그를 이용해 프로필 정보 요약표를 직접 구성
- 강의 실습 예시 정리
<table>
<thead><tr><th colspan="2">프로필 정보</th></tr></thead>
<tbody>
<tr><td>이름</td><td></td></tr>
<tr><td>이메일</td><td></td></tr>
<tr><td>성별</td><td></td></tr>
</tbody>
</table>
[2] 웹 표준과 웹 접근성에 대한 이해
- 웹 표준
- HTML 코드는 브라우저마다 해석이 달라질 수 있기 때문에, W3C의 웹 표준을 지켜야 함
- 모든 태그는 반드시 닫아야 하며, 문법 오류가 없어야 다양한 디바이스(모바일, 태블릿 등)에서 호환성이 유지됨
- 예를 들어, <meta charset="UTF-8">을 사용해야 한글이 깨지지 않고 정확히 표시됨
[3] 검색 엔진 최적화(SEO) 개념
HTML 문서는 단순히 사람만 읽는 것이 아니라 검색 엔진도 읽고 해석할 수 있음
특징
- <title>과 <meta name="description">은 검색 결과 요약에 반영됨
- <h1> 태그는 문서의 핵심 제목으로, 반드시 1개만 사용
- <strong>, <em> 같은 강조 태그는 키워드로 인식됨
- <div>만으로 구성된 문서는 구조를 알기 어려워 검색엔진이 제대로 해석하지 못함
[클론 코딩 실습]
[4] 배운 점
HTML은 단순한 마크업이 아니라, 정보를 구조화하고 의미를 전달하며 모두가 접근 가능한 문서를 만드는 기초 설계라는 점을 이번 학습을 통해 확실히 느꼈다.또한 시맨틱 태그, 웹 접근성, 웹 표준, SEO 같은 개념들이 각각 따로 존재하는 것이 아니라 서로 유기적으로 얽혀 있다는 것도 알게 되었다.
특히, 클론 코딩이긴 하지만 페이지를 직접 만들어보면서 사용자들이 더 보기 편하고 한 눈에 확 들어올 수 있는 ui를 만들고 싶다는 생각을 하였다. 결과적으로, HTML은 겉보기에 단순하지만, 실제로는 UX와 SEO, 까지 엮여있는 언어라고 생각하였다.
본 후기는 [카카오엔터프라이즈x스나이퍼팩토리] 카카오클라우드로 배우는 AIaaS 마스터 클래스 (B-log) 리뷰로 작성 되었습니다.
'카카오클라우드 AIaaS 교육 > 클라우드 어플리케이션 개발' 카테고리의 다른 글
| [스나이퍼팩토리] AIaaS 마스터 클래스 8주차 DAY 35 - react (0) | 2025.05.19 |
|---|---|
| [스나이퍼팩토리] AIaaS 마스터 클래스 8주차 DAY 34 - react (0) | 2025.05.19 |
| [스나이퍼팩토리] AIaaS 마스터 클래스 8주차 DAY33 - react (0) | 2025.05.13 |
| [스나이퍼팩토리] AIaaS 마스터 클래스 8주차 DAY32 - js 심화 (2) (0) | 2025.05.13 |
| [스나이퍼팩토리] AIaaS 마스터 클래스 7주차 DAY31 - js 심화 (0) | 2025.05.09 |