HTML이란.
- HyperText Markup Language
- HyperText(하이퍼텍스트): 정해진 순서 없이, ‘참조’를 통해 한 문서에서 다른 문서로 접근할 수 있는 텍스트.
- Markup Language(마크업 언어)
- 태그 등을 이용하여 문서나 데이터의 구조를 표시하는 언어.
HTML은 프로그래밍 언어가 아닌 콘텐츠 구조를 정의하는 마크업 언어.
웹을 이루는 가장 기초적인 구성 요소이며 웹 콘텐츠의 의미와 구조를 정의한다.
HTML기초.
<!DOCTYPE html>
- 해당 문서는 html Living Standard 문서라는 의미.
작성 시 완전 표준 모드로 렌더링.
html
- HTML 문서의 루트, 최상단 요소.
- lang 속성으로 해당 페이지의 주언어 설정 가능.
head
- 기계가 식별할 수 있는 문서 정보(메타 데이터)를 담음.
- 검색엔진을 위한 정보가 담김.
viewport
- 현재 창에서 문서를 볼 수 있는 부분.
- 너비, 높이, 확대 등 제어 가능.
title
- 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목 표시. 텍스트만 가능.
- 60자는 넘지 말아야 함.
link
- 현재 문서와 외부 리소스의 관계 명시.
- 보통 외부 스타일시트, 폰트, 파비콘을 연결할 때 사용.
body
CSS란.
- Cascading Style Sheets의 약자.
- Cascading : 연속화
- cascade : 폭포
CSS에서 스타일이 적용될 땐 우선순위를 가지고 적용됨. 이 모습이 폭포처럼 보이기에 Cascade라는 단어가 붙음.
CSS 기초.
- HTML로 구성된 화면을 꾸미는 역할로 쓰임. style을 일일히 지정해줘도 되지만 관리 및 편의성을 위해 css파일로 따로 적용 해주는 것이 좋음.
- 태그로 .css파일 연결시켜서 적용. link는 head에.
- css에서는 세미콜론 필수.
- safari에서는 text-decoration같은 경우 사용법이 조금 다름.
- chrome은 text-deco로 한번에 설정되는데 safari에서는 각각 text-decoration-color 등 일일히 해줘야 함.
- font family에선 기본적인 폰트들의 지원여부와 사용을 지원해줌.
- font-family로 여러 개의 폰트 지정해놓고 접속 브라우저의 지원여부에 따라 순서에 맞춰 순위를 나눠 적용되는 방식.
HTML5, CSS3.
- HTML5는 최신 웹 기술을 가리키는 유행어.
- 2019년부터는 버전이 없다고 생각하면 됨.
- DOCTYPE은 최신 html로 작성됐다고 알면 됨.
- CSS3도 버전이 없고 모듈별로 스냅샷으로 알려줌.
