반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css"> <!-- 외부 스타일 시트 링크 -->
<title>Clone coding</title>
</head>
<body>
<header>
<img id="logo" src="./img/comp_0685990 (1).png" alt="fast campus logo"> <!-- 로고 이미지 -->
<div id="little-search">
<button class="little-search_button">언제든지</button><span class="divider"></span>
<button class "little-search_button">언제든 일주일</button><span class="divider"></span>
<button class "little-search_button">게스트 추가</button> <!--버튼 바-->
<div id="magnifying-glass-wrapper">
<img id="magnifying-glass-icon" src="./img/Magnifying_glass_icon.svg" alt="magnfying-glass-icon"> <!-- 검색 아이콘 -->
</div>
</div>
<div id="header-right-section">
<div id="do-airbnb">
당신의 강의를 패스트캠퍼스 하세요.
</div>
<div id="profile-section">
<img width="16" src="./img/list.svg" alt="list icon"> <!-- 목록 아이콘 -->
<img width="30" src="img/user-circle.svg" alt="user user-circle"> <!-- 사용자 프로필 아이콘 -->
</div>
</div>
</header>
<div id="category-bar"> <!-- 카테고리 바 -->
<!-- 카테고리 버튼들 -->
<button class="category-button" id="active-category-button">
<img class="inactive-img" src="./img/airplane.svg" alt="airplane icon">
<img class="active-img" src="./img/airplane_black.svg" alt="airplane icon">
<div>한옥</div>
</button>
<!-- 중략 -->
</div>
</body>
<script>
// JavaScript로 활성 카테고리 버튼을 설정하는 이벤트 리스너
document.querySelectorAll('.category-button').forEach(button => {
button.addEventListener("click", event => {
document.querySelector("#active-category-button").removeAttribute('id')
button.setAttribute('id', 'active-category-button');
});
});
</script>
</html>
반응형
/* CSS 리셋 코드로 모든 요소의 기본 스타일을 재설정합니다. */
/* 브라우저 호환성을 위한 것이며, 디자인에 직접적인 영향을 미치지 않습니다. */
/* CSS Reset by Eric Meyer - http://meyerweb.com/eric/tools/css/reset/ */
/* HTML5 요소를 적절한 기본 속성으로 설정합니다. */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* 페이지 전체의 기본 스타일을 설정합니다. */
body {
line-height: 1;
}
/* 목록 요소의 기본 스타일을 제거합니다. */
ol, ul {
list-style: none;
}
/* 인용 관련 요소의 스타일을 초기화합니다. */
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* 테이블 스타일을 초기화합니다. */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 버튼 요소의 기본 스타일을 설정합니다. */
button {
background-color: transparent;
border: none;
}
/* 로고 이미지 스타일 설정 */
#logo {
height: 64px;
cursor: pointer;
}
/* 페이지 상단 헤더 스타일 설정 */
header {
display: flex;
padding: 0 80px;
height: 80px;
justify-content: space-between;
align-items: center;
box-shadow: rgb(0 0 0 / 8%) 0 1px 0;
}
/* 검색 관련 스타일 설정 */
#little-search {
display: flex;
padding: 0 8px;
justify-content: center;
align-items: center;
border: 1px solid #DDDDDD;
border-radius: 40px;
height: 48px;
box-sizing: border-box;
min-width: 370px;
box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 5%);
cursor: pointer;
}
.little-search_button {
display: block;
flex-shrink: 0;
padding: 0 16px;
white-space: nowrap;
font-size: 14px;
font-weight: 600;
color: rgb(34, 34, 34);
}
/* 검색창 호버 시 스타일 설정 */
#little-search:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}
/* 마우스 포인터 속성 설정 */
#little-search * {
cursor: pointer;
}
/* 세 번째 검색 버튼 스타일 설정 */
.little-search_button:nth-of-type(3) {
color: #717171;
}
/* 검색창 구분선 스타일 설정 */
.divider {
display: block;
flex-basis: 1px;
flex-shrink: 0;
background-color: #DDDDDD;
height: 24px;
}
/* 돋보기 아이콘 스타일 설정 */
#magnifying-glass-wrapper {
display: flex;
justify-content: center;
align-items: center;
background-color: #ff385c;
flex-basis: 32px;
flex-shrink: 0;
height: 32px;
border-radius: 50%;
}
#magnifying-glass-icon {
width: 12px;
}
/* 오른쪽 섹션 스타일 설정 */
#header-right-section {
display: flex;
gap: 8px;
}
/* Airbnb 강의 섹션 스타일 설정 */
#do-airbnb {
padding: 12px;
font-size: 14px;
color: #222222;
font-weight: 600;
cursor: pointer;
border-radius: 22px;
}
/* Airbnb 강의 섹션 호버 시 스타일 설정 */
#do-airbnb:hover {
background-color: #f7f7f7;
}
/* 프로필 섹션 스타일 설정 */
#profile-section {
display: flex;
padding: 5px 5px 5px 12px;
align-items: center;
border: 1px solid #DDDDDD;
border-radius: 21px;
gap: 12px;
cursor: pointer;
}
/* 목록 아이콘 스타일 설정 */
#list-icon {
width: 30px;
}
/* 카테고리 바 스타일 설정 */
#category-bar {
display: flex;
padding: 20px 40px 0;
gap: 32px;
overflow: auto;
}
/* 카테고리 바 스타일 설정 (스크롤바 숨김) */
#category-bar::-webkit-scrollbar {
display: none;
}
/* 활성화된 카테고리 버튼의 활성 스타일 설정 */
#active-category-button {
color: #000000;
border-bottom: 2px solid #000000;
}
/* 카테고리 버튼 이미지 스타일 설정 */
.category-button img {
width: 28px;
}
/* 카테고리 버튼 호버 시 스타일 설정 */
.category-button:hover {
color: #000000;
border-bottom: 2px solid #DDDDDD;
}
/* 카테고리 버튼 활성 이미지 스타일 설정 */
.category-button:hover .active-img {
display: inline-block;
}
/* 카테고리 버튼 비활성 이미지 스타일 설정 */
.category-button:hover .inactive-img {
display: none;
}
/* 활성화된 카테고리 버튼의 활성 이미지 스타일 설정 */
#active-category-button .active-img {
display: inline-block;
}
/* 활성화된 카테고리 버튼의 비활성 이미지 스타일 설정 */
#active-category-button .inactive-img {
display: none;
}반응형
'퍼블리싱 > html, css, javascript' 카테고리의 다른 글
| 프론트, 퍼블리싱 개발자 도구 VisBug 추천 [크롬에서만 가능] (0) | 2023.10.30 |
|---|---|
| 에어비엔비 메인 그리드 정렬 html, css 코드 (0) | 2023.10.28 |
| node.js 윈도우 설치 및 설치확인방법 React 시작하기 (0) | 2023.10.17 |
| [css] 쇼핑몰 테이블(border)이 이미지에 가려 안보일때 overflow 설정 (0) | 2023.10.13 |
| 네이버를 참조한 기본 쇼핑몰 상품 레이아웃 (두번째) (0) | 2023.08.09 |