1. HTML
- HTML(HyperText Markup Language)은 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다
- HTML은 elements(요소)로 구성되어 있다
- tag(태그)는 elements(요소)를 만들 때 사용하며 <p></p>와 같이 태그를 구성할 수 있다
1.1 내포된 요소(Nesting elements)
- 요소안에 요소가 들어갈 수 있다
<p>당근은 <strong>주황색</strong>이다</p>- 이러한 요소를 내포(Nesting)되었다고 표현한다
1.2 블록 레벨 요소 vs 인라인 요소('Block elements' vs 'inline elements')
HTML에는 두가지 종류의 요소가 있다
1.2.1. 블록 레벨 요소(Block-level elements)
- 블록 레벨 요소는 웹페이지 상에 블록을 만드는 요소이다
- 블록 레벨 요소는 앞뒤 요소 사이에 새로운 Line을 만들어 버린다
- 이를 이용해 단락(Paragraphs), 목록(Lists), 꼬리말(Footers) 등을 표현할 수 있다
- 블록 레벨 요소는 서로 내포 가능하지만, 블록 레벨 요소는 인라인 요소에 내포(Nesting)될 수 없다
ex) <p>, <h1~h6>, <ul>, <ol>, <div>, <hr>, <table>, <filedset> 등
1.2.2 인라인 요소(Inline elements)
- 인라인 요소는 항상 블록 레벨 요소 내에 포함되어 있다
- 단락 같은 큰 범위에 적용할 수 없고 문장이나 단어 같은 작은 부분에 적용될 수 있다
ex) <a>, <em>, <strong> 등
+빈 요소(Empty elements or Void elements)
주로 문서에 첨부하기 위해 단일 태그(Single tag)를 사용하는 요소ex) <img>, <embed> 등
1.3 속성(Attributes)
요소는 속성을 가질 수 있다
1. 요소 이름 다음에 오는 속성은 요소 이름과 공백이 있어야 하고, 속성과 속성 사이에도 공백이 있어야 한다
2. 속성 이름 다음엔 등호가 붙고 속성값은 따옴표로 감싸야 한다
1.3.1 True, False 속성(Boolean attributes)
Bool속성은 값이 없는 속성이며 일반적으로 속성의 이름과 동일한 하나의 값만을 가질 수 있다. 예를 들어 disabled 속성을 <input>태그에 속성이름으로만으로 할당할 수 있다
<input type="text" disabled="disabled">
<input type="text" disabled>두 태그 모두 같은 결과를 가진다
1.3 HTML 문서의 구조(Structure of HTML documents)
기본적인 HTML 페이지의 구조는 이렇게 구성된다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>제목입니다</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>1. <!DOCTYPE HTML> : 문서 형식을 나타내는 키워드. HTML 초창기에 쓰이던 코드를 관례처럼 쓴다
2. <html></html> : 전체 페이지의 콘텐츠를 포함하는 기본 요소이다
3. <head></head> : 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출될 키워드, 홈페이지 설명, css 스타일, character setdeclaration 등 HTML 페이지의 모든 내용을 담고 있다
4. <meta charset="utf-8"> : HTML 페이지의 인코딩 설정을 UTF-8으로 지정한다
5. <title></title> : 페이지 제목이 설정된다
6. <body></body> : 페이지에 표시되는 모든 콘텐츠들이 포함된다
1.4 주석(Annotation)
HTML에는 코드에 메모를 포함시켜 코딩을 설명할 수 있는 주석이 있다
<p>김치 치즈 탕수육</p>
<!-- 먹고 싶다 -->위와 같이 <!-- -->로 묶인 부분을 주석이라고 하며 실제 코드 실행 시에 브라우저는 이 부분을 무시하고 진행한다
'프로그래밍 > Frontend' 카테고리의 다른 글
| [TypeScript] Type + JavaScript - (1) 기본 타입 (0) | 2024.07.22 |
|---|---|
| [JavaScript] 자바 스크립트 기초 - (1) 기본문법, 자료형, 변수, 함수 (0) | 2023.06.05 |
| [CSS] 03. CSS 핵심 (3) (0) | 2023.05.16 |
| [CSS] 02. CSS 핵심 (2) (0) | 2023.05.06 |
| [CSS] 01. CSS 핵심 (1) (0) | 2023.04.29 |