ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 웹2 3일차
    웹2 2024. 4. 17. 21:49

    -. vscode로 마켓걸리 상단바 짜기

    div->block-> 무슨 특징을 갖는지 확인하고 margin 사용

     

    왼/오른쪽 박스(.left-box) > 선택자

    네비바(nav) > 태그

     

    ** 코드를 수정하는 방법

    문제가 되는 html을 주석처리 해준 뒤 새로운 코드 입력 -> css를 수정하고 주석처리한 html을 풀어준다

     

    top-bar-section의 상속을 받기 때문에 container 선택자를 써야 한다.

     

    기본값이 row이기 때문에 flex를 사용해서 정렬을 해야한다. 

    container에서 상속받아야하기 때문에 flex는 container에 써야함

     


    아이콘 넣는법

     

    👌step.1

     

    구글에 폰트어썸 검색 후 돋보기 클릭

    아이콘 중 무료(free) 클릭 후 선택

    원하는 아이콘 가져와서 html에 넣기
    검색창에 cdnjs 검색 후 font 검색 후 링크 복사 후 link 태그에 넣기

     

     

    👌 step.2

    검색창에 cdnjs 검색 후 검색창에 font를 적어 라이브러리와 링크를 연결한다

    \cdnjs 는 라이브러리랑 링크를 연결해주는 사이트 정도로 이해하면 좋다

     

    link 태그를 이용해 삽입해주면 됨


    직접 구현한 마켓컬리 코드펜 보기

     

     

     

    '웹2' 카테고리의 다른 글

    웹2 5일차  (0) 2024.04.24
    웹2 수업페이지  (0) 2024.04.23
    웹2 4일차  (0) 2024.04.22
    웹2 2일차  (0) 2024.04.15
    웹2 1일차  (0) 2024.04.12
Designed by Tistory.