HTML

HTML - 태그(1)

태그의 종류 (1)

이제부터 본격적으로 태그가 무엇읹에 대해서 알아보는 시간을 갖도록 하겠습니다.

head에 들어가는 태그 - title

우선, 우리가 저번에 짠 index.html 파일을 VSC에서 열고 앞에 다음 소스코드를 <html>과 <body> 사이에 붙여넣기 합니다.

<head>
    <meta charset "utf-8">
    <title><!--자신이 원하는 사이트의 제목--></title>
</head>

붙여넣기 한 후에, <!-- 부터 -->까지의 코드를 삭제하고 그곳이 있던 자리에 원하는 사이트의 제목을 작성합니다.

저는 다음과 같이 하겠습니다.

<title>int</title>

이제, ctrl + s 를 눌러서 저장한 뒤 저번처럼 ctrl + o를 눌러 그 파일을 열어줍니다.

이제부터는 이렇게 일일이 ctrl + s나 o를 누르라고 알려드리지 못하니, 미리 단축키 정도는 외워두세요.
그러면 사이트 본문에는 변화가 없지만, 위에 창을 보시면 제목이 int라고 되어있는 것을 확인하실 수가 있습니다.
<meta charset "utf-8">은 추후에 설명하도록 하겠습니다.

body에 들어가는 태그 - 문단 - p & 제목 - h1~6

p 태그에 대해 알아보도록 하겠습니다.

p는 paragraph의 약자로, 문단을 나눌 때 사용합니다.

Body 태그 안에 다음 코드를 추가 시켜줍니다.

<p>int와 함께하는 코딩!</p>

그러면 위의 Coding with int! 와 같이 출력 되는 것을 볼 수 있습니다.

저 태그는 긴 문서를 적을 때, 문단을 나눌 때 사용하기 매우 편리합니다.

그러면 문단으로 본문을 적었으니, 제목을 적어야 겠죠?
 

이제 h1태그 부터 h6 태그까지의 사용법을 알아 보도록 하겠습니다.

아까 짠 문단 코드 (p 태그) 위에다가 이 소스를 추가하여 봅시다.

<h1>가장 큰 제목</h1>
<h2>부제목</h2>
<h3>부제목의 간단한 설명</h3>
<h4>정리 제목</h4>
<h5>요약 제목</h5>
<h6>가장 작은 제목</h6>

이제 화면에 출력된 결과를 보시면 각 글씨가 크기가 다르게 나온다는 것을 확인 할 수 있습니다.

저는 저 태그들을 저 위에 소스코드에서 말한 대로 사용하고 있지만, 여러분은 알아서 다르게 각자 사용하시면 됩니다.

그러면 이제 다음 강의에서는 조금 더 많은 기능에 대해 살펴보도록 하겠습니다.

댓글

댓글 본문
버전 관리
int
현재 버전
선택 버전
graphittie 자세히 보기