Navigations

웹과 모바일의 메뉴 사이즈와 비율등을 고려하여 디바이스 환경에 맞는 비게이션 구조로 작업하도록 합니다. 반응형으로 작업될 경우와 웹, 타블렛, 모바일 세 종류의 기준 해상도를 잡아서 진행합니다. 낮은 해상도 기준으로 작업후 보기좋은 비율을 만들고 난 이후 늘리는 방향이 바람직합니다.

반응형 웹 해상도

대부분 낮은 해상도와 큰 해상도를 대응하고 있으나 처음부터 큰 사이즈로 작업시 랩탑 및 하위 사이즈를 대응하기 힘들수 있습니다. 타겟군의 환경을 반드시 체크하여 대응하도록 합니다.

디바이스	분기점	해상도
mobile	~768	360 * 640
Tablet	1023	1024 * 768
PC	1024 ~	1366 * 768 (1920 * 1080)

139KB

UI 해상도 정의 v1.0_2021.01.05.pptx

HTML

CSS

/* PC (해상도 1024px)*/
@media all and (min-width:1024px) { /*스타일입력*/}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) { /*스타일입력*/}