반응형웹(기본구조), 가변형 레이아웃

1. 기본 구조

과제 폴더 ┌ css

├ image

└ js

과제폴더에는 html파일을 저장하고 css 과 그림 ,js 는 별도의 폴더를 만들어 관리한다.

​

2. <meta name="viewport"

content="width=device-width ,initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes,shrink-to-fit=no">

​

html에 meta가 추가 되는데 의미는 (meta태그란 웹페이지의 정보를 제공하는 태그이다.)

​

content="width=device-width : meta name은 "viewport" 인 meta 로 선언

content="width=device-width : 가로길이는 각각의 기기의 가로 길이

initial-scale=1.0 : 초기 화면 비율은 1.0

maximum-scale=2.0 : 최대 비율 2배까지 확대가 가능

minimum-scale=1.0 : 최소 비율은 1.0

user-scalable=yes : 사용자가 비율을 변경할 수 있다.

shrink-to-fit=no : viewport의 크기는 기기마다 달라서 보여줘야할 영역보다 작으면 내용을 임의로 줄여서 보여주는데 이때 튕김현상이 발생한다고 한다. 이를 방지하기 위한 구문 (viewport는 기기의 현재창에서 문서를 볼 수 있는 영역을 의미한다. )

​

3. 기기별 css파일 생성

기기는 크게 모바일 , 태블릿 , PC 3가지 종류로 구분한다.

기기의 크기별로 보여지는 형식이나 스타일이 바뀌기 때문에 css파일을 각각 만들어서 적용해주어야 한다.

​

<link rel="stylesheet" href="css/index.css" type="text/css">

<link rel="stylesheet" href="css/index_tablet.css" type="text/css">

<link rel="stylesheet" href="css/index_mobile.css" type="text/css">

위와 같이 css속성파일은 링크해주고 css파일에 @media screen and 를 작성하여 기기의 해상도별로 적용이되게 한다.

해상도는 기기별로 상이 하지만 크게 가로길이 기준으로 구분 된다.

​

모바일 : 768px 미만

태블릿: 768px 이상 1024px미만

PC: 1024px이상

​

css에 작성방법

모바일 : @media screen and (max-width:767px) {css 스타일 }

태블릿 : @media screen and (min-width:768px) and (max-width:1023px) {css스타일}

PC : @media screen and (min-width:1024px) {css스타일}

 

 

가변형 공식

사이트의 모든요소를 브라우저의 크기에 맞게 다르게 표시해주는 방법

공식 target(그림의 가로길이) ÷ context(그림을싸고있는 전체의가로길이)*100= result(그림의%값)

목표의 너비값을 부모의 엘리먼트의 너비로 나누어 상대적인 너비를 구하는것

예) 총 가로길이가 950px인 div에 가로길이 310px인 img가있을때 div의 가로 값은 100%가 되고 안쪽 img의 값은 32.63%가 된다.

px 값을 가변형인 %로 변경하면 device의 가로길이에 맞게 변경이 된다.

 

원본의 전체크기가 950px이고 속해있는 이미지가 각각 310px, 150px, 470px 이고 사이여백이 각각10px 라고 했을때 아래와 같이

%로 변경하여 작성하면 디바이스의 크기에 상관없이 동일한 비율로 출력 할 수 있다.

        .clearfix{
            content: "";
            display: block;
            clear: both;
        }
        .a_950{
            width: 80%;
            height: 300px;
            font-size: 35px;
            line-height: 300px;
            text-align: center;
            margin: 0 auto;
            margin-bottom: 10px;
        }
        .a_310{
            width: 32.63%;
            height: 100%;
            float: left;
            margin-right: 1%;
            background:blue;
        }
        .a_150{
            width: 15.78%;
            height: 50%;
            line-height: 150px;
            float: left;
            margin-right: 1%;
            background: red;
        }
        .a_470{
            width: 49.47%;
            height: 100%;
            margin-right: 0px;
            float: left;
            background: green;
        }

 

    <div class="a_950 clearfix">
        <div class="a_310">310</div>
        <div class="a_150">150</div>
        <div class="a_470">470</div>
    </div>

 

대표사진 삭제

사진 설명을 입력하세요.

첫 각각의 이미지를 감싸고있는 div는 디바이스 총가로길이를 100%로 생각면 되고 div안의 이미지들은 div의 총길이를 100%로 생각하면 된다.

또 이미지a에 이미지b,c가 들어갈 경우역시 이미지a의 가로길이를 100%로 생각하면된다.

 .b_950{
            width: 80%;
            margin: 0 auto;
        }
        .b_950 .b_790{
            width: 83.15%;
            height: 300px;
            float: left;
            margin-right: 1%;
            background:blue;
        }
        .b_950 .b_270{
            width: 34.17%;
            height: 300px;
            float: left;
            margin-right: 1%;
            background: yellow;
        }
        .b_950 .b_510{
            width: 64.55%;
            height: 300px;
            margin-right: 0px;
            float: left;
            background: green;
        }
        .b_950 .b_150{
            width: 15.78%;
            height: 300px;
            margin-right: 0px;
            float: left;
            background: red;
        }

 

<div class="b_950 clearfix">
        <div class="b_790">
            <div class="b_270">270</div>
            <div class="b_510">510</div>
        </div>
         <div class="b_150">150</div>
    </div>

 

대표사진 삭제

사진 설명을 입력하세요.

이미지 또는 비디오가 있는경우

max-width:100% 로 설정하면 브라우저의 가로길이를 기준으로 항상100%에 맞게 가로길이가 조절된다.

 

px to em

16px=1em일때 상대픽셀값÷16 = 원하는em 값이된다.(em또는 rem은 상대값이어서 사용자가 임의로 정하여 사용 할 수 있다.)

 

em은 값은 상대값이고 (바로 상위 폰트px) X (em 값)이다.

rem은 값은 상대값이고 바로위가 아닌 (최상위 요소의 px) X (rem값)이다.

<style>
        html{
            font-size: 10px;
        }
        div{
            font-size: 2em;
            color:blue;
        }
        h2{
            font-size: 2em;
            color: red;
        }
        h3{
            font-size: 3rem;
            color: green;
        }
    </style>
</head>
<body>
    <p>폰트 사이즈 8px</p>
    <div>폰트 사이즈 2em(16px)
        <h2>폰트 사이즈 2em(32px)</h2>
        <h3>폰트사이즈 3rem(24px)</h3>
    </div>
    
</body>
</html>

 

대표사진 삭제

최상위 8px 하위 2em은 16px 그안의 2em은 32px

3rem역시 안쪽에 있지만 48px가 아닌 최상위값의 3배인 24px이다.

em이나 rem은 폰트에만 사용하지 않고 그리드의 크기나 특정위치의 특정 사이즈를 지정하여 사용할 수 있다.