티스토리 뷰

개발 복습/CSS

[CSS] CSS 기초, CSS 선택자

병아리 꾸꾸 2024. 10. 15. 17:40

 

 

CSS란?

 

  • CSS란 HTML 등의 마크업 언어로 작성된 문서가 웹사이트에 표현되는 방법을 정해주는 언어이다.
  • 레이아웃, 폰트, 색상처리 등의 디자인 요소를 HTML과 완전히 분리시켜 구조화된 HTML을 만들기 위한 언어.
  • 이렇게 하면 디자인에 필요한 부분은 CSS가 전담하기 때문에 웹 퍼블리셔와 웹 프로그래머 간의 협업이 훨씬 용이해진다.
  • HTML문서에 CSS를 적용하는 방법은 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 3가지 종류가 있다.

 

 

 

3가지 스타일 시트

 

인라인 스타일 시트

  • 인라인 스타일시트는 요소에 직접 스타일을 하는 방식이며, 유지보수에 부담을 주므로 직접 사용을 권고하지 않는다.
  • 주로 Javascript로 간단한 스타일을 조작할 때 사용한다.
<body> 
   <p style="color: red; backgroud: orange;"> Hello~~ CSS!</p> 
</body>

 

 

 

내부 스타일 시트

  • 내부 CSS는 문서의 표현을 위한 명령들을 HTML문서 안에 <style>태그로 기재하여 HTML 내부에 함께 저장되는 형태이다.
  • html코드와 css코드가 분리되는 장점이 있으나 여러 페이지에 걸쳐 스타일을 적용할 수 없는 단점이 있다.
<html> 
<head> 
	 <style > -- 스타일 시작 
				 p { color: orange; } 
				 h1 { font-size: 24px; }
	 </style> -- 스타일 끝 
</head> 
<body> 
 <p> Hello~~ CSS!</p> 
</body> 
</html>

 

 

 

 

외부 스타일 시트

  • 외부 CSS는 문서의 표현을 위한 명령들을 따로 CSS파일 (확장자 .css)로 저장해두어 HTML문서에 파일명으로 연결해주는 형태이다.
<html> 
<head> 
 <link rel="stylesheet" href="css/style.css"> -- 스타일 
파일 연결 
</head> 
<body> 
 <p> Hello~~ CSS!</p> 
</body> 
</html>

 

 

 

 

 

 

 

 

CSS Selector (CSS 선택자)

-> CSS로 UI를 디자인할 때 “어디를 어떻게 꾸밀까?” 라는 질문에 “어디”에 해당하는 부분이다.

 

 

 

선택자의 종류

 

 

전체 선택자

-> 전체 선택자는 모든 태그를 지정할 때 사용하는 선택자.

 

 

 

 

태그 선택자

-> 태그 선택자는 태그 이름을 그대로 가져다 쓰는 선택자.

 

 

 

클래스 선택자

-> HTML 요소에 class로 붙인 이름을 가져다 쓰는 선택자이다. 도트( . )를 클래스 이름 앞에 붙여서 작성한다.

 

 

 

아이디 선택자

-> HTML 요소에 id로 붙인 이름을 가져다 쓰는 선택자이다. ‘#’ 기호를 붙여서 표기.

 

 

 

일치 선택자

-> 선택자 여러개를 동시에 만족하는 요소를 선택한다.

 

 

 

 

자식 선택자

-> 현재 요소 내의 바로 아래 자식 요소만을 가리키는 선택자이다.

 

 

 

 

 

후손 선택자

-> 후손 선택자는 바로 인접 자식이 아니어도 후손 요소 중에 어느 단계에 있기만 해도 선택한다.

 

 

 

 

그룹 선택자

-> 그룹 선택자는 여러 개의 선택자를 나열해서 선택한다.

 

 

 

 

인접 형제 선택자

-> 현재 요소 바로 뒤에 나오는 형제 요소 한개만을 선택한다.

 

 

 

 

일반 형제 선택자

-> 현재 요소 바로 뒤에 나오는 형제 요소 전체를 선택한다.

 

 

 

속성 선택자

-> 속성 선택자는 html태그의 속성을 사용하여 선택한다.

속성 선택자 특징

 

 

 

가상 클래스 선택자

 

 

-> 가상 클래스 선택자(콜론이 하나) : 요소의 특정 상태를 기반으로 요소를 선택.

-> 가상 요소 선택자 (콜론이 두개, ::before, ::after) : HTML의 작성 없이 가상의 요소를 특정 요소 앞, 뒤에 추가. (HTML 구조 내에서는 표현되지 않음)

 

 

 

 

 

 

상속과 우선순위

 

 

상속(inherit)

-> 상속이란 부모요소에 적용한 스타일이 후손요소들에게까지 영향을 주는 특성을 뜻한다. 하지만 모든 속성들이 상속되는 것이 아니다.

  • 상속이 적용되는 속성들 ↓
    1. font 관련 속성: font-size, font-weight, font-style, line-height, font-family, color
    2. text 관련 속성: text-align, text-indent, text-decoration, letter-spacing, opacity

 

 

 

우선순위

-> 우선순위란 HTML 요소에 동일한 속성이 적용될 경우 어떤 것을 우선으로 적용하는지에 대한 내용이다.

 

  • 우선순위 규칙 ↓
  1. 명시도 점수가 높은 선언이 우선
  • 명시도 점수
    • !important: 무한대 점
    • 인라인 스타일: 1000점
    • 아이디 선택자: 100점
    • 클래스 선택자: 10점
    • 태그 선택자: 1점
    • 전체 선택자: 0점
    • :hover, :active, :first-child와 같은 가상 클래스는 클래스 선택자로 취 급하여 10점이 부여됨
    • ::before, ::after와 같은 가상요소는 태그선택자로 취급되어 1점이 부 여됨
    • :not()은 점수가 0점이 부여됩니다.
  1. 점수가 같은 경우 가장 마지막에 해석되는 선언이 우선
  2. 명시도 점수는 상속보다 우선
  3. !important가 적용된 선언방식이 다른것보다 우선

 

 

 

 

 

 

 

 

 

'개발 복습 > CSS' 카테고리의 다른 글

[CSS] 애니매이션, 반응형 디자인 기초, Flex box  (1) 2024.10.16
[CSS] 박스 띄우기, 전환 / 변환  (2) 2024.10.16
[CSS] 글꼴, 문자, 배경  (0) 2024.10.16
[CSS] Box 속성  (0) 2024.10.16