디자인시스템

이 누리집은 대한민국 공식 전자정부 누리집입니다.

대한적십자사 홈페이지

박스

페이지 내의 콘텐츠가 유사하거나 관련된 집합이라는 것을 표현하기 위한 형식으로 콘텐츠의 주제별 파악을 용이하도록 나눠주는 수단으로 활용된다. 또는 별개의 스타일을 사용하여 페이지 내의 핵심적이거나 강조해야 하는 내용에 활동되기도 한다.

컴포넌트명

박스 (Box)

박스의 구조 예시

1.제목 섹션의 콘텐츠 제목
2.본문 정보와 다른 컴포넌트 요소가 제공되는 영역

유형

Info_box1

tit2 : Pretendard, bold, 28px, #111111

내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.
내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.

코드 보기

유형

Info_box2

콘텐츠 타이틀

콘텐츠 중간에 사용자의 이해를 돕기 위해 안내 내용을 제공할 때 활용됩니다.

블릿리스트_1 스타일입니다. (Pretendard, Regular, 17px, #1D1D1D)
블릿리스트_1 스타일입니다. (Pretendard, Regular, 17px, #1D1D1D)
블릿리스트_1 스타일입니다. (Pretendard, Regular, 17px, #1D1D1D)

코드 보기

유형

Box_st1

boder: 1px solid #D8D8D8

내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.내용을 입력해 주세요.

코드 보기

유형

Box_st2

boder: 1px solid #1D1D1D

코드 보기

유형

Box_st3

background-color: #F8F8F8

코드 보기

유형

Img_box

박스 유형 중 img(이미지로 이루어짐) 구조 예시

코드 보기

가이드

Info_box는 페이지 내 최상단에 위치한다. 페이지의 전체적인 안내와 이용방법 등의 정보를 제공하는 수단으로 최상단에 위치하도록 한다.
Img_box 내 이미지 확대보기를 위한 새창열림 또는 팝업띄움 버튼을 배치한다. 이미지 내 요소를 확대하여 확인하기 위한 용도로 버튼을 배치한다.