인터넷활용 13 - 1 반응형 웹 페이지 제작

용어체크

1. 반응형 웹 디자인

• 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법

2. 미디어 쿼리

• 사이트에 접속하는 기기별로 적용할 CSS 파일을 다르게 지정해 주는 기술
• 각 기기마다 서로 다른 레이아웃을 표시할 수 있음

3. 뷰포트

• PC 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서 의도한대로 표시되지 않으므로, 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용을 표시할 수 있음

학습내용 1. 반응형 웹의 개념 2. 뷰 포인트 3. 미디어 쿼리 뷰포인트와 미디어 쿼리를 이용하여 테스트 기기별 페이지 크기 변경하기 학습목표 1. 반응형 웹에 대해서 설명 할 수 있다. 2. 뷰 포인트와 미디어 쿼리에 대해서 설명할 수 있다.

 

 

 

 

 

---

반응형 웹 디자인이 왜 필요할까요?

인터넷 서비스를 이용하는 환경이 예전과 다르게 데스크탑 PC를 이용하는 것 뿐만 아니라 요즘은 다양한 스마트폰, 테블릿, 노트북 등 다양한 기기를 이용하므로 기기에 따라 크기가 자유자재로 변경할 필요가 있습니다.

---

Quiz 01사이트에 접속하는 기기별로 적용할 CSS 파일을 다르게 지정해 주는 기술은 미디어 쿼리이다.

• 1 O
• 2 X

정답 :1

해설 :미디어 쿼리(Media query)를 이용해 사이트에 접속하는 기기별로 적용할 CSS 파일을 다르게 지정해 준다.

 

 

Quiz 02기기 화면에 맞춰 확대 및 축소해 내용을 표시하는 기능은?

• 1 Viewport
• 2 display
• 3 width
• 4 window

정답 :1

해설 :뷰포트를 지정해 기기 화면에 맞춰 확대 및 축소해 내용을 표시할 수 있다.

 

 

Quiz 03다음 중 화면의 방향을 결정할 때 사용하는 속성은?

• 1 visibility
• 2 z-index
• 3 orientation
• 4 float

정답 :3

해설 :orientation 속성을 이용해 화면의 방향을 결정한다.

---

학습정리

1. 반응형 웹 디자인

• 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법

2. 미디어 쿼리

• 사이트에 접속하는 기기별로 적용할 CSS 파일을 다르게 지정해 주는 기술로 각 기기마다 서로 다른 레이아웃을 표시할 수 있음
• 서로 다른 CSS를 적용할 화면 크기를 설정하는 것으로 대부분 기기의 화면 크기 기준임
• 모든 기기를 반영할 수 없기 때문에 스마트폰과 태블릿, 데스크톱 정도로 구분

3. 뷰 포트

• PC 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서 의도한대로 표시되지 않으므로, 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용을 표시할 수 있음