어떻게 만들기: 응답형 헤더
CSS를 사용하여 응답형 헤더를 만들어보세요.
응답형 헤더
화면 크기에 따라 헤더 디자인을 변경하세요. 브라우저 창 크기를 조절하여 효과를 확인하세요.
반응형 헤더 생성
第一步 - HTML 추가：
<div class="header">
<a href="#default" class="logo">CompanyLogo</a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
第二步 - CSS 추가：
/* 제목 스타일을 설정하기 위해 회색 배경과 일부 내간격을 사용합니다 */
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
/* 제목 링크 스타일을 설정합니다 */
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
/* Logo 링크 스타일을 설정합니다（주의: 행간과 글자 크기를 동일하게 설정하여 글자가 커지면 헤더가 커지지 않도록 합니다） */
.header a.logo {
font-size: 25px;
font-weight: bold;
}
/* 마우스 오버 시 배경색을 변경합니다 */
.header a:hover {
background-color: #ddd;
color: black;
}
/* 활성/현재 링크 스타일을 설정합니다 */
.header a.active {
background-color: dodgerblue;
color: white;
}
/* 링크 부분을 오른쪽으로 float합니다 */
.header-right {
float: right;
}
/* 추가된 미디어 쿼리를 통해 반응형을 구현 - 스크린 너비가 500px 또는 더 작을 때 링크를 쌓아 올립니다 */
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
