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개 … 더 읽기
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> … 더 읽기
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" … 더 읽기
1. html5 기본 구조 “`html 페이지타이틀 여기는 제목 입니다 여기는 문장입니다 “` Info: 👁️🗨️ <!DOCTYPE> : 현재 문서가 HTML 문서 타입을 명시한다. (HTML5 문서 타입은 <!DOCTYPE html> 이다.) <html> : HTML 문서의 루트(root) 요소를 정의한다. <head> : HTML 문서의 메타데이터(metadata)를 정의한다. 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다. 이러한 메타데이터는 <title>, <style>, <meta>, … 더 읽기
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. 기본규칙 요소는 … 더 읽기
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 설치 대표적인 무료 코드 에디터. 설치 방법은 두 가지 … 더 읽기
1. 웹서비스란? Info: 💡 웹서비스 = 인터넷을 통해 주고받는 정보·기능의 집합. 우리가 매일 쓰는 네이버, 유튜브, 인스타그램이 모두 웹서비스. 🐶 HTML 은 웹서비스의 근간이 되는 언어입니다. 웹은 두 주체가 만나는 곳입니다. 구분 설명 클라이언트(Client) 정보를 요청 하는 쪽. 우리가 쓰는 웹브라우저(Chrome, Edge, Safari 등). 서버(Server) 정보를 가지고 있다가 요청을 받으면 응답 하는 쪽. 24시간 켜져 … 더 읽기