[css] 24.css_기초/ 25.list-style

미아·2022년 8월 2일

CSS

목록 보기
1/2
  • css: Cascading(폭포식) Style Sheet
    * 상위 요소는 건드릴 수 없다.

    • 스타일 정보는 웹 브라우저에 렌더링 되기 전에 정해져 있어야 하므로 모든 css정보는 head 안에 명시!
  • 스타일 시트 종류
    내부 스타일 시트 : 해당문서(html)의 head안에 style 태그 영역 안에 정의
    외부 스타일 시트(多사용) : 해당 문서에 외부 css파일 연결

    <link rel="stylesheet" href="css 경로">
    
     * 외부 파일에서는 style 태그 안씀
     
  • 선택자
    선택자{
    속성 : 속성값;
    속성 : 속성값;
    }

  • 선택자 우선순위 (id > class> tag)
    * 우선순위가 다른 경우 코드상 나중에 써진게 살아남는다.

    • 우선순위에는 포함 안되지만 0순위 처럼 사용
      (인라인 방식: 태그에 직접 style 속성으로 넣는것)
    • 우선순위 파괴 (!important)
    div {
              background-color: blue !important;
          }
      
  • list-style : ul, ol, li 적용 가능

1) list-style-type (그냥 list-style 이라고 써도 무방)
: ul, ol의 모양
(disc, circle, square, none...)
2) list-style-image: ul, ol 모양 대신 이미지로 대체
: list-style-image : url(경로);
3) list-style-position: 목록 들여쓰기
inside: li 영역 안쪽으로 점 이동
outside: li 영역 바깥쪽으로 점 이동

profile
새로운 것은 언제나 재밌어 🎶

0개의 댓글