HTML - 텍스트 태그, p태그, br태그, pre태그
텍스트 표시 (1)
오늘 포스팅은 HTML 태그 중 텍스트를 표시에 대해서 알아 보도록 하겠습니다.
먼저 태그 기초부터 알아보기 전에 이전 포스팅 중
압타나 스튜디오 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.
(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)
먼저 HTML의 텍스트 표시란 ?
말 그대로 HTML 문서에서 텍스트를 작성하는 것이며 특별한 태그 없이도
<body> </body> 안에서 표시 할 수 있습니다.
그러나!
여러 줄로 되어 있는 텍스트는 단락을 생성한 후에
단락 안에서 표시하는 것이 좋습니다!
왜냐 하면 단락을 생성하지 않으면 모든 텍스트가 하나로 연결이 되어
하나의 긴 줄로 표시가 되기 때문 입니다.
위 사진 처럼 HTML 문서를 작성 할 때 입력한 줄 바꿈 문자는 완전히 무시되어 화면서
한줄로 표시 되기 때문 입니다.
위 처럼 한줄로 표시 되는 문자를 단락을 나누는 방법 입니다.
단락을 나누는 태그는 <p> 태그라 합니다.
여기서 단락이란 전체 글을 내용에 따라 나누고자
할 때 하나씩 짧은 이야기를 나눌때를 말하는 것인데요.
사용 방법은 아래와 같습니다.
<p> 태그 사용시 굳이 닫는 </p>를 굳이 적어주지 않아도 되지만
적어주는 것이 좋습니다.
이 다음 새로운 단락을 시작하지 않고 줄을 바꾸기 원한다면
아래와 같이 <br> 태그를 사용 합니다.
위 <p>태그 사용했을 때와 비교 했을때 <p> 태그 중간 에 <br> 삽입시
줄바꿈이 되어있는게 보이실 겁니다.
참고로 <br> 태그는 다른 태그와 다르게 종료 </> 태그를 가지지 않는 태그인데요
이는 추 후 포스팅 하도록 하겠습니다.
이 다음 태그는 <pre> 태그 입니다.
<pre> 태그란 무엇일까요?
바로 HTML 문서에 글자 작성시 사용자가 입력한 그대로 화면에 나타나게 하는
즉, 입력한 그대로 화면에 표시하는 태그 입니다.
위 사진에 보시는 것과 같이 <pre 태그는 태그의 띄어쓰기 또는
문단과 문자가 붙어있건 띄어있건 그대로 출력 하는 모습이 말이죠.
여기까지 HTML - <p> <br> <pre> 태그에 차이점과 쓰는법에 관련되어 기록해 보았습니다.
다시 한번 말하지만 백번 보는 것 보다 한두번 써보는게 더 이해하기 쉽습니다.
이상 HTML - p태그, br태그, pre태그 텍스트 표시 (1)에 관련된
포스팅을 마치도록 하겠습니다.
'웹 공부 > 2. HTML5' 카테고리의 다른 글
| HTML - 이미지(img) 태그 와 src, width, height, alt 속성 - 텍스트 표시 (6) (0) | 2017.05.14 |
|---|---|
| HTML - 링크, a태그 와 href, target, id 속성 - 텍스트 표시 (5) (0) | 2017.05.13 |
| HTML - 리스트 태그 중 - ul태그, ol태그, li태그 - 텍스트 표시 (4) (0) | 2017.05.12 |
| HTML - 특수 문자 사용법 텍스트 표시 (3) (0) | 2017.05.11 |
| HTML - 헤딩과 텍스트 서식, 수평선 태그, 주석 - 텍스트 표시 (2) (0) | 2017.05.10 |
댓글