[웹 표준에 맞는 HTML5 프로그래밍] 6차시 - 다양한 레이아웃의 구성과 기능

위치, 유동성, 부트스트랩

1. CSS position 속성: 요소의 위치 결정 유형 지정

2. CSS float 속성: 다른 요소가 왼쪽 또는 오른쪽으로 배치되도록 함. 주로 이미지에 사용

3. Bootstrap: 반응형 웹의 모바일 우선 프론트 엔드 웹 개발을 위한 무료 오픈 소스 CSS 프레임 워크

 

플렉스 시스템과 그리드 시스템

1. 플렉스(flex) 시스템의 개념

- 개념: Flexbox(Flexible Box) 모듈로도 불림, Flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델

2. 그리드(grid) 시스템의 개념

- 개념: 한번의 선언으로 명시적 속성들과 암시적 속성들을 빠르게 설정하는 방법

- 명시적 속성: grid-template-rows, grid-template-columns, and grid-template-areas

- 암시적 속성: grid-auto-rows, grid-auto-columns, and grid-auto-flow

 

반응형 웹과 미디어 쿼리

1. 반응형 웹 디자인(Responsive Web Design)의 개념과 특징

- 개념: 다양한 기기(데스크탑, 노트북, 태블릿, 스마트폰 등)의 화면 크기에 상관없이 자연스럽게 보이도록 디자인 하는 것

- 특징: 모든 장치(Device)에서 웹 페이지를 보기 좋게하고 HTML과 CSS만으로 구현 가능함(프로그램도 자바스크립트도 아님)

2. 미디어 쿼리(media queries)의 개념과 특징

- 개념: @media을 사용하여 미디어 별로 style을 지정하는 것