HTML Design guide
스타일을 수정하고자 할경우 custom_board.css content.css 파일에서 상쇄하여 처리합니다.
Layer POPUP (레이어팝업)
레이어팝업 관련 사용방법은 소스보기를 하여 레이어팝업 보기쪽 마크업된 항목을 확인하세요. 레이어가 여러개 일경우 showPopup 다음에오는 div id값을 여러개 선언하면 됨
닫기 선언을 따로 하고 싶으면 샘플B참고
Button 스타일
기본버튼 - 버튼 영역 정렬 왼쪽
폼형식에 버튼디자인 사용 - input submit
작은버튼 - 버튼기본 가운데정렬
큰버튼 - 버튼 오른쪽 정렬
텍스트 컬러
포인트로 텍스트컬러는 01~03까지 준비되어있다. 추가로 사용하고자 할경우 content.css에 추가로 선언하여 사용한다.
class 명 txt_point01 제목과 버튼이 일직선상에 놓여야 할 경우
class 명 txt_point02 제목과 버튼이 일직선상에 놓여야 할 경우
class 명 txt_point03 제목과 버튼이 일직선상에 놓여야 할 경우
Margin
margin top만 컨트롤 기본값을 주었다. css변경은 content.css통해 상쇄시킨다.
class="mt10" margin-top:10px
class="mt10" margin-top:20px;
class="mt30" margin-top:30px;
table영역
tbody만 있는 table td는 왼쪽이 기본정렬이다.
| 식품(시료명) | 갓 | 식품(시료명) | 갓 |
|---|---|---|---|
| 식품(시료명) | 그대로(As is) | 식품생산지지역 | 갓 |
| 가운데정렬 | class tac 시료채취일 | 오른쪽 정렬 | class tar 플루페녹수론 |
thead, tbody 있는 table td가 가운데 정렬이 기본이다.
| 제목 | 제목 | 제목 | 제목 |
|---|---|---|---|
| 식품(시료명) | 테이블은 가운데 정렬 기본 | ||
| 식품(시료명) | 그대로(As is) | 식품생산지지역 | 갓 |
| 왼쪽정렬 | class tac 시료채취일 | 오른쪽 정렬 | class tar 플루페녹수론 |
tbody만있는 table이지만 th에 컬러가 있는 포인트 table로 사용하고자 할경우 class="table blue" 선언
| MIMS 코드 | R010101003 |
|---|---|
| MIMS 식품명 | 식물성원료 > 곡류 > 곡류 > 곡류 > 밀 |
thead에 있는 th은 블루색상이 기본이지만 gray로 사용하고자 할경우 class="table gray" 선언
| MIMS 코드 | MIMS 식품명 |
|---|---|
| R010101003 | 식물성원료 > 곡류 > 곡류 > 곡류 > 밀 |
data table이고 링크도 없지만 tr에 hover시 효과를 주고싶은 경우 class="table hover" 을 선언한다.
| 제목 | 제목 | 제목 | 제목 |
|---|---|---|---|
| 식품(시료명) | 테이블은 가운데 정렬 기본 | ||
| 식품(시료명) | 그대로(As is) | 식품생산지지역 | 갓 |
| 왼쪽정렬 | class tal 시료채취일 | 오른쪽 정렬 | class tar 플루페녹수론 |
data table이고 thead에 line이 필요하고 회색으로 하고싶은경우 class="table line gray" 을 선언한다.
| 제목 | 제목 | 제목 | |
|---|---|---|---|
| 제목 | 제목 | 제목 | |
| 식품(시료명) | 테이블은 가운데 정렬 기본 / 작은 버튼을 같이 사용하고자 할경우 바로가기 | ||
| 식품(시료명) | 그대로(As is (raw. fresh)) | 식품생산지지역 | 갓 |
| 왼쪽정렬 | class tal 시료채취일 | 오른쪽 정렬 | class tar 플루페녹수론 |
table 반응형 Scroll 포함대응
data table이고 thead에 colspan rowspan이 많아 line이 필요할경우 class="table line" 을 선언한다. 아래 예시는 폼형식을 table에 꼭 사용해야할 경우 예시다. class="table line form" 선언되어있다.
모바일에서 대응이 필요할때 가로스크롤이 나오게하기위해 scroll 클래스도 추가한다. class="table line form scroll"
| 제목 | 제목 | 제목 | |
|---|---|---|---|
| 제목 | 제목 | 제목 | |
| 식품(시료명) | 기본 버튼을 같이 사용하고자 할경우 바로가기 | ||
| 필수항목 | 필수항목 | ||
| 라디오버튼 |
|
오른쪽 정렬 | class tar 플루페녹수론 |
table 반응형 th/td 한줄씩처리
scroll table에 class를 선언했었다면 일정사이즈에서 가로스크롤만 표현되지만 th, td 한줄로만 무조건 처리할경우 사용방법입니다. data-table-respon 속성을 선언해서 사용한다. 이경우 tbody만있는 테이블에서만 사용가능하다.
| 식품(시료명) | 테이블은 가운데 정렬 기본 | ||
|---|---|---|---|
| 식품(시료명) | 그대로(As is) | 식품생산지지역 | 갓 |
| 왼쪽정렬 | class tac 시료채취일 | 오른쪽 정렬 | class tar 플루페녹수론 |
설명글
포인트로 텍스트컬러는 01~03까지 준비되어있다. 추가로 사용하고자 할경우 content.css에 추가로 선언하여 사용한다.
박스없이 위험성표시 및 글씨만 사용할 경우 이용합니다. 강조는 strong태그 이용하시면 됩니다. 줄이 길어지면 br도 넣어도 되요.
아코디언(모바일전용) 타입
PC에서는 정상적으로 노출이 되나 모바일에서 아코디언형태로 변경이되어 보여주고자 할경우 사용하는 방법을 먼저안내합니다. 가로폭(width 1024px)기준으로 발동합니다.
클릭되는 a태그는 1025px전까지는 노출되지 않습니다.
댓글1
댓글2
댓글3
input radio, checkbox 디자인
input radio 또는 checkbox를 번호를 주어 디자인을 추가하거나 또는 번호를 제외한 디자인만 적용하는 경우 사용하는 방식이다. 주의해야할것은 숫자형식의 디자인은 ol li 목록태그를 꼭 이용해야한다. ol class="designNumber""를 선언할것
designFile - file적용
designNumber - radio 버튼에 숫자를 표기안할경우
designNumber - checkbox적용
radio를 디자인형식 사용할 경우, 우측은 radio 흰색버전
checkbox를 디자인형식 사용할 경우, 우측은 checkbox 흰색버전
입력폼을 선택시 class in active 선언하여 디자인을 추가하고자 할경우 사용. 해당은 폼 커스텀영역이기때문에 custom_board.css 선언하여작업한다.
포커스만 되었을경우 부모 li에 class="in" 들어온다. 그 뒤 입력폼에 값이 입력이 되면 class="in active" 으로 처리되며 값 만 입력되고 포커스가 빠지면 class="active" 값, 포커스가 없다면 class는 삭제된다.
예시로 class까지 준경우다.
툴팁사용
마우스hover시 툴팁이 나오게 사용하고자 할경우 이용한다. 예시를 참고하여 box안에 진하게 또는 색만넣고자 하는경우 확인하여 사용한다.
table안에 사용한 경우 모바일기준(width 768px)되면 클릭시 열리는 박스는 fixed처리되어 화면 정중간에 나오게 된다. 모바일의 경우 박스의 외부를 클릭시 툴팁은 닫힌다.
- 2016년 국건영 코드집의 환산계수를 적용하였습니다.
건조된 식품 자체를 원재료로 봄에 따라, 국건영 환산계수를 적용하지 않습니다. 예) 품목명 : 대추(건조) = ‘1’ 로 적용" 마크업 규칙만 시켜주세요.
Site map
header gnb항목중 ul 하위부터 자동으로 끌어오는 제이쿼리 적용된 내용이다. 디자인 수정은 content.css 통해 상쇄시킨다.
게시판 디자인 하드코딩 자료인데 실제와 다른것도있어, 조만간 정리예정. 참고만하세요.