HTML
06. 미디어요소
📢 예제파일 1. div 💡 🔗 ex1-34.html 교재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> <header>헤더</header> … 더 읽기
08. 폼요소
1. 폼요소 👁️🗨️ 🔗정보를 제출하기 위한 대화형 문서영역 태그 설명 속성(특성) form 입력양식 태그 action: data 를 전송할 서버주소 method: data 전송방법(get, post) fieldset form 요소를 그룹핑 legend fieldset의 제목 ex1-24.html <!DOCTYPE html> <html lang=”ko”> <head> <meta charset=”UTF-8″> <title>폼</title> </head> <body> <form action=”#” method=”post”> <fieldset> <legend>로그인</legend> ID : <input type=”text”> PW : <input type=”password”> </fieldset> … 더 읽기
07. 테이블요소
🗃️ 예제파일 : 1. table, tr, td 요소로 테이블 삽입하기 👁️🗨️ table 표를 만들때 사용하는 태그 문법 table>tr>td <table> <tr> <td></td> <td></td> </tr> </table> ex1-19.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>표</title> <style> table { width: 100%; border-collapse: collapse; } td { border: 1px solid #000; } </style> </head> <body> <table> <tr> <td>교과목</td> <td>점수</td> … 더 읽기
04. 문단과텍스트요소
1. html5 기본 구조 ex0-3.html <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>페이지타이틀</title> </head> <body> <h1>여기는 제목 입니다</h1> 여기는 문장입니다 </body> </html> 👁️🗨️ <!DOCTYPE> : 현재 문서가 HTML 문서 타입을 명시한다. (HTML5 문서 타입은 <!DOCTYPE html> 이다.) <html> : HTML 문서의 루트(root) 요소를 정의한다. <head> : HTML 문서의 메타데이터(metadata)를 정의한다. 메타데이터(metadata)란 HTML 문서에 대한 … 더 읽기
03. 문서구조
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. 기본규칙 요소는 … 더 읽기
02. 개발환경설정
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/ 💡 위 링크는 즐겨찾기 해두면 평생 씁니다. 특히 MDN 은 모든 HTML/CSS/JS 문법의 표준 레퍼런스. 2. VSCode 설치 대표적인 무료 코드 에디터. 설치 방법은 두 가지 — … 더 읽기
09. dialog
🔗MDN dialog 요소 <dialog> 는 모달 팝업 을 태그 한 줄로 구현할 수 있는 HTML 요소입니다. ESC 키로 창 닫기, 포커스 트랩, 배경 어둡게 처리(::backdrop) 등을 브라우저가 기본 제공 합니다. ✅ 2026년 현재 모든 메이저 브라우저(Chrome / Edge / Firefox / Safari) 가 <dialog> 를 지원합니다 (Baseline). 1. 기본형 구현 <dialog open> <p>스크립트 안써도 정말 … 더 읽기
01. aboutweb
1. 웹서비스란? 💡 웹서비스 = 인터넷을 통해 주고받는 정보·기능의 집합. 우리가 매일 쓰는 네이버, 유튜브, 인스타그램이 모두 웹서비스. 🐶 HTML 은 웹서비스의 근간이 되는 언어입니다. 웹은 두 주체가 만나는 곳입니다. 구분 설명 클라이언트(Client) 정보를 요청 하는 쪽. 우리가 쓰는 웹브라우저(Chrome, Edge, Safari 등). 서버(Server) 정보를 가지고 있다가 요청을 받으면 응답 하는 쪽. 24시간 켜져 있는 … 더 읽기