division (분할, 분배)
div : 블록(상자) 요소, 특별한 의미가 없는 구분을 위한 요소
(그래서 더 많이 굉장히 많이 사용한다.)
이런 식으로 여러가지 개념을 한데 묶을 때 div개념을 많이 사용한다.
h1: heading + 1, 1~6까지 사용가능
뒤의 숫자는 중요도를 의미, heading이라는 태그는 기본적으로 제목을 의미한다.
그 제목이라는 것은 제목이 포함된 범위의 전반적인 내용의 제목을 의미한다.
즉, 어떠한 콘텐츠의 제목
코드 전체로 봤을 때는 목차 정도의 의미를 가진다고 볼 수 있다.
제목은 글자이지만 블록 요소이다.
ex. h1은 대주제, h2는 중간주제, h3는 소주제
p : 문장을 구분하는 요소이다. 블록 요소이다.
꼭 p태그를 사용할 필요는 없지만 만약 div대신 p태그를 사용한다면 안의 내용을 보지 않아도 문장이라는 것을 이해할 수 있다.
글자를 다루고 있지만 단일 글자가 아닌 문장을 의미하므로 블록 요소이다.
img : 인라인(글자) 요소
인라인 요소는 글자를 취급하는 것이라 설명하였지만 예외가 존재한다.
Tip. 필수 속성은 입력하지 않으면 웹표준에 어긋난다.
인라인 요소 vs 블럭 요소 다시 한번 간단 확인
인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지한다.
블록 레벨 요소는 인라인 요소와 (때때로) 다른 블록 레벨 요소를 포함할 수 있다. 이런 고유한 구조적 차이점으로 인해 블록 레벨 요소는 인라인 요소보다 더 "큰" 구조를 생성할 수 있다.
기본적으로 블록 레벨 요소는 새로운 줄에서 시작하지만, 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다.
인라인 요소 : 인라인 요소만 포함할 수 있음, 줄바꿈 강제 X
블록 요소 : 인라인 요소, 블럭 요소 모두 포함할 수 있음, 줄바꿈 강제 O
이러한 구분은 HTML4까지 사용됐고 현재는 이런 이진적 구분이 불가능하다.
"인라인" 카테고리는 구문 콘텐츠와 적당히 짝지을 수 있지만 "블록 레벨" 카테고리는 어느 HTML5 콘텐츠 카테고리와도 정확히 일치하지 않는다.
ul : unordered list: 순서가 필요없는 목록의 집합
(집합이므로 다른 요소들을 포함해야 하므로 당연히 블록 요소)
li : 목록 내 각 항목 (list item)
(각 항목들은 고유의 영역을 가지고 사진, 문장 등을 포함할 수 있으므로 블록 요소이다.)
a : 닻(Anchor)
다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소
링크를 '건다' 라고 우리는 표현하는데 그것처럼 닻을 거는 것처럼 링크를 걸 수 있으므로 a를 쓴다.
즉, 다른/같은 페이지로 이동하는 하이퍼 링크를 지정하는 요소이다.
이는 인라인 요소이므로 같은 줄에 작성이 된다.
줄바꿈을 하더라도 공백만 사이에 들어간다.
target 속성에 "_blank"를 명시하면 그 링크는 새 탭에 열리게 된다.
(명시하지 않으면 그 탭의 페이지가 그대로 바뀌게 된다.)
span: 인라인요소, 구분을 위해 이용, 특별한 의미 X
br : break 태그, 줄바꿈이라는 의미를 갖고 있는 인라인 요소이다.
코드상에서 줄바꿈은 실재 화면에 그대로 줄바꿈되어 출력되지 않으므로 꼭 필요한 요소이다.
은 빈 태그이다!
input : 인라인 요소 이면서 블럭 요소
즉, 글자 요소이긴 하는데 상자 요소가 가진 특성을 일부 가지고 있다.
상자 요소는 가로/세로 값과 가로/세로 여백을 사용 가능한 특성이 있음
input 요소는 인라인 요소라 수평으로 나열되는 특징이 있으나 이러한 블럭 요소의 특징 역시 가지고 있다.
사용자가 데이터를 입력하는 요소가 input 요소인데 type 속성에 입력받을 데이터의 타입을 명시한다.
value 속성 역시 쓸 수 있는데 미리 입력된 값(데이터)를 지정해 놓을 수 있다.
이 역시 빈 태그이다.
input 태그에는 placeholder 라는 속성 역시 사용할 수 있는데 사용자가 입력할 값(데이터)의 힌트를 입력할 수 있다.
이는 커서를 올려놓고 글씨를 입력하기 시작하면 placeholder값이 사라진다.
placeholder와 value의 차이는 placeholder는 값을 모두 지우면 다시 placeholder 값이 표시되는 반면 value는 그렇지 않다는 것이다.
disabled 라는 속성도 있는데, 이는 값이 없이 속성이름만 있으면 된다.
이렇게 값을 명시하지 않는 속성들도 있다.
이를 사용하면 input창이 비활성화가 된다.
type으로 checkbox 역시 사용할 수 있는데
이는 label을 통해 체크박스의 제목을 명시해주어야 한다.
label태그는 라벨링이 가능한 태그의 제목을 명시해주는 역할을 한다.
이미 check된 것으로 두고 싶으면 checked속성을 추가하면 된다.
라디오 라는 것도 만들 수 있는데 이는 실재 라디오 처럼 만들어져있는 체크박스들 중 체크를 하나만 할 수 있다.
같은 라디오인지는 name으로 판별할 수 있다. name이 같으면 같은 그룹이다.
table: 말 그대로 표를 만들 때 사용하는 요소이다.
표는 행과 열의 집합이다.
그리고 테이블은 블록 요소가 아니다. 테이블 요소라고 따로 명시되어 있다.
테이블은 상세요소로 이루어 지는데
행은 row, 열은 column이다. 그리고 테이블은 행이 먼저 나와야 하므로
위와 같이 행을 의미하는 table row의 약자 tr태그가 먼저 나오게 된다.
열은 table data의 약자 td로 만들게 된다.
위와 같이 table을 만들게 되면 데이터를 구분하는 선은 만들어지지 않는데, 이는 css를 통해 만들 수 있다.
HTML은 구조를 구성하는 성분들을 만들어놓는 것이므로 HTML을 통해 눈에 보이는 것을 만들려고 해서는 안된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
/>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<h1>요소 공부</h1>
<span>ab</span> <span>W</span>
<br/>
<input type="text" placeholder="문장을 입력하세요"/>
<br/>
<input type="text" disabled/>
<br/>
<a href="https://www.naver.com/">NAVER</a>
<ul>
<h2>알파벳</h2>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<label><input type="radio" name="fruits">Apple</label>
<label><input type="radio" name="fruits">Banana</label>
<label><input type="radio" name="fruits">Kiwi</label>
<table>
<tr>
<td>A</td><td>B</td>
</tr>
<tr>
<td>C</td><td>D</td>
</tr>
</table>
</body>
</html>