CSS 까다로운 개념

**

플렉스 및 그리드 레이아웃 설명

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

CSS3 Grid 레이아웃과 Flex 레이아웃의 핵심 차이점은 CSS Grid의 접근 방식은 레이아웃 우선이고 Flexbox의 접근 방식은 콘텐츠 우선이라는 것입니다.

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

3.CSS Grid Layout은 2차원 시스템으로 열과 행을 모두 처리할 수 있는 flexbox와 달리 열이나 행에서 모두 처리할 수 있는 1차원 시스템입니다.

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

**

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

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

중단점 추가

항상 모바일 우선을 위한 디자인

또 다른 중단점

그런 다음 선택 장치 중단점을 입력하십시오

.

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

초소형 장치(휴대폰, 600px 이하)의 경우 다음을 사용합니다.
@미디어 전용 화면 및 (최대 너비: 600px) { }

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

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

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

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

@media와 함께 이 높이와 너비를 사용하여 주로 반응형 레이아웃을 수정할 수 있습니다. 미디어 쿼리에는 더 많은 미디어 기능이 있습니다. 예를 들어 가로 세로 비율, 색 영역, 색상 인덱스, 그리드, 호버, 최대 가로 세로 비율, 최대 색상 인덱스, 최대 높이, 최대 너비, 최대 해상도, 방향, 후크 등 위의 기능과 나머지 미디어 쿼리 기능을 사용하면 누구나 웹사이트를 반응형으로 만들 수 있다고 말할 수 있습니다.
권장 읽기:

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