CSS 까다로운 개념

**

Flex 및 그리드 레이아웃 설명

**
일반적으로 CSS3 웹 레이아웃 모델인 Flexbox로 알려진 CSS Flexible Box Layout입니다. CSS3 flexbox는 요소가 다른 화면 크기 및 다른 디스플레이 장치와 함께 사용될 때 예측 가능하게 작동하도록 하는 데 사용됩니다. 컨테이너의 항목 간에 공간을 배치, 정렬 및 배포하는 보다 효율적인 방법을 제공합니다. 주로 사용 가능한 모든 공간에 가장 잘 맞도록 항목의 너비와 높이를 변경할 수 있는 CSS3를 만드는 데 사용됩니다. 블록 모델보다 선호됩니다. CSS3 flexbox에는 플렉스 컨테이너와 플렉스 항목이 포함되어 있습니다.
Flex와 그리드 레이아웃의 차이점-

CSS3 그리드 레이아웃과 Flex 레이아웃의 핵심 차이점은 CSS 그리드의 접근 방식은 레이아웃 우선인 반면 Flexbox의 접근 방식은 내용 우선이라는 것입니다.

2.Flexbox 레이아웃은 응용 프로그램의 구성 요소에 가장 적합합니다. 대부분이 근본적으로 선형이고 소규모 레이아웃인 반면 Grid 레이아웃은 디자인에서 선형이 아닌 대규모 레이아웃을 위한 것입니다.

3.CSS Grid Layout은 2차원 시스템입니다. 즉, 주로 1차원 시스템인 flexbox와 달리 열과 행을 모두 처리할 수 있으므로 열 또는 행에서 처리할 수 있습니다.

4. 레이아웃을 행이나 열로 정의하려면 flexbox가 필요할 것입니다. 그리드를 정의하고 콘텐츠를 2차원으로 맞추려면 그리드 레이아웃이 필요합니다.

**

미디어 쿼리를 사용하여 반응형 웹사이트 만들기

**
CSS 미디어 쿼리는 사용 중인 화면 해상도나 장치에 따라 사이트의 스타일을 변경하는 데 사용됩니다.
미디어 쿼리를 결합하여 해당 상황에 특정 규칙을 적용하려는 특정 시나리오를 생성할 수 있습니다. 이것은 브라우저에서 일관되게 작동하는 반응형 및 적응형 디자인의 개념을 생성하고 허용했습니다.
미디어 쿼리는 CSS3에서 도입된 CSS 기술입니다. CSS 미디어 쿼리를 사용하면 데스크탑에서 모바일까지 모든 화면 크기에서 잘 보이는 반응형 웹 사이트를 만들 수 있습니다. 미디어 쿼리는 다양한 화면 크기와 브라우저에서 사이트를 볼 수 있도록 하는 반응형 웹 디자인에 사용됩니다. 웹 사이트를 반응형으로 만들려면 주어진 단계를 사용하여 미디어 쿼리를 설정하십시오.

중단점 추가

항상 모바일 우선 설계

다른 중단점

그런 다음 선택 장치 중단점을 입력합니다

.

방향 설정: 세로 또는 가로
유형 2:
답변 2: 미디어 쿼리는 인쇄 대 화면과 같은 장치의 일반적인 유형이나 화면 해상도 또는 브라우저 뷰포트 너비와 같은 특정 특성 및 매개 변수에 따라 사이트 또는 앱을 수정하려는 경우에 유용합니다. 미디어 쿼리는 @media 규칙을 사용하여 특정 조건이 참인 경우에만 CSS 속성 블록을 포함합니다.
예:

초소형 장치(휴대폰, 600px 이하)를 사용하는 경우,
@media 전용 화면 및 (최대 너비: 600px) { }

**소형 장치(세로형 태블릿 및 대형 휴대폰, 600px 이상)
@media 전용 화면 및 (최소 너비: 600px) { }

***중형 장치(가로형 태블릿, 768px 이상)
@미디어 전용 화면 및 (최소 너비: 768px) { }

****대형 장치(노트북/데스크탑, 992px 이상)
@미디어 전용 화면 및 (최소 너비: 992px) { }

**** 초대형 장치(대형 노트북 및 데스크톱, 1200px 이상)
@미디어 전용 화면 및 (최소 너비: 1200px) { }

@media와 함께 이 높이와 너비를 사용하면 주로 반응형 레이아웃을 수정할 수 있습니다. 미디어 쿼리에는 더 많은 미디어 기능이 있습니다. 예를 들어 aspect-ratio, color-gamut, color-index, grid, hover, max-aspect-ratio, max-color-index, max-height, max-width, max-resolution, orientation, hook 등이 있습니다. 위와 나머지 미디어 쿼리 기능을 사용하면 누구나 웹 사이트를 반응형으로 만들 수 있다고 말할 수 있습니다.
권장 읽기:

Udacity's - Responsive Web Design Fundamentals
MDN's - Using Media Queries
CSS Trick's - CSS Media Queries