/* 1. Noto Sans KR 폰트 차례대로 지정해주기 */ /* 1-0) Noto Sans KR ExtraLight 지정 */ @font-face { font-family: 'Noto Sans KR';/* 폰트 페밀리니까 Noto Sans KR 띄어쓰기 유지 */ font-weight: 200; font-style: normal; src: url('/assets/fonts/NotoSansKR-ExtraLight.ttf') format('truetype');/* 파일명은 -로 띄어쓰기 제거 */ } /* 1-1) Noto Sans KR light 지정 */ @font-face { font-family: 'Noto Sans KR';/* 폰트 페밀리니까 Noto Sans KR 띄어쓰기 유지 */ font-weight: 300; font-style: normal; src: url('/assets/fonts/NotoSansKR-Light.ttf') format('truetype');/* 파일명은 -로 띄어쓰기 제거 */ } /* 1-2) Noto Sans KR Regular 지정 */ @font-face { font-family: 'Noto Sans KR';/* 폰트 페밀리니까 Noto Sans KR 띄어쓰기 유지 */ font-weight: 400; font-style: normal; src: url('/assets/fonts/NotoSansKR-Regular.ttf') format('truetype');/* .ttf는 truetype, woff 안 됨 */ } /* 1-3) Noto Sans KR SemiBold 지정 */ @font-face { font-family: 'Noto Sans KR'; font-weight: 600; font-style: normal; src: url('/assets/fonts/NotoSansKR-SemiBold.ttf') format('truetype'); } /* 1-4) Noto Sans KR Variable 지정 */ @font-face { font-family: 'Noto Sans KR'; src: url('/assets/fonts/NotoSansKR-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; /* 가변 폰트 사용 시 사파리에서도 200 적용될 수 있음. 사파리는 일부 폰트에서 너무 얇은 글꼴을 강제로 보정해서 대체하는 경우 있음. */ } /* 2. 기본 스타일 - light 지정; 특별히 다른 폰트를 지정하지 않으면 모든 html에 영향 */ * { font-family: 'Noto Sans KR', sans-serif; color: #000; font-weight: 200;/* 기본 스타일 200으로 설정 */ background-color: #fff; } /* 3. 전체 페이지 스타일 - 태그 안에 있는 모든 텍스트에 영향을 미침. */ body { font-family: 'Noto Sans KR', sans-serif; background: white; text-align: center; font-weight: 200;/* 기본 스타일 200으로 설정 */ color: black; } /* 4. "JIEUN KIM" 텍스트 (중앙 상단) */ .main-title { margin-top: 80px; /* 상단 여백 */ font-size: 40px; font-style: normal; font-weight: 200;/* 타이틀 폰트 크기 200으로 설정 */ } /* 6. 링크 스타일 */ .menu a { text-decoration: none; color: black; } /* 7. 링크에 마우스를 올렸을 때 */ .menu a:hover { text-decoration: underline; } /* 본문이 사이드바에 가려지는 문제 해결 */ .content { max-width: 900px; margin: 120px auto 50px; padding: 0 30px; margin-left: 300px; /* 사이드바 크기만큼 왼쪽 여백 추가 */ } /* "Side Project"가 다른 메뉴와 같은 스타일이 되도록 수정 */ .sidebar .side-project { font-weight: 200; /* 다른 메뉴와 동일한 스타일 적용 */ color: black; /* 글자 색 동일하게 */ } /* 햄버거 버튼 스타일 */ .menu-button { position: fixed; top: 15px; right: 20px; font-size: 24px; cursor: pointer; z-index: 1300; } /* 모바일 햄버거 메뉴 */ .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: none; /* 기본적으로 숨김 */ opacity: 0; transition: opacity 0.3s ease; z-index: 1100; } .menu-overlay.active { display: block; opacity: 1; } .menu { position: fixed; top: 0; right: -100%; width: 260%; height: 100vh; background: white; padding: 50px 20px; text-align: left; display: flex; flex-direction: column; font-size: 18px; font-style: normal; font-weight: 200;/* 메뉴 폰트 크기 200으로 설정 */ line-height: 2; /* 줄 간격 */ transition: right 0.3s ease; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); z-index: 1200; } justify-content: flex-start; /* 위쪽 정렬 */ align-items: center; z-index: 1200; } .menu.active { right: 0; } /* 닫기 버튼 스타일 */ .menu-close { position: absolute; top: 15px; right: 15px; font-size: 22px; cursor: pointer; color: black; } /* 모바일 스타일 */ @media (max-width: 768px) { .sidebar { display: none; } } /* 데스크탑에서 햄버거 버튼 숨기기 */ @media (min-width: 769px) { .menu-button { display: none; } .menu { display: none; } }