body { margin: 0; font-family: "Arial", sans-serif; } .navbar { display: flex; justify-content: space-between; align-items: center; background-color: #51e6ef; /* 상단 바 색상 설정 */ padding: 20px 20px; } .logo a { text-decoration: none; font-size: 24px; color: #333333; } .logo a img { width: 20vw; } @media (min-width: 1500px) { .logo a img{ width: 300px; /* 화면 너비가 800px 이상일 때는 너비를 400px로 고정 */ } } .menu ul { display: flex; margin: 30px; padding: 0px; list-style: none; } .menu ul li { padding: 0 10px; } .menu ul li a { text-decoration: none; color: white; font-size: 1.3vw; position: relative; /* 줄을 추가하기 위한 설정 */ } @media screen and (min-width: 1500px) { .menu ul li a { font-size: 19.5px; } } .menu ul li a.active { font-weight: bold; /* 굵은 글씨로 설정 */ } .menu ul li a.active:after { content: ""; display: block; margin: auto; height: 3px; /* 줄의 두께 */ width: 100%; /* 줄의 너비 */ background-color: white; /* 줄의 색상 */ position: absolute; bottom: -10px; /* 줄의 위치 조정 */ left: 0; } .menu-language-container { display: flex; justify-content: flex-end; align-items: center; width: 50%; } .language-selector { padding-left: 20px; /* 메뉴와 언어 선택자 사이의 간격을 조정 */ } .language-selector a { text-decoration: none; color: #333333; padding: 0 5px; font-size: 14px; }