[HTML/CSS]02.글자 태그 Vol.1

Posted by ArteLog RATTLE
2017.04.29 14:11 IT/HTML&CSS

 오늘은 글자 태그에 대해서 자세히 알아보는 시간을 갖도록 하겠습니다. 글자 태그에는 '제목 태그', '본문 태그', '앵커 태그', '글자 형태 태그' 등이 있습니다. 모두 웹퍼블리싱을 배울 때 잘 쓰이는 부분이므로 제 티스토리 블로그를 수정하면서 실습해보도록 하겠습니다.


① 제목 글자 태그


 HTML에서 대표적인 글자 태그는 제목을 입력할 때 사용하는 제목 글자 태그입니다. HTML 문서는 h 태그 요소를 통하여 문서 개요를 구조화하기 때문입니다.


 태그 이름 

 설명 

h1

 첫 번째로 큰 제목 글자 태그

h2

 두 번째로 큰 제목 글자 태그

 h3 

 세 번째로 큰 제목 글자 태그

h4

 네 번째로 큰 제목 글자 태그

 h5 

 다섯 번째로 큰 제목 글자 태그

h6

 여섯 번째로 큰 제목 글자 태그


이렇게 있습니다. 그러면 티스토리 글쓰기 HTML 버전으로 한번 살펴볼까요?



  티스토리 글쓰기 우측 상단에 HTML을 체크해주시고 다음과 같이 입력합니다.


<h1>제목 태그1</h1>

<h2>제목 태그2</h2>

<h3>제목 태그3</h3>

<h4>제목 태그4</h4>

<h5>제목 태그5</h5>

<h6>제목 태그6</h6>


 다음 티스토리 글쓰기 우측 상단에 HTML을 체크해제해주시고 확인합니다.


제목 태그1

제목 태그2

제목 태그3

제목 태그4

제목 태그5
제목 태그6
 
 이것이 대표 글자 태그인 제목 태그이고 특히 h1 태그는 페이지의 가장 중요한 제목으로 사용됩니다. 그리고 일반적인 웹페이지를 만들 대는 h 태그부터 h3 태그까지 사용합니다. 실제 웹 페이지를 제작할 때는 모든 브라우저에서 동일한 화면을 볼 수 있게 폰트를 강제로 지정합니다. 특이한 점은 h 태그는 h1 태그부터 h6 태그에 이르기까지 글자 크기가 점점 작아진다는 점이며, 티스토리 글쓰기에서 h1~h4 태그까지는 '머리말'로 정의되어 있고 h5~h6까지는 '본문'으로 정의되어 있습니다.


② 본문 태그


 이제는 본문 태그에 대해서 알아봅시다.


 태그 이름 

 설명 

p

본문 글자 태그

br

 개행 태그

 hr 

 수평 줄 태그


 p 태그는 paragraph의 줄임말로써 단락을 의미합니다. 그리고 br 태그는 Enter 키의 역할을 하는 개행을 의미하고, hr 태그는 가로로 그어지는 줄을 의미합니다. 한번 살펴보도록하겠습니다.


  ▲ 마찬가지로 티스토리 글쓰기 HTML을 체크하셔서 위와 같이 씁니다. 글쓰기 번거로우신 분들은 아래를 다운받고 복사·붙혀넣기 해주세요.




▲ 그리고 나서 티스토리 글쓰기 HTML을 체크 해제하시고 확인해보면 다음과 같이 해석할 수 있습니다. 



Welcome! ArteLog Blog.

대통령의 선거에 관한 사항은 법률로 정한다. 대통령은 국가의 원수이며, 외국에 대하여 국가를 대표한다. 모든 국민은 신속한 재판을 받을 권리를 가진다. 형사피고인은 상당한 이유가 없는 한 지체없이 공개재판을 받을 권리를 가진다.

국회는 헌법개정안이 공고된 날로부터 60일 이내에 의결하여야 하며, 국회의 의결은 재적의원 3분의 2 이상의 찬성을 얻어야 한다. 언론·출판은 타인의 명예나 권리 또는 공중도덕이나 사회윤리를 침해하여서는 아니된다. 언론·출판이 타인의 명예나 권리를 침해한 때에는 피해자는 이에 대한 피해의 배상을 청구할 수 있다.


제1항의 탄핵소추는 국회재적의원 3분의 1 이상의 발의가 있어야 하며, 그 의결은 국회재적의원 과반수의 찬성이 있어야 한다. 다만, 대통령에 대한 탄핵소추는 국회재적의원 과반수의 발의와 국회재적의원 3분의 2 이상의 찬성이 있어야 한다.
법관이 중대한 심신상의 장해로 직무를 수행할 수 없을 때에는 법률이 정하는 바에 의하여 퇴직하게 할 수 있다. 정기회의 회기는 100일을, 임시회의 회기는 30일을 초과할 수 없다.
대법원장과 대법관이 아닌 법관의 임기는 10년으로 하며, 법률이 정하는 바에 의하여 연임할 수 있다. 대한민국의 주권은 국민에게 있고, 모든 권력은 국민으로부터 나온다.


 

 특히, 티스토리 글쓰기 상단바에 제가 빨간색 테두리로 지정해놓은 '구분선' 역시 스타일적요소만 변화를 주었을 뿐 hr 태그인 것을 이를 통해 알 수 있습니다. '구분선'을 아래에 태그로 풀어 써보겠습니다.





 ▲ <hr> : 기본적인 수평 줄 태그



 ▲ <hr class="tx-hr-border-2" style="display:block; border: black 0 none; border-top: black 1px solid; border-bottom: black 3px solid; height: 7px">

[이 수평 줄 태그의 class는 "tx-hr-border-2"이고 스타일은 블록형식이며 위에 줄의 색상은 검은색이고 1px이며 solid형식이고, 아래 줄의 색상 은 검은색이고 3px이며 solid형식인 줄이다. 그리고 이 줄의 높이는 총 7px이다.]



 ▲ <hr class="tx-hr-border-3" style="display:block; border: black 0 none; border-top: black 1px dotted; height: 1px">

[이 수평 줄 태그의 class는 "tx-hr-border-3"이고 스타일은 블록형식이며 줄의 색상은 검은색이고 1px이며 dotted 형식이다. 이 줄의 총 높이는 1px이다.]


 나머지 '구분선'은 다소 해석하기 번거러워서 이정도만으로 실습으로 마무리 짓겠습니다. 

 글쓰기 '미리보기'로 한번 확인해봤는데 h 태그와 hr 태그는 다르게 설정되어 있는 것을 볼 수 있습니다. 제 Fastboot 블로그 스킨 HTML/CSS 편집에서 CSS를 살펴보니 hr 태그는 display:none; 으로 설정되어 있습니다. 쉽게 말해서 'hr 태그는 보여지지 않는다' 라는 뜻입니다.  단순히 맨 위에 있는 기본적인 hr 태그만 보여지지 않을 뿐 나머지 hr 태그는 스타일이 지정되어 있기 때문에 그래도 보이는 것입니다.

그리고 본문에 대한 h 태그를 CSS에서 이렇게 설정되어 있습니다.

.article h1, .article h2 , .article h3, .article h4, .article h5, .article h6 { 
  font-size: 24px; 
  border-bottom: 2px solid #ccc; 
  border-left: 10px solid #55555B;
  text-height:200%;
  padding: 3px 5px; 
  margin: 5px 0;
  letter-spacing: 1px;
  word-spacing: 3px;
}

 이 뜻은 본문 class인 .article에 대한 h1, h2, h3, h4, h5, h6의 폰트 크기는 24px이고 아래 줄은 2px이며 #ccc색상을 가지고 있으며 왼쪽 줄은 10px이며 solid형식에 #55555B색상을 가지고 있다. 등등의 의미를 내포하고 있는데요. 이는 이렇게 출력되는 뜻입니다.

이렇듯 글자 태그로도 CSS로 꾸며준다면 무궁무진한 디자인을 창조해낼 수 있습니다. 그리고 이렇게 하나하나 짚어 공부하다보면 티스토리 스킨 뿐만 아니라 웹페이지를 공부할 때에도 많이 도움이 되는 것이죠. 티스토리 블로그 스킨을 만든다고 실패를 많이 겪었는데 이렇게 천천히 쌓아가볼 예정입니다. 다음시간에는 앵커 태그와 글자 형태 태그에대해서 알아보도록 하겠습니다. 감사합니다:D


관련글 


[HTML/CSS]01. HTML 구조 태그


'IT > HTML&CSS' 카테고리의 다른 글

[HTML/CSS]03.글자 태그 Vol.2  (0) 2017.04.30
[HTML/CSS]02.글자 태그 Vol.1  (0) 2017.04.29
[HTML/CSS]01.HTML 구조 태그  (0) 2017.04.26
이 댓글을 비밀 댓글로