ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [100DaysOfCode] 06강
    Front-end/100DaysOfCode 2022. 7. 19. 12:47

    리스트 만들기

    순서 목록:    ol
    비순서 목록: ul
    리스트        : li

     

     

     

     

     

     

     

     

     

    순서 목록 ol

    -> 리스트에 번호가 매겨진다

     

    비순서 목록 ul

    -> 글머리 기호가 매겨진다

     

    => 이러한 요소들은 css로 쉽게 바꿀 수 있기 때문에 태그의 의미를 이해하는 것이 중요하다!

     


    리스트 스타일

    Q. css로 ol, li에 각각 똑같은 속성에 다른 속성값을 부여하면 어떻게 될까?

    A. 속성값은 부모-자식 관계에서 자식이 우선한다. (오버라이드)

    li의 스타일이 적용된다
    li의 마지막 속성값인 list-style: none;이 적용된다
    개발자 모드에서 none 외에 다른 속성값들은 지워진 것을 확인할 수 있다


    상속 관계

    상속(Inheritance) CSS의 계단식 상속 로직
    (Cascading Style Sheets)
    우선순위(Specificity)
    (Selected) container rules apply to 
    descedants
    Multiple rules can be applied to the
    same element
    More specific selector's rule wins over less specific selector
    컨테이너가 있을 때, 이 컨테이너에 중첩된 요소는 특정 속성을 상속받는다 - 하나의 요소에 여러 규칙을 적용할 수 있다

    - 각기 시작점이 다른 여러 규칙을 하나의 요소에 적용할 수 있다(ex. body에서 상속받은 속성, 요소에 바로 적용한 속성이 같이 적용)

    - 여러 개의 규칙이 중첩된 경우 가장 최근에 적용된 규칙이 우선순위를 지닌다
    - 더욱 구체적인 선택자에 적용된 규칙이 덜 구체적인 선택자보다 우선한다

     


    'Front-end > 100DaysOfCode' 카테고리의 다른 글

    [100DaysOfCode] 08강  (0) 2022.07.22
    [100DaysOfCode] 07강  (0) 2022.07.20
    [100DaysOfCode] 05강  (0) 2022.07.19
    [100DaysOfCode] 04강  (0) 2022.07.16
    [100DaysOfCode] 01 - 03강  (0) 2022.07.16
Designed by Tistory.