/* Font */ .txtInfo { color:#707070; } .txtWarn { color:#f76560; } .txtEm { color:#008bcc; } .txtDel, .strike, .discount { text-decoration:line-through; font-weight:normal; } .strike strong, .discount strong { font-weight:normal; } .txtNormal { font-weight:normal; font-style:normal; } .txtNum { display:inline-block; font-size:11px; color:#939393; word-break:normal; } .txt11 { font-size:11px; } .txt12 { font-size:12px; } .txt14 { font-size:14px; } .txt16 { font-size:16px; } .txt18 { font-size:18px; letter-spacing:-1px; } .txtIcon { font-size:12px; font-style:normal; } .txtBreak { word-break:break-all; word-wrap:break-word; } /* JP, TW, CN */ html:lang(ja) .txt11, html:lang(zh) .txt11, html:lang(zh-tw) .txt11 { font-size:12px; } /* grid */ .gBlank5 { display:block; margin-top:5px; } .gBlank10 { display:block; margin-top:10px; } .gBlank20 { display:block; margin-top:20px; } .gBlank30 { display:block; margin-top:30px; } .gIndent10 { margin-left:10px; } .gIndent20 { margin-left:20px; } .gSpace10 { margin-right:10px; } .gSpace20 { margin-right:20px; } .gMerge { position:relative; z-index:1; margin-top:-1px; } /* ec-base-qty */ .ec-base-qty { position:relative; display:inline-block; width:50px; margin:0 1px 0 0; text-align:left; } .ec-base-qty input[type="text"] { width:22px; height:23px; padding:0 0 0 5px; line-height:25px; border:1px solid #d4d8d9; border-radius:3px 0 0 3px; } .ec-base-qty .up { position:absolute; left:27px; top:0; } .ec-base-qty .down { position:absolute; left:27px; bottom:0; } /* ec-base-chk */ .ec-base-chk { display:inline-block; position:relative; margin:0 8px 0 0; width:22px; height:22px; vertical-align:top; cursor:pointer; } .ec-base-chk input { z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; } .ec-base-chk .checkbox { position:absolute; top:0; left:0; width:100%; height:100%; background:url("//img.echosting.cafe24.com/skin/base/common/bg_join_check.png") no-repeat 0 0; } .ec-base-chk input:checked + .checkbox { background-position:-34px 0; } /* Form */ input,select,textarea { font-size:100%; font-family:"Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; color:#353535; vertical-align:middle; } input[type=radio], input[type=checkbox] { width:13px; height:13px; border:0; } input[type=text], input[type=password] { height:18px; line-height:20px; padding:2px 4px; border:1px solid #d5d5d5; color:#353535; font-size:12px; } input[type=radio] + label, input[type=checkbox] + label { margin:0 4px 0 2px; } select { height:24px; border:1px solid #d5d5d5; } textarea { padding:5px 6px; border:1px solid #d5d5d5; line-height:1.5; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#c1c1c1; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#c1c1c1; } input::-moz-placeholder, textarea::-moz-placeholder { color:#c1c1c1; opacity:1; } legend { visibility:hidden; position:absolute; left:-9999px; top:-9999px; width:0; height:0; line-height:0; } table tr.radioType input, span.noBorder input { border:none !important; width:auto !important; height:auto !important; margin:0 3px 0 0 !important; vertical-align:middle !important; background:none !important; } .gLabel { display:inline-block; } .gLabel label { margin-right:20px; line-height:22px; } .fWidthFull input[type=text] { width:100%; height:24px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .fWidthFull textarea { width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .fWidthFull select { width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .fList.typeHor .gLabel { margin-right:20px; } .fList.typeVer .gLabel { display:block; }
텍스트의 내용을 강조하고 싶은 경우 나, 추가 설명의 기입이 필요한 경우에 사용할 수 있습니다.
xxxxxxxxxx
<p> 기본 텍스트 정보를 입력하세요.</p>
<p class="txtInfo">보조설명 텍스트 정보를 입력하세요.</p>
<p class="txtWarn">주의가 필요한 텍스트 정보를 입력하세요.</p>
<p class="txtEm">강조하고 싶은 텍스트 정보를 입력하세요.</p>
기본 폰트값은 12px로, 필요에 따라 폰트 크기를 설정할 수 있습니다.
xxxxxxxxxx
<!--기본-->
<p>기본 폰트 값 12px</p>
<!-- 폰트 사이즈 적용 시 (재 선언시)-->
<p class="txt11">글자크기가 11px인 텍스트 입니다.</p>
<p class="txt12">글자크기가 12px인 텍스트 입니다.</p>
<p class="txt14">글자크기가 14px인 텍스트 입니다.</p>
<p class="txt16">글자크기가 16px인 텍스트 입니다.</p>
<p class="txt18">글자크기가 18px인 텍스트 입니다.</p>
정보를 삭제처리 하거나 할인가를 표시하실 떄 사용합니다.
xxxxxxxxxx
<p class="txtDel">삭제처리 할 텍스트 정보를 입력하세요</p>
<p class="txtDel">할인가 10,000원</p>
각 언어별 문구가 정해진 영역안에서 음절을 기준으로 줄바꿈이 일어나게 할 경우에 사용합니다.
xxxxxxxxxx
<!--기본-->
<p>줄바꿈 에제를 위한 텍스트 정보입니다. 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</p>
<!-- .txtBreak 적용된 줄바꿈 -->
<p class="txtBreak">줄바꿈 에제를 위한 텍스트 정보입니다.1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</p>
폰트 사이즈가 11px인 보조 설명 등에 사용되는 텍스트 아이콘(기호)의 깨짐현상을 방지할 때 사용합니다.
xxxxxxxxxx
<p class="txt11"><span class="txtIcon"> # $ % ^^ </span>텍스트 아이콘 입니다.</p>
적용된 폰트 두께를 기본값(normal)으로 재선언할 때 사용합니다.
xxxxxxxxxx
<!--적용 이전-->
<strong>폰트 두께가 강조된 예제 텍스트입니다.</strong>
<!--적용 후-->
<strong class="txtNomal">폰트 두께가 기본값(normal)으로 재선언된 텍스트입니다.</strong>
모듈안에서 재선언이 필요할 경우 ec-base-$MODULE(모듈) .txtBase 에 CSS스타일을 지정해줍니다.
xxxxxxxxxx
<!--적용 이전-->
<strong class="txtEm">모듈 안에 부분 스타일 재선언</strong>
<!--적용 후-->
<strong class="txtEm">모듈 안에 스타일을 <span class="txtBase">다시 선언</span>하였습니다.</strong>
<!--.txtBase css 소스 예시-->
.txtBase {fotn-weight : normal; color : #706f74;}
더 나은 서비스를 제공하고자 계속해서 노력해 나가겠습니다.