오늘은 HTML의 기본 구조와 여러 텍스트 태그에 대한 공부를 하였다.
<!DOCTYPE html>
문서의 첫 부분에서 문서의 유형을 지정하는 단일태그. 현재 표준으로 사용하는 html 버전을 사용하기 위해 html 타입을 적어주었다.
<html> ~ </html>
실제 문서의 시작과 끝을 나타내는 태그.
<head> ~ </head>
웹 브라우저에 필요한 정보들이 담겨있는 태그.
head 내부에 들어가 있는 태그
<meta charset="utf-8">
문자 인코딩 및 문서 키워드 등에 대한 부가 정보를 기입하는 단일태그.
charset="utf-8"이라는 속성을 이용하면 영문과 한글을 모두 사용할 수 있다.
인코딩은 문자 세트를 지정하는 것임.
<title> ~ </title>
문서의 제목을 나타내는 태그.
<body> ~ </body>
실제 브라우저 화면에 표시될 내용을 입력하는 태그.
텍스트, 이미지, 사용자 인터페이스 등을 표현하는 공간이다.
실제 사이트를 열어보면 title 태그의 내용은 브라우저의 탭에, body 태그의 내용은 브라우저 내에 표현이 된 모습이다.
먼저 텍스트를 표시하는 태그를 먼저 살펴보았다.
<p> ~ </p>
가장 많이 사용되는 텍스트 태그로 문단요소를 나타낸다. 문단과 문단 사이에는 공백이 생긴다.
<h1> ~ </h1>
제목 요소를 나타내는 태그로 숫자 1~6까지 1일 때 가장 크고 6일 때 가장 작다.
<hr>
수평선을 표시하는 단일태그. 주제변경이나 내용을 구분하기 위해 사용된다.
이제 예시들을 만들어 보며 실제로 익혀 보겠다.
먼저 head부분의 title태그에 브라우저의 탭 제목을 적어준다.
h1을 통해 큰 글씨를 이용한 제목을, h2를 통해 그다음 작은 글씨로 작은 제목을 출력했고 그 사이를 구분하기 위해 hr태그를 이용한 수평선을 만들어 주었다.
p태그를 이용하여 텍스트를 출력해 주었는데 이때 p태그에는 여러 가지 알아야 할 정보가 있는데
먼저 p태그는 문단으로 인식하여 매 p태그마다 윗줄과 공백이 있다.
그리고 HTML에서 스페이스바는 1개씩만 인지하기 때문에 13번 줄처럼 여러 번 스페이스바를 해도 한 번만 출력될 것이다.
그래서 여러 번의 공백을 만드려 할 때는 를 이용해주어야 한다.
또 엔터도 줄 바꿈으로 인지하지 않는데 이때에는 <br> 태그를 이용하여 줄 바꿈을 해준다.
위의 코드를 출력하면 다음과 같은 사이트가 출력되게 된다.
태그에 대해 더 알아보면,
블록 레벨 요소를 만드는 블록태그와 인라인 요소를 만드는 인라인 태그로 구분한다.
블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성
인라인 요소 : 자기에게 필요한 만큼의 공간만 차지
지금까지 앞서 배운 태그들은 블록 레벨 요소를 가진 블록태그였다. 이를 확인하기 위해서 만들어놓은 사이트를 들어가 개발자 도구를 열면 된다.
개발자 도구를 열면 왼쪽에 우리가 만들어놓은 코드와 동일한 코드가 나타나게 되는데 각 요소에 마우스를 올리면 그 코드의 영역이 나타난다.
그림과 같이 h1태그와 p태그에서 텍스트 부분을 제외한 오른쪽 전체 부분이 영역으로서 표시가 되는 모습이다.
그렇다면 인라인 요소를 가진 인라인태그는 무엇이 있을까?
<strong> : 굵은 글씨를 나타냄.
<em> : 기울어진 이탤릭체를 나타냄.
<mark> : 형광펜 표시를 나타냄.
이를 통해 예시를 만들어 보면,
다음과 같이 코드를 만들었다.
strong, em, mark태그는 각각 인라인 태그이기 때문에 개발자 도구에서 확인하면,
이전에 보았던 블록 태그들과 다르게 자신의 영역에만 표시가 된 모습이다.
이 태그들은 p태그와는 다르게 각각 문단을 형성하지는 않으므로 코드상에서는 줄이 바뀌어 있지만 출력 시에는 서로 붙어있는 모습이다.
그리고 각각 태그들은 p태그 내부에서 위치할 수 있다.
14번째 줄의 p태그에서는 윗줄과 문단이 나뉘어 있고 그 내부에서 각각 인라인 태그들이 서로 다른 모습으로 위치해 있다.
후기:C언어를 먼저 공부해서 그런지 아직까지는 내용이 머리에 잘 들어왔다. 빠르게 진도를 나가야겠다.
*본 포스팅은 학생의 입장에서 쓴 글로 정확하지 않을 수 있으며 댓글로 피드백해 주시면 감사하겠습니다.
클래스 101 유노코딩님의 강의를 통해 학습한 내용을 기반으로 두고 있습니다
'내가 꾸는 꿈' 카테고리의 다른 글
| 링크, 목록, 입력하기 [노베이스 게임개발 25일차] (0) | 2023.04.17 |
|---|---|
| 이미지 태그, 컨테이너 태그, 전역 속성 [노베이스 게임개발 24일차] (0) | 2023.04.16 |
| HTML 공부 시작! [노베이스 게임개발 22일차] (1) | 2023.04.13 |
| C언어의 추가 개념들 [노베이스 게임개발 21일차] (0) | 2023.04.12 |
| MBTI 성격검사 만들기 [노베이스 게임개발 20일차] (0) | 2023.04.11 |
