html 1강ㅣ태그의 의미

html은 문법 없이 적어도 글자가 출력은 되는데요,

작성한 html 파일을 열어보면 그 사실을 알 수 있죠.

파일 탐색기에서 작성한 html 파일을 2번 눌러서 열어보겠습니다.

(이런 창이 뜨면 자주 쓰는 브라우저를 선택한 후 "항상 이 앱을 사용하여 .html 열기"를 클릭해주세요.)

잘 열렸네요. 입력한 글자도 잘 출력되는거 같은데...

약간 이상한 점이 있습니다.

줄바꿈이 없어요!

분명 파일에서 줄바꿈을 했는데 말이죠.

 

이런 것 때문에 html 문법을 배워야 하는 필요성이 생깁니다.

 

 

일단 "오늘의 일기" 이걸 다른 것과 구분할 필요가 있어보이네요.

"오늘의 일기"는 제목인데 다른 글자랑 다를 게 없어요.

 

그럼 어떻게 구분시키냐고요?

바로 "태그"로 구분시킵니다.

태그

"오늘의 일기" 이걸 제목으로 바꾸고 싶습니다.

그럼 어떻게 하면 될까요?

간단합니다.

 

일단 먼저 "오늘의 일기" 앞에 <h1>을 입력해주세요.

그리고 "오늘의 일기" 뒤에 </h1>을 입력해주세요.

 

vsc의 어떨 때는 짜증나는 자동완성으로 벌써 </h1>을 만들어버렸네요.

자동 완성된 </h1>을 지우고 "오늘의 일기" 뒤에 </h1>을 입력하겠습니다.

자 이렇게 하면 된 겁니다. 저장해주고 html 파일을 연 (브라우저) 탭을 새로고침 해주겠습니다.

와우! "오늘의 일기"가 제목처럼 바뀌었습니다.

<h1> </h1> 은 무슨 의미일까요?

바로 html에게 "여기 안에 있는 거 제목이니까 네가 알아서 처리해줘"라는 의미입니다.

*<h1>샌즈</h1> 안에 있는 글자가 "샌즈" 입니다.

<h1 샌즈></h1> 이런 게 아닙니다 😅

감싸준다고 생각하면 편합니다.

<h1>오늘의 일기</h1> 는 "오늘의 일기" 가 제목이라고 html에게 알려준 거죠.

그걸 보고 html은 "아 저거 제목이구나" 하고 자동으로 제목답게 표시한 겁니다.

 

 

 

그럼 이 코드를 실행했을 때의 결과는 예상하실 수도 있을 것 같은데요,

"strong" 이 "강한"이라는 건 누구나 알고 있으니까요.

한번 저장하고 파일을 연 (브라우저) 탭을 새로고침 해볼까요?

 

 

"고기를 먹었다."가 강조된 것을 확인할 수 있습니다.

그럼 왜 강조되었을까요?

맞습니다. <strong></strong>은 html에게 "여기 안에 있는 글자 강조 좀 해줘"라는 뜻이기 때문에,

html이 <strong></strong> 안에 있는 글자, 즉 "고기를 먹었다."를 강조한 것입니다.

 

 

"잠시만요. 그러면 <strong> 이런 것도 있으면 <verystrong></verystrong>이런 것도 있나요?"

"<wasans></wasans> 이런것도 있어요??"

하실 수도 있는데요,

html은 자신이 이해할 수 있는 표시만 알아듣기 때문에,

verystrong과 wasans는 html에 등록되어있는 표시가 아니어서

"고기를 먹었다."라는 글자를 <verystrong> 고기를 먹었다. </verystrong>로 만들어도 아무 일도 일어나지 않습니다.

직접 해보세요!

 

 

이렇게 html에게 <> 표시로 html에게 "~~~해줘" 라는 의미가 있는 글자를,

"태그" 라고 부릅니다.

 

 

 

이해가 안 되신 부분은 당연히 있을 수 있습니다!

댓글로 알려주시면 답변드리겠습니다 :)

다음 시간에 뵙겠습니다!