Frontend/CSS

CSS 기본 1

swoody 2024. 9. 1. 16:10
스타일 시트
종류 설명
브라우저 기본 스타일 웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일입니다.
인라인 스타일 style 속성을 사용해 필요한 요소에 스타일을 직접 지정합니다.
내부 스타일 시트 문서 앞부분에 문서에서 사용하는 스타일을 모아서 함께 정의하고 관리합니다.
외부 스타일 시트 뮨서에서 사용하는 스타일을 모아서 따로 파일로 지정한 후 연결해서 사용합니다.

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

스타일 우선순위

  1. 얼마나 중요한가?
  2. 1. 사용자 스타일 → 2. 제작자 스타일 → 3. 브라우저 기본 스타일

  3. 적용 범위는 어디까지인가?
  4. 1. !important → 2. 인라인 스타일 → 3. id 스타일 → 4. 클래스 스타일 → 5. 타입 스타일

  5. 소스 작성 순서는 어떠한가?
  6. 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씁니다.

'Frontend > CSS' 카테고리의 다른 글

CSS 기본 6  (1) 2024.09.07
CSS 기본 5  (0) 2024.09.06
CSS 기본 4  (0) 2024.09.05
CSS 기본 3  (0) 2024.09.03
CSS 기본 2  (3) 2024.09.02