우선 이렇게 해놨을 때 선생님이 알려주신 라이브러리를 css를 붙여넣는다.
css에 저렇게 주고 html에 클래스 이름을 주면 색이 입혀진다.
이렇게 ul에 flex를 주면 display:inline-block; 속성처럼 줄 수 있다.
왜 flex만 줬는데 이렇게 일렬로 있게 된걸까?
왜냐면 flex의 기본값이 row기 때문입니다.
요렇게 짜잔
.top-bar > .menu-box-1 > ul {
display : flex;
}가장 중요한 것은 ul에 flex를 줬는데 이건 사실 ul에게는 아무런 영향을 끼치지 않는다.
사실 자식에게 영향이 가는것!
이건 꼭 기억해둬야 합니다.
폰트어썸에 icon에 들어가보면
다양한 아이콘을 사용할 수 있다. 근데 유료라는거! 근데 또 종류가 엄청 많아서 좋다!
cdn 주소는 어디서 가져오는걸까?
바로 cdnjs에서 가져오는 것! 하지만 버전이 있기 때문에 잘 확인하고 가져와야 합니다.
좀전에 말한 폰트어썸을 사용하고 싶다면 cdn주소를 함께 사용해야 합니다.
검색창에 font를 눌러서 확인해보면 이렇게 주소가 나온당
나는 로고에게만 크기를 줬는데 메뉴바가 다함께 커지는 상황이 발생한다.
부모의 높이를 따라가서 그런것.
플렉스를 줘서 영향을 주는 것은 자식까지다
inline 요소만 아니면 되는것.
참고하셔야 합니당.
nav.menu-box-1>ul.flex.height-100p>li*4>a.flex.ai-c.height-100p[href="#"]{1차 메뉴 아이템 $}
차라리 이걸 그냥 외우는것도 ^^...
여기에 웹 폰트 다양한 폰트를 사용할 수 있어요
roboto 폰트 많이 씁니다.
폰트를 사용하고 싶다면 우측 상단에 이걸 누르고
꺽쇠모양
그러면 요렇게 뜹니다. 위에 html과 css를 둘 다 갖다 써야됩니당
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
아니면 이렇게 임포트를 css상단에 넣은다음에
html > body {
font-family : "Roboto", serif
}이런식으로 넣어서 사용해도 좋다.
상식적으로 알아둬야 할 것은 영문 폰트는 용량이 적다.
하지만 한글폰트는 용량이 좀 있어요 ㅜㅜ 한글자를 누를 때 경우의 수가 많기 때문에...
한글 폰트 중에서는 noto sans를 추천드립니다.
깔끔하게 잘나옴
한글 폰트는 눈누를 추천한다.
무료 중에서 골라서 쓰면 됩니다. g마켓 산스 폰트 추천드려요~
이거 복사해서 css에 적용하면 됨
만약 폰트를 두개 이상 쓰고 싶다면?
이렇게 클래스로 만들고 필요할 때마다 클래스 부여해주면 됨.
그리고 요렇게도 사용이 가능합니다.
영어폰트를 우선순위로 두고 한글폰트를 두번째로 두면 됩니다.
