2021-04-22 (10일차) id(#), class(.), border-radius, inherit상속

46강~52강

 

 

- id (#)

 식별자,

 한 엘리먼트가 똑같은 id를 가지고 있으면 문법 오류

 무조건 한 개 밖에 못 고름

 

- class (.)

  id의 단점을 보완

  똑같은 class를 가진 엘리먼트 존재함

 

- class보다 id가 더 강함

 

붙여쓰기 : 붙여쓴 것 다 해당되는 것

→ .a.b : id="a b"포함되는 것

띄어쓰기 : 후손인 것

→ .a .b : id="a"의 후손 + 후손 중에서 id="b"조건을 만족하는 것

 

 

ex1) id가 a인 엘리먼트 선택할 때

     : <태그 id="a"> 내용 </태그>

     → #a {속성값}

 

ex2) class가 a와 b를 동시에 가지고 있는 엘리먼트 선택할 때

     : <태그 class="a b">내용</태그>

     → .a.b{속성값}

 

ex3) 태그가 'tag'이면서, 동시에 class가 a와 b를 동시에 가지고 있는 엘리먼트 선택할 때

     : <tag class="a b">내용</tag>

     → tag.a.b{속성값}

 

 

-border-radius

 : 모서리를 둥글게 만듦

  - 20px= 모서리가 둥근 사각형

  - 50px=원형

 

- cursor : pointer

  : 마우스를 올렸을 때 커서를 포인터로 바꿔줌

 

#문제. 슬라이더의 페이지 메뉴 구현, border-radius

 

 

 

-inherit (상속)

 : 개성이 없고, 부모 속성을 따라감

   → 따라서 부모속성을 따라가지 않는 태그의 속성에 "속성:inherit;"을 넣어주면 그 속성은 부모를 따라감.

 

<CSS 속성>

- 기본값이 inherit인 속성
  - color
  - font-size
  - text-align
  - text-decoration
  - display
  - letter-spacing
  - font-weight

- 기본값이 inherit이 아닌속성

  - width
  - height
  - background-color
  - margin
  - padding
  - border-radius