html 2강ㅣbr 태그

지금까지 알아봤던 것들은 어떻게 생겼나요?

맞습니다. <> 이렇게 생긴 게 2개 있었죠?

<태그 이름> </태그 이름> 이런 식으로 말이죠.

 

하지만 "br"이라는 태그는 약간 특이합니다.

지금까지 알아봤던 것들은 요소들을 감싼다는 느낌이 강했다면,

이건 감싸는 게 아니라 그냥 태그 그 자체로 뜻을 가집니다.

"br"이라는 태그 안에 뭘 넣을 수 없어요.

br 태그는 이렇게 생겼거든요.

<br>

이전 글을 보셨던 분들이라면 뭔가 좀 이상하다고 느끼실 수 있습니다.

왜냐하면 이전 시간에 배웠던 태그들은 다 이렇게 생겼거든요.

<h1></h1>
<strong></strong>

<> 하나로만 끝나는 게 아니라 2개입니다.

<h1>(하나) </h1>(둘)

2개죠?

왜 하필 2개고 또 2번째 건 왜 "/" 이게 들어가는 걸까요?

 

 

<>가 2개인 이유

이전 시간에 h1 태그는 글자를 감싸면서 html에게 "이거 제목이야"라고 전달해주는 거라고 했잖아요?

그런데 제가 <h1 (감쌀 글자)> 이렇게 감싸는게 아니라고 했습니다.

근데 왜 <h1 (감쌀 글자)> 이렇게 감싸면 안되는건데요?

<h1 (감쌀 글자)> 이런 식으로 생긴 게 훨씬 더 편하잖아요.

 

사실 그 이유는 간단한데요,

<h1>의 안은 "속성"이라는 태그의 정보들을 적어두는 곳이기 때문입니다.

예를 들어 <h1 id="1234">와 같은...

id 이게 뭔지는 모르셔도 됩니다. 그냥 이런 걸 표현하는 곳이라서 안에 적으면 안된다는 것만 아시면 됩니다.

 

그럼 안에 넣으면 안되는 이유는 알겠고... 왜 2개일까요?

그 이유는 더 간단합니다. 

<h1>안녕하세요 저는 ddtt786입니다.

만약 이렇게 되어있다고 쳐볼게요.

여러분은 어디까지가 제목인지 아실 수 있나요?

뭐 사람이면 직감적으로 "안녕하세요" 까지가 제목 아닌가요? 할 수 있겠지만...

다른 분들에게도 지겹게 들으셨다시피 기계는 멍청합니다.

html은 인공지능도 아니기 때문에 어디까지가 제목인지 몰라요.

그래서 멍청한 기계에게 "여기까지가 제목이야" 하기 위해서

2개를 넣는거랍니다.

<h1>안녕하세요 저는 ddtt786입니다.<h1>

이렇게요.

이렇게 하면 훨씬 더 간단하게 어디까지가 제목인지 알 수 있겠죠?

 

... 잠깐만요. 이것도 이상합니다.

어느 부분이 이상한지 찾으셨나요?

또다시 예를 들어보겠습니다.

<h1>안녕하세요 저는 ddtt786입니다.<h1>반가워요~<h1>

여러분은 이 코드에서 어디가 제목인지 알 수 있나요?

"모두 다 제목 아니에요?" 하실 수도 있겠지만 아까도 말했다시피

<h1>같은 글자를 감싸는 태그는 2개입니다.

그런데 총합 3개잖아요. 그럼 어느 하나가 가짜라는 건데...

이건 인간도 찍을 수 밖에 없죠. 뭐가 가짜인지는 적은 사람만 압니다. 그렇죠?

 

그래서 h1으로 감싸줄 때 감싸는 걸 시작하는 것과 감싸는 걸 멈추는 걸 따로 구분지어야 합니다.

그럼 그걸 어떻게 구분지었냐고요?

맞습니다. /로 구분시켰죠.

 

앞에 /가 있으면(</h1>) 감싸는 걸 멈춘다는 뜻이고, /가 없으면 (<h1>) 감싸는 걸 시작한다는 뜻입니다.

<h1>오늘의 일기</h1> 이런식으로 하면

"이 부분부터 제목으로 만들고 이 부분까지 제목으로 만들어!" 라고 html에게 명확하게 명령할 수 있겠죠?

본론

그래서 br 태그는 왜 하나일까요?

 

br 태그의 역할이 뭘까요?

바로 "줄바꿈" 입니다.

br 태그는 단지 "이 부분을 줄바꿈 해줘" 라는 뜻을 가지고 있기 때문에,

무엇을 감싸거나 할 필요가 없습니다. 단지 "여기 줄바꿈해줘"라고 하는 태그이기 때문에요.

 

그렇기 때문에 하나입니다. 

활용

그럼 br 태그가 어떤 용도인지도, 왜 하나인지도 배웠으니 활용을 해볼까요?

일단 오늘 고기를 먹었다..맛있었다. 에서 빨간색 부분을 줄바꿈하고 싶네요.

줄바꿈하고 싶은 부분에 <br>을 추가하겠습니다.

 

저장하고 파일을 열어보면 잘 줄바꿈됨을 알 수 있습니다.

감사합니다! 다음 시간에 뵙겠습니다.