09 줄바꿈 : <br> vs. <p>

자주 사용하는 인기 태그 두가지가 있다.

 

이 두 태그는 서로 경쟁관계에 있다.

 

1.

 

 

위와 같이 단락을 구분하면서 문장을 구성했는데, 웹 페이지에서 본다면 ?

 

 

단락 구분이 되어 있지 않은 모습을 확인할 수 있다.

 

엥 그러면 어떻게 하지 ?

 

줄 바꿈을 하는 태그를 사용 해야 한다.

 

추천 검색어 >>

html new line tag

 

검색을 통해, 줄바꿈은  HTML 에서 <br> 이라는 태그를 사용한다는 것을 알 수 있게 됬다.

 

 

 

<br>을 한번만 사용하면, 한줄이 떨어지는 것이고,

단락 구분을 하기 위해서는 <br>을 두번 사용하면 된다.

 

입맛에 맞게 <br> 태그를 1번 ~ 2번 ~ 3번 등 본인이 선택해서 사용하면 된다.

 

2.

<br> 태그는 닫는 태그가 존재하지 않는다.

 

단순 줄바꿈이라는 시각적인 의미만 갖는 태그이기 때문에 감쌀 필요가 없어서 닫는 태그가 없다.

 

3.

<br> 태그 말고도 다른 태그가 존재 한다.

 

검색 추천 단어 >>

html paragraph tag

 

paragraph는 단락을 의미 한다.

 

검색을 통해 <p> 태그가 있는것을 확인 가능 하다.

 

p는 paragraph의 첫번째 글자만 딴것을 의미 한다.

 

즉, 단락을 나타내는 태그 이다.

 

<br> 태그와 다르게 <p> 태그는 여는 태그와 닫는 태그가 존재 한다.

 

4.

 

 

 

5.

보이는 결과는 동일한데,

 

위의 <br> 태그와 다른점이 무엇일까?

 

일단 닫는 태그가 있다는 것과 ..

 

6.

<p> 태그는 정말 단락이 존재한다는 의미론적인 표현이고,

<br> 태그는 단순 줄바꿈이라는 의미의 표현이다.

줄바꿈을 두번하면 단락 처럼 느껴지기는 하겠지만,

맥락상 내가 만약에 단락 구분을 하고 싶으면, <br>을 여러번 사용하는것보다

<p> </p> 를 통해서 단락 구분을 하면 뉘앙스상 더 맞지 않을까 싶다.

 

다른 사람이 코드를 보았을 때, <p> 태그가 보이면, 아하 단락 구분을 짓나보다

를 한번에 파악할 수 있다.

 

7.

여담으로 CSS에서 태그와 태그 사이의 여백을 나타내게 해주는

margin 이라는 속성이 있다.

 

<style> 태그 안에서 선택자를 통해 margin 속성을 줘도 되지만,

 

아래에서는 margin 속성을 직접 사용해서 나타내려고 한다.

 

style 속성을 직접 쓰고 속성값으로 margin 속성값을 부여 한다.

 

 

 

그러면 이렇게 CSS 문법을 통해서 여백을 주게 된다.

 

px 앞에 숫자를 변경함으로써, 여백의 크기를 정할 수 있다.