Home-theater-designers
웹사이트/웹 애플리케이션을 개발하려면 반응형 디자인을 만드는 방법을 아는 것이 성공에 필수적입니다.
과거에는 다양한 화면 크기에 잘 맞는 웹사이트를 만드는 것이 웹사이트 소유자가 개발자에게 요청해야 하는 사치였습니다. 그러나 스마트폰과 태블릿의 사용이 증가하면서 이제 소프트웨어 개발 세계에서 반응형 디자인이 필수 요소가 되었습니다.
미디어 쿼리를 사용하는 것은 웹사이트/웹 앱이 모든 기기에서 원하는 대로 정확하게 표시되도록 하는 가장 좋은 방법입니다.
반응형 디자인 이해하기
간단히 말해서 반응형 디자인은 HTML/CSS를 사용하여 다양한 화면 크기에 적응하는 웹사이트/웹 앱 레이아웃을 만드는 것을 다룹니다. HTML/CSS에는 웹사이트 디자인에서 응답성을 달성하는 몇 가지 다른 방법이 있습니다.
- 픽셀(px) 대신 rem 및 em 단위 사용
- 각 웹페이지의 뷰포트/스케일 설정
- 미디어 쿼리 사용
미디어 쿼리란 무엇입니까?
미디어 쿼리는 CSS3 버전에서 출시된 CSS의 기능입니다. 이 새로운 기능의 도입으로 CSS 사용자는 장치/화면 높이, 너비 및 방향(가로 또는 세로 모드)에 따라 웹 페이지 표시를 조정할 수 있습니다.
더 읽어보기: 필수 CSS3 속성 치트 시트
미디어 쿼리는 코드를 한 번 만들고 프로그램 전체에서 여러 번 사용할 수 있는 프레임워크를 제공합니다. 웹 페이지가 3개뿐인 웹 사이트를 개발하는 경우에는 그다지 도움이 되지 않을 수 있지만 수백 개의 다른 웹 페이지가 있는 회사에서 일하고 있다면 시간을 크게 절약할 수 있습니다.
미디어 쿼리 사용
미디어 쿼리를 사용할 때 고려해야 할 몇 가지 사항이 있습니다: 구조, 배치, 범위 및 연결.
미디어 쿼리의 구조
미디어 쿼리 구조의 예
@media only/not media-type and (expression){
/*CSS code*/
}미디어 쿼리의 일반적인 구조는 다음과 같습니다.
- @media 키워드
- not/only 키워드
- 미디어 유형(스크린, 인쇄 또는 음성일 수 있음)
- 키워드와
- 괄호로 묶인 고유 표현식
- 한 쌍의 열기 및 닫기 중괄호로 묶인 CSS 코드입니다.
유일한 키워드가 있는 미디어 쿼리의 예
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}위의 예는 너비가 450px 이하인 장치 화면에만 CSS 스타일(특히 파란색 배경색)을 적용합니다. 따라서 기본적으로 스마트폰입니다. 유일한 키워드는 not 키워드로 대체될 수 있으며 위 미디어 쿼리의 CSS 스타일은 인쇄 및 음성에만 적용됩니다.
그러나 기본적으로 일반 미디어 쿼리 선언은 세 가지 미디어 유형 모두에 적용되므로 그 중 하나 이상을 제외하는 것이 목적이 아니라면 미디어 유형을 지정할 필요가 없습니다.
기본 미디어 쿼리 예
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}미디어 쿼리 배치
미디어 쿼리는 CSS 속성입니다. 따라서 스타일 지정 언어 내에서만 사용할 수 있습니다. 코드에 CSS를 포함하는 세 가지 방법이 있습니다. 그러나 이러한 방법 중 내부 또는 외부 CSS 중 두 가지만 프로그램에 미디어 쿼리를 포함하는 실용적인 방법을 제공합니다.
내부 방법은 HTML 파일의 태그에 태그를 추가하고 태그의 매개변수 내에서 미디어 쿼리를 생성하는 것입니다.
외부 방법은 외부 CSS 파일에 미디어 쿼리를 만들고 태그를 통해 HTML 파일에 연결하는 것입니다.
미디어 쿼리 범위
미디어 쿼리가 내부 또는 외부 CSS를 통해 사용되는지 여부에 관계없이 미디어 쿼리가 작동하는 방식에 부정적인 영향을 줄 수 있는 스타일링 언어의 한 가지 주요 측면이 있습니다. CSS에는 우선 순위 규칙이 있습니다. CSS 선택기 또는 이 경우 미디어 쿼리를 사용할 때 CSS 파일에 추가된 각각의 새 미디어 쿼리는 이전에 있던 쿼리를 재정의(또는 우선 적용)합니다.
위에 있는 기본 미디어 쿼리 코드는 스마트폰(너비 450px 이하)을 대상으로 하므로 태블릿에 다른 배경을 설정하려는 경우 기존 CSS 파일에 다음 코드를 추가하기만 하면 됩니다.
태블릿 미디어 쿼리 예
/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}
유일한 문제는 우선 순위로 인해 태블릿의 배경색이 빨간색이고 스마트폰도 이제 450px 이하가 800px 미만이기 때문에 배경색이 빨간색이라는 것입니다.
이 작은 문제를 해결하는 한 가지 방법은 스마트폰용 미디어 쿼리보다 태블릿용 미디어 쿼리를 추가하는 것입니다. 후자는 전자를 무시하고 이제 파란색 배경색의 스마트폰과 빨간색 배경색의 태블릿을 갖게 됩니다.
하지만 우선 순위를 신경쓰지 않고 스마트폰과 태블릿을 따로 스타일링하는 더 좋은 방법이 있다. 이것은 개발자가 최대 및 최소 너비(범위)로 미디어 쿼리를 생성할 수 있는 범위 지정으로 알려진 미디어 쿼리의 기능입니다.
범위 예가 있는 태블릿 미디어 쿼리
/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}
위의 예에서 스타일시트 내 미디어 쿼리의 배치는 태블릿 및 스마트폰용 디자인이 두 개의 개별 너비 컬렉션을 대상으로 하기 때문에 관련이 없습니다.
미디어 쿼리 연결
CSS 코드에 미디어 쿼리를 포함하지 않으려면 사용할 수 있는 대체 방법이 있습니다. 이 방법은 HTML 파일의 태그에서 미디어 쿼리를 사용하는 것이므로 스마트폰, 태블릿 및 컴퓨터에 대한 스타일 기본 설정을 포함하는 하나의 방대한 스타일시트를 사용하는 대신 세 개의 개별 CSS 파일을 사용하고 태그에서 미디어 쿼리를 생성할 수 있습니다.
태그는 외부 스타일시트에서 CSS 스타일을 가져오는 데 사용되는 HTML 요소입니다. 이 태그에는 CSS에서 미디어 쿼리와 동일한 방식으로 작동하는 미디어 속성이 있습니다.
링크 태그 예제에서 미디어 쿼리 사용
href='tablet.css'>
위의 코드는 HTML 파일의 태그에 삽입해야 합니다. 이제 파일 이름이 main.css, tablet.css 및 Smartphone.css인 세 개의 개별 CSS 파일을 만든 다음 각 장치에 대해 원하는 특정 디자인을 만들기만 하면 됩니다.
기본 파일의 스타일은 너비가 800px보다 큰 모든 화면에 적용되고 태블릿 파일의 스타일은 너비가 450px에서 801px 사이인 모든 화면에 적용되며 스마트폰 파일의 스타일은 아래의 모든 화면에 적용됩니다. 451픽셀
GPU 트윅2 사용법
이제 반응형 디자인을 만드는 도구가 있습니다.
이 기사를 끝까지 읽었다면 반응형 디자인이 무엇인지, 왜 유용한지 알 수 있을 것입니다. 이제 CSS 및 HTML 파일에서 미디어 쿼리를 식별하고 사용할 수 있습니다. 또한 CSS의 우선 순위를 소개하고 이것이 미디어 쿼리가 작동하는 방식에 어떤 영향을 미칠 수 있는지 보았습니다.
이미지 크레디트: 네거티브 스페이스/ 펙셀
공유하다 공유하다 트위터 이메일 CSS에서 배경 이미지를 설정하는 방법CSS는 웹 페이지의 스타일을 지정하는 강력한 도구입니다. 배경 이미지를 배치하는 방법을 배우면 많은 CSS 기본 사항을 배울 수 있습니다.
다음 읽기 관련 항목- 프로그램 작성
- 웹 개발
- 웹 디자인
- CSS
Kadeisha Kean은 전체 스택 소프트웨어 개발자이자 기술/기술 작가입니다. 그녀는 가장 복잡한 기술 개념 중 일부를 단순화하는 독특한 능력을 가지고 있습니다. 기술 초보자라면 누구나 쉽게 이해할 수 있는 소재를 생산합니다. 그녀는 글쓰기, 흥미로운 소프트웨어 개발 및 세계 여행(다큐멘터리를 통해)에 열정적입니다.
카데이샤 킨이 참여한 작품 더보기뉴스레터 구독
기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!
구독하려면 여기를 클릭하세요.