웹 페이지 제작
1. 일반 텍스트 파일의 확장자를 *.html로 변경하여 사용
2. 웹 페이지를 구성하기 위한 정형화된 형식의 내용(=소스코드)을 기술 -> 코딩
3. 웹 페이지를 제작하기 위한 소스코드
HTML + CSS + Javascript의 조합으로 구성
웹 접근성
모든 사람 (혹은 모든 기기)는 정보의 접근에 차별을 받지 않아야 한다.
장애인 차별 금지법에 명시되어 있음
시멘틱 웹
HTML 태그를 강조할 목적에 맞게 사용하여 기계가 이해할 수 있도록 의미를 부여한 형태
시멘틱 웹으로 작성된 웹 페이지는 시각장애인용 웹 브라우저(스크린리더)를 활용하여 웹 페이지 탐색이 가능하다
웹 표준
1. 올바른 시멘틱 웹을 구성할 수 있도록 권장되는 HTML 제작기법
2. 웹 표준이 준수될 경우 기기의 종류를 가리지 않고 모두 동일한 형태의 결과를 확인할 수 있기 때문에 접근성이 확보된다.
HTML
1. 웹 페이지를 구성하는 기본 골격을 만드는 언어
2. 특정 단어나 문장을 태그라는 형식으로 강조하는 형태로 구성 된다.
<태그 속성="값" 속성="값">강조할 내용</태그>
3. HTML 태그는 내용 강조할 목적에 따라 종류가 구분되어 있다.
Ex) h1-> 제목, p-> 본문 등...
HTML 페이지 기본 구조
<!doctype html> <- HTML5 버전 선언
<html> <- 전체 웹 페이지 영역 정의
<head>
<- 페이지 특성 설정 부분
</head>
<body>
<- 웹 브라우저에 표시되는 부분
</body>
</html>
<body> 안에 기술되는 내용(1)
단락 나누기
제목
<h1~6>내용</h1~6>
숫자가 작을 수록 큰 수준
본문
<p>내용</p>
1. 본문안에 다른 본문 중첩 사용가능
<p><p> ... </p></p>
2. 두 개 이상의 본문을 연속적으로 사용 가능. 각 문단간에는 여백이 형성됨
<p> ... </p> <p> ... </p>
목록
1. 목록의 영역 정의
순서없는 목록 : <ul> ~ </ul>
순서있는 목록 : <ol> ~ </ol>
2. 목록의 영역 안에 항목 나열
<li> 내용 </li>
3. 항목 안에서는 독립적인 본문을 구성할 수 있다.
p, div, h(n) 태그 사용 가능
4. 항복 안에서는 새로운 목록을 하위 요소로 포함할 수 있다
<li> 태그 안에서 새롭게 <ul> 이나 <ol> 태그를 시작할 수 있따는 의미
<ul | ol>
<li>
<ul | ol> ... </ul | ol>
</li>
</ul | ol>
'Frontend > HTML' 카테고리의 다른 글
| 입력양식 (form) (0) | 2019.01.15 |
|---|---|
| 멀티미디어 첨부 (0) | 2019.01.15 |
| 멀티미디어 (0) | 2019.01.10 |
| live-server 설치 (0) | 2019.01.08 |
| Sublime Emmet Snippet 설정 (0) | 2019.01.08 |
