웹 프로그래밍 튜토리얼 | PoiemaWeb
Front-end Development Tutorial
poiemaweb.com
#1.2 HTML5 Introduction & Syntax
HTML5 기본 문법
요약 :
1. HTML5
HTML(HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다.
웹페이지의 내용(content)과 구조(structure)를 담당하는 언어로써
HTML 태그를 통해 정보를 구조화하는 것이다.
HTML5에 추가된 기능들
멀티미디어(Multimedia) - 비디오 및 오디오 기능 자체적 지원
그래픽(Graphics & Effects) - 2차원 그래픽과 3차원 그래픽 지원
통신(Connectivity) - 서버와의 소켓 통신을 통한 양방향 통신 가능
디바이스 접근(Device acess) - 하드웨어 기능을 직접적으로 제어 가능
오프라인 및 저장소(Offline & Storage) - 오프라인 상태에서도 애플리케이션 동작 가능
시맨틱 태그(Semantics) - 브라우저, 검색엔진, 개발자 모두에게 컨텐츠의 의미를 명확히 설명
CSS3 - CSS3 완벽 지원
2. Hello HTML5
반드시 <!DOCTYPE html>로 시작, 문서형식 : HTML5
실제적인 HTML document는 2행부터 시작. <html>, </html> 사이에 기술.
<head>, </head> 사이에 document title, 외부파일 참조, 메타데이터의 설정 등이 위치. -> 브라우저에 표시 x
<body>, </body> 사이에 있는 요소들이 브라우저에 표시된다.
예시 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>안녕하세요! HTML5</p>
</body>
</html>Hello World
안녕하세요! HTML5
HTML document는 .html 확장자를 갖는 순수한 텍스트 파일이다.
메모장 등으로도 편집할 수 있으나
다양한 편의 기능을 제공하는 editor 또는 IDE(Integrated:통합된 Development Environment)를 사용한다.
예시 : Visual Studio Code
3. HTML5의 기본 문법
3.1 요소 (Element)
HTML 요소는 시작 태그(start tag), 종료 태그 (end tag), 태그 사이에 위치한 content로 구성.
예시 : <p>Hello</p>
HTML document는 요소들의 집합으로 이루어짐.
태그는 소문자를 사용하는 것이 일반적. (W3C : World Wide Web Consortium:컨소시엄, 협력단)
3.1.1 요소의 중첩 (Nest:둥지를 틀다ed Element)
요소는 다른 요소를 포함할 수 있다.
이때 부자관계가 성립된다.
이러한 부자관계로 정보를 구조화한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>안녕하세요</h1>
<p>반갑습니다!</p>
</body>
</html>안녕하세요
반갑습니다!
html 요소는 웹페이지를 구성하는 모든 요소들을 포함한다.
위 예제에서 html 요소는 body 요소를 포함하며
body 요소는 h1, p 요소를 포함한다.
이러한 중첩 관계(부자 관계)로 웹페이지의 구조(structure)를 표현한다.
중첩 관계(부자 관계)를 시각적으로 파악하기 쉽게
indent(들여쓰기)를 활용한다.
3.1.2 빈 요소 (Empty Element or Self-Closing element)
content를 가질 수 없는 요소.
빈 요소는 content가 필요 없으며 어트리뷰트(Attribute)만을 가질 수 있다.
<meta charset="utf-8">
예시 : br, hr, img, input, link, meta
? : 요소가 없기 때문에 시작 태그, 종료 태그도 필요 없는 건가?
요소 : 시작태그, content, 종료태그
빈요소는 1. content가 필요 없다, 2. self-closing element-> content와 종료태그가 필요없다.=> 시작태그, Attribute로 구성
element / content 구분
3.2 어트리뷰트 (Attribute 속성) cf) contribute : 기여하다
요소의 성질, 특징을 정의하는 명세.
요소는 어트리뷰트를 가질 수 있으며
어트리뷰트는 요소에 추가적인 정보를 제공한다.
예시 : 이미지 파일의 경로, 크기 등
어트리뷰트는 시작 태그에 위치해야 하며
이름과 값의 쌍을 이룬다.
예시 : <img src(Attribute Name) ="html.png"(Attribute Value)>
<img src="html.jpg" width="104" height="142">콤마가 따로 없네
위의 예에서 어트리뷰트 src는
이미지 파일의 경로와 파일명을 브라우저에 알려주고
width는 이미지의 너비, height는 이미지의 높이 정보를
브라우저에 알려준다.
3.2.1 글로벌 어트리뷰트 (HTML Global Attribute)
모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트.
몇몇 요소에는 효과가 적용되지 않을 수 있다.
예시 :
id - 유일한 식별자(id)를 요소에 지정. 중복 지정 불가.
class - 스타일시트에 정의된 class를 요소에 지정. 중복 지정 가능.
hidden - css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
lang - 지정된 요소의 언어를 지정. 검색엔진 크롤링 시 웹페이지의 언어를 인식할 수 있게 함.
style - 요소에 인라인 스타일을 지정한다.
tabindex - 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정.
title - 요소에 관한 제목 지정.
3.3 주석 (Comments)
개발자에게 코드를 설명하기 위해 사용 됨.
브라우저는 주석을 화면에 표시하지 않는다.
<!--주석은 화면에 표시되지 않는다.-->
<p>Lorem ipsum dolor sit amet</p>Lorem ipsum dolor sit amet
4. HTML History
1989.06 - 팀 버너스리가 설계/개발
2014.10 - HTML5 최종 표준안 공개
느낀점 :
일일이 타이핑 하기 힘들긴 한데
확실히 이해가 되긴 한다.
2번 읽어보고 타이핑 했는데
타이핑을 바로 해볼까 싶다.
'국비학원 전 강의 필사 > 자바스크립트 공부' 카테고리의 다른 글
| #5 텍스트 관련 태그 - <자바스크립트-HTML5> (0) | 2022.08.13 |
|---|---|
| #4 웹페이지를 구성하는 기본 태그 - <자바스크립트-HTML5> (0) | 2022.08.11 |
| #3 시맨틱 요소와 검색엔진 - <자바스크립트-HTML5> (0) | 2022.08.10 |
| #1 프런트엔드 개발자 학습 방향 - <자바스크립트-HTML5> (0) | 2022.08.09 |
댓글