반응형
1. HTML의 요소(1)
1) HTML이란?
✔ HTML의 생김새
- 웹페이지를 구성하고 있는 요소(element)를 '태그'로 작성
- 태그를 통해 어떤 요소인지 명시
- 태그의 이름은 HTML5 웹 표준에 맞게 작성
<h1>This is Title!</h1> <h2>Fix you</h2> <p> HTML은 줄바꿈을 인식하지 못한다.(br tag 사용) </p> - 여는 태그
- 닫는 태그
- 내용 : 요소의 내용
- 요소 : 여는 태그, 닫는 태그, 내용을 통틀어 요소라 함태그의 경우, 대소문자를 구분하진 않지만 가독성을 높이기 위하여 모두 소문자로 작성하는 것을 권장
✔ 빈 요소(Empty elements)
내용이 없는 요소를 빈 요소라고 부른다.
- ex) 이미지, 수평선, 줄바꿈 등
- 닫는 태그를 추가로 명시하지 않아도 된다.
- Empty element, Self-Colsing element ...
<img src = "~" /> // 슬래시 작성은 HTML5와서 사용 거의X, 그러나 명시적 요소로 사용 ok
✔ 요소의 중첩(Nesting)
요소 안에 다른 요소가 들어가는 포함관계가 가능 함
- 중첩 된 요소의 경우, 열린 순서의 반대로 닫혀야 함
- 서로의 포함관계를 가독성있게 구분하기 위해 들여쓰기 사용
<head> </head> <body> // head와 body는 포함관계x <ul> // body의 자식 <li></li> // ul의 자식 </ul> <h1> 요소1 <strong> 요소2 </strong> 요소3 </h1> // 요소 3개 <body>
✔ 주석(Comments)
- 브라우저는 주석을 무시해 사용자에게 주석을 보이지 않게 함
- 메모 추가, 사용하지 않는 코드를 임시로 처리하기 위한 방법으로 사용
- 남발하지 말 것
✔ HTML문서의 구조
<!DOCTYPE html> // 엡 표준화 전 버전 표시
<html> // 페이지 전체 컨텐츠를 감싸는 root 요소
<head> // 웹브라우저 화면에 직접적으로 나타나지 않는 정보
<meta tag> // 문서의 일반적인 정보, 문자 인코딩
<title> // 문서 제목
</head>
<body> // 웹브라우저 화면에 나타나는 모든 요소
</body>
</html>
✔ HEAD tag
기계가 식별할 수 있는 웹 펭지 문서 정보(meta data)를 담음
- 제목, 스크립트, 스타일시트 등
- 사람이 읽을 수 없음. 기계 처리 목적
- title 요소는 하나만 됨
- 태그 생략은 지양
✔ Body 태그
화면에 보여지는 모든 요소들이 담김
- mdn 문서 중 휴지통 : 폐기 된 태그
- 태그 생략 지양
✔ 태그를 구분짓는 특성
- 구획을 나누는 태그
- 단독을 사용했을 때 보이지 않음
- 요소의 그룹화용
- 그 자체로 요소인 태그
- 단독으로 사용시 눈에 보임
✔ Block(블록)과 Inline(인라인)
- Block
- 블록 요소는 새로운 줄에서 시작함
- 좌우 양쪽으로 최대한 늘어남
- 부모 요소의 범위 안에서 혼자 다 차지함
- Inline
- 인라인 요소는 줄의 어느 곳에서든 시작 가능
- 바로 이전 요소가 끝나는 지점부터 시작
- content만큼만 차지함
같은 형태의 다른 요소를 안에 포함할 수 있음
대부분의 블록 요소는 인라인 요소도 포함 가능
그러나 인라인 요소는 블록 요소를 포함 할 수 없음
✔ 콘텐츠 카테고리
HTML5에선 비슷한 특징을 가진 요소끼리 묶어 7가지 카테고리로 세분화 함
하나의 HTML 요소가 여러 콘텐츠 카테고리 내 포함관계에 들어갈 수 있음
- 메타데이터 콘텐츠 : 문서의 메타 데이터, 다른 문서를 가리키는 링크 등을 나타내는 요소
- 플로우 컨텐츠 : 웹 페이지상에 메타데이터를 제외하고 거의 모든 요소. 보통 텍스트나 임베디드 콘텐츠를 포함
- 섹션 콘텐츠 : 웹 문서의 구획을 나눌 때 사용 (heading, section 교집합x)
- 헤딩 콘텐츠 : 섹션 제목과 관련된 요소
- 프레이징 콘첸츠 : 문단에서 텍스트를 마크업 할 때 사용
- 임베디드 콘텐츠 : 이미지나 비디오 등 외부 소스를 가져오거나 삽입할 때 사용되는 요소
- 인터렉티브 콘텐츠 : 사용자와의 상호작용을 위한 컨텐츠 요소
2) 메타데이터 요소
✔ 메타데이터의 역할
- 메타데이터 : data를 설명하는 data
- 어떤 정보가 중요한지 등 분류를 해줌.
✔ title
<title> ~ </title>- 문서의 제목을 나타내는 태그
- title은 head 안에 한 태그만 넣을 수 있음.
- 사람들이 태그를 보고 식별할 수 있게 정하는 것이 좋음(SEO)
- 단어로 나열된 제목은 피하는 것이 좋음. 검색 알고리즘 후순위로 들어감.
✔ meta
문서 정보
- application-name : 브라우저가 이 값을 사용해 애플리케이션을 식별할 수 있음.
- description : 페이지에 대한 짧고 정확한 요약. 즐겨찾기 페이지의 기본 값으로 많이 사용함.
- referer : 문서에서 시작하는 요청의 HTTP Refere 헤더를 통제 함.(페이지를 넘어갈 때마다 흔적이 남음.)
문자 인코딩
전세계 언어를 지원하며 어디서 접속해도 동일한 페이지를 보여줌.
<meta charset="UTF-8">
viewport(뷰 포트)
전체 브라우저 중 웹페이지를 볼 수 있는 영역. 브라우저, 모바일 등 기기에 따라 정의해줌.
<meta name="viewport">- width : 웹 사이트를 렌더링 하고자 하는 뷰포트 너비를 정의.
- height : 뷰포트 높이를 정의.
- initial-scle : 장치 너비와 뷰포트 너비의 비율을 정의. (0.0과 10.0 사이의 수)
- maximum-scale : 가능한 최대 확대 비율을 정의. minimum-scale 이상이어야 함.
- minimum-scale : 가능한 최소 확대 비율을 정의. maximum-scale 이하여야 함.
- user-scalable : no인 경우 사용자가 웹 페이지를 확대할 수 없음. 기본 값은 yes.
✔ MIME Type
MIME 타입은 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘이다.
일반적인 구조
type/subtype
개별 타입
- text : 문자로만 이루어진 파일
- image : 모든 종류의 이미지, 애니메이션은 포함하나 비디오는 안됨.
- audio : 모든 종류의 오디오
- video : 모든 종류의 비디오
- application : 모든 종류의 이진 데이터
✔ style
head에 css 문법을 작성할 수 있다.
같은 속성이 있을 경우 뒤쪽 style이 덮는다.
<head>
<style>
p { color: red;}
</style>
</head>
✔ script
script 요소는 실행 가능한 코드를 문서에 불러올 때 사용한다.
html 내부에 JavaScript 직접 쓰기 위해 사용하기도 한다.
외부 스크립트를 가져오는 법
<script src="script.js"></script>
<script> 요소 내부에 인라인 스크립트를 작성하는 법
<script>
alert("Hello World!");
</script>- <script> 태그를 만나면 태그 안의 내용을 먼저 실행하기 때문에 렌더링 중이던 화면이 중단되어 로딩 시간이 길어짐.
- <body> 태그 마지막에 쓰는 것을 권장하고 있음.
반응형
