스타일 및 기본선택자

왱구·2023년 12월 15일

CSS

목록 보기
3/5
post-thumbnail

1. 스타일시트

종류설명
브라우저 기본 스타일웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일
인라인 스타일style속성을 사용해 필요한 요소에 스타일을 직접 지정
내부 스타일 시트문서 앞부분에 문서에서 사용하는 스타일을 모아서 함깨 정의하고 관리
외부 스타일 시트문서에서 사용하는 스타일을 모아서 따로 파일로 저장한 후 연결해서 사용

2. CSS 기본 선택자

종류설명작성예시
전체 선택자문서의 모든 요소에 스타일을 적용* { margin:0; }
타입 선택자특정 태그를 사용한 모든 요소에서 스타일을 적용p { font-style: italic; }
클래스 선택자특정 부분만 선택해서 문서 안에 여러 번 적용. 마침표(.)를 붙여 사용.bg { background-color:#ddd; }
id 선택자특정 부분만 선택해서 문서 안에서 한 번만 적용. #을 붙여 사용#container { width: 500px; }
그룹 선택자여러 요소에 같은 스타일을 적용할 때 사용h1, h2 { text-align: center;}

3. 스타일 우선순위

1) 얼마나 중요한가?

①사용자 스타일 -> ②제작자 스타일 -> ③브라우저 기본 스타일

2) 적용 범위는 어디까지인가?

①!important -> ②인라인 스타일 -> ③id스타일 -> ④클래스 스타일 -> ⑤타입 스타일

3) 소스 작성 순서는 어떠한가?

나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씀

profile
늦깎이 애아빠 개발지망생

0개의 댓글