CSS 1일차

CSS는 마크업언어 HTML의 표시되는 방법을 기술한 언어임

CSS Selector(선택자) : 현재 html 문서 내에서 특정한 요소를 선택

1. 태그 선택자 : 같은 태그를 선택하는 선택자
   - ex) pre {
          font-size : 50px;
          }

2. id 선택자 : id속성값이 일치하는 요소 선택
   - ex) #li-1 {
          background-color : red;
          }

3. class 선택자 : class속성값이 일치하는 요소 선택
   - ex) .test-1 {
          background-color : black;
          }

4. 기본 속성 선택자 : 태그에 작성된 특정 속성을 선택
   - 선택자는 생략할 수 있다.
   - "속성값" 양쪽의 쌍따옴표("")는 홑따옴표('')로 변경할 수 있다.
   - ex) div[name="name-1"] {
          background-color : red
          }

5. 자식 선택자 : 지정된 요소 바로 하위에 존재하는 요소를 선택
   - 선택자1 : 부모요소, 선택자2 : 자식요소
   - ex) #parent-ul > li {
          background-color : red
          }

6. 후손(자손) 선택자 : 지정된 요소의 모든 하위에 존재하는 요소를 선택
   - 선택자1 : 부모(조상) 요소 선택자
   - 선택자2 : 후손 요소 선택자
   - ex) #test-div p {
          background-color : yellowgreen
          }

7. 반응 선택자 : 사용자의 움직임에 따라 반응하여 스타일이 달라짐
   - 요소를 마우스로 클릭하고 있는 경우(:active)
   - 요소에 마우스가 올라가있는 경우(:hover)
   - ex) #active-test:active {
          background-color: yellow;
         }
         #hover-test:hover {
         background-color: pink;
         width: 230px;
         height: 230px;
         }

8. 상태 선택자 : 입력 양식의 상태에 따라 선택되는 선택자
   - fucus -> 요소에 초점이 맞춰졌을 때
   - checked -> 요소가 체크 되었을 때(checkbox, radio)
   - :enabled / :disabled -> 요소가 사용 가능/불가능한 상태일 때
   - ex) #focus-test:focus {
          background-color: yellow;
         }
         input[name="fruits"]:checked {
         background-color: pink;
         width: 30px;
         height: 30px;
         background-color: red;
         }
         #test-div2 > input:enabled {
         background-color: lightgreen;
         }
         #test-div2 > input:disabled {
         background-color:lightcoral;
         }

9. 동위 선택자 : 동위 관계에서 다음에 위차한 요소를 선택하는 선택자
   - A선택자 + B선택자 : A 바로 뒤(다음)에 있는 B요소 하나를 선택
   - A선택자 ~ B선택자 : A 뒤에 있는 모든 B요소를 선택
   - ex) #div1 + div {
          background-color: olive;
         }
         #div3 ~ div {
         background-color: blue;
         }

10. 눈누에서 글자체 가져와서 적용하기

/*
    @는 CSS에서 사용하는 규칙을 나타내는 기호
    -> @font-face : 사용자 정의 폰트를 내 웹사이트에서 사용할 수 있게 정의함
*/
@font-face {
    font-family: 'BookkMyungjo-Bd';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

* {
    /* 글꼴 모양 */
    font-family: 'BookkMyungjo-Bd';

    /* 글꼴 크기 */
    font-size: 20px;
}