학습내용

5월23일 강의 주제 : 반응형 웹

• 반응형 웹이란 다양한 디바이스 크기에 반응하여 웹 페이지의 레이아웃이 바뀌도록 하여 가독성을 높임
• 적용 방법
  • 기준이 되는 페이지의 크기 선정하여 html구조 작성
  • css에 @media를 사용하여 해상도 사이즈를 적고 그 해상도에 맞는 style 작성
    - 각 해당 디바이스의 크기에와 중단점에 따라 css 따로 작성하여 연결

    @media 미디어 타입 (너비 및 높이) {
       (CSS 입력)
    }

수업내용 중 어려웠던 내용 및 이해한 내용

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1) viewport : 스마트 폰 화면에서 실제 내용이 표시되는 영역
- width : 뷰포트 너비
- initial-scale : 초기 확대/축소 값(1 ~ 10)ex1. 1: 확대없이 원래 크기로
user-scalable: 확대 축소 가능 여부 .

2) 미디어 쿼리란 CSS3에 도입된 CSS 기술이다.

• 미디어 쿼리가 나오기전 모바일용과 데스크탑용 웹페이지가 따로 만들어지는 번거로움이 해소되는 기술이다.
• 반응형 웹을 작성시 기준이 되는 모바일 혹은 데스크탑 레이아웃을 css를 작성 후 중단점을 설정하고 첫 기준이 모바일이였다면 데스크탑 css작성 / 첫 기준이 데스크탑일 경우 모바일기기 css작성한다.
  여기서 미디어쿼리 중단점이란 미디어 쿼리가 설정되는 지점을 중단점이라 한다.

  320px ~ 768px미만: 모바일기기
    768px ~ 1024px미만: 태블릿
    1024px~ : PC

소감

수업중에는 분명히 알것 같았는데 막상 작성하려 보니 어떤것을 어떻게 써야할지 감이 잡히지 않았다 아직까지는 반응형이란 이런거다정도로 이해가되고 있는것 같다.
후에 실습을 하며 정확히 알아가야 할 것 같다. 코딩은 역시 많이해보고 손에 익게 하는 방법만이 있다.