본문 바로가기

block

BLOCK

몽구에디터에서 사용하는 block 구조

개요

인터넷에 존재하는 웹사이트는 HTML로 기술되어 있다. 구조는 크게 head 요소와 body 요소로 나뉜다. 그 중에서도 body 요소는 브라우저에서 화면으로 표현되는 영역으로, 제목과 소제목 및 단락 등의 요소가 기술되고 있다. M9에디터에서 사용하는 블락요소를 활용해서 이 영역을 손쉽게 꾸밀수가 있다.

제목글 H1 ~ H6

어떤 책이든 대제목,중제목,소제목 등으로 구분되어 있고 크기나 색 굵기등에 차이를 주어 구분을 둔다. M9에서도 마찬가지로 제목태그를 활용해서 구분을 하며 H1부터 H6까지 총 6단계의 제목태그를 활용할 수 있다.

H1 태그

<h1>태그는 사이트의 제목(헤드라인) 부분을 설명하는 태그이다. 크기가 다른 6 개의 <h>태그에 의해 페이지 구조가 짜여지도록 되어 있으며, 특히 “대주제(헤드라인)”를 설명하는 <h1> 태그를 활용하는 것은 SEO에 중요한 부분이다. 따라서, 웹마스터는 <h1> 태그를 적절히 활용하여 검색 엔진과 사용자가 정보를 제대로 알 수 있도록 정리해야 한다.

H 태그 배치

<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태그 사용시 유의점

  1. <h>태그의 숨김은 검색엔진에서 좋은평가를 받지 못하며 심한경우 스팸으로 인식될 수 있으므로 주의한다.
  2. 제목 태그중 하나를 빼먹고 다음태그를 사용하는것(H2태그 아래 H4태그 사용)은 잘못된 계층구조이며, 검색엔진 최적화에도 좋지 않다.
  3. 키워드 반복 사용을 하지않는다.
  4. H1태그는 한번만 사용하는것이 좋다.
  5. 구조를 표현하는 목적으로 사용한다.

/* 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>
결과화면

FRATZ 선물세트(H2)

구성 : 드립백(10g X 10팩) + 티백(5g X 10팩) + 머그컵(H2)
드립백 원두 : 코스타리카 60%, 엘살바도르 30%    티백 원두 : 엘살바도르 40%, 코스타리카 30%

자연스러운 신맛, 단맛, 쓴맛의 기분 좋은 밸런스를 확인해보세요.

제목 + 문단 + 버튼

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>

결과화면

제목(H3)을 입력해주세요.

이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.

자세히보기

목록 (ul,ol)

순서가 있는 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>

결과화면
  1. 순서가 있는 목록을 입력할 때 사용됩니다.
  2. 순서가 있는 목록을 입력할 때 사용됩니다.
  3. 순서가 있는 목록을 입력할 때 사용됩니다.
  4. 순서가 있는 목록을 입력할 때 사용됩니다.

점형목록 (float2XN)

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>

결과화면
  • 이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.
  • 이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.
  • 이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.
  • 이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.

숫자목록 (float2XN)

위의 예제에서 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>

결과화면
  1. 이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.
  2. 이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.
  3. 이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.
  4. 이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.

목록묶음

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>

결과화면
font-family01
  • SourceSansPro
  • Noto Sans KR
  • Nanum Myeongjo
  • Roboto Condensed
  • IMPACT
font-family02
  • SourceSansPro
  • Noto Sans KR
  • Nanum Myeongjo
  • Roboto Condensed
  • IMPACT
font-family03
  • SourceSansPro
  • Noto Sans KR
  • Nanum Myeongjo
  • Roboto Condensed
  • IMPACT

순서목록

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>

결과화면
  • STEP 1

    이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.

  • STEP 2

    이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.

  • STEP 3

    이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.

  • STEP 4

    이 글은 실제적인 문장 내용이 채워지기 전에 채워놓은 글입니다.

구분선

구분선을 간단하게 추가해서 사용할 수 있다.

구분선 3종 활용

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>

결과화면

제목(H3)을 입력하세요

제목(H3)을 입력하세요

제목(H3)을 입력하세요

사진 + 제목 + 문단

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>

결과화면

제목(H3)을 입력하세요

이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.

제목(H3)을 입력하세요

이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.

제목(H3)을 입력하세요

이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.

사진 + 제목 + 문단 + 버튼

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>

결과화면

제목(H3)을 입력해주세요.

이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.

자세히보기

제목(H3)을 입력해주세요.

이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.

자세히보기

제목(H3)을 입력해주세요.

이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.

자세히보기