CMS 라이브 편집도구에서 "CMS 편집도구 박스" 아이콘을 클릭한 후 "박스" 버튼을 클릭하면 아래와 같은 html 태그가 편집창에 삽입됩니다.
<![CDATA[<div id="id_gEZEO">박스</div>]]> 이 태그는 편집창에서는 "박스" 라는 텍스트만 보여지지만, 소스코드창을 열어보면 위의 코드를 확인 할 수 있습니다. "id_gEZEO" 라는 id 는 박스를 생성할 때마다 다른 이름이 만들어집니다. 즉, 고유한 이름이라는 뜻입니다. 이제 이 간단한 박스에서 시작하겠습니다. 먼저 아래와 같이 태그를 추가합니다.
<![CDATA[<div id="id_gEZEO">]]> <![CDATA[ <div class="class_wlpNp">이것은 제목입니다.</div>]]> <![CDATA[</div>]]> id 가 "id_gEZEO" 인 박스 안에 class 가 "class_wlpNp" 인 div 태그를 만들었습니다. 가장 단순하고 기본적인 html 구조를 만든 것입니다. 이제, 아래와 같이 css를 만들어 보겠습니다.
<![CDATA[ <style> ]]> <![CDATA[ #id_gEZEO { ]]> <![CDATA[ background-color: #265e95; ]]> //박스의 배경색입니다.
<![CDATA[ padding: 20px; ]]> //박스의 내부 공간입니다.
<![CDATA[ } ]]> <![CDATA[ .class_wlpNp { ]]> <![CDATA[ font-size: 18px; ]]>// 텍스트의 사이즈입니다.
<![CDATA[ color: #ffffff; ]]>// 텍스트 컬러입니다.
<![CDATA[ text-align: center; ]]>// 텍스트가 중앙정렬된다는 뜻입니다.
<![CDATA[ } ]]> <![CDATA[ </style> ]]> 아래와 같은 결과를 볼 수 있을 것입니다.
<![CDATA[ <style> ]]> <![CDATA[ #id_gEZEO { ]]> //여기에 이 아이디의 속성을 입력합니다.
<![CDATA[ } ]]> <![CDATA[ </style> ]]> 이것이 html + css 코딩의 시작입니다.
