1. 태그와 요소
<h1>Hello HTML~</h1>위는 h1태그를 작성했다고 말할 수 있다.
<태그>내용</태그>
는 하나의 HTML코드로서 작동하게 되고 이를 한글로 요소 영어로 element라 한다.
기본적으로 태그 안의 내용까지 포함해서 하나의 요소라 한다.
태그와 요소는 혼용해서 사용하기도 한다.
앞쪽 태그를 시작 태그, 열린 태그라 부르고
슬래시가 붙어 있는 뒤쪽 태그를 종료 태그, 닫힌 태그라 부른다.
내용은 영어로 Content 라 부른다.
정확하게는 시작 태그와 종료 태그 사이의 코드를 지칭한다.
2. 부모와 자식 관계의 이해
<태그><태그>내용</태크></태그>
이는 좀더 가독성 좋게 일반적으로
<태그>
<태그>내용</태그>
</태그>이런 식으로 작성이 된다.
이 때 들여쓰기가 된 요소를 자식 요소라 하고 자식 요소를 감싸는 요소를 부모 요소라 한다.
그리고 부모, 부모의 부모 요소 등을 통틀어 상위 요소, 조상 요소라고도 부른다.
즉, 어떤 요소의 상위요소는 어떤 요소를 기준으로 그 요소를 감싸는 모든 요소를 지칭하는 용어이다.
반대로 자식의 자식 요소등 어떤 요소가 포함하는 모든 요소를 어떤 요소의 하위 요소라고 부른다.
3. 빈 태그
<!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>
<img src="" alt="">
</body>
</html>여기서 보면 meta태그, link태그, img태그는 닫히는 태그가 존재하지 않는다.
우리는 이러한 태그들을 닫히지 않고 열려있고 그 안에 내용도 없는 빈 태그라고 부른다.
즉, <태그>내용</태그> 에서 내용과 닫히는 태그가 없으므로 '빈 태그'라고 부른다.
이런 빈 태그들의 작성 방식에는 두가지가 있다.
-
<태그>
HTML 1 ~ 4의 방식 + HTML5 -
<태그 />
XHTML, HTML5의 방식
XHTML은 HTML보다 좀더 엄격한 XML의 방식을 차용한 것인데 좀더 엄격하게 빈 태그 뒤에도 /를 붙임으로써 어디서 끝나는지를 명확하게 해준다.
HTML5는 슬래시를 붙이거나 붙이지 않거나 모두 정상적으로 작동한다.
붙이지 않는 것은 조금더 작성하기 편하나
붙이는 것이 좀더 빈 태그라는 것을 명확히 알 수 있으므로, 즉 열린 태그로 착각하여 닫히는 태그를 찾는 경우가 없을 것이므로 좀 더 안전하게 사용할 수 있다.
그리고 열리는 태그에는 속성과 값이라는 것을 적용할 수 있다.
<태그 속성="값">내용</태그>
ex.
<meta charset="UTF-8">
메타 태그의 charset이라는 속성은 "UTF-8" 이라는 값을 가진다.
즉, 우리는 열리는 태그 뒤에 속성(Attribute)과 값(Value)을 넣을 수 있다.
속성과 값은 태그 즉, 전체 요소가 할 수 있는 역할에 기본적인 기능을 더욱 확장해서 쓸 수 있는 방법이다.
ex.
슬래시가 있으므로 이 태그는 이미지를 삽입하는 빈 태그인데
삽입되는 이미지와 이미지의 이름 등에 대한 내용은 전혀 없다.
그래서 필요한 것이 속성과 값이다.ㅇ
실재로 src에 삽입할 이미지의 경로를 입력하고, alt에 이미지가 안 나오면 이미지 대신 나올 것 즉, 이미지의 이름을 넣는다.
추가적으로 열리고 닫히는 태그는 기본적으로 범위가 존재하고 그 범위 사이에 어떠한 내용을 담을 수 있어서 기능의 확장을 하지 않아도 기본적으로 태그가 하는 역할이 있고 그 안에 내용을 담음으로서 온전히 역할을 수행할 수 있다.
그런데 빈 태그는 역할만 가지고는 할 수 있는 일이 제한된다. 따라서 굉장히 많은 경우에 속성과 값을 입력하는 것이 기본적인 사용법으로 지정이 되어 있다.
<!-- src, alt는 img 태그가 제 역할을 하는데 반드시 필요하므로 자동완성된다. -->
<img src="" alt="">
<!-- 사용자가 type속성에 무엇을 입력할 것인지 명확하게 알려줘야 함 -->
<input type="text">
(검색창 등이 input으로 만들어졌다고 보면 된다.)
(텍스트 말고 체크박스 등도 있다.)
br태그는 줄바꿈 용도로 굳이 속성이 필요하지 않고 이렇게 속성이 필요하지 않은 빈 태그도 몇개 있다. 이러한 태그들을 제외하고 거의 대부분의 빈 태그는 속성이 필요하다.
꼭 필요한 속성을 요소의 필수 속성이라 한다.
4. 글자와 상자
글자와 상자: 요소가 화면에 출력되는 특성, 크게 2가지로 구분
인라인(inline 요소) : 글자를 만들기 위한 요소들
블록(Block 요소) : 상자(레이아웃)를 만들기 위한 요소들
웹사이트를 어떠한 박스(상자)라는 개념으로 구조를 잡고 (레이아웃을 설정)
그 안에는 정보를 전달하기 위한 글자가 작성되어 있는 경우가 많음.
즉, 우리가 보는 웹사이트들은 이미지를 제외하면 글자와 상자로 구성되어 있다고 봐도 무방
각각의 글자와 상자라는 개념들은 우리가 배우려는 HTML의 요소들에 각각의 특성이 부여되어져 있기 때문에 미리 학습해두어야 한다.
인라인 요소:
span:
대표적인 인라인 요소!
본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도.(즉, 구분하는 용도)
요소가 수평으로 쌓인다.
중간의 공간은 띄어쓰기 이다. 인라인 요소는 기본적으로 글자를 나타내기 때문에 이렇게 줄바꿈이 하나의 띄어쓰기로 들어갈 수 있다.
이렇게 두 요소 사이에 띄어쓰기가 들어간 것을 확인가능하다.
이 띄어쓰기는 span태그가 아니기 때문에 CSS의 영향을 받지 않아 글자크기는 100픽셀이 아닌 상태이다.
body태그안의 모든 글자는 크기가 100px이라고 선언을 한 것이기에 중간의 띄어쓰기 역시 크기가 100px이 된다.
그럼 줄바꿈을 없애면 어떻게 될까?
놀랍게도 띄어쓰기가 없어졌다. 왜냐하면 span이라는 요소는 하나의 글자처럼 취급되어 각각의 span요소를 중간의 공간이 없는 상태로 빽빽하게 작성을 하면 띄어쓰기가 없는 상태가 된다.
이 띄어쓰기는 span요소 사이에 줄바꿈을 하는 것뿐 아니라 공백만 한칸 집어넣어도 적용된다.
그리고
<span style="width: 100px;">Hello<span/>
와 같이 style속성을 추가하여 각각의 inline요소들에 직접적으로 CSS내용을 작성할 수 있다.
그런데 이렇게 적용을 해도 적용이 되지 않는데
그 이유는 inline요소는 글자를 취급하는 요소인데 글자는 가로 너비와 세로 너비를 가질 수 없기 때문이다.
마찬가지로 글자요소는 요소의 외부 여백(margin), 내부 여백(padding)의 위아래 여백 역시 추가할 수 없다.
단, 왼쪽, 오른쪽 여백은 정상적으로 적용이 된다.
Tip. 외부 여백과 내부 여백의 차이:
내부 여백은 여백 자체가 요소에 포함이 된다.
외부 여백은 여백 자체가 요소에 포함되지는 않는다.
인라인 요소의 자식 요소로는 블럭 요소를 사용할 수 없다.
즉, 글자 안에는 상자를 집어넣을 수 없다!!!
그러나 글자 안에 또 글자는 넣을 수 있다.
ex.
<span><div><div/><span/> : 불가능
<span><span><span/><span/> : 가능
블럭 요소:
대표적인 블럭 요소로 div가 있다.
본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도로 사용된다.
<div>Hello</div>
<div>World</div>블럭요소들은 요소가 수직으로 쌓이는 특성이 있다.
대표적인 특징으로 가로가 부모 요소의 크기만큼 자동으로 늘어나려는 특징이 있다.
즉, 가로는 늘어날 수 있는 만큼 최대한 늘어나려는 성질이 있다.
그래서 Hello라고만 쳤는데도 요소의 영역은 (제어를 하지 않으면)끝에서 끝까지이다.
반대로 세로 너비는 자동으로 줄어들려고 한다.
또한 width, height, margin, padding 등이 다 적용이 잘 된다.
즉, 인라인 요소와 다르게 시각적으로 제어하는데는 제어할 수 있는 요소가 많아 훨씬 유리하다.
그리고 블럭요소는 블럭요소의 내용으로 다른 블럭요소와 인라인 요소를 넣을 수 있다.
