어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 부메뉴 이동은 알트 키 플러스 2 키이고, 본문 이동은 알트 키 플러스 3 키입니다. 알트 키 플러스 J 키는 일반모드와 텍스트모드로 전환합니다.

현재위치
  1. HOME
  2. >배우기
  3. > 스타일시트(CSS)

본문 영역

색상표 상세보기

작성자: 관리자 추천: 0  조회: 5416

색상표


홈페이지에 들어가는 모든 요소(스타일시트(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) -->

색상값은 버튼, 표, 텝박스 그리고 앞으로 만들어질 모든것들에 적용될 수 있으며 이는 1.응용의 편리성, 2. 색상값 중복방지, 3. 손쉬운 수정/추가를 목적으로 합니다.



사용자는 색상값을 손쉽게 사용하거나 추가, 수정하실 수 있습니다.(위치:./m9_data/page/base_css.css 파일의 /* 색상표 */)

black
grey
light-grey
light-blue
yellow
blue
gold
green
olive-green
orange
purple
red
turquoiseblue
violet
deepblue
teal
mauve
pearl
steelblue
coffee
coral
crimson
hotpink
indianred
aqua

[색상표] 예제소스보기


예제소스를 보시면, 색생 하나당 4가지 색상으로 구성되어 있습니다. 4가지로 구성된 이유는 색상전환효과(ani_type="color")와 연동새창열림하기 위해서입니다.

.black{background-color:#303030;color:#dddddd;border-color:#000000;text-shadow:0px 0px 2px #000}

특이한 점은 background-colorborder-color입니다. 이유의 결론은 다른 스타일값과 충돌문제 때문입니다. background는 배경색(background-color), 배경이미지(background-image), 배경이미지 위치(background-position), 배경이미지 반복(background-repeat)을 한꺼번에 지정할 수 있는 속성입니다. 우리는 색상만 변경해야하므로 background-color로 선언한 것이고, border-color 역시 같은 의미입니다.
설명의 이유는 틀린 것이 아닌가 해서 background, border로 변경하지 말라고 하는 말입니다.
여기서는 그냥 색상을 수정/추가할때 이 규칙을 따라 추가해주시면 됩니다.

관련 글&정보

TOP

등록일:
마지막 수정일:
답변
목록

스타일시트(CSS)

총글수: 12
스타일시트(CSS) 목록 : 이표는 글순서,첨부파일,제목,추천수,조회수,작성일을 확인할 수 있습니다
글순서NO *(첨부파일) 제목 추천 조회 작성일↑
12 없음 레이아웃 구조 추천:0 조회:5680
11 없음 현재글:색상표 추천:0 조회:5416
10 없음 버튼 추천:0 조회:8964
9 없음 하이라이트 추천:0 조회:4788
8 없음 인용구 추천:0 조회:3476
7 없음 테이블(표) 추천:0 조회:3666
6 없음 박스 리스트 추천:0 조회:4057
5 없음 텝박스 추천:0 조회:4275
4 없음 아이콘 추천:0 조회:6619
3 없음 반응형 기타 추천:0 조회:3539
초기화 
스타일시트(CSS) 검색