HTML의 반응형
- WBOY원래의
- 2024-09-04 16:46:49585검색
HTML의 반응형 디자인은 모든 화면 크기와 기기 크기에 따라 HTML 요소를 맞추는 개념입니다. 이러한 요소는 모바일, 데스크톱, 태블릿 등 모든 기기에서 완벽하게 보여야 합니다. 반응형 디자인은 디스플레이 보기에서 사용 가능한 공간에 따라 요소가 빠르게 조정되는 것입니다. 이는 뷰포트 너비, 텍스트 크기, 반응형 이미지 및 기타 요소를 기반으로 합니다. 요즘에는 다양한 브라우저와 장치에서 디자인에 완벽하게 어울리는 반응형 디자인 용어와 관련된 많은 새로운 기술이 있습니다. 미디어 쿼리는 브라우저가 사용자의 기기 크기에 따라 조정되도록 지시하는 CSS를 통한 반응형 디자인을 포함하여 가장 좋은 부분 중 하나입니다.
HTML 반응형 디자인에 사용되는 구문
HTML의 반응형 디자인은 수많은 요소에 따라 달라집니다. 하나씩 살펴보겠습니다:
1. 뷰포트 설정: 아래 구문은 뷰포트를 사용자 페이지 보기로 설정하는 데 사용되며, 이는 브라우저가 웹 페이지의 크기와 크기 조정을 제어하는 데 도움이 됩니다. 다양한 장치 크기와 장치에 따른 디스플레이 화면에 따라 요소를 자동으로 조정합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. 반응형 이미지: 웹페이지에 이미지를 추가할 때마다 해당 이미지를 각 기기의 화면 크기에 적합한 크기로 표시해야 합니다.
<div class='section content'> <img class='example' src='images/example.svg' /></div>
3. 너비 속성 설정: CSS를 사용하면 너비를 100%로 설정할 수 있으므로 화면 표시 보기에서 요소가 반응하도록 만드는 데 도움이 됩니다.
width: 100%;
4. 최대 너비 속성: 너비와 동일하게 요소의 최대 너비를 100%로 설정할 수 있으므로 모든 HTML 요소를 적절한 반응형 형식으로 표시하는 데 도움이 됩니다.
Max-width:100%;
5. 반응형 텍스트: 다른 요소와 마찬가지로 화면 크기에 따라 모든 장치에서 텍스트도 책임을 갖도록 해야 합니다. 이는 사용자가 장치 화면에 따라 텍스트 크기를 쉽게 조정할 수 있도록 뷰포트 너비를 설정하는 데 도움이 되는 VW를 사용하여 설정할 수 있습니다. 이 구문은 뷰포트를 브라우저 디스플레이 크기라고 설명합니다. 여기서 1 VW는 뷰포트 너비의 실제 1%와 같습니다.
<h4 style="font-size:5vw">Text</h4>
6. 미디어 사용 쿼리: 미디어 쿼리는 반응형 디자인에서 중요한 역할을 하여 텍스트, 이미지 및 기타 요소가 다양한 브라우저 크기와 다양한 기기 크기에 더 잘 반응하도록 만듭니다. 요즘 웹페이지의 반응성을 높이기 위해 사용할 수 있는 다양한 프레임워크가 있습니다. 그들은 다음과 같습니다:
- 반응형 스타일시트: 이 프레임워크는 반응형 디자인을 만드는 동안 주요 역할을 하는 W3.CSS와 같은 다양한 스타일시트 프레임워크를 사용하는 데 도움이 됩니다. 기본적으로 모바일 우선 디자인을 지원합니다. 배우고 개발하기 쉽습니다.
- 부트스트랩: 빠르게 성장하고 있으며 사용자가 자유롭게 사용할 수 있는 가장 인기 있는 프레임워크입니다. HTML, CSS, jquery와 같은 웹 개발 언어를 기반으로 하여 웹페이지의 반응성을 높이는 데 도움이 되므로 다른 프레임워크보다 사용자 친화적입니다.
- 최신 반응형 CSS: 다양한 종류의 브라우저는 물론 스마트폰, 태블릿, 노트북 등 모든 유형의 장치를 지원합니다.
HTML로 반응형을 구현한 예
다음은 HTML의 반응형 예시입니다.
예시 #1
이 예에서는 HTML 코드에 뷰포트를 설정하고 이미지도 반응형으로 만들었습니다.
HTML 코드:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <h2>Responsive Design by setting Viewport</h2> <p>Setting specific width to the screen which will adjust screen as per device on which we are going to display our webpage.</p> <img src="images.jpg" > </body>
데스크톱 또는 노트북 화면 출력:
모바일 기기 출력:
태블릿 출력:
예시 #2
예제 2에서는 미디어 쿼리를 사용하여 반응형 화면을 만들고 있습니다. 이는 코드를 사용하여 다양한 브라우저는 물론 다양한 기기에서도 반응형 웹페이지를 만드는 데 도움이 됩니다.
HTML 코드:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}
.top {
background-color:#00ff00;
padding:20px;
float:left;
width:30%;
}
.middle {
background-color:#800000;
padding:20px;
float:left;
width:40%;
color:white;
}
.bottom {
background-color:#00ffff;
padding:20px;
float:right;
width:30%;
}
@media screen and (max-width:800px) {
.top, .middle, .bottom {
width:100%;
}
}
</style>
</head>
<body>
<h2>Responsive Design in HTML using Media Queries</h2>
<p>We will see web page on different devices by resizing browser window</p>
<div class="top">
<h4>First Content Part</h4>
<img src="images.jpg">
</div>
<div class="middle">
<h4>Second Content Part</h4>
<img src="images.jpg">
</div>
<div class="bottom">
<h4>Third Content part</h4>
<img src="images.jpg">
</div>
</body>
데스크톱 보기의 출력:
모바일 기기에서 출력: 모바일 기기에서는 출력 화면이 스크롤 가능하므로 전체 웹페이지를 보려면 화면을 아래로 스크롤해야 합니다.
태블릿 장치의 출력: 동일한 출력이 태블릿 장치 크기에 따라 조정됩니다.
예시 #3
부트스트랩, 표준 CSS 및 미디어 쿼리를 사용하는 또 다른 예 3을 살펴보겠습니다.
HTML 코드:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.options {
float:left;
width:20%;
text-align:center;
}
.options a {
background-color:#e5e5e5;
padding:8px;
margin-top:7px;
display:block;
width:100%;
color:black;
}
.main {
float:left;
width:60%;
padding:0 20px;
}
.course {
background-color:#ff8000;
color:white;
float:left;
width:20%;
padding:10px;
text-align:center;
}
#header
{
background-color:#003333;
padding:10px;
text-align:center;
color:white;
}
#footer{
background-color:black;
text-align:center;
padding:10px;
margin-top:7px;
color:white;
@media only screen and (max-width:620px) {
/* For mobile phones: */
.options, .main, .course {
width:100%;
}
}
}
</style>
</head>
<body>
<div id="header">
<h1>Welcome to EDUCBA</h1>
</div>
<div style="overflow:auto">
<div class="options">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Career</a>
<a href="#">Contact us</a>
</div>
<div class="main">
<h2>WHO IS EDUCBA?</h2>
<p> Learn Graphic designing, Animation, Game Development, Video Editing & more with our Online Certification Courses</p>
</div>
<div class="course">
<h3><b>Courses</b></h3>
<p>Data science</p>
<p>Marketing</p>
<p>Excel</p>
<p>Design</p>
</div>
</div>
<div id="footer">© 2019 - EDUCBA. ALL RIGHTS RESERVED</div>
</body>
</html>
Output on Laptop Screen:
Output on Mobile Devices:
Output on Tablet:
Conclusion
Responsive design is done by using HTML and CSS language to make web page more responsive and user-friendly, which display properly on each and every device size. It uses the latest framework like W3.CSS, bootstrap and some media queries code.
위 내용은 HTML의 반응형의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!