Demo ETC
base.css
입력방법 .ime-mode- [IE]OK(only)
.ime-mode-auto
.ime-mode-active
.ime-mode-inactive
.ime-mode-disabled
개체 맞춤 html.object-fit .ofct .ofcv .offl .ofnn .ofsd [CR][FF][EG](O) [IE](X)
[JS] CSS object-fit 지원하는 UA 는 html.object-fit , 지원안되면 html.no-object-fit 선언한다.
공통적으로 {width:100% !important;height:100% !important;} 속성 선언!
.ofct { object-fit: contain; }
.ofcv { object-fit: cover; }
.offl { object-fit: fill; }
.ofnn { object-fit: none; }
.ofsd { object-fit: scale-down; }
img 요소가 래퍼 보다 작을 때 contain 과 scale-down 차이점을 아래에서 확인할 수 있다.
.ofct { object-fit: contain; }
.ofsd { object-fit: scale-down; }
단어 개행 유지 class="wwbw wbka" ( word-wrap:break-word; word-break:keep-all; )
기본 스타일에서는 한글 단어 사이가 잘린다.
class="wwbw wbka" ))) 단어길이가 폭보다 길면 개행하고, 한 줄보다 짧으면 단어 자르지 않고 공백을 개행한다.
말줄임 .ellipsis1 .ellipsis2
.ellipsis1 죽는 날까지 하늘을 우러러 한점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다. 별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지, 그리고 나한테 주어진 길을 걸어가야겠다. 오늘밤에도 별이 바람에 스치운다.
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
.ellipsis2 죽는 날까지 하늘을 우러러 한점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다. 별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지, 그리고 나한테 주어진 길을 걸어가야겠다. 오늘밤에도 별이 바람에 스치운다.
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
박스 장식 box-shadow | linear-gradient
.bsd1
.bsd2
.bsd1in1
.lgdD
맵래퍼 .wrap1map1
스위치 .switch
O 스위치 켜기 (class="sw-off" 상태 보임)
X 스위치 끄기 (class="sw-on" 상태 보임)
.mj-menu-even-width > ul > li > a 형태의 메뉴에만 사용가능!!
a 요소 없이 단순 목록 등에 사용하려면.. JS 재개발 해야 합니다.
유연한 래퍼 .flex1wrap1
))) .flex1wrap1 스타일 버림. 필요 시 스타일 재정의.
))) object-fit 등 다른 CSS 활용바람
flex1wrap1 > div.flex1cont1 (, iframe, object, embed, video, img)
Aspect Ratio
flex1wrap1 > .f1p1 > img
이미지를 보여줄 때 크게 2가지를 생각해보자.
대표 또는 큰(원본) 이미지 상세보기와 섬네일 갤러리 형태가 있다.
상세보기에서는 당연히 이미지 잘림이 없이 모두 보여야 할테고..
섬네일은 원본 이미지 링크 역할이므로.. 잘려도 상관없다고 본다. (틀에 꽉차야 한다.)
.tall 키큰이미지용 ☆ 여백(무) 잘림(하) 왜곡(폭큰이미지)
.flex1wrap1.tall > .f1p1 > img
.wide 폭큰이미지용 ☆ 여백(무) 잘림(좌우) 왜곡(키큰이미지)
.flex1wrap1.wide > .f1p1 > img
.fit 풀프레임(가로세로중앙정렬) ☆ 여백(무) 잘림(상하좌우) 왜곡(없다) {object-fit:cover;}
[~IE11] object-fit 속성 지원 안함 ))) .flex1wrap1.tall 과 동일하게 동작.
.flex1wrap1.fit > .f1p1 > img
Video (HTML5 video) youtube vimeo
class="block-center" style="max-width:640px;"
[★동영상원본제목] 미디어 형식별 동영상
동영상 플레이어 다운로드
VIDEO
복합배치 .hybrid1row1 …
))) 스타일 버림. display:flex; 이용바람
.hybrid1row1 ((장식1글..) .column1(가변or고정) .column2(가변) 세로정렬)
.column2 padding 값은 적용 시 콘텐츠에 맞게 선언하여 사용~
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
.hybrid2row1 ((불릿1글..) .column1(고정) .column2(가변))
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
.hybrid3row1 ((다용도) .column1(고정) .column2(가변))
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
.hybrid3row2 ((다용도) .column1(가변) .column2(고정))
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
반응형 표
))) 스타일 버림. 필요하면 CSS 재정의
))) .small-is-block 는 남겨둠
.dl2table1 dl
공개목록명 : 제설함 배치현황
대분류
공공질서 및 안전
중분류
재난방재및민방위
소분류
관련기능
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
공개범위
공표부서
도로과
공표주기
매년
공표시기
1월
담당자
공표방법
홈페이지
table.small-is-block
table.table2block1
우리시 공보 목록
: ★표요약,구조,탐색방법
번호
제목
메뉴
9999
우주시 공보 제464호
9998
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
9997
일이삼사오륙칠팔구십
))) 표 반응형 샘플 더 보기
lib.css
목록마진변이 .ttmg0 .dfn
ul.bu
매월 셋째주 월요일 9시부터 다음 달 체험 예약 가능
예약구분 : 오전(10:00~12:00), 오후(14:00~16:00)
예약인원 : 1회당 단체는 10인 이상 예약가능
(60명 한도)
※ 개인은 전화예약가능
사전예약 : 체험희망일로부터 7일 전까지 예약
※ 예약 변경 시에는 체험일 2일 전까지 예약 취소해주시기 바랍니다.
휴관일 : 민방위교육기간, 주말 및 공휴일
ul.bu.mgtb0.ttmg0
매월 셋째주 월요일 9시부터 다음 달 체험 예약 가능
예약구분 : 오전(10:00~12:00), 오후(14:00~16:00)
예약인원 : 1회당 단체는 10인 이상 예약가능
(60명 한도)
※ 개인은 전화예약가능
사전예약 : 체험희망일로부터 7일 전까지 예약
※ 예약 변경 시에는 체험일 2일 전까지 예약 취소해주시기 바랍니다.
휴관일 : 민방위교육기간, 주말 및 공휴일
ul.bu.dfn
매월 셋째주 월요일 9시부터 다음 달 체험 예약 가능
예약구분 : 오전(10:00~12:00), 오후(14:00~16:00)
예약인원 : 1회당 단체는 10인 이상 예약가능
(60명 한도)
※ 개인은 전화예약가능
사전예약 : 체험희망일로부터 7일 전까지 예약
※ 예약 변경 시에는 체험일 2일 전까지 예약 취소해주시기 바랍니다.
휴관일 : 민방위교육기간, 주말 및 공휴일
ul.bu.lhD
매월 셋째주 월요일 9시부터 다음 달 체험 예약 가능
예약구분 : 오전(10:00~12:00), 오후(14:00~16:00)
예약인원 : 1회당 단체는 10인 이상 예약가능
(60명 한도)
※ 개인은 전화예약가능
사전예약 : 체험희망일로부터 7일 전까지 예약
※ 예약 변경 시에는 체험일 2일 전까지 예약 취소해주시기 바랍니다.
휴관일 : 민방위교육기간, 주말 및 공휴일
ul.bu.lhD.mgtb0.ttmg0
매월 셋째주 월요일 9시부터 다음 달 체험 예약 가능
예약구분 : 오전(10:00~12:00), 오후(14:00~16:00)
예약인원 : 1회당 단체는 10인 이상 예약가능
(60명 한도)
※ 개인은 전화예약가능
사전예약 : 체험희망일로부터 7일 전까지 예약
※ 예약 변경 시에는 체험일 2일 전까지 예약 취소해주시기 바랍니다.
휴관일 : 민방위교육기간, 주말 및 공휴일
ul.bu.lhD.dfn
매월 셋째주 월요일 9시부터 다음 달 체험 예약 가능
예약구분 : 오전(10:00~12:00), 오후(14:00~16:00)
예약인원 : 1회당 단체는 10인 이상 예약가능
(60명 한도)
※ 개인은 전화예약가능
사전예약 : 체험희망일로부터 7일 전까지 예약
※ 예약 변경 시에는 체험일 2일 전까지 예약 취소해주시기 바랍니다.
휴관일 : 민방위교육기간, 주말 및 공휴일
정의목록.불릿.인라인 dl.bu.fixed1auto1.dtw4em
dl.bu.fixed1auto1.dtw4em
닉네임
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
탑승인원
승무원 2명, 주객실 2열 29석, 27석(조리실 장착시)
개발사
BAe (British Aerospace)
dl.bu.fixed1auto1.dtw4em.lhD
닉네임
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
탑승인원
승무원 2명, 주객실 2열 29석, 27석(조리실 장착시)
개발사
BAe (British Aerospace)
불릿아이콘목록 ul.bi1
결제는 10일 내에 입금해주시기 바랍니다.
수강료 환불규정은 다음과 같습니다.
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
기관 관리자 관리
기관별 연구원(회원) 관리
회원정보 필터링 : 소속기관, 이름, 상태로 필터링 가능하게 구축
회원관리 : 분류(회원), 소속기관(텍스트), 소속부서(텍스트), 이름(텍스트), 휴대폰번호(숫자), 이메일(텍스트), 첨부파일, 상태(사용가능/사용불가능)
필터값 인쇄기능
자문업체 (회원) 관리
업체관리 : 분류(자문업체), 업체명(텍스트), 소속부서(텍스트), 이름(텍스트), 휴대폰번호(숫자), 이메일(텍스트), 첨부파일, 상태(사용가능/사용불가능)
목록라인 ul.bu.lst1ic1line1
라인 .bdt1px …
div.bdt1px.mgt125em.mgb125em = hr = hr.bdt1px
hr.bdsds | hr.bdsdt.dbcc
자식마진 .fc-mgt0 .lc-mgb0
문단 div.fc-mgt0.lc-mgb0 > p
분리기호 .sep .sep1 .sep1dot2
제목 :
일이삼사오륙칠팔구십 class="sep"
제목 |
일이삼사오륙칠팔구십 class="sep1"
제목 |
일이삼사오륙칠팔구십 class="sep1dot2"
달력날짜선택기 <input type="text" class="date" />
~
알림
(터치) 스크롤 해서 확인하세요! .m-alert1
콘텐츠
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
이미지 크게 보기 자동 생성 .mj-view-larger [JS]
))) JS 버림. 필요하면 재개발
lib1cp1.css
공용 아이콘
독립 아이콘
버튼 아이콘
검색
내려받기
동영상
도움말
추가
목록
새로고침
이전
다음
바로가기
검색
내려받기
동영상
도움말
추가
목록
새로고침
이전
다음
바로가기
다운로드3
PDF
HWP
XLS
바
대형 전광판
회원가입이 완료되었습니다.
로그인 후 동아리 게시판을 이용해주세요.
로그인하기
모니터링실 이용 신청 이 접수 되었습니다.
관리자 사용승인 이 완료 되어야 최종 신청 이 완료 됩니다.