div - html

레이아웃을 잡을 때 사용하는 html 태그입니다.
투명한 네모 상자를 생각 하면 됩니다. 네모 상자 안에 네모 상자를 위치 시켜 레이아웃을 구성 할 수 있습니다.
상자안에 컨텐츠를 넣을 수 있습니다.

<div><img src="img URL" alt="이미지 컨텐츠"></div>

<div class="mg-t10">
	<div><p>텍스트 컨텐츠</p></div>
</div>

span - html

문장의 특정 구역에 CSS스타일을 지정할 때 사용하는 html 태그입니다. 때론 레이아웃으로 사용하기도 합니다.

텍스트 컨텐츠 <span class="span-name">특정 영역</span>에 CSS 적용.

a - html

컨텐츠의 링크버튼, 이미지, 텍스트 등을 링크로 연결 시켜주는 태그입니다. 사이트 문서(페이지) 이동 또는 타 사이트로의 이동을 할 수 있습니다.

<a href="URL">텍스트 링크</a>

<a href="URL"><img url="이미지 경로 URL" alt="이미지 설명" /></a>

<a href="URL" class="button">a 태그를 CSS를 이용해 버튼 모양으로 만들어줍니다.</a>

<a href="URL" target="_blank">브라우저 새창에서 링크를 열고 싶을땐 a 태그 옆에 target="_blank" 를 적어 줍니다.</a>

p - html

p 태그는 문단 태그 입니다. 컨텐츠의 글이나, 이미지가 들어 가는 하나의 단락을 구성 할때 사용하시면 됩니다. p 태그 안에는 div 태그가 들어 올 수 없습니다.

<p>문단 태그 p 태그입니다. 이미지 또는 동영상 컨텐츠를 넣을 수도 있습니다.</p>

br - html

br 태그는 띄어 쓰기를 할 수 있는 태그입니다. 텍스트, 또는 이미지의 간격을 조절 할때 사용 하시면 됩니다.

띄어쓰기를 할 수 있습니다.
<br/>
띄어쓰기를 할 수 있습니다.

hr - html

hr 태그는 텍스트 또는 이미지 사이에 라인line 을 표시해줍니다.

텍스트 또는 이미지 사이에 라인을 표시.<hr/>텍스트 또는 이미지 사이에 라인을 표시.

display - css class

css display 는 컨텐츠를 상자와 같은 블럭 형태로 바꿔주거나 화면상에 나타내고, 숨기는 역할 등을 할 수 있습니다.

* css class class="d-n" = display: none;
class="d-b" = display: block;
class="d-ib" = display: inline-block;

<div class="d-n">display: none</div>
<div class="d-b">display: block</div>
<div class="d-ib">display: inline-block</div>

float - css class

css float는 컨텐츠 또는 컨텐츠를 싸고 있는 div 같은 상자를 왼쪽 또는 오른쪽으로 오브젝트를 정렬 시킵니다.

* css class class="f-l" = float: left
class="f-r" = float: right

<div class="f-l">float: left</div>
<div class="f-r">float: right</div>

																<div class="f-l">float: left</div>
<div class="f-r">float: right</div>
															

<div class="all-clear">
	<div class="f-l">float: left</div>
	<div class="f-l">float: left</div>
	<div>contents</div>
</div>

margin - css class

css margin 은 오브젝트와 오브젝트 사이의 간격을 조정할 수 있습니다.
top, right, bottom, left 의 간격을 조절 할 수 있고, 제공 되는 최대 값은 50까지 입니다.
class="mg-t0~50" 원하시는 간격의 숫자를 0~50 중에 넣으시면 됩니다.

* css class class="mg-t10" = margin-top: 10px;
class="mg-r20" = margin-right: 20px;
class="mg-b40" = margin-bottom: 40px;
class="mg-l50" = margin-left: 50px;

<div>content</div>
<div class="mg-l20">margin-left: 20px</div>
<div class="mg-l50">margin-left: 50px</div>

padding - css class

css padding 은 오브젝트 자체의 넓이 값과 높이 값을 줄 수 있습니다.
top, right, bottom, left 의 간격을 조절 할 수 있고, 제공 되는 최대 값은 50까지 입니다.
class="pd-t0~50" 원하시는 간격의 숫자를 0~50 중에 넣으시면 됩니다.

* css class class="pd-t10" = padding-top: 10px;
class="pd-r20" = padding-right: 20px;
class="pd-b40" = padding-bottom: 40px;
class="pd-l50" = padding-left: 50px;

<div class="pd-t30">padding-top: 30px</div>
<div class="pd-r30">pdding-right: 30px</div>
<div class="pd-b30">pdding-bottom: 30px</div>
<div class="pd-l30">pdding-left: 30px</div>
<div class="pd-t10 pd-r10 pd-b10 pd-l10">
	pdding-top: 10px, pdding-right: 10px, pdding-bottom: 10px, pdding-left: 10px
</div>

border - css class

css border 는 오브젝트에 solid 선을 나타낼 수 있게 해줍니다.
오브젝트 전체에 border를 줄 수도 있고 top, right, bottom, left 각각 선을 나타나게 할 수 있습니다.
class="bd" 는 전체 선, bd-t, bd-r, bd-b, bd-l 는 각각 top, right, bottom, left 를 나타냅니다.

* css class class="bd" = border: 1px solid #e2e2e2
class="bd-t" = border-top: 1px solid #e2e2e2
class="bd-r" = border-right: 1px solid #e2e2e2
class="bd-b" = border-bottom: 1px solid #e2e2e2
class="bd-l" = border-left: 1px solid #e2e2e2

<div class="bd">border all</div>
<div class="bd-t">border-top</div>
<div class="bd-r">border-right</div>
<div class="bd-b">border-bottom</div>
<div class="bd-l">border-left</div>

border-radius - css class

css border-radius 는 직각 상자 모양의 오브젝트에 round를 나타낼 수 있습니다.
class="bdra0~50" 원하시는 간격의 숫자를 0~50 중에 넣으시면 됩니다.

* css class class="bdra10" = border-radius: 10px
class="bdra20" = border-radius: 20px
class="bdra50" = border-radius: 50px

<div>border-radius none</div>
<div class="bdra10">border-radius: 10px</div>
<div class="bdra20">border-radius: 20px</div>
<div class="bdra50">border-radius: 50px</div>

vertical-align - css class

css vertical-align 을 사용 하면 요소의 top, middle, bottom 정렬을 할 수 있습니다.
이 요소는 div 등의 block 는 사용할 수 없습니다. inline, inline-block, table 등의 inline 요소에서만 사용 가능 합니다. div 같은 block 요소에 사용 하려면 div="d-i" 과 같이 block를 inline-block 로 변경 한 후 사용하시면 됩니다.

* css class class="v-t" = vertical-align: top
class="v-m" = vertical-align: middle
class="v-b" = vertical-align: bottom

<span class="v-t">vertical-align top</span>
<span class="v-m">vertical-align middle</span>
<span class="v-b">vertical-align bottom</span>

line-height - css class

css line-height 는
텍스트 줄 간격을 조절 할 수 있습니다.
class="l-h05~2" 원하시는 간격의 숫자를 넣으시면 됩니다.

* css class class="l-h05" = line-height: 0.5
class="l-h1" = line-height: 1
class="l-h11" = line-height: 1.1
class="l-h12" = line-height: 1.2
class="l-h13" = line-height: 1.3
class="l-h14" = line-height: 1.4
class="l-h15" = line-height: 1.5
class="l-h16" = line-height: 1.6
class="l-h17" = line-height: 1.7
class="l-h18" = line-height: 1.8
class="l-h19" = line-height: 1.9
class="l-h2" = line-height: 2

<span class="l-h05">line-height : 0.5</span>
<span class="l-h15">line-height : 1.5</span>
<span class="l-h2">line-height : 2</span>

background-color - css style

css background-color 은 요소에 배경 색을 넣을 수 있습니다.
따로 클래스를 주지 않고, inline-css 방식으로 배경색을 지정 하겠습니다.
특정 배경 색을 많이 사용 하신다면 custom css에 따로 class 지정을 하여 사용 하시면 됩니다.

* css style <span style="background-color: #000000;"></span>
web의 색은 16진수로 이루어진 컬러로 되어 있습니다. #뒤에 해당 색의 16진법 코드를 넣어주세요.

<div style="background-color: #000000">background-color</div>
<div style="backround-color: #dd5d2a">background-color</div>
<div style="background-color: #0a6aa1">backround-color</div>

background-image - css style

css background-image 는 요소에 배경 이미지를 넣을 수 있습니다.
따로 클래스를 주지 않고, inline-css 방식으로 배경이미지를 지정 하겠습니다.
특정 배경 이미지를 많이 사용 하신다면 custom css에 따로 class 지정을 하여 사용 하시면 됩니다.

* css style <span style="background-image: url("img url")";></span>
※ image 파일은 따로 웹저장소에 저장 하신 후 url을 복사하셔서 사용하시면 됩니다.

* background-image 도움 css
background-image를 제어할 수 있는 속성을 가진 css
background-repeat = 배경이지의 반복과, x,y 위치 값을 조정 할 수 있습니다.
background-repeat: repeat = 배경이미지를 반복합니다.
background-repeat: repeat-x = 이미지를 가로로만 반복 합니다.
background-repeat: repeat-y = 이미지의 세로로만 반복 합니다.
background-repeat: no-repeat = 이미지를 반복 하지 않습니다.

background-position = 배경이미지의 위아래, 좌우 위치를 조정할 수 있습니다. background-position: left top = 왼쪽 상단
background-position: left center = 왼쪽 중앙
background-position: left bottom = 왼쪽 하단
background-position: right top = 오른쪽 상단
background-position: right center = 오른쪽 중앙
background-position: right bottom = 오른쪽 하단
background-position: center top = 중앙 상단
background-position: center center = 중앙
background-position: center bottom = 중앙 하단
background-position: x% y% = x% 는 가로위치, y%는 세로 위치를 조절 할 수 있습니다. 50%, 50px 등 단위를 사용 하시면 됩니다.

background-size = 배경이미지의 크기를 조절 할 수 있습니다.
background-size: auto = 기본 값, 이미지의 원래 width, height 를 씁니다.
background-size: 100px 100px = 이미지의 크기를 직접 지정 천번째는 width, 두번쨰는 height 를 나타냅니다.
background-size: cover = 배경 지역이 이미지로 완전히 덮히도록 이미지를 가능한 크게 표현합니다.

<a href="url" class="button btn-white" style="background-image: url(img url); backgruond-repeat: no-repeat; background-size: 100% 100%; background-position: center center;">백그라운드 이미지 적용 a 태그</a>

class="col col-320-480-1-5 col-480-768-3-10 col-768-10-20" - css style

* col class info col = 반응형 그리드 선언합니다.
col-320-480 = 320px 에서 480px 까지 화면의 가로 사이즈 입니다.
col-320-480-1 = 1은 320px~480px 까지 보여지는 요소가 1개 라는 의미 입니다. 숫자의 값이 2면 320px~480px 까지 보여지는 요소가 2개 입니다. 최대 10까지 적용 할 수 있습니다.
col-320-480-1-10 = 10은 요소와 요소 사이의 간격 margin이 1% 벌어지는걸 말합니다. 20이라면 2% 벌어집니다. 최대 50(5%)까지 적용 할 수 있습니다.

<div class="col col-320-480-3-10">요소 BOX</div>
<div class="col col-480-768-3-10">요소 BOX</div>
<div class="col col-768-3-10">요소 BOX</div>

<div class="col col-768-10-10">요소 BOX</div>
<div class="col col-768-9-10">요소 BOX</div>
<div class="col col-768-8-10">요소 BOX</div>
<div class="col col-768-7-10">요소 BOX</div>
<div class="col col-768-6-10">요소 BOX</div>
<div class="col col-768-5-10">요소 BOX</div>
<div class="col col-768-4-10">요소 BOX</div>
<div class="col col-768-3-10">요소 BOX</div>
<div class="col col-768-2-10">요소 BOX</div>
<div class="col col-768-1-10">요소 BOX</div>

<div class="col col-768-3-10">요소 BOX</div>
<div class="col col-768-3-20">요소 BOX</div>
<div class="col col-768-3-30">요소 BOX</div>
<div class="col col-768-3-40">요소 BOX</div>
<div class="col col-768-3-50">요소 BOX</div>

<ul class="col col-320-480-1-10 col-480-768-2-10 col-768-3-10">
	<li>요소 BOX</li>
	<li>요소 BOX</li>
	<li>요소 BOX</li>
</ul>

style img banner - css style

상품 이미지 배너, 이벤트 이미지 배너 등의 용도로 사용 하실 수 있습니다.

* css style class="style-img-banner"

<div class="col col-320-480-1-20 col-480-768-2-20 col-768-2-10 style-img-banner">
  <div><a href="url"><img src="img URL" alt="img info" /></a></div>
  <div><a href="url"><img src="img URL" alt="img info" /></a></div>
</div>

style item grid - css style

상품을 임의 지정해 넣어, 사용하실 수 있습니다. 상품의 섬네일 이미지, 이름, 가격등을 기재 할 수 있습니다.

* css style class="style-item-grid"

예 )

タイトルテキスト ¥99.99

タイトルテキスト ¥99.99

タイトルテキスト ¥99.99

タイトルテキスト ¥99.99

<ul class="col col-320-480-2-20 col-480-768-4-20 col-768-4-10 r10-10 style-item-grid">
  <li>
      <a href="url">
            <span><img src="img url" alt="img info" /></span>
            <span class="name">name text</span>
            <span class="price">¥00.00</span>
      </a>
  </li>
  <li>
      <a href="url">
            <span><img src="img url" alt="img info" /></span>
            <span class="name">name text</span>
            <span class="price">¥00.00</span>
      </a>
  </li>
  <li>
      <a href="url">
            <span><img src="img url" alt="img info" /></span>
            <span class="name">name text</span>
            <span class="price">¥00.00</span>
      </a>
  </li>
  <li>
      <a href="url">
            <span><img src="img url" alt="img info" /></span>
            <span class="name">name text</span>
            <span class="price">¥00.00</span>
      </a>
  </li>
</ul>

h1 ~ h6 - html

h1 ~ h6 태그는 섹션의 제목을 의미합니다. h1 가장 높은 등급으로 섹션의 대 제목에 해당 합니다. h1은 페이지에 한번만 쓰이거나, 섹션의 대제목을 구성 할때 쓰입니다. 그 다음 h2는 섹션의 중 제목 정도에 해당합니다. 이 와같은 규칙으로 컨텐츠를 만드실때 적절한 h1 ~ h6를 사용 하여 이 컨텐츠의 제목 등을 잘 구성 하시면 검색엔진 SEO 에도 긍정적인 평가를 받을 수 있습니다.

<h1>text</h1>
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
<h5>text</h5>
<h1><a href="url"><img src="img url" alt="logo img info" ></a></h1>

strong - html

strong 태그는 섹션에서 제일 중요한 컨텐츠 요소 또는 텍스트를 강조 할때 사용 합니다. 텍스트에 사용시 텍스트는 bold 처리 됩니다.
단순히 글씨를 진하게 표시하기 위해 사용 하기 보다는 정말 강조하고 싶은 컨텐츠를 표현 할때 사용하십시오.

<strong>이 섹션에서 가장 중요한 요소를 강조 할때 사용합니다.</strong>

b - html

b 태그는 css를 사용 하지 않고 텍스트를 강조bold 할때 사용 하실 수 있습니다.

<b>css를 사용하지 않고 bold 강조 할 수 있습니다.</b>

small - html

small 태그는 css를 사용 하지 않고 텍스트의 크기를 작게 표시 할때 사용 하실 수 있습니다.
css에서 적용된 기본 폰트 사이즈에서 - 1 이 되어 적용 됩니다.

<small>small 이 적용된 텍스트입니다.</small>

s - html

s 태그는 컨텐츠에서 더 이상 의미가 없는 텍스를 표시 할때 사용합니다.
예를 들어 세일 상품의 가격을 표시할때 사용 하실 수 있습니다.

<s>더 이상 의미 없는 컨텐츠를 표시할때 사용 합니다.</s>

font-size - css class

css font-size 는 텍스트의 크기를 조정 할 수 있습니다. class를 제공하여 보다 쉽게 적용 시키 실 수 있습니다.

* css class 최소 fs10에서 최대 fs50까지 제공됩니다.

class="fs10" = font-size: 10px;
class="fs20" = font-size: 20px;
class="fs50" = font-size: 50px;

<div class="fs10">텍스트 크기 10px</div>
<div class="fs20">텍스트 크기 20px</div>
<div class="fs50">텍스트 크기 50px</div>

text-aling - css class

css text-aling 은 텍스트의 정렬을 조정 할 수 있습니다.

* css class class="ta-l" = text-aling: left;
class="ta-c" = text-aling: center;
class="ta-r" = text-aling: right;

<div class="ta-l">텍스트 왼쪽 정렬</div>
<div class="ta-c">텍스트 가운데 정렬</div>
<div class="ta-r">텍스트 오른쪽 정렬</div>

font-weight - css class

css font-weight 는 css를 통해 텍스트의 굵기를 조절 할 수 있습니다. b 태그로 작성된 텍스트의 굵기를 보통으로 바꾸거나, 일반적인 텍스트를 굵게 만들 수 있습니다.

* css class class="fw-n" = font-weight: normal;
class="fw-b" = font-weight: bold;

<div class="fw-n">텍스트 굵기 보통</div>
<div class="fw-b">텍스트 굵기 굵게</div>

text-decoration - css class

css text-decoration 은 텍스트에 밑 줄을 치거나, 없앨 수 있습니다.

* css class class="td-u" = text--decoration: underline;
class="td-n" = text-decoration: none;

<div class="td-u">텍스트 밑줄 표시</div>
<div class="td-n">텍스트 밑줄 삭제</div>

color - css class

css color은 텍스트의 색을 넣을 수 있습니다.
따로 클래스를 주지 않고, inline-css 방식으로 텍스트의 색을 지정합니다.
특정 텍스트 색을 많이 사용 하신다면 custom css에 따로 class 지정을 하여 사용 하시면 됩니다.

* css class <span style="color: #000000;"></span>
web의 색은 16진수로 이루어진 컬러로 되어 있습니다. #뒤에 해당 색의 16진법 코드를 넣어주세요.

<span style="color: #772135;">텍스트 색상 변경</span>
<span style="color: #6650eb;">텍스트 색상 변경</span>
<span style="color: #d23b35;">텍스트 색상 변경</span>

table - html

table 태그는 웹상에 표를 나타내는 태그 입니다. 차트형식의 컨텐츠, 또는 가격표 같은 컨텐츠를 나타낼때 많이 사용됩니다.
table 태그의 기본 모습은 아래와 같은 디자인입니다.
※ 반응형 사이트를 위해 가급적 4행 이상의 표는 쓰지 않는 것이 좋습니다.

<table>
    <thead>
       <tr>
          <th>테이블 제목 항목1</th>
          <th>테이블 제목 항목2</th>
          <th>테이블 제목 항목3</th>
      </tr>
    </thead>
    <tbody>
       <tr>
          <td>테이블 컨텐츠 항목1</td>
          <td>테이블 컨텐츠 항목2</td>
          <td>테이블 컨텐츠 항목3</td>
      </tr>
    </tbody>
</table>

border-table - css class

기본 table style 에서 striped가 사라지고, border가 생기는 스타일 입니다.

* css class table class="border-table"

<table class="border-table">
    <thead>
       <tr>
          <th>테이블 제목 항목1</th>
          <th>테이블 제목 항목2</th>
          <th>테이블 제목 항목3</th>
      </tr>
    </thead>
    <tbody>
       <tr>
          <td>테이블 컨텐츠 항목1</td>
          <td>테이블 컨텐츠 항목2</td>
          <td>테이블 컨텐츠 항목3</td>
      </tr>
    </tbody>
</table>

striped-border-table - css class

border-table 에서 striped가 나타납니다.

* css class table class="striped-border-table"

<table class="striped-border-table">
    <thead>
       <tr>
          <th>테이블 제목 항목1</th>
          <th>테이블 제목 항목2</th>
          <th>테이블 제목 항목3</th>
      </tr>
    </thead>
    <tbody>
       <tr>
          <td>테이블 컨텐츠 항목1</td>
          <td>테이블 컨텐츠 항목2</td>
          <td>테이블 컨텐츠 항목3</td>
      </tr>
    </tbody>
</table>

a link button style - css

a 태그를 활용한 버튼 스타일 입니다.

* col class info class="button" = 기본 스타일입니다.
class="button btn-black" = 기본 검정색 스타일입니다.
class="button btn-blue" = 기본 파랑색 스타일입니다.
class="button btn-red" = 기본 빨강색 스타일입니다.
class="button btn-green" = 기본 초록 스타일입니다.
class="button btn-yellow" = 기본 노랑 스타일입니다.
class="button btn-white" = 기본 흰색 스타일입니다.
class="button btn-border" = 배경색이 없고 border만 있는 스타일입니다. ※ 지정된 class의 스타일이 아닌 다른 속성을 적용하고 싶을땐 inlin-style 로 버튼의 배경색과 글씨 색 등 원하시는 style을 적용 하시면 됩니다. ※ button 태그와 input 태그에도 동일하게 적용 할 수 있습니다. button에 배경색 대신 이미지를 넣을 수도 있습니다. 자세한 사항은 위에 bacground-image 를 참고하십시오.

<a href="url" class="button">a button - normal</a>
<a href="url" class="button btn-black">a button - black</a>
<a href="url" class="button btn-blue">a buttom - blue</a>
<a href="url" class="button btn-red">a button - red</a>
<a href="url" class="button btn-green">a button - green</a>
<a href="url" class="button btn-yellow">a button - yellow</a>
<a href="url" class="button btn-white">a button - white</a>
<a href="url" class="button btn-border">a button - btn-border</a>

figure & img - html

img 태그는 자체적으로도 이미지의 사이즈를 조절 할 수 있고, css를 활용하여 이미지를 조절 할 수도 있습니다.

<figure><img src="img url" alt="img info" /></figure> ※ figure 태그는 일러스트레이션, 다이어그램 사진, 사진(이미지)를 포함하는 태그 입니다. 가능 하면 img를 사용 하실때 같이 사용하시는 걸 권장 합니다. img 태그 활용 style css 를 사용 하실때 같이 사용하셔야 합니다. <img src="해당 이미지가 있는 이미지 url 경로" alt="해당 이미지의 설명 또는 제목, 기술시 seo에 긍정적 평가" width="이미지의 크기 조절 %,px 사용 가능" />

예 )

<figure><img src="img url" alt="img info" /></figure>

img-full - css class

이미지가 부모 요소의 넓이네 100% 로 꽉 채워집니다.
* col class info class="img-full" = 해당 영역에 이미지를 100% 채웁니다.

예 )

↑ 부모요소의 가로 크기를 500px 적용 했을때 이미지 100% img-full - 이미지가 100% 일때 부모 요소의 크기 조절로 이미지의 크기를 제어 할 수도 있습니다.

<figure class="img-full"><img src="img url" alt="img info" /></figure>
<figure class="img-full" style="width: 500px"><img src="img url" alt="img info" /></figure>

img-left - css

이미지를 왼쪽 정렬 합니다. float: left를 적용 하고 있어, 부모 요소에 clear를 적용 해줘야 합니다.

* col class info class="img-left" = 이미지를 왼쪽 정렬 합니다. float: left를 적용 하고 있어, 부모 요소에 clear를 적용 해줘야 합니다.

예 )

이미지 왼쪽 정렬을 사용 하실땐 img 태그에 float: flet css 를 적용 하고 있어, 부모 요소 또는 그 상위 요소에 clear 를 적용 시켜야 레이아웃의 망가짐 없이 원하는 결과를 얻을 수 있습니다.

<div class="a-clear">
  <figure class="img-left"><img src="img url" alt="img info" /></figure>이미지 왼쪽 정렬을 사용 하실땐 img 태그에 float: flet css 를 적용 하고 있어, 부모 요소 또는 그 상위 요소에 clear 를 적용 시켜야 레이아웃의 망가짐 없이 원하는 결과를 얻을 수 있습니다.
</div>

img-right - css

이미지를 오른쪽 정렬 합니다. float: right를 적용 하고 있어, 부모 요소에 clear를 적용 해줘야 합니다.

* col class info class="img-right" = 이미지를 오른쪽 정렬 합니다. float: right를 적용 하고 있어, 부모 요소에 clear를 적용 해줘야 합니다.

예 )

이미지 오른쪽 정렬을 사용 하실땐 img 태그에 float: right css 를 적용 하고 있어, 부모 요소 또는 그 상위 요소에 clear 를 적용 시켜야 레이아웃의 망가짐 없이 원하는 결과를 얻을 수 있습니다.

<div class="a-clear">
  <figure class="img-right"><img src="img url" alt="img info" /></figure>이미지 오른쪽 정렬을 사용 하실땐 img 태그에 float: right css 를 적용 하고 있어, 부모 요소 또는 그 상위 요소에 clear 를 적용 시켜야 레이아웃의 망가짐 없이 원하는 결과를 얻을 수 있습니다.
</div>

ul - html

ul 태그는 순서가 중요하지 않은 목록을 나타낼때 사용합니다. 목록을 구성하는 것은 li 태그이며 다른 요소는 포함할 수 없습니다.

<ul>
   <li>목록1</li>
   <li>목록2</li>
   <li>목록3</li>
   <li>목록4</li>
   <li>목록5</li>
</ul>

잘못 된 예 )
<div>
   <li>목록1</li>
</div>
<ul>
   <div>목록1</div>
</ul>

style-list - css class

ul 목록 앞에 콤마를 표시합니다.

* col class info class="style-list"

<ul class="style-list">
   <li>목록1</li>
   <li>목록2</li>
   <li>목록3</li>
   <li>목록4</li>
   <li>목록5</li>
</ul>

style-list-uum - css class

ul 목록을 숫자로 표시합니다.

* col class info class="style-list-num"

<ul class="style-list-num">
   <li>목록1</li>
   <li>목록2</li>
   <li>목록3</li>
   <li>목록4</li>
   <li>목록5</li>
</ul>

col class 를 활용 하여 ul 목록 가로 표시 - css class

ul 목록을 세로가 아닌 가로로 표현 하고 싶을땐 col class 룰 활용하시면 됩니다.

* col class info <ul class="col col-320-480-5-0 col-480-768-5-0 col-768-5-0">

<ul class="style-list col col-320-480-5-0 col-480-768-5-0 col-768-5-0">
   <li>목록1</li>
   <li>목록2</li>
   <li>목록3</li>
   <li>목록4</li>
   <li>목록5</li>
</ul>

<ul class="col col-320-480-5-0 col-480-768-5-0 col-768-5-0">
    <li><img src="img url" alt="img info" /></li>
    <li><img src="img url" alt="img info" /></li>
    <li><img src="img url" alt="img info" /></li>
    <li><img src="img url" alt="img info" /></li>
    <li><img src="img url" alt="img info" /></li>
</ul>

style 적용 - css

게시판 컨텐츠에서 제공 하는 css style class 에 없는 부분을 적용하고 싶으실땐 세가지 방법이 있습니다.

해당 태그에 class 이름을 부여 시켜서 custom.css 에서 style 를 적용 시키는 외부 스타일이 있습니다.
style을 태그에 직접 적용 시키는 인라인 스타일도 있습니다.
마지막으로 style 을 해당 게시판 페이지에 직접 적용 시키는 방법이 있습니다.

인라인 스타일

페이지에 직접 스타일 작성

<div class="youtubeWrap" style="position: relative; width: 100%; padding-bottom: 56.25%;>
   <iframe src="https://www.youtube.com/embed/WGMuPOxzODA" frameborder="0" allowfullscreen style="position: absolute; width: 100%; height: 100%;"></iframe>
</div>

<stylegt>
    .video-warp > div {position: absolute; top: 395px; right: 20px; width: 30px; height: 30px; z-index: 1; cursor: pointer;}
    .video-warp > div.play img.playbutton-play {display: none;}
    .video-warp > div.play img.playbutton-stop {display: block;}
    .video-warp > div img.playbutton-stop {display: none;}
</style>

<div class="video-warp">
    <div class="play" id="VideoContentsPlayButton">
        <img class="playbutton-play" alt="playbutton" src="플레이 버튼 이미지 URL">
        <img class="playbutton-stop" alt="stopbutton" src="스탑 버튼 이미지 URL">
    </div>
   <video id="VideoContents" style="width: 가로크기px; height: 세로크기px; visibility: visible;" autoplay="autoplay" muted="muted" poster="동영상이 로딩되는 중 나오는 이미지 URL">
        <source src="동영상1.mp4" type="video/mp4">
        <source src="동영상2.webm" type="video/webm">
   </video>

<script>
(function(){
for (i=0; i <= Math.floor(Math.random() * 3); i++)
{
$("#VideoContents").find("source").eq(0).appendTo("#VideoContents")
$("#VideoContents").find("source").eq(0).appendTo("#VideoContents")
}
$("#VideoContents").bind("ended", function(){
$("#VideoContents").find("source").eq(0).appendTo("#VideoContents")
$("#VideoContents").find("source").eq(0).appendTo("#VideoContents")
$("#VideoContents").get(0).load();

});$("#VideoContentsButton").bind("click", function(){
if ($("#VideoContents").prop("paused")){
$("#VideoContents").get(0).play();
$("#VideoContentsButton").addClass("play");
} else {
$("#VideoContents").get(0).pause();
$("#VideoContentsPlayButton").removeClass("play");
}
})
})();
</script>
</div>

사이트에 새로운 페이지(page) 생성 - 관리자

관리자 페이지에서 새로운 URL을 가지고 있는 빈 page를 생성 할 수 있습니다.

1. 관리자 페이지 사이트 관리 > 컨텐츠 > 등록 에서 컨텐츠를 등록 합니다.

등록 화면에서의 설정은 [ 카테고리 : contents ] / [ 컨텐츠 코드는 : URL이 될 코드를 넣습니다. 예 ) test ] / [ 컨텐츠 타입 : PAGE ] 이렇게 등록을 해주면 'page/test' 라는 페이지가 생성됩니다.

2. page를 생성하고 사이트 메뉴에 나타나게 하고 싶으실땐, 관리자 페이지 사이트 관리 > 사이트 메뉴 > +

설정값에 표시명은 해당 메뉴의 이름이고, 링크에 생성한 page에 갈 수 있는 URL을 넣어 줍니다. page/test page뒤의 test는 게시판 contents code를 넣습니다.

상품 리스트 표시 - HTML

게시판 컨텐츠 내에 상품 리스트를 나타낼 수 있습니다.

<div goodslist codepath="goods category code" count="보여지는 상품 갯수" recommend="false" class="col class를 사용하여 반응형 사용" ></div>

예 )

<div goodslist codepath="101010" count="5" recommend="false" class="col col-320-480-2-20 col-480-768-3-20 col-768-1024-3-20 col-1024-5-30 r10-10" ></div>

메인페이지 슬라이드 배너 사용 - HTML

게시판 컨텐츠 내에 슬라이더 배너를 나타낼 수 있습니다.

예 )

<div arrows="" autoplay="10000" dots="" random="" slide="">
 <div><a><img src="img url" alt="img info" width="100%" /></a></div>
 <div><a><img src="img url" alt="img info" width="100%" /></a></div>
</div>

상품 상세페이지 컨텐츠 구성 기본 태그 - HTML

상품 상세 페이지에 컨텐츠를 추가 할 수 있습니다. - HTML

예 )

<section class="contents" toggle="active">
 <h2><button class="toggle" toggle-button="" type="button"><span>박스 제목 예 ) 상품상세</span></button></h2>
 <div class="editor-contents">
     contents......
 </div>
</section>

항상 컨텐츠가 펼쳐져 있는 상태를 원하시면 class에 active 추가 하시면 됩니다.

<section class="contents active" toggle="active">

상품 상세페이지 고정 컨텐츠 구성 기본 태그 - HTML

전체 상품 상세 페이지에 동일한 컨텐츠를 넣을때 사용하실 수 있습니다.
관리자 페이지 > 컨텐츠 > 등록
카테고리 : Goods, 컨텐츠 코드 : CommonContents
이렇게 등록한 게시판 안에 컨텐츠를 작성 하시면 됩니다.

예 )

<section class="contents" toggle="active">
 <h2><button class="toggle" toggle-button="" type="button"><span>박스 제목 예 ) 상품상세</span></button></h2>
 <div class="editor-contents">
     contents......
 </div>
</section>

항상 컨텐츠가 펼쳐져 있는 상태를 원하시면 class에 active 추가 하시면 됩니다.

<section class="contents active" toggle="active">

baord 게시판 list 연동 - HTML

생성한 게시판들의 리스트를 메인페이지 또는 컨텐츠 페이지에 나타 낼 수 있습니다.

<div articlelist="boardCode" count="보여지는 리스트 갯수">

예 )

<div articlelist="gallery" count="5" class="col col-320-5-15 col-1024-5-15" ></div>

사이트 이미지 최적화

사이트를 운영할 때 중요한 요소 중 하나는 사이트의 로딩 속도를 빠르게 하는 것입니다. 이때 가장 기본적으로 사이트의 속도를 빠르게 개성할 수 있는 방법으로, 운영하는 사이트의 이미지 용량을 줄이는 '이미지 최적화' 방법이 있습니다.

상품 이미지를 원본 그대로 사이트에 업로드한다면, 용량이 큰 이미지의 영향을 받아 사이트 로딩 속도가 느려지고 고객들은 사이트를 이탈하게 될 것입니다.

이미지 최적화는 사이트(쇼핑몰) 운영에 있어, 필수 적으로 해야 하는 작업이니다.

1. 가장 기본 적인 이미지 최적화 방법

• 상품 이미지, 또는 컨텐츠를 등록하실 때 가장 기본 적인 방법으로는 이미지의 넓이와, 높이를 해당 사이트 크기에 맞춰 가공하는 것입니다.
  
  예를 들어, 아래 보이는 이미지와 같이 상품 상세 컨텐츠의 총 넓이와 높이는 넓이 492px, 높이 492px 입니다.

  
  
  

  

  
  
  

  더 큰 이미지를 넣으면, 높이 값은 변하겠지만, 넓이 값은 변하지 않게 되어 있습니다. 원본 이미지의 넓이 값 1000px 인 상품 이미지를 넣어도, 사이트에 나타나는 이미지는 492px로 표현 됩니다.
  
  넓이 값 (높이 값)이 높은 상품 이미지는 당연히, 용량이 더 큽니다. 이는 사이트의 로딩 시간이 더 길어 지는걸 뜻합니다.
  
  표현하는 데는 492px의 이미지만 있으면 충분 하기 때문에, 사이즈에 맞춰 이미지를 가공하는 과정이 필요 합니다.
  
  이는 포토샵 또는 보유하신 이미지 가공 툴을 이용해 주시면 됩니다. 이렇게 상품이미지 뿐만 아니라, 컨텐츠 역시 정해진 사이즈에 맞게 변형 하는 작업을 거치시면 이미지 용량이 줄어 듭니다.

예 )

이미지의 사이즈가 1000을 넘습니다.

이미지를 492px로 수정합니다.

이미지 최적화 되기 전 이미지 용량 327KB

이미지 최적화 후 이미지 용량 120KB

2. 포토샵을 활용한 이미지 최적화 방법

• 포토샵을 실행 하고, 최적화 할 이미지를 엽니다.

  
  
  

  

• File > Export > Save for Web (Legacy)... 을 선택 합니다. ( 단축키 : Alt + Shift + Ctrl + S )

  
  
  

  

• 해당 기능을 실행 시키면, 왼쪽엔 이미지의 포멧을 설정 할 수 있는 부분이 있고, 각 이미지의 아래에선 이미지의 용량을 확인 할 수 있습니다. 원하시는 포멧과 용량을 선택 하신 후 [ Save... ] 를 누르시면 최적화된 이미지 파일을 저장 하실 수 있습니다.

  
  
  

  

예 )

이미지 최적화 되기 전 이미지 용량 327KB

이미지 최적화 후 이미지 용량 93.1KB

3. 이미지 최적화를 도와 주는 사이트를 활용한 이미지 최적화

• 포토샵을 이용하지 않는다면, 이미지 최적화를 도와주는 사이트를 이용해 이미지 최적화를 하실 수 있습니다.
  
  http://optimizilla.com/ko

  
  
  
  

  해당 사이트에 접속, 파일 업로드를 누르신 후 최적화할 이미지를 선택 합니다. 그럼 자동으로 최적화가 진행되고 모두 다운로드를 누르시면 최적화된 이미지를 받으 실 수 있습니다.