코딩기록

리액트)1주차 학습 - html, CSS 문법 본문

프론트/리액트

리액트)1주차 학습 - html, CSS 문법

뽀짝코딩 2024. 6. 4. 19:07
728x90

 

 

html에서 아이콘 사용하는 2가지 방법 

1. i 태그

2. svg

 

1-1. 링크삽입

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
  integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />

1-2. https://fontawesome.com/icons

아이콘 홈피에서 아이콘 < i > 테크 복사
 예시) 돋보기 아이콘 <i class="fa-sharp fa-solid fa-magnifying-glass"></i>

 

 

2-1.  svg

<body> 안에 svg 태그를 쓴다 

<svg width="가로길이" height="세로길이">
      ...
</svg>

 

 head 태그 구성요소 5개

1. css 파일들 <link>

2. style

css를 작성한다.

3. title

여기에 적히면  아래 그림처럼 나온다. 

4. meta

검색시 나오는 태그.

5. favicon : ico

파비콘은  웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 아래와 같은 16x16 픽셀의 작은 대표 이미지이다. 직접 만들 수도 있다.

 

✅favicon 설정방법

<head> 태그안  ⇒ <link> 태그에 작성

<link rel="icon" type="image/x-icon" href="./assets/favicon/favicon.ico">

href="~~여기에 내프로젝트 파일경로나 https://주소를 적는다~~"

파비콘 생성 사이트 : https://realfavicongenerator.net/

 

 

가상클래스와" : " 가상요소" :: "

  • 가상클래스 " :  "
    • 태그:nth-child(1) - 첫번째 자식
    • #이름/.이름:nth-of-type(1) - 앞에서 1번째 자식
    • #이름/.이름:nth-last-of-type(1) - 뒤에서 1번째 자식
    • a태그 가상선택자 2개
    • a:link - 클릭 전 상태
    • a:visited - 클릭 후 상태
    • :not(.클래스이름) - .클래스이름이 아닌 태그만 스타일 적용

  •  가상요소 " :: "
    • .클래스::first-line - 첫 줄
    • .클래스::first-letter - 첫 글자

 

*<figure>

<figure> : <img>를 넣고 거기에 이미지태그 설명을 텍스트로 넣어 <figcaption>으로 감싼다.

<figure class="card">
  <img src="./img/seoul.png" alt="서울일러스트">
    <figcaption>
      <p>서울</p>
      <span>1km거리</span>
    </figcaption>
</figure>

 

 

 

*이미지 밑 공간 없애기

공간 없애기전 : <img>이미지와 그 밑 <figcation>사이에 공간이 약간 떠있다.

 

 

해결책 : css에 아래 코드를 추가한다.

display: block;

 

공간 없앤 후 :  <img>와 <figcation>이 딱 붙어있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형
저작자표시 비영리 변경금지

'프론트 > 리액트' 카테고리의 다른 글

리액트)2주차 학습 - 기본부터 끝까지 러닝메이트 HTML/CSS  (0) 2024.06.10
리액트)1주차 학습 - css 애니메이션  (0) 2024.06.08
리액트)스터디6- 웹퍼블리셔-css메모장 선택자, css로 화살표, 삼각형 화살표 만들기... /업뎃중  (0) 2024.05.16
VSCode 자주 쓰는 필수 플러그인, 확장 프로그램, 익스텐션  (0) 2024.05.10
리액트)스터디3- css 참고 및 사이트  (0) 2024.05.09
'프론트/리액트' Related Articles more
Comments