[HTML] 8~9 줄바꿈 br vs p (html new line tag)

 

---

 

 

생활코딩 [WEB1 - HTML & Internet] STUDY 기록

 

 

---

8. 통계에 기반한 학습

 

검색
advancedwebranking html

https://www.advancedwebranking.com/seo/html-study/

 

 

 

9. 줄바꿈 : br vs p

<h1>서시</h1>

죽는 날까지 하늘을 우러러한 점 <strong><u>부끄럼</u>이 없기를</strong>, 잎새에 이는 바람에도 나는 괴로워했다.별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지.그리고 나한테 주어진 길을걸어가야겠다.오늘 밤에도 별이 바람에 스치운다.

계절이 지나가는 하늘에는가을로 가득 차 있습니다.나는 아무 걱정도 없이가을 속의 별들을 다 헬 듯합니다.가슴 속에 하나 둘 새겨지는 별을이제 다 못 헤는 것은쉬이 아침이 오는 까닭이요내일 밤이 남은 까닭이요아직 나의 청춘이 다 하지 않은 까닭입니다.별 하나에 추억과별 하나에 사랑과별 하나에 쓸쓸함과별 하나에 동경과별 하나에 시와별 하나에 어머니, 어머니,어머님, 나는 별 하나에 아름다운 말 한마디씩 불러 봅니다. 소학교 때 책상을 같이 했던 아이들의 이름과 패, 경, 옥, 이런 이국 소녀들의 이름과, 벌써 아기 어머니된 계집애들의 이름과, 가난한 이웃 사람들의 이름과, 비둘기, 강아지, 토끼, 노새, 노루, '프랑시스 잠', '라이너 마리아 릴케' 이런 시인의 이름을 불러 봅니다.이네들은 너무나 멀리 있습니다.별이 아스라이 멀 듯이.어머님,그리고 당신은 멀리 북간도에 계십니다.나는 무엇인지 그리워이 많은 별빛이 내린 언덕 위에내 이름자를 써 보고흙으로 덮어 버리었습니다.딴은 밤을 새워 우는 벌레는부끄러운 이름을 슬퍼하는 까닭입니다.그러나 겨울이 지나고 나의 별에도 봄이 오면무덤 위에 파란 잔디가 피어나듯이내 이름자 묻힌 언덕 우에도자랑처럼 풀이 무성할거외다.

'서시'에 '별 헤는 밤'까지 추가했다.

단락 구분이 없어서, 보기 힘들다.

 

 

검색
html new line tag

https://www.w3schools.com/tags/tag_br.asp

 

 

<br> : 줄바꿈

<h1>서시</h1>

죽는 날까지 하늘을 우러러한 점 <strong><u>부끄럼</u>이 없기를</strong>, 잎새에 이는 바람에도 나는 괴로워했다.별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지.그리고 나한테 주어진 길을걸어가야겠다.오늘 밤에도 별이 바람에 스치운다.
<br><br><br>
계절이 지나가는 하늘에는가을로 가득 차 있습니다.나는 아무 걱정도 없이가을 속의 별들을 다 헬 듯합니다.가슴 속에 하나 둘 새겨지는 별을이제 다 못 헤는 것은쉬이 아침이 오는 까닭이요내일 밤이 남은 까닭이요아직 나의 청춘이 다 하지 않은 까닭입니다.별 하나에 추억과별 하나에 사랑과별 하나에 쓸쓸함과별 하나에 동경과별 하나에 시와별 하나에 어머니, 어머니,어머님, 나는 별 하나에 아름다운 말 한마디씩 불러 봅니다. 소학교 때 책상을 같이 했던 아이들의 이름과 패, 경, 옥, 이런 이국 소녀들의 이름과, 벌써 아기 어머니된 계집애들의 이름과, 가난한 이웃 사람들의 이름과, 비둘기, 강아지, 토끼, 노새, 노루, '프랑시스 잠', '라이너 마리아 릴케' 이런 시인의 이름을 불러 봅니다.이네들은 너무나 멀리 있습니다.별이 아스라이 멀 듯이.어머님,그리고 당신은 멀리 북간도에 계십니다.나는 무엇인지 그리워이 많은 별빛이 내린 언덕 위에내 이름자를 써 보고흙으로 덮어 버리었습니다.딴은 밤을 새워 우는 벌레는부끄러운 이름을 슬퍼하는 까닭입니다.그러나 겨울이 지나고 나의 별에도 봄이 오면무덤 위에 파란 잔디가 피어나듯이내 이름자 묻힌 언덕 우에도자랑처럼 풀이 무성할거외다.

<br> 태그를 이용해서, 줄바꿈 되는 것을 볼 수 있다.

 

 

 

검색
html paragraph tag

https://www.w3schools.com/tags/tag_p.asp

 

<p> : 단락 구분

<h1>서시</h1>

<p>죽는 날까지 하늘을 우러러한 점 <strong><u>부끄럼</u>이 없기를</strong>, 잎새에 이는 바람에도 나는 괴로워했다.별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지.그리고 나한테 주어진 길을걸어가야겠다.오늘 밤에도 별이 바람에 스치운다.</p>

<p>계절이 지나가는 하늘에는가을로 가득 차 있습니다.나는 아무 걱정도 없이가을 속의 별들을 다 헬 듯합니다.가슴 속에 하나 둘 새겨지는 별을이제 다 못 헤는 것은쉬이 아침이 오는 까닭이요내일 밤이 남은 까닭이요아직 나의 청춘이 다 하지 않은 까닭입니다.별 하나에 추억과별 하나에 사랑과별 하나에 쓸쓸함과별 하나에 동경과별 하나에 시와별 하나에 어머니, 어머니,어머님, 나는 별 하나에 아름다운 말 한마디씩 불러 봅니다. 소학교 때 책상을 같이 했던 아이들의 이름과 패, 경, 옥, 이런 이국 소녀들의 이름과, 벌써 아기 어머니된 계집애들의 이름과, 가난한 이웃 사람들의 이름과, 비둘기, 강아지, 토끼, 노새, 노루, '프랑시스 잠', '라이너 마리아 릴케' 이런 시인의 이름을 불러 봅니다.이네들은 너무나 멀리 있습니다.별이 아스라이 멀 듯이.어머님,그리고 당신은 멀리 북간도에 계십니다.나는 무엇인지 그리워이 많은 별빛이 내린 언덕 위에내 이름자를 써 보고흙으로 덮어 버리었습니다.딴은 밤을 새워 우는 벌레는부끄러운 이름을 슬퍼하는 까닭입니다.그러나 겨울이 지나고 나의 별에도 봄이 오면무덤 위에 파란 잔디가 피어나듯이내 이름자 묻힌 언덕 우에도자랑처럼 풀이 무성할거외다.</p>

단락 구분하기 때문에 열리는 태그와 닫히는 태그가 있다.

 

 

★css

태그와 태그 사이에 여백을 나타내는 태그가 있음.

margin-top

<p>죽는 날까지 하늘을 우러러한 점 <strong><u>부끄럼</u>이 없기를</strong>, 잎새에 이는 바람에도 나는 괴로워했다.별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지.그리고 나한테 주어진 길을걸어가야겠다.오늘 밤에도 별이 바람에 스치운다.</p>

<p style="margin-top: 40px;">계절이 지나가는 하늘에는가을로 가득 차 있습니다.

여백이 넓어짐!