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 |
