Demo ETC

base.css

입력방법 .ime-mode- [IE]OK(only)

스크롤 .scroll .scroll-x .scroll-y

개체 맞춤 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;} 속성 선언!

img 요소가 래퍼 보다 작을 때 contain 과 scale-down 차이점을 아래에서 확인할 수 있다.

단어 개행 유지 class="wwbw wbka" ( word-wrap:break-word; word-break:keep-all; )

기본 스타일에서는 한글 단어 사이가 잘린다.

죽는 날까지 하늘을 우러러 한점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다. 별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지, 그리고 나한테 주어진 길을 걸어가야겠다. 오늘밤에도 별이 바람에 스치운다.

class="wwbw wbka" ))) 단어길이가 폭보다 길면 개행하고, 한 줄보다 짧으면 단어 자르지 않고 공백을 개행한다.

죽는 날까지 하늘을 우러러 한점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다. 별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지, 그리고 나한테 주어진 길을 걸어가야겠다. 오늘밤에도 별이 바람에 스치운다.

말줄임 .ellipsis1 .ellipsis2

.ellipsis1 죽는 날까지 하늘을 우러러 한점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다. 별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지, 그리고 나한테 주어진 길을 걸어가야겠다. 오늘밤에도 별이 바람에 스치운다. 일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십

.ellipsis2 죽는 날까지 하늘을 우러러 한점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다. 별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지, 그리고 나한테 주어진 길을 걸어가야겠다. 오늘밤에도 별이 바람에 스치운다. 일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십

박스 장식 box-shadow | linear-gradient

맵래퍼 .wrap1map1

스위치 .switch

O 스위치 켜기 (class="sw-off" 상태 보임) X 스위치 끄기 (class="sw-on" 상태 보임)

자동균등폭메뉴 .mj-menu-even-width > ul > li > a

.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 키큰이미지용 ☆ 여백(무) 잘림(하) 왜곡(폭큰이미지)

.wide 폭큰이미지용 ☆ 여백(무) 잘림(좌우) 왜곡(키큰이미지)

.fit 풀프레임(가로세로중앙정렬) ☆ 여백(무) 잘림(상하좌우) 왜곡(없다) {object-fit:cover;}

[~IE11] object-fit 속성 지원 안함 ))) .flex1wrap1.tall 과 동일하게 동작.

Video (HTML5 video) youtube vimeo

class="block-center" style="max-width:640px;"

복합배치 .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

table.small-is-block

연구자 정보 작성폼 성명, 소속, 전화번호, 이메일

성명		소속
전화번호		이메일

table.table2block1

우리시 공보 목록 : ★표요약,구조,탐색방법

번호	제목	메뉴
9999	우주시 공보 제464호	바로보기 다운로드
9998	일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십	바로보기 변환중… 다운로드
9997	일이삼사오륙칠팔구십	바로보기 다운로드

))) 표 반응형 샘플 더 보기

lib.css

목록마진변이 .ttmg0 .dfn

정의목록.불릿.인라인 dl.bu.fixed1auto1.dtw4em

불릿아이콘목록 ul.bi1

• 관광객요청코스를 선택하셨을 경우 입력하세요!

• 결제는 10일 내에 입금해주시기 바랍니다.
• 수강료 환불규정은 다음과 같습니다.
• 일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십

• 기관 관리자 관리
  • CMS 관리자 권한 부여
• 기관별 연구원(회원) 관리
  • 회원정보 필터링 : 소속기관, 이름, 상태로 필터링 가능하게 구축
  • 회원관리 : 분류(회원), 소속기관(텍스트), 소속부서(텍스트), 이름(텍스트), 휴대폰번호(숫자), 이메일(텍스트), 첨부파일, 상태(사용가능/사용불가능)
  • 필터값 인쇄기능
• 자문업체 (회원) 관리
  • 업체관리 : 분류(자문업체), 업체명(텍스트), 소속부서(텍스트), 이름(텍스트), 휴대폰번호(숫자), 이메일(텍스트), 첨부파일, 상태(사용가능/사용불가능)

목록라인 ul.bu.lst1ic1line1

• 기증자 : 김기호
• 수량 : 1책
• 기증일자 : 2017.11.03
• 비고 : 일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
• 비고 : 일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십 일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
• 메모 :
  강원도 양양군 양양읍에 사시는 김기호님의 조부께서 직접 배첩한 척주동해비탁본첩입니다.
  기증에 감사드리며 소중한 자료로 활용하겠습니다.
  

라인 .bdt1px …

div.bdt1px.mgt125em.mgb125em = hr = hr.bdt1px

---

---

hr.bdsds | hr.bdsdt.dbcc

---

---

자식마진 .fc-mgt0 .lc-mgb0

메뉴그룹 .menu-group1

분리기호 .sep .sep1 .sep1dot2

달력날짜선택기 <input type="text" class="date" />

~

알림

이미지 크게 보기 자동 생성 .mj-view-larger [JS]

))) JS 버림. 필요하면 재개발

lib1cp1.css

공용 아이콘

독립 아이콘

버튼 아이콘

검색 내려받기 동영상 도움말 추가 목록 새로고침 이전 다음 바로가기
검색 내려받기 동영상 도움말 추가 목록 새로고침 이전 다음 바로가기
다운로드3 PDF HWP XLS 바

대형 전광판

정보 메뉴 검색 조회