<body> 태그는 문서의 몸통을 나타내는 태그입니다.
<head> 태그와 대조적으며, 브라우저 화면에 보이는 것들이 주로 들어갑니다.
목록
다음은 <body>태그 내부에 들어가는 대표적인 태그들의 목록입니다.
<br> 태그
- 줄을 바꾸는 태그
기본적으로 HTML은 코드 가독성 향상을 위해 줄 바꿈을 해도 줄 바꿈이 화면에 출력되지 않습니다. (=한 줄로 연이어 나옵니다)
줄 바꿈을 하려면 직접 줄 바꿈을 한다는 명령을 적어 주어야 하며, HTML에서는 <br>를 통해 줄 바꿈 합니다.
✍<br>사용법
첫번째줄<br> 두번째줄💻출력
첫번째줄
두번째 줄
띄어쓰기, 탭을 해도 화면에 출력되지 않습니다.
실제 줄바꿈이 그대로 반영되게 하고 싶을 때가 있을 것입니다.
이때는 <pre>태그를 사용하면 됩니다.
👺주의👺
<pre>태그는 줄바꿈 뿐만 아니라 띄어쓰기, 탭 등 원래 무시되던 문자들이 출력되게 됩니다.
✍<pre>사용법
첫번째줄<pre> 두번째줄<pre> 세번째줄💻출력
첫번째줄
두번째줄세번째줄
<a> 태그
<p></p> 태그는 paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰입니다.
✍<p>사용법
<html>
<body>
<p>first paragraph</p>
<p>second paragraph</p>
<p>
new line<br>
third paragraph
</p>
</body>
</html>💻출력
first paragraph
second paragraph
new line
third paragraph
<strong> 태그
<strong></strong> 태그는 글자를 굵게 표시하는 태그입니다.
<b></b>태그도 같은 기능을 하며 최신 표준은 <b> 태그 보다는 <strong> 태그를 권고 하고 있습니다.
CSS에서 font-weight을 bold으로 설정하는 것과 같은 효과를 나타냅니다.
✍<strong>사용법
<html>
<body>
<b>bold content</b>
normal content
</body>
</html>💻출력
bold content normal content
<i> 태그
<i></i> 태그는 글자를 기울여서 표시하는 태그로, italic의 약자입니다.
CSS에서 font-style을 italic으로 설정하는 것과 같은 효과를 나타냅니다.
✍<strong>사용법
<html>
<body>
<i>italic content</i>
normal content
</body>
</html>💻출력
italic content normal content
<h#> 태그
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그를 묶어서 <h#> 태그라고 지칭하겠습니다.
이 태그들은 섹션, 문단의 제목을 나타내며 숫자가 작을수록 글자의 크기가 커집니다. (높은 등급)
단순히 글자의 크기가 크게 보일뿐만 아니라, 봇(컴퓨터, 검색엔진)이 문서를 파악하기 위해 쓰이므로 상황에 맞게 <h#>를 잘 써주는 것이 중요합니다. - 최적화에 중요합니다!
✍<h#>사용법
<h1>문화</h1>
<h2>문화는 어떻게 사회에 영향을 미치는가</h2>
<p>...</p>💻출력
문화
문화는 어떻게 사회에 영향을 미치는가
...
<a> 태그
<a></a> 태그는 하이퍼링크를 걸어주는 태그입니다.
속성
- href: 클릭시 이동 할 링크
- target: 링크를 여는 방법
self: 현재 페이지 (기본값)
blank: 새 탭
_parent: 부모 페이지로, iframe 등이 사용된 환경에서 쓰입니다.
_top: 최상위 페이지로, iframe 등이 사용된 환경에서 쓰입니다.
프레임이름: 직접 프레임이름을 명시해서 사용할 수도 있습니다.
✍<a>사용법
<html>
<body>
<a href="http://www.naver.com">Go Naver</a><br>
<a href="http://google.co.kr" target="_blank">Go Google (new window)</a>
</body>
</html>💻출력
Go Naver
Go Google (new window)
<img> 태그
<img> 태그는 이미지를 삽입하는 태그로, src 속성을 통해 이미지 경로를 지정합니다.
이미지 파일이 src 속성에서 지정한 경로에 없을시, 이미지는 출력되지 않거나 엑스박스가 뜨게 됩니다.
속성
- src: 이미지의 경로
- width: 이미지 가로 크기
- height: 이미지 세로 크기
✍<img>사용법
<html>
<body>
<p>
이미지가 정상적으로 삽입 된 경우<br>
<img src="/images/attach/logo_black.png" width="245" height="50">
</p>
<p>
없는 이미지가 삽입 된 경우<br>
<img src="no_img.png" width="100" height="50">
</p>
</body>
</html>💻출력
이미지가 정상적으로 삽입 된 경우
없는 이미지가 삽입 된 경우
- 이미지가 현재 정상적이지 않으니 추후에 고치겠습니당
<table> 태그
추후에 추가하겠습니다.
