위치, 유동성, 부트스트랩
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을 지정하는 것
'기타 > Remote class' 카테고리의 다른 글
[웹 표준에 맞는 HTML5 프로그래밍] 8차시 - 화면설계 UI 해석하기 (0) | 2023.02.10 |
---|---|
[웹 표준에 맞는 HTML5 프로그래밍] 7차시 - 화면설계 확인하기 (0) | 2023.02.10 |
[웹 표준에 맞는 HTML5 프로그래밍] 5차시 - CSS3를 활용한 폼 꾸미기 (0) | 2023.02.05 |
[웹 표준에 맞는 HTML5 프로그래밍] 4차시 - CSS3를 활용한 시각적 효과 꾸미기 (0) | 2023.02.05 |
[웹 표준에 맞는 HTML5 프로그래밍] 3차시 - 웹 페이지 구조화 하기 (0) | 2023.02.05 |