홈페이지에 들어가는 모든 요소(스타일시트(CSS)로 구성된 폰트, 버튼, 테이블, 텝(TAB)박스 등)는 색상값을 가집니다.
예로, 파랑색 버튼(.button2)이 필요한 경우가 생기면 사용자는 기존버튼(.button1) 속성을 복사(속성값 중복)해서 색상만 바꾸어 사용하게 된다.
<style>
.botton1{width:150px;height:50px;text-align:center;background:black;color:white} /* 기본에 쓰던 버튼 */
.botton2{width:150px;height:50px;text-align:center;background:blue;color:white} /* 복사해서 하나 더 생성 */
</style>
<button class="button2">새롭게 만든 파랑색 버튼</button>
위 코드를 보면 .button1과 .button2의 차이는 background 속성밖에 없습니다. 나머지 속성들은 중복입니다.
만약 색상만 다른 20개의 버튼이 필요하다면, 보통의 사용자는 그대로 20개를 복사하고 background속성만 바꾸어 사용합니다. 홈페이지 내에 들어가는 요소는 버튼뿐 아니라, 테이블1,2,3.., 인용문1,2,3.., 강조글1,2,3.. 등등 수십~수백가지이므로 얼마나 많은 코드 중복이 존재하겠습니까? 그리고 차후 업그레이드시 추가될 요소까지 생각한다면 중복은 더 늘어날 것이고, 수정시 쓸데없는 시간낭비를 초래할 것입니다.
그래서 몽9빌더에서는 가장먼저 색상값을 정의하고, 이 색상이 바로 적용될 수 있도록 요소(버튼, 테이블, 텝 등)를 디자인하고, 현재 존재하지 않는 요소에 대해서도 대비합니다. 스타일시트의 시작은 색상값이다
<style>
.button{width:150px;height:50px;text-align:center} /* 버튼 구조 선언 */
.black{background:black;color:white} /* 검은색 */
.blue{background:blue;color:white} /* 파랑색 */
</style>
<button class="button blue">새롭게 만든 파랑색 버튼</button>
이제 이 .black과 .blue는 버튼에만 사용하는 것이 아니라, 모든 요소에 대해 사용가능하게 되었습니다.
<button class="blue">...</button> <!-- 파랑색 버튼 -->
<span class="blue">...</span> <!-- 파랑색 글 -->
<td class="blue">...</td> <!-- 테이블 중 파랑색 셀(cell) -->
사용자는 색상값을 손쉽게 사용하거나 추가, 수정하실 수 있습니다.(위치:./m9_data/page/base_css.css 파일의 /* 색상표 */)
특이한 점은 background-color 와 border-color입니다. 이유의 결론은 다른 스타일값과 충돌문제 때문입니다. background는 배경색(background-color), 배경이미지(background-image), 배경이미지 위치(background-position), 배경이미지 반복(background-repeat)을 한꺼번에 지정할 수 있는 속성입니다. 우리는 색상만 변경해야하므로 background-color로 선언한 것이고, border-color 역시 같은 의미입니다.
설명의 이유는 틀린 것이 아닌가 해서 background, border로 변경하지 말라고 하는 말입니다.
여기서는 그냥 색상을 수정/추가할때 이 규칙을 따라 추가해주시면 됩니다.
하기 위해서입니다.
