[웹 표준에 맞는 HTML5 프로그래밍] 12차시 - 반응형 웹(RWD)화면 구현하기

Float 활용 화면 구현

1. CSS Layout Float 실행결과

2. HTML 작성하기: 화면 구성을 위한 영역 지정(header, secrion, nav, article, footer 등)

3. CSS 작성하기: @media를 사용한 반응형 웹 구현

 

W3.CSS 활용 화면 구현

1. W3.CSS Layout 실행결과: W3 easy alignment를 사용해서 텍스트의 위치와 색을 구현

2. HTML 작성하기: w3schools.com을 호출하기

- W3-container, W3-cell, W3-color 등

3. CSS 작성하기: 넓이, 색상 등 이미 HTML에 구현된 것 외의 스타일링 지정하기

 

Grid 활용 화면 구현

1. HTML 작성하기: div 태그를 이용한 영역 구성, 각 영역 이름 지정

2. CSS 작성하기: display:grid를 사용. 그리드 영역에 지정된 이름만으로 화면 구성

3. Grid 활용 화면 구현 실행결과: 별도의 코드 없이도 영역 구현

 

Media Query 활용 화면 구현

1. 반응형(Responsive)화면 구현 실행결과: 웹 페이지를 구성하는 영역이 화면의 크기에따라 사용자의 편의에 맞게 변함

2. HTML 작성하기

3. CSS 작성하기: @media로 반응형 웹 구현. max-width를 사용하여 디바이스 크기 지정 가능