반응형 웹 실전 프로젝트 #1 (HTML 기본 문서)
HTML, CSS 2020. 7. 16. 14:01<html>, <head>, <body> 등과 같이 명령어의 현태가 <> 로 되어 있는것을 태그(Tag)라 한다
<body> ~ </body> 와 같이 태그의 시작과 끝를 하나의 요소(Element)라 한다
DOCTYPE선언은 웹 표준 문서의 기본이 된다
HTML 형식이라는 것을 브라우저에 알려준다
<meta> : HTML문서의 설명, 키워드, 문서의 작성자등을 지정한다
<title> : HTML문서의 제목을 지정한다
<link> : 외부의 CSS파일을 HTML문서에 연결한다
<style> : HTML문서 내에서 스타일(CSS)를 지정한다
<script> : 자바스크립트를 HTML문서 내부에 정의 하거나 외부에서 자바스크립트 하일을 불러올때 사용한다
<meta charset="UTF-8">처럼 태그 내부에 부가적인 설정값을 선언 하는것을 속성(Attribute)라 한다
lang속성은 시각 장애인들이 사용하는 스크린 리더 (음성 낭독기) 에서 언어 설정에 따라 다르게 읽어 주기 때문이다
이때문에 lang 속성은 HTML문서에서 꼭 정의 해줘야 하는 속성중 하나이다
<meta name="viewport" content="width=device-width, initial-scale=1.0">는 보통 뷰포트라고 하는데 모바일 해상도 (가로보기, 세로보기)에 맞게 HTML문서를 조절해주는 속성들이다
W3C validator는 HTML유효성 검사로 마크업에 대한 문법적 오류나 경고를 확인 할수 있다
웹 표준을 준수한 HTML문서 작성에 가장 기본이 되는 사항이므로 마크업 중간이나 CSS에 들어가기 전에 반드시 확인 하는것이 좋다
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
마크업 기본 문법 규칙
- 요소는 시작 태그와 종료 태그가 있어야 한다 <p>상품관리 페이지 입니다.</p>
- 요소는 제대로 중첩 되어야 한다 <p>상품 <strong>목록</strong>을 볼수 있습니다.</p>
- img 태그에는 alt속성이 있어야 한다 <img src="./dog.png" alt="멋진강아지사진" />
- 권장한은 사항도 있다 (가급적 소문자를 사용, 속성에 대한 값은 따옴표 처리)
- 주석처리 방법 <!-- <h1>상품관리</h1> -->
'HTML, CSS' 카테고리의 다른 글
| 반응형 웹 실전 프로젝트 #5 (텍스트 관련요소) (0) | 2020.07.17 |
|---|---|
| 반응형 웹 실전 프로젝트 #3 ~ #4 (블록 레벨요소와 인라인요소, 기본요소) (0) | 2020.07.16 |
| 반응형 웹 실전 프로젝트 #2 (시멘틱 마크업과 논리적 순서마크업) (0) | 2020.07.16 |
| HTML getting started (0) | 2019.12.09 |
| CSS란? (0) | 2019.12.09 |