안녕하세요 ! 대남이입니다. 저번 시간에는 기본 구조의 대해서 설명드렸습니다.
이번에는 텍스트표시에 사용하는 태그들을 배워보도록합니다.
원래는 특별한 태그 없이도 <body> - </body> 안에서 텍스트를 표시할 수 있다.
하지만 여러 줄로 이루어진 텍스트는 단락을 생성한 후에 단락 안아에서 표시하는 것이 좋다. 단락을 생성하지 않으면 모든 텍스트가 연결되어서 하나의
긴줄로 표시되기 때문에 줄 바꿈이 무시된다. 이 때문에 태그들을 적절히 사용하게 되면 좀 더 효율 적으로 나타낼 수 있습니다.
그럼 여러가지 태그가 있는데, 하나씩 배워보도록 하겠습니다.
1.<p> 태그
가장 기본적인 태그라고도 말씀드릴 수 있습니다. 웹페이지의 컨텐츠를 나타내기 위해서 글을 쓸 때 p 태그를 이용하는게 가장 기본입니다.
단락은 <p>태그로 정의됩니다. 단락이란 전체글을 내용에 따라 나눌 때, 하나하나의 짧은 문장 토막을 말하는 것 입니다.
웹 브라우저는 자동적으로 단락의 전후에 빈 줄을 추가합니다.
한번 코드를 작성해보겠습니다.
p태그를 추가한 것 이외에는 저번 강의 때 했던것과 같이 코딩을 했습니다.
자 이렇게 하면 브라우저에는 이렇게 표시가 됩니다.
이와 같이 나타납니다.
2. <br> 태그
새로운 단락을 시작하지 않고 줄 바꿈을 원할때에 사용하는 태그입니다. <br>태그는 “break”에서 나온 용어이고,
이 태그는 따로 종료 태그를
가지지 않습니다. 또 br 태그는 다른 태그 중간 중간에 쓸 수 있습니다.
그래서 줄 바꿈이 필요하실 때 마다 쓰실 수 있습니다.
그럼 예를 들어 코딩을 보시겠습니다.
이렇게 p 태그 속 중간중간에 < br > 태그를 삽입하여 줄바꿈이 필요 할 때마다 사용하였습니다.
따로 <p>태그를 여러개 사용할 수 도있지만 이렇게 사용하면 편할 수 있습니다 !
그러면 브라우저에 이렇게 표시됩니다.
이처럼 나타나게 됩니다.
3. <pre> 태그
이 태그는 프로그래머가 입력한 그대로 화면에 나타나게 할 수 있는 태그입니다.
이 용어는 “previously formatted text”에서 나온 용어이고, 이것을 이용하면 개발자가 입력한 스페이스나 탭, 줄 바꿈이 그대료
유지됩니다.
줄 바꿈할때 p 태그나 br 태그를 또 생성할 필요 없이 코딩한 값대로 브라우저에 표시되게 됩니다.
그럼 예시를 보시겠습니다.
만약 p태그를 이용해 프로그래머가 임의로 줄바꿈을 했을 때는 이렇게 나타납니다.
이렇게 줄바꿈이 인식이 되지 않은채로 나타나게됩니다.
pre 태그를 사용한 예시를 보겠습니다.
이렇게 pre 태그를 이용하여 줄바꿈이 필요한 순간에 개발자가 줄바꿈을 이용하여 나타내면
pre 태그는 개발자가 입력한대로 똑같이 출력하게됩니다.
웹 브라우저에 어떻게 출력되는지 보겠습니다.
이렇게 스페이스바를 친곳은 입력된 만큼 출력되고
줄바꿈을 이용한 곳 또한 입력된 만큼 똑같이 출력되는걸 보실 수 있습니다.
4. <h1,2,3…> heading 태그
헤딩은 웹 페이지의 머리말 ( headline ) 입니다. 웹 피이지를 신문이라고 가정한다면 헤딩은 신문의 머리기사와 같다고 볼 수 있지요.
머리기사도 여러 크기가 있는 것 처럼, 헤딩도 <h1> 부터 <h6> 까지 6개의 태그를 가지고 있습니다.
1이 제일 큰 크기를 가지고 숫자 순대로 크기가 작아집니다. 헤딩태그는 글자 크기를 조절하는 기능이 아닌
머리말기능으로써 소제목이라고 알아두셔야합니다. 글자 크기를 위해 사용하셔서는 안됩니다.
글자크기는 css 에서 배우게 됩니다.
그럼 각 태그마다 크기와 어떻게 출력되는지 보겠습니다.
예를들어 이렇게 코딩을 했다면 웹 브라우저에는 이렇게 출력됩니다.
이렇게 출력됩니다 ! 잘 참고하셔서 원하는 크기의 heading 태그를 사용하시면 됩니다.
오늘의 html 강좌는 여기서 마치도록 하겠습니다. 감사합니다.
'PROGRAMING > HTML5' 카테고리의 다른 글
| #06 HTML 강좌 음악 넣기, 오디오 태그 (1) | 2017.12.01 |
|---|---|
| #05 HTML 강좌 표만들기, 테이블 태그, 행 열 병합 (0) | 2017.11.25 |
| #04 HTML 강좌 이미지 삽입 <img> 태그 (1) | 2017.11.23 |
| #03 HTML 강좌 링크와 리스트 <a>,<li> 태그 (0) | 2017.11.18 |
| #01 HTML 편집기 종류와 기본 구조 (0) | 2017.11.10 |