<link rel="stylesheet" href="/examples/media/expand_style.css">
<script src="./main.js"></script>
/project-root
|-- /src
| |-- /pages
| | |-- /home
| | | |-- index.html # 홈 페이지 HTML 파일
| | | |-- main.js # 홈 페이지 JS 파일
| | | |-- styles.css # 홈 페이지 CSS 파일
| | |-- /about
| | | |-- index.html # 소개 페이지 HTML 파일
| | | |-- main.js # 소개 페이지 JS 파일
| | | |-- styles.css # 소개 페이지 CSS 파일
| | |-- /contact
| | | |-- index.html # 연락처 페이지 HTML 파일
| | | |-- main.js # 연락처 페이지 JS 파일
| | | |-- styles.css # 연락처 페이지 CSS 파일
| |-- /shared
| | |-- /js
| | | |-- header.js # 공통으로 사용하는 JS 모듈, 예: 네비게이션 스크립트
| | |-- /css
| | | |-- reset.css # 기본 CSS 리셋 파일
| | | |-- global.css # 모든 페이지에 공통으로 적용할 CSS
| |-- /assets
| | |-- /images # 전체 페이지에서 사용하는 이미지 파일
| | |-- /fonts # 폰트 파일
| |-- /components
| | |-- navbar.html # 재사용 가능한 네비게이션 컴포넌트
| | |-- footer.html # 재사용 가능한 푸터 컴포넌트
|-- /dist # 번들러로 만든 배포 파일들 저장소
|-- index.html # 기본 HTML 파일 (루트 페이지 또는 리디렉션 목적)
|-- README.md # 프로젝트 설명서
|-- package.json # Node.js 설정 파일
hover 적용 후에 transition은 원래 class 이름으로 빼주어야 한다 그래야 잘 작동하네
.title {
margin-left: 2rem;
transition:
0.3s transform,
0.3s background-color,
0.3s padding;
}
.title:hover {
transform: scale(1.05);
background-color: #efefef;
padding: 0.5rem;
border-radius: 0.4rem;
}
https://www.daleseo.com/font-awesome/
아이콘 검색
https://fontawesome.com/search
font.css
@font-face {
font-family: 'GmarketBold';
src: url('../../assets/fonts/GmarketSansTTFBold.ttf');
}
@font-face {
font-family: 'GmarketMedium';
src: url('../../assets/fonts/GmarketSansTTFMedium.ttf');
}
@font-face {
font-family: 'GmarketLight';
src: url('../../assets/fonts/GmarketSansTTFLight.ttf');
}
style.css
@import url('../../assets/fonts/font.css');
body {
background-color: #f7f7f7;
margin: 0;
}
.home_header {
margin-top: 2rem;
display: flex;
flex-direction: row;
align-items: center;
}
...
이렇게 import 해와서 사용하면 된다고 한다.
<div class="home_navlist">
<span>게시판</span>
<span>채팅</span>
</div>
...
.home_navlist {
width: 15vw;
display: flex;
flex-direction: row;
justify-content: space-around;
margin-left: 1rem;
}
.home_navlist > span {
font-family: 'GmarketLight';
font-size: 1.1rem;
color: #c1c1c1;
font-weight: 550;
}