목차
[부트스트랩] 윈도우 크기에 따라 아이콘 크기 조절
간단한 예제와 함께 결과를 통해 쉽게 이해해 보도록 하겠습니다.
예제 코드>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
@media (max-width: 576px) {
.navbar-nav {
flex-direction: column;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
결과>>
[부트스트랩] 윈도우 크기에 따라 아이콘 크기 조절 코드 주석
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">은 HTML 문서에서 사용되는 메타 태그 중 하나입니다. 이 메타 태그는 웹 페이지의 뷰포트(viewport)를 설정하는 데 사용됩니다.
뷰포트는 웹 페이지가 어떻게 표시되는지를 결정하는 화면 영역을 의미합니다. 데스크탑 컴퓨터, 태블릿, 스마트폰과 같은 다양한 기기에서 웹 페이지를 볼 때, 각 기기마다 화면 크기가 다르기 때문에 뷰포트 설정은 중요합니다.
이 메타 태그는 뷰포트의 너비를 장치의 너비에 맞추고, 초기 확대/축소 비율을 1로 설정하는 역할을 합니다. 이를 통해 웹 페이지가 다양한 화면 크기에 맞게 조정되어 사용자에게 더 나은 경험을 제공할 수 있습니다.
@media (max-width: 576px) {
.navbar-nav {
flex-direction: column;
}
}
이 코드는 CSS의 @media 쿼리를 사용하여 화면 너비가 576px 이하인 경우에만 적용되는 스타일을 정의하는 부분입니다.
위 코드는 화면 너비가 576px 이하인 경우, .navbar-nav라는 클래스를 가진 요소들에게 flex-direction 속성을 column으로 설정하는 것을 의미합니다. 이는 일반적으로 모바일 기기에서 네비게이션 메뉴를 세로 방향으로 표시하고자 할 때 사용됩니다.
@media (max-width: 576px)는 화면 너비가 576px 이하일 때 스타일을 적용하도록 조건을 설정하는 부분입니다. 이를테면, 스마트폰이나 작은 모바일 기기에서 적용되는 스타일을 지정할 수 있습니다.
/* 큰 모니터 */
@media (min-width: 1200px) {
/* 스타일 적용 내용 */
}
/* 작은 모니터 */
@media (min-width: 992px) and (max-width: 1199px) {
/* 스타일 적용 내용 */
}
/* 태블릿 */
@media (min-width: 768px) and (max-width: 991px) {
/* 스타일 적용 내용 */
}
/* 스마트폰 */
@media (max-width: 767px) {
/* 스타일 적용 내용 */
}일반적으로는 다음과 같은 기준으로 사이즈를 구분할 수 있습니다. 그러나 기기의 다양성으로 인해 실제 사이즈는 다를 수 있으므로 참고용으로만 사용하시기 바랍니다.
[부트스트랩] 윈도우 크기에 따라 아이콘 크기 조절 코드 다운로드
앞서 위에 코드는 아래에서 다운받아서 사용하시면 됩니다.
'웹관련프로그래밍(web programming) > Bootstrap(부트스트랩)' 카테고리의 다른 글
| [Bootstrap] col offset 과 nesting 예제 실습, 부트스트랩 (0) | 2023.07.11 |
|---|---|
| [Bootstrap]리스트 태그, 리스트 표시 없애기, css와 비교 예제(ol, ul, li) (0) | 2023.07.10 |
| [Bootstrap] HTML에 댓글창 추가하기 (0) | 2021.12.05 |
| [Bootstrap] Templates 무료 예제로 Flask와 연동하기 (2) | 2021.12.03 |
| [Bootstrap]HTML 버튼,라벨,입력창 오른쪽 정렬/배치, 위, 아래 놓기 (0) | 2021.11.05 |