10. 웹접근성

1. 웹 접근성 교안 Info: 📜 기준 가이드라인 국제 — WCAG 2.2 (W3C, 2023.10 권고). 4대 원칙 POUR (Perceivable / Operable / Understandable / Robust) 와 새로 추가된 9개 기준 (Focus Not Obscured, Focus Appearance, Dragging Movements, Target Size 등). 한국 — KWCAG 2.2 (한국지능정보사회진흥원, 2022.12 개정). WCAG 2.1 을 기반으로 한국 환경에 맞춰 24개 … 더 읽기

6. 미디어요소

Info: 📢 예제파일 1. div Info: 💡 🔗div 교재83p <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>그룹 요소</title> <style> header{ width: 300px; margin: 0 auto; border: 1px solid #000; } section{ width: 300px; margin: 0 auto; border: 1px solid #333; } footer{ width: 300px; margin: 0 auto; border: 1px solid #999; } </style> </head> <body> … 더 읽기

8. 폼요소

1. 폼요소 Info: 👁️‍🗨️ 🔗정보를 제출하기 위한 대화형 문서영역 태그 설명 속성(특성) form 입력양식 태그 action: data 를 전송할 서버주소 method: data 전송방법(get, post) fieldset form 요소를 그룹핑 legend fieldset의 제목 “`html 폼 로그인 ID : PW : “` 2. input , type Info: 👁️‍🗨️ 🔗입력요소 Info: 👉 value="데이터값" name="백단용 데이터 식별자" id="디자인용 식별자" → … 더 읽기

7. 테이블요소

Info: 🗃️ 예제파일 : 1. table, tr, td 요소로 테이블 삽입하기 Info: 👁️‍🗨️ table 표를 만들때 사용하는 태그 문법 table>tr>td <table> <tr> <td></td> <td></td> </tr> </table> “`html 표 교과목 점수 HTML 93 CSS 92 평균 92.5 “` 2. 테이블 구조화 하기 Info: 👁️‍🗨️ 테이블을 구조적으로 작성하는 요소 작성하지 않아도 웹브라우저에서 교정해줍니다. thead와 tfoot의 마크업 순서가 … 더 읽기

5. 링크요소

Info: 📁 리소스파일 다운로드 1. figure 🔗MDN Info: 👁️‍🗨️ 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용 “`html 이미지 캡션 달기 이미지 캡션 달기 <figure> <figcaption>무한 커피 리필과 빵을 제공하는 책이 있는 카페에서. </figcaption> <img src="images/cafe1.jpg" width="316" height="241" alt="북 카페" /> </figure> <figure> <figcaption>동물을 주제로한 카페에서. </figcaption> <img src="images/cafe2.jpg" width="316" … 더 읽기

4. 문단과텍스트요소

1. html5 기본 구조 “`html 페이지타이틀 여기는 제목 입니다 여기는 문장입니다 “` Info: 👁️‍🗨️ <!DOCTYPE> : 현재 문서가 HTML 문서 타입을 명시한다. (HTML5 문서 타입은 <!DOCTYPE html> 이다.) <html> : HTML 문서의 루트(root) 요소를 정의한다. <head> : HTML 문서의 메타데이터(metadata)를 정의한다. 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다. 이러한 메타데이터는 <title>, <style>, <meta>, … 더 읽기

3. 문서구조

1. HTML5기본구성 🔗MDN head 요소에 포함할수 있는 요소들 요소명 설명 <meta> HTML 문서의 설명, 키워드 문서의 작성자 지정 <title> HTML 문서의 제목 지정 <link> 외부 CSS 파일을 연결할때 사용 <style> 내부 CSS 를 정의할때 사용 <script> 자바스크립트를 외부, 내부에 정의할때 사용 2. 유효성검사 HTML 유효성검사 : https://validator.w3.org/ CSS 유효성 검사 : https://jigsaw.w3.org/css-validator/ 3. 기본규칙 요소는 … 더 읽기

2. 개발환경설정

1. 관련 링크 항목 링크 HTML 표준 (WHATWG) https://html.spec.whatwg.org/ HTML 유효성 검사 https://validator.w3.org/ CSS 유효성 검사 https://jigsaw.w3.org/css-validator/ MDN Web Docs (한국어) https://developer.mozilla.org/ko/ Can I Use (브라우저 호환성) https://caniuse.com/ Info: 💡 위 링크는 즐겨찾기 해두면 평생 씁니다. 특히 MDN 은 모든 HTML/CSS/JS 문법의 표준 레퍼런스. 2. VSCode 설치 대표적인 무료 코드 에디터. 설치 방법은 두 가지 … 더 읽기

9. dialog

🔗MDN dialog 요소 <dialog> 는 모달 팝업 을 태그 한 줄로 구현할 수 있는 HTML 요소입니다. ESC 키로 창 닫기, 포커스 트랩, 배경 어둡게 처리(::backdrop) 등을 브라우저가 기본 제공 합니다. Info: ✅ 2026년 현재 모든 메이저 브라우저(Chrome / Edge / Firefox / Safari) 가 <dialog> 를 지원합니다 (Baseline). 1. 기본형 구현 <dialog open> <p>스크립트 안써도 … 더 읽기

1. aboutweb

1. 웹서비스란? Info: 💡 웹서비스 = 인터넷을 통해 주고받는 정보·기능의 집합. 우리가 매일 쓰는 네이버, 유튜브, 인스타그램이 모두 웹서비스. 🐶 HTML 은 웹서비스의 근간이 되는 언어입니다. 웹은 두 주체가 만나는 곳입니다. 구분 설명 클라이언트(Client) 정보를 요청 하는 쪽. 우리가 쓰는 웹브라우저(Chrome, Edge, Safari 등). 서버(Server) 정보를 가지고 있다가 요청을 받으면 응답 하는 쪽. 24시간 켜져 … 더 읽기