[HTML] 줄바꿈<br> VS 단락<p>, <strong> vs <b> ,속성과 <img>

줄바꿈<br> VS 단락<p>

• <br>태그를 통해서 줄바꿈을 할 수 있다.
• 단락을 바꾸려면 <br>을 여러 번 사용하므로써 단락을 바꿀 수 있다.
• <br>태그는 <strong>, <u>와는 달리 감싸야하는 컨텐츠가 없기때문에 태그를 닫지 않는다.

그런데, 단락(paragraph)을 바꾸는 태그가 하나 더 존재한다. <p>태그를 통해 단락을 그룹핑할 수 있고, 컨텐츠를 그룹핑하면서 단락을 나누는 만큼 <br>과는 다르게 태그를 닫아줘야한다.

​

<p>는 단락을 표현하는데 사용한다. <br>은 문장을 강제로 줄바꿈 하고싶을 때 사용한다. 물론 <p>는 단락 간의 간격이 고정되어있고, <br>은 손쉽게 단락 간격을 조절할 수 있지만 코드의 가독성이나 <p>태그 안에서의 줄바꿈 등의 이유로 조금 귀찮더라도 단락을 구분할 때는 <p>태그를 쓰는 것을 추천한다. 

When to use <p> vs. <br>

<p>와 <br>를 정말 잘 설명하고 있는 글이다.

 

Example

 

<p>Suspendisse sodales odio in felis sagittis hendrerit. Donec tempus laoreet
est bibendum sollicitudin. Etiam tristique convallis<br/>rutrum. Phasellus 
id mi neque. Vivamus gravida aliquam condimentum.</p>

 

Result

Suspendisse sodales odio in felis sagittis hendrerit. Donec tempus laoreet est bibendum sollicitudin. Etiam tristique convallis
rutrum. Phasellus id mi neque. Vivamus gravida aliquam condimentum.

이 예시를 잘 주목하면, <p>는 문장의 맥락을 가져가는 의미로 사용하고 <br>은 <p>태그 안에서도 강제로 줄바꿈하게 한다.

 

이런식으로 단락을 구분할 때는 <p>태그를 사용해주면 가독성도 뛰어나고 <br>태그를 여러 번 사용하여 줄 간격을 조정하는것 보다 편리하며 코드를 더 짧게 만들어준다.

​

CSS를 이용하면 아래와 같은 문장들로 단락간의 간격을 세밀하게 조정할 수 있다. 지금은 CSS를 이용해서 단락간 간격을 조정할 수 있다는 사실만 알아두면 될 것 같다.

<p>Welcome to the home page.</p>
<p style="border: 1px solid #00ff00;">Check out our stuff.</p>
<p>You really should.</p>

---

<strong> VS <b>

두 태그 모두 텍스트를 굵게 만들 수 있지만, <strong> 태그는 굵은 텍스트가 의미적 중요성이나 강조를 나타낼 때 선호되며, <b> 태그는 의미적인 영향을 주지 않는 단순한 스타일 변경에 적합하다. <strong> 태그가 좀 더 의미적인 bold라고 생각하면 된다.

---

속성과 <img>

웹페이지에 이미지를 넣으려면 <img>태그를 사용하면 된다. 그런데 이 이미지가 어떤 이미지인지 정보를 명시해줘야하는데, 지금까지 배운 문법만으로는 쉽지 않다. 여기서 속성(attribute)이 쓰인다.

<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png">
<img src="/images/coding.jpg">

 

위와 같은 방식으로 인터넷에 있는 이미지를 불러올 수 있다. 내 컴퓨터에 이미지가 없어도 src 속성에 인터넷 링크를 제공하므로써 웹페이지에 이미지를 실을 수 있는 것이다. 내 컴퓨터에 있는 이미지를 표시하고싶다면 src에 이미지가 있는 위치를 알려주면 된다. 이미지 파일의 경로는 상대경로로도 지정할 수 있고, 절대경로로도 지정할 수 있다.

이미지의 크기도 조절 가능하다. 이런 옵션같은 부분이 궁금하다면 html img size attribute와 같은 방식으로 검색하여 알아낼 수 있다. 이미지의 크기는 width 속성을 통해 조절 가능하다.

<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png" width="50%">