반응형 웹이란 다양한 기기나 브라우저의 크기에 맞게~~

스마트 모바일 기기의 등장으로 데스크톱 화면을 위해 존재했던 웹 문서의 설계에도 변화가 요구되기 시작했다. 변화의 초기에는 모바일 전용 url을 제공하는 방법으로 주로 사용됨. 예시 (naver.com)

태블릿, 스마트 워치,. 자동차

모바일 환경과의 격리가 성공적으로 정착한 사례도 물론 있지만, 기기의 유형이 갈수록 다양해짐에 따라 한계를 드러낼 수 밖에 없다.
기기에 최적화된 콘텐츠 생성해내는 것이 현실적으로 어려움
가변성 이 핵심 키워드

뷰포트 변화의 첫걸음
현재 화면에 보여지고 있는 영역을 의미
배율 조정 문제로 기기별로 다르게 보임

메타 태그를 통해 뷰포트 설정을 해줄 수 있다.

문서 기본 구조~

기기의 너비에 맞게 기본 스케일을 잡겠다.

기기에 따라 다른 화면 크기에 대응하기 위해 웹 문서에 뷰포트 속성에 대한 마크업을 추가해야한다.

em & rem

절대 단위 멈춰! 이런 단위도 써봐

절대 길이 단위 px

입문 레벨에서 가장 많이 사용하는 단위인 픽셀은 절대 길이 단위입다.
픽셀은 어떤 확경에서도 동일한 값을 유지하므로, 가변성이 없다.

em과 rem
em과 rem은 박스에서 텍스트 크길을 조정할 때 사용하는 상대 단위 이다.

em은 부모 요소의 글꼴 크기를, rem은 루트 요소의 글꼴 크기를 의미한다.

<div style="font-size: 20px;">
  <p>자식 요소의 1em은 20px! </p>
  <p>자식 요소의 2em은 40px! </p>
</div>

이 때 루트 요소는 html 요소를 말함. 루트 요소 글자 크기 기본값은 16px
em으로 내 ,외부 여백 크기를 정할 때는 자기 자신의 글자 크기를 기준으로 한다.

뷰포트 단위 vw vh vmin vmax

em과 rem 은 가변성은 있지만 반응하지는 않음

반응하는 단위들

font-size : 1vw; /* 뷰포트 너비의 100분의 1 */
font-size : 1vh; /* 뷰포트 높이 100분의 1 */
font-size : 1vmin; /* 뷰포트 높이와 너비 중 작은 쪽의 100분의 1 */
font-size : 1vmax; /* 뷰포트 높이와 너비 중 큰 쪽의 100분의 1 */

가변 레이아웃 (가변 그리드)

글자만 변하냐, 박스도 변한다
비율에 기반한 크기 조절

em을 이용해 상대적인 크기의 폰트를 적용할 때처럼, 레이아웃에도 비율에 기반한 개념을 적용할 수 있다
부모 요소의 크기에 비례해 자식 요소의 크기가 변하는 방식은 가변 레이아웃을 만들때 흔히 사용되는 방식(%)

%

%단위는 백분율 값을 나타냄. 부모요소와의 상대적 크기를 지정할 때 사용한다. 너비와 높이, 여백 뿐만아니라 글자 크기에도 사용할 수 있다.
너비와 여백은 margin과 padding은 부모의 width를 기준(부모의 여백 기준X) 으로 계산하게 된다.
너비와 여백은 부모 요소의 너비에 비례해 계산된다.
높이는 부모 요소의 높이 비례해 계산된다.
글자 크기는 부모 요소의 글자 크기에 비례해 계산된다.

css에서의 함수

css의 속성값을 지정할 때도 함수 개념을 지정할 수 있다.
css의 함수는 괄호 안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용하는 방식으로 동작한다.

CSS 함수의 calc()

계산식의 결과를 속성 값으로 지정할 수 있다.
calc()함수는 괄호 안에 표현식 하나를 받고, 표현식의 결과가 최종 값이 된다.
표현식은 단순 계산식이면 무엇이든 가능하다.
```
div {
width: calc(30px-20px)
}
```
미디어 쿼리
미디어 쿼리 (media query)는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)
모든 미디어 쿼리는 미디어타입과 조건에 대한 물음(쿼리) 라는 두 가지 구성 요소를 지니고 있다.
미디어 쿼리를 작성할 때는 기존의 조건과 어떻게 겹치는지는 잘 생각해서 스크립트를 작성할 것
```css
@media 미디어_타입 and (조건에_대한_물음) {
/*
미디어 타입과 조건을 모두 만족할 때 덮어씌울 스타일 선언문
/
}

@media screeen and (max-width : 768px) {
/*
화면 (screen)의 너비가 768px 이하일 경우에 여기에 정의된 스타일 선언문을 추가할 것이다!
*/
}

미디어 타입 ( 어떤 타입에서 사용할 것인가 )

screen 컴퓨터 브라우저 화면
print 인쇄 결과물에 대한 쿼리를 지정할 때 사용
speech 웹 문서를 음성을 통해서 열람하는 상황에서 사용하는 장치
미디어 타입과 쿼리
미디어 쿼리에 입력할 수 있는 미디어 타입과 쿼리의 종류는 무척 다양하다.
(물론 주로 사용 되는 것들은 거의 정해져 있다시피 하지만...)
min-width: 디스플레이 영역의 최소 너비
max-width: 디스플레이 영역의 최대 너비
min-height: 디스플레이 영역의 최소 높이
max-height: 디스플레이 영역의 최대 높이
orientation :portrait 또는 landscape 감지
color: 기기의 색상당 비트 수
color-index : 출력 기기의 색상 테이블 수
aspect-ratio :디스플레이 영역의 너비와 높이의 비율
미디어 쿼리 적용의 다른 형태

link 태그에 미디어 쿼리 추가

<link rel="stylesheet" href="style.css" media="screen and (max-width: 768px)" >

@import 구문을 이용한 추가

@import url ("style.css") screen and (max-width: 768px);

가변 이미지

이미지 요소에도 상대 단위 em, vm, % 등을 얼마든지 사용할 수 있다.
주의할 점은 브라우저가 대개 이미지의 비율을 유지한다는 점, 그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점이다. ( => 이미지 품질이 떨어질 수 있다는 점 유의 )
max-width
css의 max-width 속성은 너비의 최대값을 지정하여 요소의 너비가 그 이상 커지지 않게 한다.

img {
max-width: 200px;
}

img {
max-width:100%; /* 부모 요소보다 커질 수 없다! */
}

picture

html의 Picture요소를 이용하면 뷰포트의 너비 등 브라우저의 특정 조건에 따라 이미지를 반응형으로 불러 올 수 있다.

source는 미디어 조건에 맞게 이미지를 선택전으로 불러올 수 있는 요소.

<picture>
  <source srcset="desktop.png" media="(min-width: 1200px)">
  <source srcset="tablet.png" media="(min-width: 800px)">
  <img src="mobile.png">
</picture>

가변 동영상

동영상은 비교적 덜 간단
이미지를 가변 이미지로 처리해주었던 것 동일한 처리를 동영상에도 똑같이 적용할 수 있다.
그러나 문제는 동영상 서비스에 따라 그 성질이 조금씩 다를 수 있다.
유튜브와 같은 웹에 있는 동영상은 iframe 태그를 통해 삽입할 수 있다.


<video src="./videos/my-video.mp4" controls></video>

source를 이용해 미디어 조건에 맞게 영상을 불러올 수 있지만 유튜브나 다른 매체의 영상을 가져올 경우 문제가 발생함

<body>
    <video>
        <source srcset="" media="" />
        <source srcset="" media="" />
        <source srcset="" media="" />
    </video>
</body>

다른 서비스의 동영상을 임베드한 경우 다른 처리 방식이 필요하다.

여백을 만들고 절댓값으로 고정 시켜주기!

iframe을 div로 감싼다.
감싼 div에 화면이 줄어드는 사이즈에 맞게 계산하여 여백을 준다.

부모 태그의 position 속성에 relative를 주고 자식 태그의 position속성에 absolute를 주면 위치의 절대값을 줄 수 있다.

.parent {
    position:relative;
}
.child {
    position: absolute;
    top : 0; left: 0;

}

모듈화 디자인

컴포넌트를 만들다.

컴포넌트 = 재사용 가능한 모듈
반응형 웹 개발의 대세는 '페이지 만들기'에서 '컴포넌트 만들기'로 이동했다고 봐도 무방하다.
웹 개발(또는 프로그래밍)에 있어 컴포넌트(Component)란 독립적이고 재사용이 가능한 모듈을 뜻한다.
컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조합을 이용해 화면을 구성할 수 있다.
모듈화된 디자인
모듈화된 디자인은 작업 효율에 많은 도움이 된다. 여러 개의 페이지는 각각의 다양한 레이아웃을 가지지만, 페이지를 구성하는 컴포넌트의 형태는 비슷한 경우가 많기 때문에 컴포넌트에 초점을 맞추어 웹을 만들면 일이 줄어들게 된다.
모듈화란? 개별 컴포넌트를 하나의 조립 부품(모듈)으로 보고 작업하는 것!
모듈화가 주는 이점
반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는 자연스럽게 반응형 페이지가 된다.
스타일 재사용이 용이하다. 필요한 경우 추가 스타일을 적용하면 된다.
페이지의 일관성을 유지하기 용이하다.
같은 코드를 여러번 쓰기 좋게 만들면 된다.

반응형 웹 실습

step1 초기화 css 코드 넣기
https://meyerweb.com/eric/tools/css/reset/해당 주소에 있는 코드를 reset.css 파일에 붙여넣기

Header

마크업 작업 먼저하기
햄버거바 엔티티 ☰ 돋보기 엔티티 🔍
onsubmit="return false;"를 입력해두면 버튼 클릭시 페이지 새로고침이 일어나지 않는다.

반응형 웹 연습하기 - 개념 정리

em & rem

절대 길이 단위 px

em과 rem

뷰포트 단위 vw vh vmin vmax

반응하는 단위들

가변 레이아웃 (가변 그리드)

%

css에서의 함수

CSS 함수의 calc()

미디어 쿼리

미디어 타입과 쿼리

미디어 쿼리 적용의 다른 형태

가변 이미지

max-width

picture

가변 동영상

모듈화 디자인

컴포넌트를 만들다.

모듈화된 디자인

모듈화가 주는 이점

반응형 웹 실습

Header

티스토리툴바