현재의 웹 표준
W3C
HTML5
WHATWG
HTML Living Standard
apple, google, ms , mozilla
HTML
→ 웹페이지를 작성하기 위한, 구조를 잡기 위한 언어,
웹 컨텐츠의 의미와 구조를 정의
hyper Text Markup Language
hyper Text ⇒ 하이퍼링크를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근 가능
Markup
<h1> 큰글자
<h2> 중간글자..
구글 효과라고 부른다language
태그 등을 이요해서 문서나 데이터의 구조를 명시하는 언어
프로그래밍 언어와는 다르게 단순하게 데이터를 표현만 한다.
기본구조
와 < body>로 구성됨<!DOCTYPE html>
<html lang ="ko">
<head>
<meta charset="UTF-8">
<tilte> 제목 </title>
</head>
<body>
<p> 내용 </p>
</body>
</html><head>
문서 제목 , 문자코드 와 같이 해당 문서 정보를 담고 있음. 브라우저에 나타나지 않음
CSS 선언 혹은 외부 로딩 파일 지정 가능
페이스북에서 만들었는데, 열지 않고도 대략적 내용 알 수 있음
<body>
브라우저 화면에 나타나는 정보로 실제 내용에 해당한다.
DOM 트리 : 버릇을 잘 들리자!
문서의 구조화된 표현을 제공 → 문서 구조, 스타일 내용 등을 변경할 수 있게 도움
web page의 객체 지향 표현
<body>
<h1> 제목 </h1>
<ul>
<li> 내용 </li>
</ul>
</body>요소
시작 태그와 종료 태그 사이에 내용으로 구성
요소는 중첩이 될 수 있음
오류를 반환하지 않고 그대로 출력
내용이 없는 태그들
- br hr img input link meta
속성
href ⇒ 속성명
"htt~" ⇒ 속성값
공백을 주면 안됨 , 쌍따옴표 사용!
- 속성을 통해 태그의 부가적인 정보를 설정할 수 있음
- 요소는 속성을 가질 수 있으며 경로나 크기와 같은 추가적인 정보를 제공
- 요소의 시작 태그에 작성하며 보통 이름과 값이 하나의 쌍으로 존재
- 태그와 상관없이 사용 가능한 속성들도 있음 → id, class, hidden, lang, style, tabindex, title
시맨틱 태그
-
검색엔진 등에 의미 있는 정보의 그룹을 태그로 표현
-
구역을 나누는 것 + 의미를 가지는 태그
-
Non semantic 예시> div span h1 table..
-
요소의 의미가 명확하기 때문에 코드의 가독성이 높아짐 , 유지 보수가 쉬움
-
메타태그, 시맨틱 태그 등을 통한 마크업을 효과적으로 활용해야 한다.
-
의미론적 요소를 담은 태그
- header : 문서 전체나 섹션의 헤더
- nav : 내비게이션
- aside : 사이드에 위치한 공간, 메인 콘텐츠와 관련성이 적은 콘텐츠
- section : 문서의 일반적인 구분, 컨텐츠의 그룹을 표현
- article : 문서, 페이지, 사이트 안에서 독립적으로 구분되는 영역
- footer : 문서 전체나 섹션의 마지막 부분
시맨틱 웹
웹 상에 존재하는 수많은 웹 페이지들에 메타 데이터를 부여, 기존의 단순한 데이터의 집합이던
웹 페이지를 의미와 관련성을 가지는 데이터 베이스로 구축함
<input>요소의 동작은 type에 따라 달라지므로 조심
실습시간
이미지 넣기
<header>
<a href="https://www.ssafy.com">
<img src="photo.png" alt="main img" width="300">
</a>
<h1>SSAFY 학생 건강설문</h1>
</header>이름 지역 체온
<selection>
<form action="#">
<이름>
<지역>
<체온>
<input type="submit" value="제출">
</form>
</selection> 이름
<div>
<label for="name"> 이름을 기재해주세요.</label><br>
<input type="text" id="name" name="name" autofocus>
</div>지역
<div>
<label for="region">지역을 선택해주세요.</label><br>
<select name="region" id="region" required>
<option value=" "> 선택</option>
<option value="서울"> 서울</option>
<option value="대전"> 대전</option>
<option value="광주"> 광주</option>
<option value="구미"> 구미</option>
<option value="부산" disabled> 부산</option>
</select>
</div>온도체크
<div>
<p> 온도를 체크</p>
<input type="radio" name="body-heat" id="normal" value="normal" checked>
<label for="normal">37도 미만</label><br>
<input type="radio" name="body-heat" id="warnig" value="warnging">
<label for="normal">37도 이상</label>
</div>