Label / Text
Label / Text 는 HTML 의 <h1>, <p> Tag 를 사용하며 CSS 정의하여 색상, 크기, 폰트를 변경 하여 사용 할 수 있다.
기본코드
- Label
- <h1> Tag는 문서 전체의 타이틀이나 매우 중요한 부분을 나타내기 위해 사용한다.
- <h2> Tag는 문서의 보조 섹션을 나타내기 위해 사용되며 <h1> Tag 보다 비교적 중요도가 덜한 부분을 나타내기 위해 사용한다.
- 가장 높은 수준의 헤더 <h1>로 시작하고 중요도에 따라 아래와 같이 헤더의 수준을 낮춰서 사용하는 것을 권장한다.
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
- <h1>H1 Heading</h1>
- <h2>H2 Heading</h2>
- <h3>H3 Heading</h3>
- <h4>H4 Heading</h4>
- <h5>H5 Heading</h5>
- <h6>H6 Heading</h6>
- Text
- HTML의 <p>, <div> Tag 를 사용하며 CSS 를 정의하여 색상, 폰트, 크기를 변경 한다.
- 스타일시트를 이용하여 텍스트의 배열을 다르게 설정해 줄 수 있다.
left
center
right
- <div class="egov-align-left">left</div>
- <div class="egov-align-center">center</div>
- <div class="egov-align-right">right</div>
- 스타일 시트를 이용하여 폰트를 다르게 설정해 줄 수 있다.
This paragraph is in helvetica.
This paragraph is in verdana.
This paragraph is in tahoma.
- <div class="egov-font-helvetica">This paragraph is in helvetica.</div>
- <div class="egov-font-verdana">This paragraph is in verdana.</div>
- <div class="egov-font-tahoma">This paragraph is in tahoma.</div>
- 스타일 시트를 이용하여 텍스트의 크기를 다르게 설정해 줄 수 있다.
This paragraph is in size 30px.
This paragraph is in size 25px.
This paragraph is in size 15px.
- <div class="egov-font-size30">This paragraph is in size 30px.</div>
- <div class="egov-font-size25">This paragraph is in size 25px.</div>
- <div class="egov-font-size30">This paragraph is in size 15px.</div>
- 스타일 시트를 이용하여 텍스트의 색상을 다르게 설정해 줄 수 있다.
This paragraph is in green.
This paragraph is in red.
This paragraph is in blue.
- <div class="egov-color-green">This paragraph is in green.</div>
- <div class="egov-color-red">This paragraph is in red.</div>
- <div class="egov-color-blue">This paragraph is in blue.</div>