[생활코딩|WEB1#3] 줄바꿈, HTML이 중요한 이유 2019.12.22

---

본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

생활코딩 유튜브

생활코딩

생활코딩 사이트

생활코딩

"어떤 문제가 우리 삶에서 중요하고 심각할 수록

그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."

(생활코딩 : Web1 -1 수업소개. 중)

---

 

#0.

시험기간이었습니다...

알아요, 변명인 것 같습니다.

다시! 새로운 마음가짐으로 공부하도록 하겠습니다.

 

#1.

<br> : 줄바꿈 태그

br 태그는 닫는 태그가 없습니다.

html태그 중 무엇인가를 설명하지 않는 태그들은 감싸야하는 컨텐츠가 없기 때문에 태그를 닫지 않아도 됩니다.

img, input, br, hr, meta등의 태그등이 그러합니다.

html코드에서의 '엔터는'
br코드에 의해서 실행됩니다.

html코드에서의 '엔터는' <br>
br코드에 의해서 실행됩니다.

 

#2.

html 태그에서 단락을 표혀낳고 싶다면 p태그를 사용할 수 있습니다.

p 태그는 br 태그와 다르게 닫는 태그가 존재합니다.

단락을 그루핑하기에 단락을 태그로 감싸줘야하기 때문입니다.

html코드에서 <br>
'엔터'의 효과는 br태그와 p코드로 부여할 수 있기에,
<p> 그 결과는 거의 같도록 보일 수 있습니다. </p>
<p> 하지만 단락을 표현할 때는 <br>
줄바꿈 태그(br 태그) 보다는 <br>
단락을 표현하는 태그인 <br>
단락 태그(p 태그)가 더 효과적입니다. </p>
<p> 또한 단락 태그는, 줄바꿈 태그와 달리 <br>
단락을 감싸줘야 하기 때문에 닫는 태그가 존재합니다. </p>

줄바꿈 태그와 달리 단락태그는 윗줄과 밑줄간의 간격에서도 차이가 있는 것을 확인할 수 있네요!

이것은 단락태그의 단점으로도 여겨질 수 있습니다.

단락과 단락의 간격이 고정되어 있기 때문에 시각적으로 꾸미고자 하는 자유도가 다소 떨어질 수 있습니다.

반면 br태그는 쓰는 만큼<br><br><br>
줄 바꿈이 가능합니다.

#3.

그렇다고, 이 문제를 해결할 수 없느냐?

웹에는 CSS라는 기술이 있습니다.

CSS는 HTML과 완전히 다른 문법을 가진 언어입니다.

생활코딩에서는 HTML은 정보의 표현을, CSS는 정보의 꾸밈을 수행한다고 표현해 주셨네요.

CSS태그를 이용한다면
<p><p style="margin-top:45px;"> <!--단락 위쪽에 45px만큼 여백 생성-->
단락 태그가 가지는 한계를 극복할 수 있습니다. </p>

따라서 p태그는 단락의 경계를 분명히 하면서

CSS태그를 통해 p 태그의 디자인을 자유롭게 변경할 수 있습니다.

 

#4. HTML이 중요한 이유

웹의 핵심적인 철학은 접근성에 있습니다.

웹은 모든 운영체제에서, 모든 브라우저에서 동작하는 순수한 공공재입니다.

그러한 웹의 뼈대를 구축하는 HTML 코드를 이해고자 하는 공부는,

그 공부를 행하지 않는 사람과 10년 뒤 모습을 비교해보면 놀랍도록 우리를 앞서있게 만들어 줄것입니다.