10번 개발일지(대구AI스쿨 45일차)

학습한 내용

반응형 웹 소개와 실습 1일차. 반응형 웹에 대해서 배웠다. 과거에는 데스크탑 크기에만 맞춰서 사이트를 만들면 됐다. 하지만 현재에 이르러서 태블릿PC, 스마트폰이 엄청나게 성장해서 누구나 하나쯤은 다 갖고 있게 됐다. 그래서 이에 맞춰 각 기기 화면에 알맞는 크기의 웹 사이트를 만들기 위한 것이 반응형 웹이다. 아래와 같은 장단점이 있다.

장점
1) 모든 기기에서 접속 가능
2) 가로모드에 맞춰 레이아웃 변경 가능
3) 사이트 유지 관리 용이 
4) 최신 웹 표준 따름 

단점
1) 사이트 디자인이 단순
2) 하위 버전 브라우저와 호환성 문제 있을 수 있음 -> 미디어쿼리는  CSS3 기술

단말기의 width가 height보다 크면 landscape의 값을 적용하고 height가 크면 portrait의 값을 적용한다.

/*  landscape : 단말기 가로 방향 
    portrait: 단말기 세로 방향 */

    @media screen and (orientation:landscape){
        body{
            background-color: orange;
        }
    }
    @media screen and (orientation:portrait){
        body{
            background-color: crimson;
        }
    }

학습한 내용 중 어려웠던 점 또는 해결못한 것들

min-width와 max-width 부분이 헷갈리는 점이 있지만 어렵거나 해결못한 부분은 없다.

해결방법 작성

학습 소감

반응형 웹에 대해서 익숙해질려면 많은 반복 연습이 필요하다고 느꼈다.