이번 이간에는 html 편집 명령어 중에서도 기초적인 태그를 알아보려 하는데요 바로 html 줄바꿈 태그 입니다^^ 간단한것 같으면서도 미묘한 차이가 있는 태그들이 있어서 어떤것을 써야 하는지 헷갈려 하시는 분들도 많은것 같아서 정리해 보게 되었습니다 혹시 다른 전에 포스팅했던 html 태그 관련해서 알고 싶으신 분들은 하단 주소로 들어가셔서 확인해 보시면 도움이 되실겁니다 ㅎㅎ
자 이제 본격적으로 html 줄바꿈 태그에 대해서 알아보도록 하겠습니다 일반화면에서는 엔터키만 누르면 줄이 바뀌지지만 html 상에서는 아무리 엔터를 눌러도 출력화면은 그대로인것을 확인할 수 있습니다 이런경우 태그를 이용해서 표시해 주셔야 합니다!
그렇다면 과연 어떻게 표시해줘야 하는 것일까요?
가장 쉽게 말씀드리면 <br> 태그를 이용해 주시면 되겠습니다 이 태그를 써주시면 쓰는 만큼 무조건 줄바꿈이 됩니다 이것을 가리켜서 html new line tag 라고도 하는데요 구글 검색을 통해서도 쉽게 확인 하실 수 있습니다
간단한 예시를 통해서 살펴보도록 하겠습니다 JS Bin 사이트를 통해서 html 태그 입력과 출력화면을 같이 확인해 보실 수 있는데요 전시간에도 말씀드렸으니 자세한 내용은 패스 하도록 하겠습니다 위 그림과 같이 '안녕하세요 반갑습니다 줄바꾸기 전입니다' 라는 글을 써봤는데요 단순하게 엔터를 누른다고 해서 출력화면에는 줄바꾸기가 되지 않는 것을 확인하실 수 있습니다 대신 띄어쓰기만 적용되죠 ㅎㅎ
이제 엔터를 누르지 않고 <br> 태그를 넣어주었습니다 그러면 오른쪽 출력화면을 확인해 보면 줄바꾸기가 된것을 알 수 있습니다~ br 태그는 다른 태그와는 다르게 열고 닫는 태그가 아니기 때문에 / 표시를 하실 필요는 없습니다 그냥 <br> 이라고 표시해주시면 되는 것이죠 ㅎㅎ
이번에는 2번 입력해줘보겠습니다 그럼 어떻게 될까요? 오늘쪽 그림과 같이 마찬가지로 다시한번 줄바꿈이 될것을 확인할 수 있습니다 br태그는 마치 키보드 엔터와 같다고 생각 하시면 편하겠죠~
3번을 입력해주셔도 마찬가지로 3번 줄바꿈이 되는 것을 확인하실 수 있습니다 예상대로 잘 되는것을 알수 있죠!
하지만 html 줄바꿈 태그로 p태그가 있는데요 이 태그는 단락을 나눠주는 태그로 닫힘 태그를 반드시 입력 해줘야 합니다 이것이 바로 br 태그와 다른 점이라고도 할 수 있겠습니다 그리고 여러번 입력한다고 해서 입력한만큼 줄바꿈이 되지 않으니 이점도 유의해주셔야 하는데요 아래 그림 설명으로 천천히 확인해 보도록 하겠습니다
<p> 태그를 이용해서 중간에 똑같이 넣어주시면 br 태그와 마찬가지로 처음에는 줄바꾸기가 잘 됩니다 물론 단락을 완전히 나눠주는 것이기 때문에 br 태그로 표시하려면 2번 입력 해주셔야 하겠죠 ㅎㅎ
앞서 p태그는 문단을 나눠주는 태그라고 했듯이 앞에서 <p>태그를 사용하였다면 반드시 끝날때는 </p>태그로 마무리 해주셔야 합니다 위 그림에서 나오는것처럼 문단이 나누어 지게 되는 것이지요~
이제 이 p태그를 여러번 사용해볼까요? 다음 과 같이 여러번 입력했는데도 그대로 인것을 볼 수 있습니다 바로 문단을 한번 나누어 주는 역할만 하기 때문에 그런 것입니다~
총정리해서 말씀드리면 br 태그는 입력하는 만큼 줄바꾸기가 되어 편리한 점이 있겠지만 문단을 나누게 될시 여러번 입력해야 한다는 단점이 있고 p태그는 문단을 한번에 구별해주지만 한번밖에 줄바꾸기가 안된다는 단점이 있습니다 해당 내용을 잘 숙지하시고 편리하게 이용해 보셨으면 좋겠습니다~
이상으로 html 줄바꿈 태그에 대해서 간단하게 소개해드렸는데요 html 수정 작업을 하시다보면 여러가지 궁금증이 생기실 수도 있고 모르는것은 바로바로 해결하셔야 기억에도 잘 남게 됩니다 혹시 평소에 모르셨던 태그가 있다면 아래 글을 참고해보시고 명확하게 알아가시길 바랍니다~
댓글