Box Panel

Box

.box0 { padding: 0; border-width: 1px; }

.box1

.box2

.box3

.box4

.box2

.box6

.box7

.box8

.box0 > .box4

.box4.pd0.mgl-4px.mgr-4px > .box1

Panel

패널 박스

간혹 박스안에 내용을 넣을 필요가 있습니다. 이런 상황을 위해 .panel0 ~ .panel5 또는 .panel10 을 사용해보세요.
[class*='panel'] 은 기본적으로 조금의 내용을 포함하기 위해 약간의 테두리와 패딩을 가지고 있습니다.
자식 요소가 float 속성을 가지면 패널 박스에 .clearfix 를 추가하세요.

자식 요소가 p 태그 등이어서 상하 마진 있으면 class="mgt0 mgb0" 또는 class="mgtb0" 를 이용하여 여백을 조정하세요.

박스 내용이 2줄 이상이거나 문단, 목록 등을 포함하면 여백을 조정할 필요가 있습니다.
박스 패딩을 픽셀값 .pd20px ~ .pd40px-rv 또는 퍼센트값 .pd2pct ~ .pd4pct-rv 을 알맞게 사용하세요.

padding

class="panel1 pd20px-rv" 를 적용한 박스 내부 여백과 내용을 확인하세요.
class="panel1 pd30px-rv" 를 적용한 박스 내부 여백과 내용을 확인하세요.
class="panel1 pd40px-rv" 를 적용한 박스 내부 여백과 내용을 확인하세요.
class="panel1 pd2pct-rv" 를 적용한 박스 내부 여백과 내용을 확인하세요.
class="panel1 pd3pct-rv" 를 적용한 박스 내부 여백과 내용을 확인하세요.
class="panel1 pd4pct-rv" 를 적용한 박스 내부 여백과 내용을 확인하세요.

border

.panel0
.panel1
.panel2
.panel3
.panel4
.panel5
.panel00
.panel10
.panel201
.panel50

장식

.panel > .h1
.panel > .h1 + div
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
.panel.callout
.panel.callout > .h1
.panel.callout > .h1 + div
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
.panel.inset
.panel > .h1.gradient + div
일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
.panel.shadow
.panel.shadow3inset
.panel.border1inset

다중톤

.panel3.hue2
.panel4.hue3
.panel.hue2a1
.panel.hue2a2
.panel201.hue2a3
.panel.hue2a4
.panel.hue1a1
.panel.hue4

패턴

.panel.slash50
.panel.slash5
.panel.slash6

패널 디자인 ( .panel > .deco1 + .body1 )

panel3 hue2 deco1

패널 테두리선 색상 투톤. 장식1 본문1. 일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십

일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십

panel1 hue2a1 deco1

패널 테두리선 색상 투톤. 장식1 본문1. 일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십

일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십

panel1 hue2a2 deco1

이미지와 텍스트

우리 삶을 지배하는 다양한 법칙. 우리가 잘 알고 있는 법칙은 어떤 게 있을까.. 안 좋은 일이 연속으로 일어나는 머피의 법칙, 그리고 어떤 대형사고가 일어나기 전에는 작은 일이 연속으로 일어난다는 하인리히 법칙, 반도체메모리 용량이 1년마다 두배씩 늘어난다는 황의 법칙은 우리가 잘 알고 있는 법칙이라고 할 수 있다.

panel0 hue1a1 deco1

이미지와 텍스트

우리 삶을 지배하는 다양한 법칙. 우리가 잘 알고 있는 법칙은 어떤 게 있을까.. 안 좋은 일이 연속으로 일어나는 머피의 법칙, 그리고 어떤 대형사고가 일어나기 전에는 작은 일이 연속으로 일어난다는 하인리히 법칙, 반도체메모리 용량이 1년마다 두배씩 늘어난다는 황의 법칙은 우리가 잘 알고 있는 법칙이라고 할 수 있다.

panel201 hue2a3 deco1

이미지와 텍스트

우리 삶을 지배하는 다양한 법칙. 우리가 잘 알고 있는 법칙은 어떤 게 있을까.. 안 좋은 일이 연속으로 일어나는 머피의 법칙, 그리고 어떤 대형사고가 일어나기 전에는 작은 일이 연속으로 일어난다는 하인리히 법칙, 반도체메모리 용량이 1년마다 두배씩 늘어난다는 황의 법칙은 우리가 잘 알고 있는 법칙이라고 할 수 있다.

panel0 hue1a1 bgc-v1 deco1

이미지와 텍스트

우리 삶을 지배하는 다양한 법칙. 우리가 잘 알고 있는 법칙은 어떤 게 있을까.. 안 좋은 일이 연속으로 일어나는 머피의 법칙, 그리고 어떤 대형사고가 일어나기 전에는 작은 일이 연속으로 일어난다는 하인리히 법칙, 반도체메모리 용량이 1년마다 두배씩 늘어난다는 황의 법칙은 우리가 잘 알고 있는 법칙이라고 할 수 있다.

panel4 hue3 deco1

어디서나 민원처리제

민원인이 소관 행정기관을 가지 않고서도 어디서나 가까운 다른 행정기관에서 민원서류를 신청하고 원하는 행정기관에서 교부 받을 수 있는 제도입니다.

panel1 slash5
민원인이 행정기관을 직접 방문하지 않고 해당 민원 서류를 받고자 하는 교부기관에 전화로 신청하여 교부받을 수 있습니다.
(※ 신청인의 신분 확인이 필요한 민원은 제외)
panel1 slash5 deco1

처리하고자 하는 업무에 대한 처리절차 및 전반사항을 알려주며 민원서식을 제공합니다.
아래의 부서선택에서 부서를 선택하시고 업무명을 입력하신 후 검색버튼을 눌러주세요.
[바로가기]를 클릭하셔서 민원24사이트 우측 상단부의 '신청서'란에서 민원신청서식을 다운받으시기 바랍니다.

panel1 hue4 deco1

이미지와 텍스트

우리 삶을 지배하는 다양한 법칙. 우리가 잘 알고 있는 법칙은 어떤 게 있을까.. 안 좋은 일이 연속으로 일어나는 머피의 법칙, 그리고 어떤 대형사고가 일어나기 전에는 작은 일이 연속으로 일어난다는 하인리히 법칙, 반도체메모리 용량이 1년마다 두배씩 늘어난다는 황의 법칙은 우리가 잘 알고 있는 법칙이라고 할 수 있다.

panel1 slash6 bdct deco1

관심정보를 설정하시면 '메인페이지 > 교육강좌 빠른검색 > [관심강좌보기]'를 통해 원하시는 교육강좌를 빠르게 확인하실 수 있습니다.

panel1 hue2a4 deco1
  • 10인 이상 '단체예약'만 가능합니다.
  • 예약시간은 10:00 ~ 12:00 입니다.
  • 이용요금은 [이용요금] 에서 확인 가능하며, 현장결제 입니다.
평생학습 전문인력 DB구축 지원신청서(학습동아리)

panel0 pdt30px pdb30px bgc-v2 deco1 평생학습동아리 등록신청서를 신청일로 부터 10일이내에 제출하셔야만 학습동아리로 승인처리 되며, 10일 경과시 미승인처리되어 삭제될 수 있습니다.

신청서 다운로드

TOP