HTML

HyperText Markup Language의 약자

→ 웹 페이지를 구조화하고 표시하는 언어

 

HTML은 웹 브라우저에서 해석되어 사용자에게 보여지는 모든 콘텐츠를 기술.

 

HTML은 태그로 이루어져 있음.

 

<!DOCTYPE html> → 문서가 HTML5로 작성된 것임을 브라우저에 알려줌.

<html> → 문서의 모든 내용을 감싸는 컨테이너 역할

<head> → 문서의 메타데이터와 스타일 시트를 포함

<body> → 문서의 콘텐츠를 포함

<meta> → HTML 문서의 메타데이터를 정의

 

 

메타데이터

문서에 대한 정보를 나타내는 데이터

 

 

charset

  • 문서의 인코딩 방식을 정의
  • 인코딩을 명시하지 않으면 웹 브라우저에서 자동으로 인코딩을 처리하기 때문에 한글이 깨질 수도
  • <meta charset=”UTF-8”>을 적어주는 것이 좋다.

name

  • 메타데이터의 이름

content

  • 해당 메타데이터의 값을 정의

viewport

  • 모바일 장치에서 페이지를 렌더링할 때 뷰포트의 크기와 초기 축적을 지정.
  • viewport = device-width는 기기의 너비를 인식해서 기기에 맞게 페이지를 보여줌
  • 이걸 안쓰면 모바일로 접속해도 pc로 인식해서 화면을 pc 사이즈로 출력해줌

author

  • 문서의 작성자

keywords

  • 키워드

robots

  • 검색 엔진 로봇의 허용/거부 규칙 등을 정의 할 수 있음

SEO

Search Engine Optimization의 약자

 

검색 엔진에서 웹 페이지가 상위에 노출될 수 있도록 최적화하는 작업

검색 엔진은 크롤러라는 프로그램 사용 → 웹 페이지를 수집 및 분석

 

검색 엔진이 웹 페이지의 내용을 정확히 인식하고 분석할 수 있도록 웹 페이지의 구조와 내용을 최적화 하는 것이 중요

 

주로 <meta> 요소를 활용하여 웹 페이지의 메타데이터를 정의

ex) <meta name=”description” content=”웹 페이지에 대한 간단한 설명”>

 

<script> 태그

html에서 script 태그를 통해 자바스크립트 연결 가능

 

script 태그는 head 태그 사이에 둘 수도, body 하단에 둘 수도 있다.

→ head 태그 사이에 위치하는 것이 좋은 방법은 아님

브라우저는 HTML 문서를 위에서 아래로 파싱하고 로드함

→ 스크립트가 문서 상단에 있으면, 스크립트를 로드하고 실행하는 동안 페이지의 나머지 내용 로딩이 중단되는 문제 발생

→ 만약 DOM을 제어하고 조작하는 자바스크립트 코드가 있따면 오류가 발생할 수 있음

ex) id=”root”인 div 박스 DOM을 조작시키는 자바스크립트 코드가 있다면

  • 스크립트가 HTML DOM 요소들보다 먼저 로드되었기 때문에 id=”root”인 요소를 자바스크립트가 인식하지 못함

 

 

해결책

 

script를 맨 아래 놓는다.

  • HTML 문서 자체가 크다면 페이지가 느려지는 단점

script defer

  • 브라우저는 defer 속성이 있는 스크립트를 백그라운드에서 다운로드
  • 스크립트를 다운로드 하는 도중에도 HTML 파싱을 멈추지 않음
  • defer 스크리트 실행은 HTML 파싱이 모두 끝날 때까지 지연됨
  • 일반 스크리븥아 마찬가지로 HTML에 추가된 순으로 실행
  • defer script 또한 HTML에 추가된 순으로 실행
  • DOM이나 다른 스크립트에 의존성이 있고 실행 순서가 중요하다면 사용하는 것이 좋음

 

script async

  • async 스크립트 실행 중에는 HTML 파싱이 멈춤
  • async 스크립트가 여러 개 있는 경우, 그 실행 순서는 제각각이 됨
  • 실행은 다운로드가 끝난 스크립트 순으로 진행
  • DOM이나 다른 스크립트에 의존성이 없고, 실행 순서가 중요하지 않는 경우에 쓰는 것이 좋음

HTML 박스모델

 

div 박스에 width를 주면 padding과 border를 고려하지 않음

→ padding 안쪽의 content 부분만 실제 width로 설정

→ padding 10px, border 10px, width 200px를 주면 실제 총 너비는 240px가 됨.

(기본 속성 box-sizing: content-box일 경우)

 

box-sizing: border-box

→ width와 height가 content의 너비가 아닌 border까지 포함한 태그의 너비가 됨

 

margin collapsing

인접한 블록 레벨 요소들의 margin 값이 서로 합쳐지는 현상

<style>
	div {
		margin-top: 20px;
	  margin-bottom: 30px;
	  background-color: gray;
	  height: 50px;
	}
</style>

 

두 개의 div 사이에는 20px + 30px = 50px의 간격이 생기는 것이 아닌, 30px의 간격이 생긴다.

→ 숫자가 더 큰 margin-bottom인 30px가 적용됨

 

저작자표시 비영리 변경금지 (새창열림)

'Frontend > HTML, CSS' 카테고리의 다른 글

[CSS] CSS 예제를 풀어보자 - 소스코드 설명 페이지 만들기  (2) 2023.07.06
[W3Schools/W3스쿨즈] CSS 퀴즈를 풀어보자  (0) 2023.07.05
[CSS] 얄코의 CSS 강의를 듣고  (0) 2023.07.04
[HTML] 실습 예제를 풀어보자  (0) 2023.07.02
[W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보자  (0) 2023.07.02

티스토리툴바