ABOUT ME

기록하고 기억하다.

Today
Yesterday
Total
  • 반응형 웹 만들기 Day2
    개발입문/WEB 2017. 12. 30. 12:36



    1. 목표: 그리드 / 레이아웃

    기기나 환경에 따라 

    레이아웃 (화면구성) 을 바꿀 수 있도록


    2. 가변 그리드

    웹페이지를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술

    Fluid Layout, Flexible Layout, Flexible Grid


    일반적으로 12개의 칼럼을 가진 테이블처럼 사용한다고 한다. 

    https://www.w3schools.com/css/tryresponsive_grid.htm


    3. 뷰포트

    모니터나 기기의 화면을 통해 보이는 영역 / 화면에 보이는 영역을 제어하는 기술

    PC: 해상도 /  MO: 실제 기기의 화면크기

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">


    - <meta name="viewport" ...> 크기와 비율 제어
    - The width=device-width  너비 = 디바이스의 화면크기
    - The initial-scale=1.0  초기 줌레벨이 100% 
    - 출처: 
    https://www.w3schools.com/css/css_rwd_viewport.asp


    4. 미디어 쿼리 Media Queries

    화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술

    - 기준: 모바일
    - 600px 이상: 태블릿 
    - 768px 이상: PC 

    body{
    background: #e65d5d;
    }

    @media all and (min-width: 600px){
    body{
    background: #e65d5d;
    }
    }

    @media all and (min-width: 768px){
    body{
    background: #e65d5d;
    }
    }


    5. 플렉서블 박스 Flexible Box

    가변적인 박스를 만들고, 배치하는 기술

    RWD Desktop

    RWD Desktop


    RWD phone

    RWD Phone



    ✮ 웹 호스팅 / FTP 없어도 크롬에서 모바일 디바이스에 맞게 뷰포트 조정해볼 수 있습니다. 


    1) 01_2. html 이미지 소스 경로를 변경합니다.

    <img src="./source/img_01.jpg">


    2) 모바일 뷰포트 확인

    크롬에서 화면크기 조정하면 됩니다. 크롬은 웹페이지 테스트하기 최적의 장소!

    - 경로: 마우스 왼쪽버튼 > 검사 Inspect > Toggle Device toolbar > Device 선택



    '개발입문 > WEB' 카테고리의 다른 글

    댓글

Designed by Tistory.