-
HTML(1) HTML 이해하기Frontend/HTML 2023. 5. 29. 11:42
1) HTML 소개
https://www.boostcourse.org/cs120/lecture/92869/?isDesc=false
Hyper Text Markup Language
- 웹 페이지를 만드는 언어
- Hyper Test = Link
- Markup Language : 정보를 **구조적(계층적)**으로 표현 가능하다는 특징이 있는 프로그래밍 언어들.
- 확장자 : html
- 초기 개발 목적 : 팀원들 간 문서를 빠르게 공유하기 위해
2) 태그 (Tag)
https://www.boostcourse.org/cs120/lecture/253418?isDesc=false
사전적 의미 : 무언가를 인식하기 위해 달아놓는 꼬리표, 이름표
실질적 의미 : 브라우저가 내용을 이해하기 쉽도록 달아놓은 꼬리표 역할.
<h1> Hello, HTML </h1><> 안에는 Tag 이름
시작 Tag = 여는 Tag : 앞에 위치한 Tag
종료 Tag = 닫는 Tag : 동일한 이름을 가지면서 Tag명 앞에 ‘/’ 를 붙이는 Tag
시작 Tag와 종료 Tag 로 감싸진 부분 = 실제 브라우저에 나타나는 내용. (브라우저에 Tag는 표시되지 않음.)
Tag 와 내용을 합하여 ‘요소’라고 함. 실제로는 요소 = Tag 로 혼용하여 사용함.
모든 Markup 언어에서는 Tag를 사용함.
3) 속성 (Attritute)
https://www.boostcourse.org/cs120/lecture/92871/?isDesc=false
Tag에 추가 정보 제공 or 원하는 대로 Tag의 동작이나 표현을 제어할 수 있는 설정
<h1 id=”title” class="test"> Hello, HTML </h1>이름과 값으로 구성
Tag명 뒤에 공백 추가 후 작성. (위에서는 id와 class가 속성, title와 test는 속성의 값)
이름과 값 사이에 ‘=’ 외 공백포함 어떤 문자도 삽입될 수 없음.
값은 작은따옴표나 큰따옴표로 감싸져야 함.
Tag에는 다수의 속성 추가가 가능함. 단 속성 산에는 공백으로 구분하여 사용해야 함.
속성 선언 순서는 중요하지 않음.
속성은 어느 Tag에서도 사용 가능한 Global 속성과 특정 Tag에서만 사용할 수 있는 속성이 존재.
특정 Tag에서는 반드시 필요한 필수적 속성과 그렇지 않은 속성이 존재함.
4) 중첩
https://www.boostcourse.org/cs120/lecture/92872/?isDesc=false
<h1>Hello, <i>HTML</i></h1>Tag 안에 다른 Tag를 선언하여 중첩 사용 가능. 이 때 중첩된 Tag는 자식Tag가 되며 자식Tag는 부모Tag 안에서만 시작/종료될 수 있음.
경우에 따라 정해진 상황에서만 중첩 가능한 Tag도 존재.
5) 빈 Tag (Empty Tag)
<br> <img src=""> <input type="">빈 Tag : 시작 Tag만 존재하고 종료Tag는 존재하지 않는 Tag. 종료Tag가 없어 브라우저에 표시할 내용이 없음.
속성을 통해 화면에 표시할 내용을 정하거나 다른 용도(ex. 문서 내부적으로 표시할 때)
브라우저가 대신 내용을 그려주어야 할 때(= 내용 란에 우리가 직접 채울 수 없는 리소스 들 ex.이미지, 영상 등 외부 리소스) 속성을 통하여 해당 리소스의 위치를 전달하기도 함. 이런 Tag는 브라우저가 내용을 대체한다고 하여 Replacement Tag라고 부르기도 함. ex. <img src=””>
6) 공백
https://www.boostcourse.org/cs120/lecture/92874/?isDesc=false
HTML은 2 칸 이상의 공백은 모두 무시함. (=1칸의 공백으로 인식, 개행도 무시)
따라서 별도의 문법을 이용하여 2칸 이상의 공백, 개행을 표시하여야 함.
<h1>Hello, HTML</h1> <h1>Hello, HTML</h1> <h1> Hello, HTML </h1>위 내용을 브라우저에서 모두 Hello, HTML 로 표시됨.
7) 주석
https://www.boostcourse.org/cs120/lecture/92875/?isDesc=false
<!--주석-->HTML에서 주석 처리 방식. CSS에는 적용되지 않음.
주석으로 표시된 부분은 브라우저가 해석하지 않는다.
8) HTML 문서 기본 구조
https://www.boostcourse.org/cs120/lecture/92876/?isDesc=false
HTML 문서는 공통적으로 가져야 할 기본 구조가 존재.
이 문서 구조를 통해 HTML 버전, 문서의 제목, 정보, 내용 등을 파악할 수 있음.
<!--DOCTYPE 선언부.--> <!DOCTYPE html> <!--html은 html5 를 의미--> <!--HTML Tag--> <HTML lang="ko"> <!--lang: 문서가 작성된 언어--> <HEAD> <meta charset="utf-8"> <!--charset: 문자의 인코딩 방식--> <title>Hello, HTML</title> <!--브라우저 tab에 표시--> </HEAD> <BODY> </BODY> </HTML>DOCTYPE : 문서타입 정의. DTD라고도 부름 .Tag는 아니고 이 문서가 어떤 버전으로 작성되었는지 브라우저에게 알려주는 선언부. 문서의 최상단에 존재해야 함. 없을 시 브라우저는 해당 문서를 비표준으로 인식함.
HEAD: head 내부의 Tag들은 브라우저 화면에 표시되지 않고, 문서의 기본 정보나 설정, 외부 파일(stylesheet, js 파일 등)을 연결하는 역할을 함.
BODY: 실제 브라우저 화면에 나타나는 내용이 들어가는 Tag.
참고 자료
'Frontend > HTML' 카테고리의 다른 글
HTML(3) 콘텐츠모델, 시멘틱마크업,블록인라인 (0) 2023.07.11 HTML(2) Tag (0) 2023.06.01