CSS

CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소의 style을 정의하여 화면등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다.
👉 HTML이 사람이였으면 CSS는 머리카락, 옷, 악세사리 등 사람을 꾸며주는 언어이다.

선택자

CSS는 HTML요소의 style을 정의하는데 사용된다. 그러면 어떻게 각 요소들을 선택해서 꾸며주는가?

1. 태그명을 선택
2. 각 요소에 class명을 할당하여 접근
3. 각 요소에 id를 할당하여 접근
4. 어트리뷰트 선택
5. 인라인 스타일
6. Embedding 스타일
7. link 스타일

1. 태크명 선택

1번의 경우는 너무 광범위하게 선택되어 원하지 않는 태그도 스타일링이 적용될 수 있어서 사용 ❌

2. class명 선택

각 요소들은 class속성을 갖을 수 있는데 이때 class명은 중복이 가능하다.
Ex) HTML문서를 학교 👉 class는 전공 👉 id는 학번이라고 생각하자.
이때 class는 .class로 접근할 수 있다.

3. id 선택

id는 #id로 접근하도록 한다

4. 어트리뷰트 선택

해당 요소의 속성값으로 선택하고 싶을 때 사용한다

a[href] { color: red; } // href속성을 갖는 모든 a
a[target="_blank"] { color: red; } // target="_blank"인 모든 a
h1[title~="first"] { color: red; } // title값에 first를 단어로 포함하는 모든 h1
h1[title*="first"] { color: red; } // title값에 first를 포함하는 모든 h1
p[lang|="en"] { color: red; } // lang값이 "en"과 일치하거나 "en"으로 시작하는 모든 p
a[href^="https://"] { color: red; } // href값이 "https://"로 시작하는 모든 a
a[href$=".html"] { color: red; } // href값이 ".html"로 끝나는 모든 a

속성을 갖고있거나, 명확한 속성을 찾거나, 단어로만 포함되거나/포함만되면 되거나, 시작하거나, 끝나거나
정규표현식처럼 사용이 가능하다

5. 인라인 스타일

html문서 작성시 + 태그를 작성시 한번에 작성한다.
매우 간단한 웹페이지의 경우는 문제될 것이 없겠지만, 재사용성 + 파일의 구분을 위해 사용 ❌

6. Embedding 스타일

html문서 작성시 head태그 안에 <style>태그로 감싸 스타일링을 선언하는것
이또한 동일한 html문서가 있을 수 있기 때문에 사용 ❌

7. link 스타일

<link rel="stylesheet" href="..." 방식으로 외부에 있는 CSS파일을 로드하는 방식
가장 많이 사용되고 유지보수에도 좋다고 한다.

복합 선택자

1. 후손/손자 선택자

후손 셀렉터라고도 불리며 자신보다 밑에 있는 모든 선택하고자 할 때 사용된다. 일반적으로 명확하게 표시하기 위해 사용되서 가독성이 좋을것 같다. +컴퓨터 입장에서 모든 요소를 탐색하지 않아도 된다는 장점이 있다

.school .major .id {...} // school클래스의 major클래스 아래 있는 모든 id클래스들을 선택

2. 자식 선택자

바로 밑의 정확한 깊이(Depth) 요소를 선택할 때 사용된다.

div > p { ... } // div태그 바로 밑에 있는 p태그들

3. 인접 형제 선택자

같은 레벨에 위치하며 바로 뒤에 있는 요소만을 선택할 수 있다.

p + ul { ... } // p태그 바로 뒤에 있는 ul요소를 선택

4. 일반 형제 선택자

같은 레벨에 위치하며 자신 뒤 모든 요소들을 선택

p ~ ul { ... } // p뒤에 있는 모든 ul태그들을 선택

가상 클래스 선택자

기본적으로 사용 가능한 기능들을 선택하는 선택자

• 마우스를 올리거나
• a태그 방문 여부
• 포커스가 들어옴
• 셀렉터 체크 여부
• input요소가 사용 불가능할 경우

콜론(:)을 사용해서 가상 클래스를 선택한다

a:hover { ... } // a태그에 마우스가 올려지면
a:visited { ... } // a태그가 방문되었을 경우 등등..

가상요소 선택자

2개 콜론(::)을 사용해서 가상 클래스를 선택한다

• 요소 컨텐츠의 앞부분(before) 또는 마지막(after) 부분
• 첫글자, 첫줄

보통 float요소의 clear를 선언하기위해 사용하거나, dimmed속성을 줄 때 썻었던것 같다.
가상요소이기 때문에 content: '' 가 필수이다

h1::after { 
	content: '';
    color: red;
}

Reset CSS

모든 브라우저에는 기본적으로 적용되어있는 스타일링이 있다.
가령 p, a, li 등등 같은 요소에는 불필요한 마진과 패딩이 들어가 있어 내가 원하지 않는 디자인적 요소가 들어있을 경우가 있다.
그런 부분들을 사전에 미리 Reset(초기화) 시켜주는 CSS 선언이다. 보통 CSS문서 최상단에 작성해서 시작한다.
직접 작성해도 좋지만 남들이 작성해놓은걸 사용해도 좋을것같다.