-
[코딩4] html 제목 태그 <h1> ~<h6> & 문단태그 <p> & 줄바꿈 태그 <br>코딩의 즐거움/HTML 2020. 10. 9. 18:15
제목 태그 h1 ~ h6
h1 ~ h6까지가 제목을 나타내는 태그이다.
body 태그 안에
<h1> 내용 적고 </h1>
적으면 아래와 같이 나타난다.
h1에서 h6으로 갈수록 글자 크기가 점점 작아진다.
닫기 태그를 꼭 적어줘야 한다.
<h1> 적었으면 뒤쪽에 슬러시를 넣어준 </h1> 태그를 적어줘야 한다.
기본적으로 글자가 굵게 나타나며,
아래 한줄은 건너 띄고 다음 줄에 글자가 나타난다.
h6까지 밖에 없으며 h7을 적으면 기본 글자크기로 나타난다.
문단 태그 <p>
이것도 마찬가지로 열리는 태그 뒤에 닫히는 태그도 있어야 한다.
<p> 내용 </p>
p태그는 paragraph 문단의 약자로 하나의 문단을 만들 때 쓰인다.
내용을 입력 후 저장한 다음 웹페이지를 열어보면
위와 같은 형태로 출력이 된다.
p태그 다음에 나오는 글자는 한줄 띄고 그 아래에 나타난다.
위에 단락1과 단락 2 사이에 생긴 공백은 단락 1을 묶어 준 p태그의 효과다.
제목 태그와 마찬가지로 많이 사용되는 태그 중 하나이다.
줄 바꿈 태그 <br>
html 편집기 안에 내용을 입력해줬다.
body 태그 안에
"안녕하세요.
반갑습니다.
코미즐의 블로그에 오신 걸
환영합니다"
라고 엔터를 사용해서 줄바꿈을 해줬다.
하지만 저장하고 웹페이지를 출력하면 아래와 같이 나타난다.
줄바꿈이 적용되지 않은 것을 걸 볼 수 있다.
이때 필요한게 줄바꿈 태그인 br 태그이다.
br태그를 사용해야지 내가 원하는 형태로 출력이 가능하다.
<br> 태그 한번에 하나의 줄바꿈이 되기 때문에
한 줄 건너 띄고 두 번째 줄에 글을 적고 싶다면 <br> 태그를 두 번 써주면 된다.
그리고 br 태그는 닫히는 태그가 없다.
대부분이 닫히는 태그가 필요한데 br 태그는 없다는 걸 기억하기 바란다.
<br> 적용 후 출력 결과물 br태그를 적어줬더니
내가 원하던대로 내용이 출력되었다.
제목 태그 <h1 ~ h6></h1 ~ /h6>
문단 태그 <p></p>
줄바꿈 태그 <br>
<body> 태그 안에 적어야 한다는 것 잊지 말자.
쉽지만 유용한 태그에 대해서 알아보았다.
'코딩의 즐거움 > HTML' 카테고리의 다른 글
[코딩6] body 여백 (0) 2020.10.12 [코딩5] html 링크 걸기 & 텍스트 색 바꾸기 (0) 2020.10.10 [코딩3] html 배경색 + 배경이미지 추가 (0) 2020.10.07 [코딩2] HTML 기본 구조 - title & body 실습 (0) 2020.10.06 [코딩1] HTML 편집기 - 에디트플러스 EditPlus & 아톰 Atom (0) 2020.10.05