웹 페이지 CSS 스타일을 특정 장치 너비 또는 최대 너비까지만 유지하는 방법은 무엇입니까?
6175 단어 css
웹 페이지 CSS 스타일을 특정 장치 너비 또는 최대 너비까지만 유지하려면
@media 미디어 쿼리 구문 뒤에 () 기호(여는 괄호와 닫는 괄호)를 사용할 수 있습니다. 괄호 안에 키워드 max-width 다음에 : 기호(콜론)를 쓴 다음 너비와 단위를 쓸 수 있습니다.이 CSS 블록 안에 작성하는 CSS 스타일은 장치 또는 제공한 창 너비까지 표시됩니다.
TL; DR
<html>
<body>
<p>Hello World!</p>
</body>
<!-- CSS styles -->
<!--
Using the `@media` and the `max-width` syntax
we can define the CSS styles to be triggered
till the window or the device width reaches `1000px`.
-->
<style>
body {
background-color: black;
}
p {
color: white;
}
@media (max-width: 1000px) {
body {
background-color: white;
}
p {
color: black;
}
}
</style>
</html>
예를 들어 기본적으로
body의 배경색이 검은색이고 paragraph 텍스트가 흰색인 웹페이지가 있다고 가정해 보겠습니다.다음과 같이 보일 수 있습니다.
<html>
<body>
<p>Hello World!</p>
</body>
<!-- CSS styles -->
<style>
body {
background-color: black;
}
p {
color: white;
}
</style>
</html>
출력은 다음과 같습니다.
우리는 이 웹 페이지의
body 배경색을 white로 변경하고 단락 텍스트 색상을 black로 창 또는 장치 너비가 1000px에 도달할 때까지 변경하는 것을 목표로 합니다.이를 위해
@media 미디어 쿼리 구문 뒤에 () 대괄호 기호를 사용할 수 있습니다. 괄호 안에 (max-width: 1000px) 코드를 작성하여 창 너비가 1000px에 도달하거나 창의 최대 너비가 1000px 표시에 도달할 때까지 CSS 스타일을 트리거해야 한다고 정의할 수 있습니다.다음과 같이 할 수 있습니다.
<html>
<body>
<p>Hello World!</p>
</body>
<!-- CSS styles -->
<!--
Using the `@media` and the `max-width` syntax
we can define the CSS styles to be triggered
till the window or the device width reaches `1000px`.
-->
<style>
body {
background-color: black;
}
p {
color: white;
}
@media (max-width: 1000px) {
body {
background-color: white;
}
p {
color: black;
}
}
</style>
</html>
적용되는 CSS 스타일의 시각적 표현은 아래와 같습니다.
codesandbox에 있는 위의 코드를 참조하십시오.
그게 다야 😃!
이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.
Reference
이 문제에 관하여(웹 페이지 CSS 스타일을 특정 장치 너비 또는 최대 너비까지만 유지하는 방법은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/melvin2016/how-to-keep-the-webpage-css-styles-only-up-to-certain-device-width-or-maximum-width-8e8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
