728x90
반응형
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>위글위글</title>
<link href="normalize.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="banner-top">
<a href="#"
>카카오톡 채널 추가 시 <strong>3천원 쿠폰</strong> 즉시 발급</a
>
</div>
</header>
<!-- 헤더 끝 -->
<!-- 콘텐트 시작 -->
<div class="container">
<div class="logo-menu">
<div class="wiggle-logo">
<a href="#"><img src="이미지/logo.png" alt="위글위글로고" /></a>
</div>
<div style="flex-grow: 1"></div>
<div class="hamburger-logo">
<a href="#">
<img src="이미지/햄버거메뉴아이콘.png" alt="메뉴아이콘"
/></a>
</div>
</div>
<!-- 캐러셀크기 메뉴 -->
<div class="banner-content">
<div class="hamburgerMenu">o</div>
<!-- 캐러셀 - 사진 시작 -->
<div class="carousel">
<img src="이미지/banner1.jpg" alt="배너사진1" />
</div>
</div>
</div>
</div>
<br /><br />
<!-- 스크립트 -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="main.js"></script>
</body>
</html>.container 로
로고 2개와 / 햄버거 메뉴 / 이미지들을 묶었다.
CSS
/* CSS Reset - 기본 설정 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* header */
.banner-top {
background-color: #f5e44f;
width: 100%;
padding: 11px;
height: 40px;
display: flex;
align-items: center;
/* 세로 중앙 정렬 추가 */
justify-content: center;
/* 가로 좌우 정렬 */
}
.banner-top a {
text-decoration: none;
font-size: 12px;
color: rgb(0, 0, 0);
}
.banner-content img {
width: 100%;
height: 100%;
vertical-align: middle;
/* 이미지 여백 제거 */
}
/* container - 콘텐트 시작*/
/* 로고 띄우기 */
.container {
width: 100%;
position: relative;
}
.logo-menu {
display: flex;
/* align-content: space-around; */
position: fixed;
padding: 27px;
width: 100%;
}
.wiggle-logo img {
width: 175px;
height: 84px;
}
.hamburger-logo img {
width: 88px;
height: 60px;
}
/* 세로 중앙정렬 추가 */
.hamburger-logo {
display: flex;
align-items: center;
}
.wiggle-logo {
display: flex;
align-items: center;
}
/* banner-content */
.banner-content {
width: 100%;
}
/* 캐러셀-사진 */
/* 햄버거 메뉴 */
.hamburgerMenu {
width: 488px;
height: 100%;
background: #f78b8b;
position: absolute;
right: 0;
/* display: none; */
}햄버거 메뉴가 컨테이너 사이즈 만큼 높이여야 했음.
.container 를 기준으로 잡기 위해
position:relative 를 써서 기준을 잡음.
그리고, .hamburgerMenu 는 부모를 기준으로 사이즈를 정해야함으로
position:absolute 를 적용
.banner-content img 에는 사진 밑에 여백이 남아서
vertical-align: middle;적용해줬다.
이미지에 아래에 여백이 생기는 이유
이미지 아래에 여백이 생기는 이유는 HTML에서 이미지를 inline 요소로 취급하기 때문.
inline 요소는 줄 바꿈을 고려하여 줄 바꿈 문자 주위에 여백을 추가합니다. 여백은 줄 바꿈으로 인해 발생하는 것이지만, 이미지의 경우 줄 바꿈이 없어도 해당 동작이 유지.
이미지 요소는 인라인 요소로 간주되기 때문에 텍스트와 마찬가지로 줄 바꿈과 관련된 특성을 갖음.
예를 들어, 이미지 요소를 포함하는 요소의 끝에 줄 바꿈 문자가 있으면 이 줄 바꿈 문자는 이미지 아래의 여백으로 해석.
이것이 이미지 아래에 여백이 생기는 이유.
이를 해결하는 방법은 이미지 요소에 대해
vertical-align: middle;과 같은 속성을 적용하여 이미지를 수직으로 중앙에 정렬하거나,
이미지를 블록 요소로 변경하여 블록 레벨 요소의 특성을 가질 수 있도록 하는 것이다.
vertical-align 속성은 inline 또는 inline-block 요소의 수직 정렬을 조절하는 데 사용.
이미지는 HTML에서 inline 요소로 처리되기 때문에 이 속성이 적용
vertical-align 속성은 주로 인라인 요소의 수직 정렬을 조절하는 데 사용되지만,
이것이 이미지 아래의 여백을 제거하는 데 사용되는 이유 =
기본 값: 이미지는 HTML에서 inline 요소로 취급되며, inline 요소는 줄 바꿈을 위해 텍스트 기준선에 맞추어지기 때문에 기본적으로 vertical-align: baseline;이 적용됨. 이로 인해 이미지의 아래쪽에 여백이 생긴다.
중앙 정렬: vertical-align: middle; 속성을 사용하면 인라인 요소의 기준선을 부모 요소의 중앙에 맞출 수 있다.
따라서 이미지의 아래쪽 여백이 사라지고 이미지가 부모 요소의 세로 중앙에 정렬됩니다.
728x90
반응형
'> 포트폴리오 > wiggle wiggle' 카테고리의 다른 글
| [SASS] 로고와 메뉴바 위치 지정하기 (display:flex) (0) | 2024.06.21 |
|---|---|
| [SASS] 상단 메뉴바 생성과 position 이해 ( X버튼 추가 ) (0) | 2024.06.19 |
| [SASS] 상단 바 만들기 (0) | 2024.06.18 |
| [CSS] 로고 위치 조정하기 - position 으로 띄우기 (0) | 2024.04.16 |
| [CSS] 상단 바 만들기 (0) | 2024.04.16 |
