1.메뉴 스타일링

HTML에서 한 작업

<link rel="stylesheet" href="css/default.css"/>
공백을 없애여 작업하기 편하게 함

<div class="local-nav-links">
링크연결

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap">
구글 폰트 불러오기

<link rel="stylesheet" href="css/main.css"/>
main css에 연결


css에서한 작업

overflow-x: hidden;
가로스크롤을 못하게 하여 안전하게

color: rgb(29, 29, 31);
색 설정

letter-spacing: -0.05em;
자간 설정

background: white;
배경색 설정

line-height: 1.6;
행간 설정

max-width: 1000px;
최대폭

margin: 0 auto;
센터 정열

display: flex;
justify-content: space-between;
flex를 이용하여 사이 균일하게 벌리기

.local-nav-links a:not(.product-name) {
margin-left: 2em;
}
괄호안에 있는 조건은 제외시킨다

color: rgb(29, 29, 31);
text-decoration: none;
링크의 컬러와 밑줄을 없앤다

.local-nav-links .product-name {
margin-right: auto;
font-size: 1.4rem;
font-weight: bold;
}
우선순위가 밀려 글씨가 안커지므로
local-nav links.을 붙여 구체적인 클래스를 설정해 주어 우선순위를 높여 준다