반응형 웹 디자인

가상 선택자의 기본 속성은 inline 속성이므로 사이즈를 주려면 display 속성값을 변경한다.

Css responsive
반응형 웹 디자인은 웹 페이지가 모든 장치에서 잘 보이도록 만든다.
반응형 웹 디자인은 HTML과 CSS만 사용한다.
반응형 웹 디자인은 프로그램이나 JavaScript가 아닌다.

모든 사용자를 위한 최고의 경험을 위한 디자인
웹 페이지는 데스크톱, 태블릿, 휴대폰 등 다양한 장치를 사용하여 볼 수 있다. 웹 페이지는 보기에 좋아야 하고 장치에 관계없이 사용하기 쉬워야 한다.
웹 페이지는 더 작은 장치에 맞게 정보를 생략해서는 안되며, 오히려 모든 장치에 맞게 내용을 조정해야 한다.

CSS와 HTML을 사용하여 콘텐츠의 크기를 조정, 숨기기, 축소, 확대 또는 이동하여 모든 화면에서 보기 좋게 만드는 것을 반응형 웹 디자인이라고 한다.

Viewport
Viewport란 웹 페이지에서 사용자가 볼 수 있는 영역이다.
표시 영역은 장치에 따라 다르며 컴퓨터 화면보다 휴대폰에서 더 작다.
태블릿과 휴대폰 이전에는 웹 페이지가 컴퓨터 화면용으로만 디자인되었으며 웹 페이지는 정적인 디자인과 고정된 크기를 갖는것이 일반적이었다.
그런 다음 태블릿과 휴대폰을  사용하여 인터넷 서핑을 시작했을 때 고정 크기 웹 페이지가 뷰포트에 비해 너무 컸다. 이 문제를 해결하기 위해 해당 장치의 브라우저는 화면에 맞게 전체 웹 페이지의 크기를 줄였다.
하지만 이것은 완벽하지 않은 방법이다.
HTML5는 웹 디자이너가 태그를 통해 뷰포트를 제어할 수 있는 방법을 도입했다 <meta>
사용자는 데스크탑과 모바일 장치 모두에서 웹사이트를 수직으로 스크롤하는 데 사용되지만 수평으로는 스크롤하지 않는다.
따라서 사용자가 전체 웹 페이지를 보기 위해 가로로 스크롤하거나 축소해야 하는 경우 사용자 경험이 좋지 않다.
1. 큰 고정 너비 요소를 사용하지 안된다. 예를 들어 이미지가 뷰포트보다 더 넓은 너비로 표시되면 뷰포트가 가로로 스크롤될 수 있다. 뷰포트의 너비에 맞게 이 콘텐츠를 조정해야한다.
2. 잘 렌더링하기 위해 콘텐츠가 특정 뷰포트 너비에 의존하지 않도록 한다 . - CSS 픽셀의 화면 크기와 너비가 장치마다 크게 다르기 때문에 콘텐츠가 잘 렌더링되기 위해 특정 뷰포트 너비에 의존해서는 안 된다.
3. CSS 미디어 쿼리를 사용하여 작은 화면과 큰 화면에 서로 다른 스타일 적용 - 페이지 요소에 대한 절대 CSS 너비를 크게 설정하면 작은 장치의 뷰포트에 비해 요소가 너무 넓어진다. 대신 width: 100%와 같은 상대 너비 값을 사용하는 것이 좋다. 또한 큰 절대 위치 지정 값을 사용하지 않도록 주의해야한다. 소형 기기에서는 요소가 뷰포트 밖으로 떨어질 수 있다.

Grid View
많은 웹 페이지는 Grid View를 기반으로 하며, 이는 페이지가 열로 나뉜다는 것을 의미한다.
Grid View를 사요하면 웹페이지를 디자인할때 매우 유용하다. 페이지에 요소를 더 쉽게 배치할수있기때문이다.

Media Queries
Media Queries는 CSS3에서 도입된 CSS 기술이다.
특정 조건이 참인 경우에만 규칙을 사용하여 @mediaCSS 속성 블록을 포함한다.
항상 모바일을 우선 설계한다.
Mobile First는 데스크톱이나 다른 장치용으로 디자인하기 전에 모바일용으로 디자인하는 것을 의미한다(이렇게 하면 더 작은 장치에서 페이지가 더 빠르게 표시된다).
이는 CSS에서 일부 변경을 수행해야 함을 의미한다.
너비가 768px보다 작아 지면 스타일을 변경하는 대신 너비가 768px보다 커지면 디자인을 변경해야 한다 . 이것은 우리의 디자인을 Mobile First로 만든다.
미디어 쿼리는 브라우저의 방향에 따라 페이지의 레이아웃을 변경하는 데에도 사용할 수 있다.
브라우저 창이 높이보다 넓은 경우에만 적용되는 CSS 속성 집합을 가질 수 있습니다. 소위 "가로" 방향이다.
미디어 쿼리의 또 다른 일반적인 용도는 다양한 화면 크기에서 요소를 숨기는 것이다.
미디어 쿼리를 사용하여 다양한 화면 크기에서 요소의 글꼴 크기를 변경할 수도 있다.

images
images는 브라우저 창의 크기를 조정하여 페이지에 맞게 이미지 크기가 어떻게 조정되는지 확인한다.
속성 width이 백분율로 설정되고 height속성이 "자동"으로 설정되면 이미지가 반응하고 확대/축소된다.
이 max-width속성이 100%로 설정되어 있으면 이미지가 축소되어야 하는 경우 축소되지만 원래 크기보다 크게 확대되지는 않는다.
background는 크기 조정 및 배율 조정에도 반응할 수 있다.
background-size속성이 "contain"으로 설정된 경우 배경 이미지의 크기가 조정되고 콘텐츠 영역에 맞도록 시도한다. 그러나 이미지는 종횡비(이미지의 너비와 높이 간의 비례 관계)를 유지한다.
background-size속성이 "100% 100%"로 설정되면 배경 이미지가 전체 콘텐츠 영역을 덮도록 늘어난다.
background-size속성을 "cover"로 설정하면 배경 이미지가 전체 콘텐츠 영역을 덮도록 크기가 조정된다. "cover" 값은 종횡비를 유지하고 배경 이미지의 일부가 잘릴 수 있다.
큰 이미지는 큰 컴퓨터 화면에서는 완벽할 수 있지만 작은 장치에서는 쓸모가 없다. 로드를 줄이기 위해 또는 다른 이유로 미디어 쿼리를 사용하여 다른 장치에 다른 이미지를 표시할수 있다.
브라우저 너비 대신 장치 너비를 확인하는 대신 min-device-width미디어 쿼리를 사용할 수 있다 . min-width그러면 브라우저 창의 크기를 조정할 때 이미지가 변경되지 않는다.
HTML <picture>요소는 웹 개발자에게 이미지 리소스를 지정하는 데 더 많은 유연성을 제공한다.
 <picture> 요소의 가장 일반적인 용도는 반응형 디자인에 사용되는 이미지에 대한 것이다. 뷰포트 너비에 따라 확대 또는 축소되는 하나의 이미지를 사용하는 대신 브라우저 뷰포트를 더 잘 채우도록 여러 이미지를 디자인할 수 있다.
<video><audio>와 <picture>유사하게 작동합니다 . 다른 소스를 설정하고 기본 설정에 맞는 첫 번째 소스가 사용 중인 소스입니다.<video><audio>
srcset 속성은 필수이며 이미지 소스를 정의합니다.
CSS @media 속성은 선택 사항이며 media규칙에서 찾은 미디어 쿼리를 허용한다 .
<picture>요소를 지원하지 않는 브라우저에 대한 <img>요소도 정의해야 한다.

videos
width속성을 100%로 설정하면 비디오 플레이어가 반응하고 확장 및 축소된다.
max-width이 100%로 설정되면 비디오 플레이어는 필요한 경우 축소되지만 원래 크기보다 크게 확대되지는 않는다.

::before는 선택한 각 요소의 내용 앞에 무언가를 삽입한다.
content 속성을 사용하여 삽입할 콘텐츠를 지정한다.
내용 뒤에 무언가를 삽입하려면 ::after 선택자를 사용한다 .