ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 웹2 6일차
    웹2 2024. 4. 26. 20:30

    flex-item은 text-align을 사용할 수 없기 때문에 justify-content: center; 코드를 작성하여 a태그를 이동시켰다.


    -. 아이콘 정렬

    [right-box 오른쪽 정렬하기]

     

    -. 아이콘 넣기

    돋보기 아이콘은 다른 레이어에서 사용 가능성이 있기 때문에 div에 감싸주기

     

    -. svg코드 가져오기

    1. f12를 눌러 코드를 선택한다

    2. 우클릭->경로 or 컨트롤+U를 이용하여 svg코드를 확인한다

    3. 코드를 복사한 후 svg폴더를 생성하여 붙여넣는다.(공백 및 필요없는 부분은 삭제)

    4. html과 연결해준다

     

    ---. vscode 폴더 정리

    코드는 코드대로 새 파일(띄어쓰기, 한글 폴더 X) 생성 후 넣어준다.

    연결 시 "파일명/svg파일이름" 으로 연결해야 연결됨

     

    ▲ 이미지 태그에 기본적으로 있는 여백 없애기

    ㄴ 아이콘 태그에 display: flex;를 사용하여 flex-item 으로 바꿔주는 것이 현재 상황으로는 적합하다.

     

    -. 아이콘 사이 여백 설정하기

    (* gap(쉬운) margin(어려운)  방법이 있음 )

    * gap

     

    *margin

    .icon에 margin을 10px 줌...----> 왜?..............

     

    삼성디자인 구현 코드펜 바로가기

     

     

    G마켓 코드펜 입력해보기

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

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