반응형 웹페이지

소개 방법: px 를 %로 바꾼다효과: 화면 크기에 따라 크기(길이)가 달라진다. 기존 코드개선된 코드가변 그리드 공식공식: 도해적용소개효과: 스마트 기기의 보이는 영역을 기기의 실제 화면 크기로 변경효과2: 미디어쿼리가 화면 크기를 정확하게 감지하게 됨 방법: he

살짝 수정 패턴: 레이아웃 변화 x글자 크기, 이미지 크기만 변화 유동형 패턴 : 레이아웃 변화 x콘텐츠 양옆에 여백(큰 화면) ~ 콘텐츠가 수직으로 쌓여 표시(모바일 화면) 칼럼 드롭 패턴레이아웃 변화 o여러 칼럼으로 구성된 레이아웃에서 화면 너비가 좁아지면 격자공간

소개 디자인에서 깊이를 제거해 입체감을 없앤 것 중심 가치 작관성: 추가 효과 배제 색상의 활용: 6~8가지 색상(활용 사이트: flat UI Colors)간결하고 인상적인 타이포그래피: 플랫디자인 + 인상적인 문구 강조하는 빅 타이포그래피 (예시: 러쉬)소개 디자인으

타이포그래피 웹 폰트를 사용 배경색상과 텍스트의 대비 체크 : 색상 대비 알아보기빅 타이포그래피 예시: 디자이너 포트폴리오 사이트 (http://www.monsieurcaillou.com/\* 글꼴은 두 개 이하만 사용하기 조화 살피기 가독성 필수 웹 폰트

소개 디바이스의 화면 너비를 조정해 준다 코드사용되는 속성=값 키 widthwidth=device-width : (기본값)문서 너비를 현재 기기의 너비에 맞춤 heightheight=device-height : (기본값)문서 너비를 현재 기기의 높이에 맞춤 initia

px 대신 %를 사용한다 css3의 calc 함수를 사용 em: 16px 부모에게는 em을, 자식에는 rem을 vw: 웹브라우저의 너비를 100으로 기준으로 하여 크기를 결정 vh: 웹브라우저의 높이를 100을 기준으로 하여 크기를 결정 \\vmin: 웹브라우저의 너비

기본 문법: @media only 또는 not and 또는 , 콤마 {실행문}미디어 유형조건문미디어 쿼리를 사용하는 방법링크 방식주의사항띄어쓰기에 유의 접두사인 min은 올림차순, max는 내림차순으로 작성하기 미디어 쿼리로 크기 감지한다 ==브라우저 크기( html문

플렉서블 박스==부모 박스대부분의 주요 속성값은 부모 박스에 넣어준다 플랙서블 박스의 자식 박스 == 플렉스 아이템 플렉서블 박스의 축: 주축(기본값 가로)과 교차축(기본값 세로) 부모 박스에 다음과 같은 속성을 넣어준다 자식 박스의 배치 방향 설정하기 자식 박스를 여

메인페이지( index.html ) 서브 페이지 reset.css반응형 웹을 제작시 주의사항 모바일용 미디어 쿼리는 별도로 작성하지 않은 상태로 모바일용에 적용될 구조 css 코드와 모든 해상도에서 공통적으로 적용될 css코드를 함께 작성 기기별로 구분 주석문을 작성

인포메이션 영역 헤더 영역슬라이더 영역최근 글, 인기글 영역갤러리 영역인기 검색어 영역배너 영역소셜 네트워크 영역푸터 영역뼈대 파트 ( html)