-
CSS 입문 (1) 기본 문법 ~ 선택자Frontend/CSS 2023. 7. 14. 00:03
CSS 이해하기
1) CSS 소개
Cascading Style Sheets
2) CSS 문법과 적용
구성
- 선택자(selector): style을 적용할 요소.
- 속성(property): html tag의 속성(attribute)과 구별할 것
- 값(value)
- 선언(declaration): 속성(property): 값(value);
- 선언부(declaration block): { (선언) }
- 규칙(rule set): 선택자+선언부
CSS 적용방법
- Inline : html Tag에 속성으로 추가. ex)<p style=”color: yellow;”>.
- 요소마다 선언해주어야 하므로 관리 불편.
- Intenal: <head> 내부에 선언부를 추가하는 방식으로 사용.페이지마다 추가해야하므로 불편.
- ex) <head> <style> h1 { color: red; } </stlye> </head>
- External: 외부 스타일 시트. 별도의 .css 파일을 생성하여 해당 파일의 링크를 head에 선언하는 방식. ex) <head><link rel=”stylesheet” href=”~.css”></head>스타일이 파일로 관리되므로 Internal 보다 간편.
- <link> Tag의 rel 속성의 값은 .css 파일일 때는 항상 “stylesheet”으로 고정
- @import: 스타일 내에서 다른 스타일을 적용할 때 사용. 성능 나쁨. 사용 지양
- 주석 : /* 내용 */ . HTML에는 적용 안 됨.
3) 선택자 1~3
요소 선택자 = Tag 선택자
요소 { 속성1: 값1; 속성2: 값2;} <!—마지막 속성의 값 뒤에는 ‘;’ 생략 가능
그룹화
‘,’ 로 여러 요소에 한 번에 스타일 적용 가능. ex) h1, h2, h3, {color: red;}
요소 이름 대신 ‘*’ 를 쓰면 문서 내 모든 요소를 의미(전체선택자). 성능에 좋지 않으므로 사용 지양.
다수의 선택자와 다수의 선언 조합 가능 ex) h1, h2, h3 { color: red; font-size: 2em;}
클래스 선택자
요소대신 요소의 class 명으로 스타일 규칙을 적용할 요소 지정 가능
‘.’+클래스 값으로 선택 가능
ex) .foo {font-size: 30px;} ⇒ class에 “foo”가 포함된 모든 Tag에 전부 적용
다중 클래스 선택도 가능하다. ex) .foo.bar { ~ }
id 선택자
class 대신 id로 요소를 지정.
‘#’ + id 값 으로 선택
id는 항상 유일한 값을 가지므로 다중 선택이 불가능하다.
클래스 선택자와 조함하여 사용도 가능하다. ex) .foo#bar { ~ } ⇒ 이 경우 class가 foo이고 id가 bar인 요소에만 스타일이 적용된다. (AND 연산 개념)
속성 선택자
Tag[속성]
Tag[속성1][속성2]
Tag[속성=”값”]
Tag[속성=”값”][속성2=”값2”] ⇒ 마찬가지로 해당 속성과 값을 모두 갖는 Tag만 선택됨.
부분속성값 선택
Tag[attribute1 ~= “value1”]: 공백으로 구분되는 value1을 가질 때
^=: 지정한 값으로 시작할 때
$=: 지정한 값으로 끝날 때
*=: 지정한 값을 포함
4) 문서 구조 관련 선택자
조합자 or 결정자
문서 구조: 부모 / 자식, 조상 / 자손, 형제
선택 가능한 구조: 자식, 자손, 인접한 형제
자손 선택(공백): div span { ~ }
자식 선택( > ): div > span { ~ }
인접한 형제 선택( + ): div + span { ~ }
그 외: ~
>, +, ~ 과 같은 기호를 조합자라고 부름.
참고 자료
'Frontend > CSS' 카테고리의 다른 글
CSS 입문 (6) 미디어쿼리 (0) 2023.07.30 CSS 입문 (5) 레이아웃 (1) 2023.07.29 CSS 입문 (4) 폰트, 텍스트 (0) 2023.07.26 CSS 입문 (3) 단위, 배경, 박스모델 (0) 2023.07.20 CSS 입문 (2) 가상 선택자 ~ Cascading (0) 2023.07.15