[생활코딩_WEBn] 줄바꿈

---------------------------------------------------------

* 생활코딩 WEBn 정독하기 project *

줄바꿈

LINK : https://opentutorials.org/course/3084/18403

----------------------------------------------------------

 

1. 줄바꿈을 위한 경쟁관계에 있는 태그 두 가지. 

1) 코드에서 줄바꿈을 한다고 해도, 화면에서 줄 바꿈 되어 나오지 않는다. 따라서 별도의 태그 필요. 

2) br tag (추천 검색어 : HTML new line tag - 직접 검색해서 찾아보기! )

 

1. <h1>리그 오브 레전드란?</h1>
2. 리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 <strong>서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 <u>전략 게임</u></strong>입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁취하세요.<br><br>기지 파괴하기
3. <br>넥서스는 양 팀 기지의 심장부입니다. 적의 넥서스를 먼저 파괴하는 팀이 게임에서 승리합니다.<br><br>아군 넥서스<br>넥서스에서 미니언이 생성됩니다. 넥서스 뒤에 있는 소환사의 제단에서 체력과 마나를 빠르게 회복하고 상점을 이용할 수 있습니다.<br><br>적팀 넥서스<br>적팀 기지에는 아군과 동일한 넥서스가 있습니다. 적팀 넥서스를 파괴하면 게임에서 승리합니다.

위 코드의 결과물

• br 태그의 특징
  • 보통 태그는 열고 닫히는 태그인데, br 태그는 닫지 않음. 
  • 줄바꿈 많이 하고 싶으면 여러 번 쓰면 된다.

3) p tag (추천 검색어 : HTML paragraph tag- 직접 검색해서 찾아보기) 

 

1. <h1>리그 오브 레전드란?</h1>
2. 리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 <strong>서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 <u>전략 게임</u></strong>입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁취하세요.
3. <p>기지 파괴하기
4. <br>넥서스는 양 팀 기지의 심장부입니다. 적의 넥서스를 먼저 파괴하는 팀이 게임에서 승리합니다.</p>
5. <p>아군 넥서스<br>넥서스에서 미니언이 생성됩니다. 넥서스 뒤에 있는 소환사의 제단에서 체력과 마나를 빠르게 회복하고 상점을 이용할 수 있습니다.</p>
6. <p>적팀 넥서스<br>적팀 기지에는 아군과 동일한 넥서스가 있습니다. 적팀 넥서스를 파괴하면 게임에서 승리합니다.</p>

위 코드의 결과물

• p 태그 특징
  • 열리는 태그 / 닫히는 태그 있음.
  • 단락에 사용하기 위해 만든 태그이기 때문에, 웹페이지를 정보로써 가치 있게 만든다. 
  • 이것이 '단락'이라고 의미론적으로 표현. 
  • br은 단순히 줄 바꾸는 모양을 만드는 것. 
  • 정해져 있는 여백만큼만 움직이기 때문에 디자인에 제약이 있음. 

2. p 태그에 여백을 세밀하게 조절해 줄 CSS 

 

1. <h1>리그 오브 레전드란?</h1>
2. 리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 <strong>서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 <u>전략 게임</u></strong>입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁취하세요.
3. <p style="margin-top:40px;">기지 파괴하기
4. <br>넥서스는 양 팀 기지의 심장부입니다. 적의 넥서스를 먼저 파괴하는 팀이 게임에서 승리합니다.</p>
5. <p>아군 넥서스<br>넥서스에서 미니언이 생성됩니다. 넥서스 뒤에 있는 소환사의 제단에서 체력과 마나를 빠르게 회복하고 상점을 이용할 수 있습니다.</p>
6. <p>적팀 넥서스<br>적팀 기지에는 아군과 동일한 넥서스가 있습니다. 적팀 넥서스를 파괴하면 게임에서 승리합니다.</p>

CSS로 디자인을 세밀하게 만질 수 있기 때문에, 최대한 의미에 맞는 태그를 쓰자.! 

 

 

 

* 관련된 게시물 *

[생활코딩_WEBn] 5. HTML 코딩과 실습환경 준비

[생활코딩_WEBn] 기본 문법 - 태그

[생활코딩_WEBn] 혁명적인 변화

[생활코딩_WEBn] 통계에 기반한 학습