1. CSS 선언 방식
1) 내장 방식
- <style></style> 태그 내용으로 스타일을 작성하는 방식
- 유지보수에 악영향
- 프로젝트를 번들(한데 묶어서 서버에 업로드)하는 과정에선 문제 없음
-> 개발하는 내용을 제품화 시킬때, 이렇게 컴퓨터가 자동으로 사용자가 파일로 분류한 내용들을 내장 방식으로 심는 경우 문제 안됨
2) 인라인 방식
- 요소의 style 속성에 직접 스타일을 작성하는 방식
- 우선순위에서 지나치게 우선돼서 문제 발생 가능
-> 유지보수에 악영향
3) 링크 방식(import보다 권고)
- <link /> 로 외부 css 문서를 연결하는 방식
- 병렬 방식 연결. 직렬처럼 순서대로 연결이 아니라, 한번에 가져와서 연결.
-> 해석이 빨리 끝나는 css가 먼저 연결
4) @import 방식
- @import url(""); 로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식
- 직렬 방식 연결
-> 결국 main.css가 연결되어야 다른 파일.css를 연결 가능
2. CSS 선택자
1) 기본 선택자
(1) 전체 선택자 *
- '*' 기호로 모든 요소를 선택
- 단독으로 쓰이는 일이 거의 없고, 특정 범윙서 전체를 사용할 때 쓰임
(2) 태그 선택자 ABC
- 태그 이름이 ABC인 요소 선택
(3) 클래스 선택자 .ABC
- html class 속성의 값이 ABC인 요소 선택
(4) 아이디 선택자 #ABC
- html id 속성의 값이 ABC인 요소 선택
2) 복합 선택자
(1) 일치 선택자 ABC.XYZ
- 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택
- 태그 선택자는 항상 앞에!
(2) 자식 선택자 ABC > XYZ
- 선택자 ABC의 자식 요소 XYZ 선택
(3) 하위(후손) 선택자 ABC .XYZ
- 선택자 ABC의 하위 요소 XYZ 선택
- 자식 선택자보다 많이 사용
- '띄어쓰기' 필수
(4) 인접 형제 선택자 ABC + XYZ
- 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택
- 일반 형제보다 많이 사용
(5) 일반 형제 선택자 ABC ~ XYZ
- 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택
3) 가상 클래스 선택자
active, focus : js에서 다루는 동작에 관련된 css 내용 처리 가능
(1) :hover
- 마우스 커서가 올라가 있는 동안 선택
- 많이 사용하는 가상 클래스 선택자
(2) :active
- 마우스를 클릭하고 있는 동안 선택
(3) :focus
- 포커스 되면 선택
- 포커스가 될 수 있는 요소는 HTML 대화형 콘텐츠가 해당됨.
-> INPUT, A, BUTTON, LABEL, SELECT 등 여러 요소가 있음. 그리고 HTML 대화형 콘텐츠 요소가 아니더라도, tabindex 속성을 사용한 요소도 focus가 될 수 있음
- 포커스가 가능하지 않은 요소에 적용하는 방법
-> tabindex 속성 추가(tab키로 focus 할 수 있는 순서를 지정하는 속성. -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않음)
(4) :first-child
- 형제 요소 중 첫째라면 선택
- fruits 클래스에 해당되는 내용 중 첫번째 div가 없기 때문에 답은 없음
(5) :last-child
- 형제 요소 중 막내라면 선택
(6) :nth-child()
- 형제 요소 중 n번째라면 선택
- n은 0부터 시작
- n, n+1, 2n 등 사용 가능
(7) :not()
- 특정 선택자가 아닌 요소 선택
4) 가상 요소 선택자
(1) ::before
- 특정 요소 내부 앞에 내용을 삽입
- 인라인 요소로 css 내용도 추가 가능
-> 인라인은 width, height 적용이 안되기 때문에 블럭 요소로 전환하는 display : block; 속성을 사용해야함
(2) ::after
- 특정 요소 내부 뒤에 내용을 삽입
- 인라인 요소로 css 내용도 추가 가능
-> 인라인은 width, height 적용이 안되기 때문에 블럭 요소로 전환하는 display : block; 속성을 사용해야함
(3) [ATTR]
- 특정 속성을 포함한 요소 선택
3. CSS 상속
- font-style, font-weight, font-size, font-family, line-height, color, text-align 등 글자/문자 관련 속성들
- height 속성은 글자가 아니기 때문에 기본적으로 상속되는 속성이 아님.
-> height: inherit으로 부모 요소로 부터 상속받아서 사용하게 강제 상속 설정
4. 명시도(선택자 우선 순위)
- 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 css 속성을 우선으로 적용할지 결정하는 방법
- 명시도 점수가 동일하면 가장 마지막에 해석된 선언이 우선으로 적용
- 부정 선택자 not은 가장 클래스 선택자이긴 하지만 계산 안함
- 기본 선택자에서 * > 태그 > 클래스 > id 순서로 점수가 높음
- !important; 사용은 지양
'HTML, CSS' 카테고리의 다른 글
| [CSS] Sprite Image, Animation (1) | 2024.01.11 |
|---|---|
| [HTML] 라이브러리 및 속성 (0) | 2024.01.11 |
| [CSS] 속성 2 (0) | 2024.01.11 |
| [CSS] 속성 1 (0) | 2023.12.28 |
| [HTML/CSS] reset.css, 블록/인라인 요소, 태그(emmet, doctype, meta) (1) | 2023.12.27 |
1. CSS 선언 방식
1) 내장 방식
- <style></style> 태그 내용으로 스타일을 작성하는 방식
- 유지보수에 악영향
- 프로젝트를 번들(한데 묶어서 서버에 업로드)하는 과정에선 문제 없음
-> 개발하는 내용을 제품화 시킬때, 이렇게 컴퓨터가 자동으로 사용자가 파일로 분류한 내용들을 내장 방식으로 심는 경우 문제 안됨
2) 인라인 방식
- 요소의 style 속성에 직접 스타일을 작성하는 방식
- 우선순위에서 지나치게 우선돼서 문제 발생 가능
-> 유지보수에 악영향
3) 링크 방식(import보다 권고)
- <link /> 로 외부 css 문서를 연결하는 방식
- 병렬 방식 연결. 직렬처럼 순서대로 연결이 아니라, 한번에 가져와서 연결.
-> 해석이 빨리 끝나는 css가 먼저 연결
4) @import 방식
- @import url(""); 로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식
- 직렬 방식 연결
-> 결국 main.css가 연결되어야 다른 파일.css를 연결 가능
2. CSS 선택자
1) 기본 선택자
(1) 전체 선택자 *
- '*' 기호로 모든 요소를 선택
- 단독으로 쓰이는 일이 거의 없고, 특정 범윙서 전체를 사용할 때 쓰임
(2) 태그 선택자 ABC
- 태그 이름이 ABC인 요소 선택
(3) 클래스 선택자 .ABC
- html class 속성의 값이 ABC인 요소 선택
(4) 아이디 선택자 #ABC
- html id 속성의 값이 ABC인 요소 선택
2) 복합 선택자
(1) 일치 선택자 ABC.XYZ
- 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택
- 태그 선택자는 항상 앞에!
(2) 자식 선택자 ABC > XYZ
- 선택자 ABC의 자식 요소 XYZ 선택
(3) 하위(후손) 선택자 ABC .XYZ
- 선택자 ABC의 하위 요소 XYZ 선택
- 자식 선택자보다 많이 사용
- '띄어쓰기' 필수
(4) 인접 형제 선택자 ABC + XYZ
- 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택
- 일반 형제보다 많이 사용
(5) 일반 형제 선택자 ABC ~ XYZ
- 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택
3) 가상 클래스 선택자
active, focus : js에서 다루는 동작에 관련된 css 내용 처리 가능
(1) :hover
- 마우스 커서가 올라가 있는 동안 선택
- 많이 사용하는 가상 클래스 선택자
(2) :active
- 마우스를 클릭하고 있는 동안 선택
(3) :focus
- 포커스 되면 선택
- 포커스가 될 수 있는 요소는 HTML 대화형 콘텐츠가 해당됨.
-> INPUT, A, BUTTON, LABEL, SELECT 등 여러 요소가 있음. 그리고 HTML 대화형 콘텐츠 요소가 아니더라도, tabindex 속성을 사용한 요소도 focus가 될 수 있음
- 포커스가 가능하지 않은 요소에 적용하는 방법
-> tabindex 속성 추가(tab키로 focus 할 수 있는 순서를 지정하는 속성. -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않음)
(4) :first-child
- 형제 요소 중 첫째라면 선택
- fruits 클래스에 해당되는 내용 중 첫번째 div가 없기 때문에 답은 없음
(5) :last-child
- 형제 요소 중 막내라면 선택
(6) :nth-child()
- 형제 요소 중 n번째라면 선택
- n은 0부터 시작
- n, n+1, 2n 등 사용 가능
(7) :not()
- 특정 선택자가 아닌 요소 선택
4) 가상 요소 선택자
(1) ::before
- 특정 요소 내부 앞에 내용을 삽입
- 인라인 요소로 css 내용도 추가 가능
-> 인라인은 width, height 적용이 안되기 때문에 블럭 요소로 전환하는 display : block; 속성을 사용해야함
(2) ::after
- 특정 요소 내부 뒤에 내용을 삽입
- 인라인 요소로 css 내용도 추가 가능
-> 인라인은 width, height 적용이 안되기 때문에 블럭 요소로 전환하는 display : block; 속성을 사용해야함
(3) [ATTR]
- 특정 속성을 포함한 요소 선택
3. CSS 상속
- font-style, font-weight, font-size, font-family, line-height, color, text-align 등 글자/문자 관련 속성들
- height 속성은 글자가 아니기 때문에 기본적으로 상속되는 속성이 아님.
-> height: inherit으로 부모 요소로 부터 상속받아서 사용하게 강제 상속 설정
4. 명시도(선택자 우선 순위)
- 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 css 속성을 우선으로 적용할지 결정하는 방법
- 명시도 점수가 동일하면 가장 마지막에 해석된 선언이 우선으로 적용
- 부정 선택자 not은 가장 클래스 선택자이긴 하지만 계산 안함
- 기본 선택자에서 * > 태그 > 클래스 > id 순서로 점수가 높음
- !important; 사용은 지양
'HTML, CSS' 카테고리의 다른 글
| [CSS] Sprite Image, Animation (1) | 2024.01.11 |
|---|---|
| [HTML] 라이브러리 및 속성 (0) | 2024.01.11 |
| [CSS] 속성 2 (0) | 2024.01.11 |
| [CSS] 속성 1 (0) | 2023.12.28 |
| [HTML/CSS] reset.css, 블록/인라인 요소, 태그(emmet, doctype, meta) (1) | 2023.12.27 |
