사용자 인터페이스 및 상호 작용 아키텍처

부트스트랩 다운로드

포함된 파일

웹페이지에서 부트스트랩 사용하기

공들여 나열한 것

중첩된 레이아웃 및 흐르는 레이아웃

반응형 레이아웃

기존 고정 너비 레이아웃을 반응형 레이아웃으로 변환

반응형 레이아웃을 위한 유틸리티 클래스

일반적인 태그 및 스타일

목록

암호

구글 프리티파이

시트

형태

텍스트 상자의 접두사 및 접미사

단일 버튼

체크박스

목록 선택

양식 레이아웃

단추

버튼 그룹

드롭다운 메뉴가 있는 버튼

탐색 메뉴

탐색 메뉴의 드롭다운 메뉴

탐색 메뉴의 반응형 디자인

탭 #1

탭 #2

탐색 경로 및 페이지네이터

프롬프트 메시지

미리보기 이미지

대화 상자

툴팁

콘텐츠 접기

회전목마

코스소개

반응형 디자인의 실제 사례

뷰포트 - 뷰포트

뷰포트를 수동으로 구성

픽셀 밀도

미디어 쿼리를 적용하는 방법

미디어 유형 미디어 유형

meida 기능 미디어 기능

시각적 창 너비와 높이의 종횡비

가로세로비 장치의 너비와 높이의 비율입니다.

방향 장치의 사용 방향

높이(시각적 창 높이) 및 장치 높이(장치 높이)

width(시각적 창 너비) 및 device-width(장치 너비)

해상도 픽셀 밀도

연산자 - 및

쉼표로 구분된 여러 미디어 쿼리에 참여

운영자 - 아니

반응형 레이아웃 #1

반응형 레이아웃 #2

반응형 레이아웃 #3

반응형 탐색

탐색 메뉴용 HTML

탐색 메뉴용 CSS

토글 버튼 스타일

반응형 탐색 메뉴 스타일

반응형 이미지

반응형 배경 이미지

다양한 크기의 기기에서는 다양한 이미지를 사용합니다.

다양한 크기의 기기에 다양한 배경 이미지 사용

화면 밀도에 따라 다양한 배경 이미지 전환

그림 채우기

반응형 슬라이드쇼

슬라이드 제어 버튼

슬라이드 제어 버튼 스타일

슬라이드를 덮어쓰는 문제 수정

결론