H1 태그
<h1>태그는 사이트의 제목(헤드라인) 부분을 설명하는 태그이다.
크기가 다른 6 개의 <h>태그에 의해 페이지 구조가 짜여지도록 되어 있으며, 특히 “대주제(헤드라인)”를 설명하는 <h1> 태그를 활용하는 것은 SEO에 중요한 부분이다. 따라서, 웹마스터는 <h1> 태그를 적절히 활용하여 검색 엔진과 사용자가 정보를 제대로 알 수 있도록 정리해야 한다.
몽구에디터에서 사용하는 block 구조
인터넷에 존재하는 웹사이트는 HTML로 기술되어 있다. 구조는 크게 head 요소와 body 요소로 나뉜다. 그 중에서도 body 요소는 브라우저에서 화면으로 표현되는 영역으로, 제목과 소제목 및 단락 등의 요소가 기술되고 있다. M9에디터에서 사용하는 블락요소를 활용해서 이 영역을 손쉽게 꾸밀수가 있다.
어떤 책이든 대제목,중제목,소제목 등으로 구분되어 있고 크기나 색 굵기등에 차이를 주어 구분을 둔다. M9에서도 마찬가지로 제목태그를 활용해서 구분을 하며 H1부터 H6까지 총 6단계의 제목태그를 활용할 수 있다.
<h1>태그는 사이트의 제목(헤드라인) 부분을 설명하는 태그이다.
크기가 다른 6 개의 <h>태그에 의해 페이지 구조가 짜여지도록 되어 있으며, 특히 “대주제(헤드라인)”를 설명하는 <h1> 태그를 활용하는 것은 SEO에 중요한 부분이다. 따라서, 웹마스터는 <h1> 태그를 적절히 활용하여 검색 엔진과 사용자가 정보를 제대로 알 수 있도록 정리해야 한다.
<h1>태그는 기본적으로 body 태그내에서 한번만 사용하고 다른 H태그보다 위쪽에 배치한다. H1이외의 제목을 사용하고 싶을 경우 H2태그 H3 태그 등을 사용한다. H태그를 다양하게 사용하는 경우는 제목의 크기 순서대로 네스트구조를 따른다.
<!-- 네스트구조 -->
<h1>대주제</h1>
<h2>중제목</h2>
<h3>소제목</h3>
<div>본문</div>
<h2>중제목</h2>
<h3>소제목</h3>
<div>본문</div>
<h3>소제목</h3>
<div>본문</div>
위와 같은 구조로 h태그를 사용하면 검색엔진이 주제및 키워드를 파악하기 쉽게 된다.
/* h태그에서 주의해야 할 속성 */
text-indent:-9999px /* 적절한 사용시 문제없음 */
display:none /* 접근성 문제가 있고 검색엔진에서 불이익 */
컨텐츠내 텍스트 내용영역을 여기서 문단이라고 표현하며 <p> 태그로 감싼다.
문단은 컨텐츠에서 다양한 용도와 형태로 함께 사용된다.
텍스트만 단독으로 사용
<p class="margin-bottom-1 text-align-justify">
이 문단은 예제 문단입니다. <br>
여러분은 편집기, 본문변환기를 이용해서 손쉽게 변경할 수 있습니다.<br>
어떠한 다른 사이트보다 재미있고, 다양하게 꾸밀 수 있으며, 텍스트 중심의 홈페이지이므로 손쉽게 수정하실 수 있습니다.<br>
또한 자연스럽게 웹접근성을 지킬 수 있도록 도와드립니다.
<br>
</p>
H태그와 p태그를 함께 사용
<h2 class="text-align-center">FRATZ 선물세트(H2)</h2>
<p class="padding-1 text-align-center line-height-170">
구성 : 드립백(10g X 10팩) + 티백(5g X 10팩) + 머그컵(H2)<br>
드립백 원두 : 코스타리카 60%, 엘살바도르 30% 티백 원두 : 엘살바도르 40%, 코스타리카 30% <br><br>
자연스러운 신맛, 단맛, 쓴맛의 기분 좋은 밸런스를 확인해보세요.<br>
</p>
H태그와 p태그와 button태그를 조합해서 사용
<h3 class="margin-bottom-1 text-align-center">제목(H3)을 입력해주세요.</h3>
<p class="text-align-justify margin-bottom-1">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>
<p class="text-align-center margin-bottom-1"><a class="button">자세히보기</a></p>
순서가 있는 ol태그와 순서가 없는 ul 태그를 활용해서 리스트 화면을 만들수 있다.
일반적인 리스트 형태
<div class="grid-1">
<div class="column1">
<ul class="list-style-1">
<li>순서가 없는 목록을 입력 할 때 사용됩니다. </li>
<li>순서가 없는 목록을 입력 할 때 사용됩니다.</li>
<li>순서가 없는 목록을 입력 할 때 사용됩니다.</li>
<li>순서가 없는 목록을 입력 할 때 사용됩니다.</li>
</ul>
</div>
</div>
순서를 활용할때 사용할 수 있는 숫자목록형이다.
<div class="grid-1">
<div class="column1">
<ol class="list-style-1">
<li>순서가 있는 목록을 입력할 때 사용됩니다.</li>
<li>순서가 있는 목록을 입력할 때 사용됩니다.</li>
<li>순서가 있는 목록을 입력할 때 사용됩니다.</li>
<li>순서가 있는 목록을 입력할 때 사용됩니다.</li>
</ol>
</div>
</div>
float2xN 클래스를 활용해서 1행 2열의 리스트 구조를 만들수 있다.
<div class="grid-1">
<div class="column1">
<div class="margin-bottom-2">
<ul class="list-style-1 float2xN-a e-float1xN">
<li>이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.</li>
<li>이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.</li>
<li>이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.</li>
<li>이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.</li>
</ul>
</div>
</div>
</div>
위의 예제에서 ul을 ol로 바꾸면 아래와 같이 된다.
<div class="grid-1">
<div class="column1">
<div class="margin-bottom-2">
<ol class="list-style-1 float2xN-a e-float1xN">
<li>이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.</li>
<li>이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.</li>
<li>이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.</li>
<li>이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.</li>
</ol>
</div>
</div>
</div>
grid-3을 활용한 목록묶음 예제
<div class="grid-3">
<div class="column1">
<div class="padding-height-1">
<div class="border solid">
<div class="padding-1 user-background-1 text-align-center">font-family<span class="font-family-2">01</span></div>
<div class="padding-1">
<ul class="list-style-2">
<li>SourceSansPro</li>
<li>Noto Sans KR</li>
<li>Nanum Myeongjo</li>
<li>Roboto Condensed</li>
<li>IMPACT</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column1">
<div class="padding-height-1">
<div class="border solid">
<div class="padding-1 user-background-1 text-align-center">font-family<span class="font-family-2">02</span></div>
<div class="padding-1">
<ul class="list-style-2">
<li>SourceSansPro</li>
<li>Noto Sans KR</li>
<li>Nanum Myeongjo</li>
<li>Roboto Condensed</li>
<li>IMPACT</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column1">
<div class="padding-height-1">
<div class="border solid">
<div class="padding-1 user-background-1 text-align-center">font-family<span class="font-family-2">03</span></div>
<div class="padding-1">
<ul class="list-style-2">
<li>SourceSansPro</li>
<li>Noto Sans KR</li>
<li>Nanum Myeongjo</li>
<li>Roboto Condensed</li>
<li>IMPACT</li>
</ul>
</div>
</div>
</div>
</div>
</div>
user-background 클래스와 arrow-right 클래스를 활용하여 다음과 같은 모양을 만들수 있다.
<div class="grid-1">
<div class="column1">
<div class="padding-height-1">
<ul class="list-style-4">
<li>
<div class="overflow-hidden user-background-1">
<strong class="display-inline-block e-float-left arrow-right-2 user-background-3">STEP 1</strong>
<p class="display-inline-block m-padding-half e-display-block e-overflow-hidden line-height-140">이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.</p>
</div>
</li>
<li>
<div class="overflow-hidden user-background-1">
<strong class="display-inline-block e-float-left arrow-right-2 user-background-3">STEP 2</strong>
<p class="display-inline-block m-padding-half e-display-block e-overflow-hidden line-height-140">이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.</p>
</div>
</li>
<li>
<div class="overflow-hidden user-background-1">
<strong class="display-inline-block e-float-left arrow-right-2 user-background-3">STEP 3</strong>
<p class="display-inline-block m-padding-half e-display-block e-overflow-hidden line-height-140">이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.</p>
</div>
</li>
<li>
<div class="overflow-hidden user-background-1">
<strong class="display-inline-block e-float-left arrow-right-2 user-background-3">STEP 4</strong>
<p class="display-inline-block m-padding-half e-display-block e-overflow-hidden line-height-140">이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
구분선을 간단하게 추가해서 사용할 수 있다.
hr 태그에 사용되는 class들의 차이점을 살펴본다.
<div class="grid-1">
<div class="column1">
<div class="_not padding-height-1">
<hr class="solid">
</div>
<div class="_not padding-height-1">
<hr class="dashed">
</div>
<div class="_not padding-height-1">
<hr class="dotted">
</div>
</div>
</div>
사진과 함께 만들어지는 컨텐츠를 살펴본다.
image와 h태그를 사용하여
<div class="grid-3">
<div class="column1">
<div class="padding-height-1">
<div class="text-align-center margin-bottom-1">
<span class="fullimg m9-img-box"><span style="padding-bottom:66.5635%"><img src="http://staff03.mong9.com/editor/imgs/example/example008.jpg" alt="" alt_no="1" style="position: absolute;top:0;left:0;width:100%;min-width:100%"></span></span>
</div>
<h3 class="margin-bottom-1 padding-bottom-0 text-align-center">제목(H3)을 입력하세요</h3>
</div>
</div>
<div class="column1">
<div class="padding-height-1">
<div class="text-align-center margin-bottom-1">
<span class="fullimg m9-img-box"><span style="padding-bottom:66.5635%"><img src="http://staff03.mong9.com/editor/imgs/example/example009.jpg" alt="" alt_no="1" style="position: absolute;top:0;left:0;width:100%;min-width:100%"></span></span>
</div>
<h3 class="margin-bottom-1 padding-bottom-0 text-align-center">제목(H3)을 입력하세요</h3>
</div>
</div>
<div class="column1">
<div class="padding-height-1">
<div class="text-align-center margin-bottom-1">
<span class="fullimg m9-img-box"><span style="padding-bottom:66.5635%"><img src="http://staff03.mong9.com/editor/imgs/example/example010.jpg" alt="" alt_no="1" style="position: absolute;top:0;left:0;width:100%;min-width:100%;"></span></span>
</div>
<h3 class="margin-bottom-1 padding-bottom-0 text-align-center">제목(H3)을 입력하세요</h3>
</div>
</div>
</div>
image + h3 + p 태그를 조합하여 다음과 같은 화면을 연출할 수 있다.
<div class="grid-3">
<div class="column1">
<div class="padding-height-1">
<div class="text-align-center margin-bottom-1">
<span class="fullimg m9-img-box"><span style="padding-bottom:66.5635%"><img src="http://staff03.mong9.com/editor/imgs/example/example008.jpg" alt="" alt_no="1" style="position: absolute; top: 0%; left: 0%; width: 100%; min-width: 100%;"></span></span>
</div>
<h3 class="margin-bottom-1 padding-bottom-0 text-align-center">제목(H3)을 입력하세요</h3>
<p class="text-align-center margin-bottom-2">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>
</div>
</div>
<div class="column1">
<div class="padding-height-1">
<div class="text-align-center margin-bottom-1">
<span class="fullimg m9-img-box"><span style="padding-bottom:66.5635%"><img src="http://staff03.mong9.com/editor/imgs/example/example009.jpg" alt="" alt_no="1" style="position: absolute; top: 0%; left: 0%; width: 100%; min-width: 100%;"></span></span>
</div>
<h3 class="margin-bottom-1 padding-bottom-0 text-align-center">제목(H3)을 입력하세요</h3>
<p class="text-align-center margin-bottom-2">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>
</div>
</div>
<div class="column1">
<div class="padding-height-1">
<div class="text-align-center margin-bottom-1">
<span class="fullimg m9-img-box"><span style="padding-bottom:66.5635%"><img src="http://staff03.mong9.com/editor/imgs/example/example010.jpg" alt="" alt_no="1" style="position: absolute; top: 0%; left: 0%; width: 100%; min-width: 100%;"></span></span>
</div>
<h3 class="margin-bottom-1 padding-bottom-0 text-align-center">제목(H3)을 입력하세요</h3>
<p class="text-align-center margin-bottom-2">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>
</div>
</div>
</div>
image + h3 + p + button 태그를 조합하여 다음과 같은 화면을 연출할 수 있다.
<div class="grid-3">
<div class="column1">
<div class="padding-height-1">
<h3 class="text-align-center margin-bottom-1">제목(H3)을 입력해주세요.</h3>
<div class="text-align-center margin-bottom-2">
<span class="fullimg m9-img-box"><span style="padding-bottom:66.5635%"><img src="http://staff03.mong9.com/editor/imgs/example/example005.jpg" alt="" alt_no="1" style="position:absolute;top:0%;left:0%;width:100%;min-width:100%;"></span></span>
</div>
<p class="text-align-justify margin-bottom-2">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>
<p class="margin-top-1 margin-bottom-2 text-align-center"><a class="button round icon">자세히보기 <i class="axi axi-angle-right"></i></a></p>
</div>
</div>
<div class="column1">
<div class="padding-height-1">
<h3 class="text-align-center margin-bottom-1">제목(H3)을 입력해주세요.</h3>
<div class="text-align-center margin-bottom-2">
<span class="fullimg m9-img-box"><span style="padding-bottom:66.5635%"><img src="http://staff03.mong9.com/editor/imgs/example/example006.jpg" alt="" alt_no="1" style="position:absolute;top:0%;left:0%;width:100%;min-width:100%;"></span></span>
</div>
<p class="text-align-justify margin-bottom-2">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>
<p class="margin-top-1 margin-bottom-2 text-align-center"><a class="button round icon">자세히보기 <i class="axi axi-angle-right"></i></a></p>
</div>
</div>
<div class="column1">
<div class="padding-height-1">
<h3 class="text-align-center margin-bottom-1">제목(H3)을 입력해주세요.</h3>
<div class="text-align-center margin-bottom-2">
<span class="fullimg m9-img-box"><span style="padding-bottom:66.5635%"><img src="http://staff03.mong9.com/editor/imgs/example/example007.jpg" alt="" alt_no="1" style="position:absolute;top:0%;left:0%;width:100%;min-width:100%;"></span></span>
</div>
<p class="text-align-justify margin-bottom-2">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>
<p class="margin-top-1 margin-bottom-2 text-align-center"><a class="button round icon">자세히보기 <i class="axi axi-angle-right"></i></a></p>
</div>
</div>
</div>