Udemy Section2 (4일차) - CSS, 글꼴, Void

 

1. a <-스타일 지정 가능함

 

      a {

        color: rgb(167, 1, 78);

        text-decoration: none;

      }

      a:hover {

     

       text-decoration: underline;

      }

 

    ->hover = 마우스를 가져다 댔을때

 

2. 외부파일에 css코드 작성하기

    .css로 끝나는 파일을 신규로 추가하고 

     <link> 태그를 추가함  

 

    <link href="style.css" rel="stylesheet">

       ㄴ rel은 링크의 유형을 정의

 

4. Void 요소 구문  

-> void 요소는 closing tag가 없는 element를 말함! 

     <link href="style.css" rel="stylesheet" />

 

 

5. 개발자 도구의 "Network" 탭 유용함!

 

   -> 사양이 느린경우의 test 가능

   -> 요청과 응답 확할수 있음 

 

6. ID 선택자로 단일 요소 선택  - 고유 id를 만듬  / 스타일시트에는 #로 작성

    <p id="todays-challenge">

 

  #todays-challenge {

    color: rgb(170, 9, 83);

}

 

7. css에서는 크기나 치수를 표현할수있는 다양한 단위가 있음

 

 

기기별픽셀 -> 고해상도에서 더 작게보일거고 저해상도에서는 크게 보일것임 

                          ㄴ장치별 픽셀 즉, 브라우저가 대상의 크기가 같도록 자동으로 조정함!

                              픽셀은 근데 화면 너비 같은것에는 영향을 받지 않음

 

 

 

8. 글꼴 지정하는 방법 

 

- 기본으로 지원되는 글꼴이 있지만 외부에서 가지고 올수도 있다 ! 그것은 구글폰트 :)

https://fonts.google.com/

Google Fonts

 

head 영역에 붙여주고 css에서 작은따옴표로' ' 지정

h1 {

  font-family: 'Oswald';

  text-align: center;

  color: rgb(97, 91, 91);

}

 

 

폴백폰트를 설정해두면 ! 자동으로 설정되는 브라우저의 기본 글꼴 대신 저장됨 (폴백폰트 꼭 설정해주기!)

만약에  구글폰트를 읽어오지 못한경우나 오프라인상태등의 이유로, 브라우저는 좌측에서 우측으로 읽음 

 

h1 {

  font-family: 'Oswald', san-serif;

  text-align: center;

  color: rgb(97, 91, 91);

}

 

-> 사용할 글꼴만 추가하자