[html/css] 반응형 웹디자인 기초 정리(1)

* 반응형 웹 디자인(Responsive web design)

: 화면  크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것을 말합니다

 

1. 뷰포트(viewport)

: PC화면과 모바일 화면의 픽셀 표현 방법이 다르기 때문에 뷰포트를 지정하면 접속한 기기에 따라 화면에 맞추어 확대하거나 축소하여 표시하여 줍니다. 즉, 뷰포트는 스마트폰 화면에서 실제 내용이 표시되는 영역입니다.

 

아래는 웹키트(webkit)기반의 기본 뷰포트 너비입니다.

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

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

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

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

---> 뷰포트 너비를 스마트폰 화면너비에 맞추고 초기화면 배율을 1로 지정합니다. 대부분의 웹페이지 html을 작성할 때 헤드에 꼭 들어갑니다.

 

 

2. 가변 그리드(fluid grid) 레이아웃 요소

어떤 기기에서도 동일한 레이아웃을 가지면서 기기의 특성에 맞게 웹 문서의 요소를 표현하려면 문서 안의 모든 요소의 너비를 고정되는 pixel값이 아니라 백분율로 지정합니다. 화면의 크기를 조절할때 레이아웃이 깨지는 것을 방지할 수 있습니다.

* 가변 크기 : (요소너비/전체너비)*100

* 가변 마진 : (적용할마진값/적용할 박스를 감싸고 있는 너비)*100

* 가변 패딩 : (적용할패딩값/적용할 박스를 감싸고 있는 너비)*100

 

* 고정 크기의 마진과 패딩을 위해 calc 함수 사용

: 컨텐츠의 박스는 가변적이나 패딩이나 마진을 고정되어 있도록 설정하고 싶은 경우에 사용합니다.

예를 들어 특정 영역의 박스를 항상 400px로 하고 양쪽 50px 씩의 패딩을 항상 적용하고 싶다면,

너비는 양쪽의 패딩값을 뺀 300px(400px-100px)으로 항상 설정한다면

width:calc(100%-100px);

전체 너비를300px(100%)라고 했을때 항상 100px을 제외한 값을 계산하여 적용한다는 의미입니다.

 

 

- 가변글꼴

: px은 기본적으로 사용되는 단위입니다. 픽셀단위라는 고정값에 따라 정해지므로, 화면의 크기나 확대, 축소와 같이 사용자가 임의로 정의할 수 없는 고정된 값을 말합니다.

 

1. em : 글자크기를 화면에 따라 변경할 수 있는 em단위로 변환합니다. 부모 요소를 기준으로 자식 요소의 크기를 정합니다.

1em=16px=100%=12pt(http://pxtoem.com/ : 단위 변환) 

---> em단위는 부모의 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 지정하는 것이다. 부모 요소의 영향을 받는다. 가령, 부모 요소의 글자 크기가 24px이라면 자식 요소의 크기를 2em으로 지정하면 48px이 됩니다.

 

 

2. rem : root(html)에서 기본 크기를 지정하기 때문에 중간에 기본값이 바뀌지 않습니다.

가령, 글자크기를 2em으로 지정한다면 16px의 2배 32px로 표시됩니다.

---> 부모의 폰트를 em으로 설정한 경우에 자식속성으로 상속되지 않게 적용하려면 

자식 속성의 폰트는 rem으로 설정해야 합니다.

nh0404.tistory.com/15

 

3. vw(vertical width) : 웹 브라우저의 너비를 100을 기준으로 하여 크기를 결정하는 단위

   vh(vertical height) : 웹 브라우저의 높이를 100을 기준으로 하여 크기를 결정하는 단위. 높이 값의 100분의 1 단위

   vmin : 웹 브라우저의 너비와 높이 중 짧은 쪽을 기준으로 하여 크기(최소값)를 결정하는 단위 

   vmax : 웹 브라우저의 너비와 높이 중 큰 쪽을 기준으로 하여 크기(최대값)를 결정하는 단위

 

 

- 가변 이미지

: 이미지의 크기도 부모 요소의 크기에 맞추어 표시해야 합니다.

max-width : 100%

로 설정한다.

srcset속성을 이용하여 화면 너비나 픽셀의 밀도에 따라 고해상도의 이미지를 지정할 수 있습니다.

<img src="이미지경로“ srcset="고해상도에 표시할 이미지 경로 2x" alt="설명”> 

 

 

* 미디어 쿼리(mediaqueri)

: 접속하는 장치에 따라 특정한 CSS스타일을 사용하도록 해 주는 기능으로 PC나 태블릿, 스마트폰의 웹 브라우저 화면 크기에 따라 사이트 레이아웃이 바뀌도록 하는 속성입니다.

특정 미디어에 접속했을 때 어떤 CSS를 적용할 것인지 지정할 수 있습니다.

 

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

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

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

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

---> 뷰포트 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정한다.

 

 

1. 웹 문서의 가로너비와 세로 높이

: 웹 문서의 내용이 화면에 보이는 영역을 ‘뷰포트’라고 한다. 웹 문서의 너비와 높이를 지정하여 사용 가능.

웹페이지 가로 : width

웹페이지 세로 : height

최소너비, 최소높이 : min-width, min-height

최대너비, 최대높이 : max-width, max-height

 

 

구문 : @media screen and (min-width:200px) and (max-width:300px){ }

---> 미디어 유형이 screen(컴퓨터스크린(스마트폰스크린포함))이면서 최소너비가 200px이고 최대너비가 300px일 경우에 적용할 CSS를 정의하는 구문이다.

 

 

2. 단말기의 가로 너비와 세로 높이

: 단말기의 해상도와 브라우저의 너비는 다르다는 것에 주의할 것

단말기 가로, 세로 : device-width, device-height

단말기의 최소너비, 최소높이 : min-device-width, min-device-height

단말기의 최대너비, 최대높이 : max-device-width, max-device-height

구문 : @media all and (min-device-width:320px) and (min-device-height:480px){ }

 

3. orientation 속성

: 스마트폰이나 태블릿에서 기기의 방향을 달리해서 볼 경우가 있는데 미디어쿼리에서 화면 방향을 체크할 수 있다.

orientation : portrait - 단말기 세로방향

orientation : landscape - 단말기 가로방향

구문 : @media screen and (orientation:landscape){ }

 

 

 

 

4. 미디어 쿼리 브레이크포인트 설정하기

: 미디어 쿼리 작성시 다른 CSS를 적용할 화면 크기를 중단점(Break point)이라고 한다.

크기나 처리속도 등에서 모바일에서 제약 조건이 많기 때문에 대부분 모바일을 먼저 설계하고 태블릿, 데스크톱에 맞추어 디자인을 작성해 나간다.---> 모바일 퍼스트(Mobile First)라고 한다.

 

미디어 쿼리는 '뷰포트(보이는영역)'의 크기를 기준으로 감지하게 된다.

 

/*스마트폰 세로*/

@media screen and (min-width:320px){

}

/*스마트폰 가로*/

@media screen and (min-width:480px){

}

/*태블릿 세로*/

@media screen and (min-width:768px){

}

/*태블릿 가로, 데스크 톱*/

@media screen and (min-width:1024px){

}

 

---> min-width를 사용하는 경우 '이상'의 의미이므로 크기가 작은 순서대로 사용하고,

       max-width를 사용하는 경우 '이하'의 의미이므로 크기가 큰 순서대로 사용한다.

 

 

* 미디어쿼리 CSS 파일 연결하기

: <link rel="stylesheet" media="screen" type="text/css" href="mediaqueries.css">

link rel="stylesheet" media="screen" type="text/css" href="mediaqueries.css">

미디어 쿼리를 별도의 css파일로 작성할 경우에 연결하여 사용한다.

html과 css파일을 별도록 관리하므로 속도와 관리면에서 효율적이기도 하다.