https://www.kg-mobility.com/assets/rule2-CAVnUCVD.js

1import{a as s,c as l,I as n,e as a,f as t}from"./index-DoQt3p0A.js";const e={class:"prose prose-sm text-left"},p=[n('<div class="md-section"><h1>Markup 기본 가이드</h1><h2>Markup Basic Rules</h2><h3>주의 사항</h3><ul><li><em>마크업시 HTML5문법을 따르고, 시멘틱마크업을 준수</em>하여 작성합니다.</li><li>언어[lang]속성은 <em>한국어일 경우에는 “ko”</em>, 영어일 경우에는 &quot;en&quot;으로 설정합니다.</li><li><em>인코딩은 유니코드[utf-8]</em> 방식으로 적용합니다.</li><li>기본 <em>들여쓰기[indent_size]는 2로</em> 설정합니다.</li><li><em>장애인 접근성은 준수</em>하여 작성합니다. <br><small> ( 단, 접근성 마크 획득 목적은 아닙니다. ) </small></li><li>ID 속성은 필요 속성에 의해 사용되는 속성을 제외하고는 최대한 지양합니다.</li><li>재활용이 필요한 코드는 컴포넌트(component)로 제작하여 사용합니다.</li></ul><h3>기본 구조</h3><pre class="shiki nord" style="background-color:#2e3440ff;" tabindex="0"><code class="language-bash"><span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">script setup</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/script</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">template</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">div&gt;&lt;/div&gt;</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/template</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">style lang=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">scss</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#D8DEE9FF;"> scoped</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/style</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span></code></pre><h2>Class Basic Rules</h2><h3>class 이름 작성시 주의 사항</h3><ul><li>BEM 네이밍 룰을 따릅니다.</li><li>상태까지 포함 최대 5단어 까지 작성합니다.</li></ul><h3>BEM 네이밍 룰이란</h3><ul><li>BEM은 기본적으로 id를 사용하지 않으며, class만을 사용한다.</li><li>어떻게 보이는가 가 아니라 어떤 목적인가에 따라 이름을 짓는다.</li><li>예를 들어, 에러 메세지를 띄우는 P태그에는 .red가 아니라 .error 라는 이름을 줘야 한다.</li><li>이름을 연결 할 때는 block-name 과 같이 하이픈 하나만 써서 연결한다.</li><li><em>B-Block:</em> BEM 에서 B는 Block 을 의미한다. <br>실제 환경에서 Block은 사이트의 Nav, Header, Footer 등 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트를 말한다. <br><br></li></ul><p>다음 <em>[그림1-1]</em> 에 Logo 는 어딘가에 종속되지 않는다. header에 쓰일 수도 있고, footer에 쓰일 수도 있다. <strong>이렇게 재사용할 수 있는 요소를 block이라고 한다.</strong><br><br></p><p><em>[그림 1-1] B-Block 설명</em><img src="/assets/guide-bem-1-D3vbwjC1.png" width="60%" alt="BEM설명1"><br><br><br></p><ul><li><em>E-Element:</em> BEM 에서 E는 block을 구성하는 단위로 Element 를 의미한다. block은 독립적인 형태인 반면, <strong>Element는 의존적인 형태다. 자신이 속한 block 내에서만 의미를 가지기 때문에 block 안에서 떼어다 다른 데 쓸 수 없다.</strong><br><br><br></li></ul><p><em>[그림 1-2] E-Element 설명</em><img src="/assets/guide-bem-2-BmcRrYOd.png" width="60%" alt="BEM설명2"><br><br><br></p><ul><li><em>M-Modifier:</em> BEM 에서 M은 block이나 <em>Element의 속성을 의미한다.</em> 같은 tab이어도 hover나 focus에 따라 css 효과가 달라질 때 이를 구분하기 위해 사용한다. <br><br><br></li></ul><p>다음 <em>[예시 1-1]</em> 에 해당 코드에서 --focused가 수식어에 해당된다. 이렇게 작성된 걸 boolean 타입이라고 하는데 그 값이 true 일 때 라고 가정하고 사용한다. <br><br></p><p><em>[예시 1-1] BEM 속성 표기</em></p><pre class="shiki nord" style="background-color:#2e3440ff;" tabindex="0"><code class="language-bash"><span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">ul class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">tab</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">li</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">tab__item tab__item--focused</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#A3BE8C;">탭</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">01</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/l</span><span style="color:#D8DEE9FF;">i</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">li</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">tab__item</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#A3BE8C;">탭</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">02</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/l</span><span style="color:#D8DEE9FF;">i</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">li</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">tab__item</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#A3BE8C;">탭</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">03</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/l</span><span style="color:#D8DEE9FF;">i</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/ul</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span></code></pre><br><p><em>[예시 1-2] Bad (X)</em></p><pre class="shiki nord" style="background-color:#2e3440ff;" tabindex="0"><code class="language-bash"><span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">form class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">search-form</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">div</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">search-form__content</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">input</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">search-form__content__input</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#D8DEE9FF;">/</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">button</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">search-form__content__button</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#A3BE8C;">Search</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/butto</span><span style="color:#D8DEE9FF;">n</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/div&gt;</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/form</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span></code></pre><br><p><em>[예시 1-3] Good (O)</em></p><pre class="shiki nord" style="background-color:#2e3440ff;" tabindex="0"><code class="language-bash"><span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">form class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">search-form</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">div</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">search-form__content</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">input</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">search-form__input</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#D8DEE9FF;">/</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">button</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">search-form__button</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#A3BE8C;">Search</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/butto</span><span style="color:#D8DEE9FF;">n</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/div&gt;</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/form</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span></code></pre><h3>Page Root Class</h3><ul><li>최대 5단어 까지 작성합니다.</li><li>page-모듈명-(페이지)구분 이름-wrap<br><small> ( 모듈명은 아래[표 1-1]을 참고하세요. )</small></li></ul><br><p><em>[표 1-1]</em></p><table><thead><tr><th style="text-align:center;">구분</th><th style="text-align:center;">모듈</th><th style="text-align:center;">표기</th></tr></thead><tbody><tr><td style="text-align:center;"><em>국내</em></td><td style="text-align:center;">메인</td><td style="text-align:center;">MA</td></tr><tr><td style="text-align:center;"></td><td style="text-align:center;">브랜드&amp;뉴스</td><td style="text-align:center;">BR</td></tr><tr><td style="text-align:center;"></td><td style="text-align:center;">모델&amp;목록</td><td style="text-align:center;">PR</td></tr><tr><td style="text-align:center;"></td><td style="text-align:center;">검색</td><td style="text-align:center;">PD</td></tr><tr><td style="text-align:center;"></td><td style="text-align:center;">구매</td><td style="text-align:center;">OD</td></tr><tr><td style="text-align:center;"></td><td style="text-align:center;">고객서비스</td><td style="text-align:center;">SR</td></tr><tr><td style="text-align:center;"></td><td style="text-align:center;">회원</td><td style="text-align:center;">ME</td></tr><tr><td style="text-align:center;"></td><td style="text-align:center;">마이페이지</td><td style="text-align:center;">MY</td></tr><tr><td style="text-align:center;"></td><td style="text-align:center;">공통</td><td style="text-align:center;">CM</td></tr><tr><td style="text-align:center;"><em>해외</em></td><td style="text-align:center;">메인</td><td style="text-align:center;">G_MA</td></tr><tr><td style="text-align:center;"></td><td style="text-align:center;">브랜드</td><td style="text-align:center;">G_BR</td></tr><tr><td style="text-align:center;"></td><td style="text-align:center;">모델&amp;목록</td><td style="text-align:center;">G_PR</td></tr><tr><td style="text-align:center;"></td><td style="text-align:center;">공통/고객센터</td><td style="text-align:center;">G_CM</td></tr></tbody></table><h3>Layer(layer, modal, toolip) Class 작성 방법</h3><ul><li>최대 5단어 까지 작성합니다.</li><li><em>Layer:</em> layer-모듈명-레이어 구분 이름-wrap</li><li><em>Modal:</em> modal-모듈명-모달 구분 이름-wrap</li><li><em>Tootip:</em> tootip-모듈명-툴팁 구분 이름-wrap <br><br></li></ul><p><em>[예시 1-4] Layer Root Class 표기법</em></p><pre class="shiki nord" style="background-color:#2e3440ff;" tabindex="0"><code class="language-bash"><span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">script setup</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/script</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">template</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">

1Layer</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">layer-ma-event-wrap</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">div&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">~</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">생략</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">~</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/div&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/Layer&gt;</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/template</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">style lang=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">scss</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#D8DEE9FF;"> scoped</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/style</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span></code></pre><h3>속성 작성 순서</h3><ol><li>요소에 속성( src, for, type, href, value )</li><li>선택자 속성( class )</li><li>구분 이름 속성( id, name )</li><li>커스텀 속성( data-* )</li><li>부연 설명 속성( title, alt )</li><li>접근성 속성( role, aria-* )</li><li>뷰 속성( v- )</li></ol></div>',1)],o={__name:"md2",setup:(n,{expose:a})=>(a({frontmatter:{}}),(n,a)=>(s(),l("div",e,p)))},r={__name:"rule2",setup:n=>(n,e)=>(s(),l("div",null,[a(t(o))]))};export{r as default};