검색:901
반응형 웹사이트를 만드는 것은 모든 프런트엔드 개발자에게 필수적인 기술입니다. 반응형 웹사이트는 기기와 화면 크기에 따라 레이아웃과 콘텐츠를 조정하여 모든 기기에서 뛰어난 사용자 경험을 보장합니다. 이 글에서는 HTML과 CSS를 사용하여 기본적인 반응형 웹사이트를 구축하는 과정을 안내해 드립니다.
시작하기 전에 HTML과 CSS에 대한 기본적인 이해가 있어야 합니다. CSS Flexbox 및 미디어 쿼리에 대해 잘 알고 있으면 도움이 됩니다.
새 프로젝트 폴더를 만들고 다음 파일을 추가하여 시작하세요.
index.html을 열고 원하는 기본 HTML 구조를 추가하세요.
Responsive Website My Responsive Website
Welcome to My Website
This is a simple responsive website built with HTML and CSS.
About Us
We provide excellent web development services.
Our Services
We offer a wide range of web development services.
Contact Us
Feel free to reach out to us for any inquiries.
다음으로 styles.css 파일을 열고 몇 가지 기본 스타일을 추가하여 시작합니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
}
header h1 {
text-align: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
}
nav ul li {
margin: 0 1rem;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
position: fixed;
width: 100%;
bottom: 0;
}
웹사이트를 반응형으로 만들기 위해 미디어 쿼리를 사용할 것입니다. 이를 통해 화면 크기에 따라 다양한 스타일을 적용할 수 있습니다. styles.css에 다음 미디어 쿼리를 추가합니다:
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 0.5rem 0;
}
main {
padding: 1rem;
}
}
@media (max-width: 480px) {
header h1 {
font-size: 1.5rem;
}
nav ul li {
margin: 0.25rem 0;
}
main {
padding: 0.5rem;
}
}
웹 브라우저에서 index.html을 열고 브라우저 창 크기를 조정하여 다양한 화면 크기에 맞게 레이아웃이 어떻게 조정되는지 확인하세요. 탐색 메뉴가 수직으로 스택되어 있고 화면 너비가 감소함에 따라 콘텐츠 주변의 패딩이 감소하는 것을 볼 수 있습니다.
이제 HTML과 CSS를 사용하여 간단한 반응형 웹사이트를 구축했습니다! 이 예에서는 웹 페이지를 구성하고 미디어 쿼리를 사용하여 반응형 디자인을 만드는 기본 사항을 다룹니다. 경험이 쌓이면 CSS 그리드, Flexbox 및 반응형 이미지와 같은 고급 기술을 탐색하여 더욱 복잡하고 동적인 레이아웃을 만들 수 있습니다.
계속 지켜봐주세요!!!
부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.
Copyright© 2022 湘ICP备2022001581号-3
