selectors
선택자는 html element를 선택하는 거죠.
선택자를 여러 개 써서 동일한 스타일을 줄 수 있습니다.
h1, .special {
color: blue;
} 선택자의 종류
- type selector ex) h1 { }
- class selector ex) .box { }
- ID selector ex) #unique { }
- attribute selector ex) a[title], a[href="https://example.com"] { }
- Pseudo-classes and pseudo-elements ex) a:hover, p::first-line { }
- Combinators ex) article > p { }
선택자를 정하는 기준
주관적이고, 의견도 여러 개일 수 있는 부분이죠.
좀 더 유지보수가 가능한 CSS를 만들기 위해서, 최대한 DOM에 의존되지 않도록 작성하는 게 좋습니다.
그 말은, 타입 셀렉터를 최대한 사용하지 않는 것이고 따라서 class만 선택자를 쓰도록 규정하는 회사도 있습니다.
또 다른 의견으로 데이터나 변하지 않을 부분으로 태그에 속성을 주어 선택자를 작성하는 방법이 있습니다.
저의 경우에는 디자인에서 기본적으로 정한 룰들은 Dataset을 이용해 만들고, 다른 디자인 요소는 id나 class를 활용합니다.
아래의 예시는 scss기반으로 작성했습니다.
[data-type='nav'] {
[data-name] { color: red; }
[data-description] { font-size: smaller; }
}선택자 학습링크
필수 30개 선택자
nth-child master
게임으로 즐겁게 익히기
cascade
n개의 선택자가 같은 html 엘리먼트를 가리키고 충돌하는 다른 속성값을 적용했다면, 브라우저는 어떤 선택을 할까요?
그 우선순위가 매겨지는 방식을 알아봅시다.
- 나중에 선언된 것이 먼저 선언된 것 보다 우선한다.
- 더 구체적으로 묘사된 선택자가 우선한다. ex) id selector > class selector > tag selector
구체적인 셈법은, 인라인 속성이 1000점, ID 셀렉터가 100점, 클래스 셀렉터, 속성셀렉터, 가상선택자가 포함된 셀렉터는 10점, 태그셀렉터가 1점 - !important 무조건 우선 적용
inheritance
부모 요소의 속성을 자식 요소가 기본적으로 상속을 받습니다. 아닌 것도 있으므로 case by case ㅎㅎㅎ
상속의 속성 5가지
- inherit: 부모에게서 상속받겠다.
- initial: 브라우저가 설정한 기본 스타일링을 상속받겠다.
- unset: 상속받을 게 있으면 상속받고 없으면 브라우저 기본 스타일링을 사용하겠다.
- revert: 내가 부여한 속성을 이전 상태로 되돌린다. (지원되는 브라우저가 거의 없다)
- all: 모든 것을 되돌림.
.fix-this {
all: unset;
}reset.css
브라우저가 기본적으로 html에 만들어 둔 스타일을 해제하여 우리가 원하고 예상한 대로 css를 작성하기 위해 필요합니다.
css를 아예 안쓰거나 디자인이 필요없는 상황이라면 브라우저의 기본스타일이 유용하겠으나,
대부분 우리가 만드는 웹페이지들은 디자인이 포함되어 있기에 예상할 수 없는 기본 스타일을 없애줍니다.
단위와 값
css는 고정된 값과 유동적으로 계산되는 값이 있습니다. 고정값은 환경에 유동적이지 못하기 때문에 유동적인 값을 사용하면 브라우저에 렌더링될 때 계산되어 고정값을 도출합니다.
단위
절대적인 단위
- px(픽셀): 해상도를 이루는 점 하나.
상대적인 단위
- ex: x의 높이값. 혹은 em의 반 값. 영문자의 중심을 찾을 때 사용. css1 스펙.
- ch: 숫자 '0'의 너비 값. 문자 수 표현할 때 사용됨. IE11에서 부분지원되어 사용이 좀 난감함.
- em: 부모 엘리먼트의 폰트 사이즈 크기
- rem: 루트 엘리먼트의 폰트 사이즈 크기
- 1h: 엘리먼트의 line-height
- vw: 브라우저 창의 가로길이의 1%
- vh: 브라우저 창의 세로 길이의 1%
- vmin: 브라우저 창의 최소 영역의 1%
- vmax: 브라우저 창의 최대 영역의 1%
- %: 해당 value의 부모 값을 기준으로 한 백분율
참조: css 단위 사용하기
값
글자값 및 식별자
키워드
tan, orange, magenta, dotgerblue, crimpson ...
.box {
color: crimpson;
}숫자값
단위를 붙이지 않는 값들.
.box {
opacity: 0.6;
}함수값
rgb or rgba
미술시간에 많이 배운 삼원색 기반의 색 표현입니다.
.one {
background-color: #02798b; /* 16진법 값 */
background-color: rgb(2, 121, 139); /* 16진법의 소수적 표현 */
background-color: rgba(2, 121, 139, .3); /* 마지막 칸은 opacity */
}hsl or hsla
오래된 브라우저에서는 지원하지 않는기능이지만 IE11에서는 지원되는 것으로 보입니다.
디자이너들이 좋아할 만한 체계입니다. 색상(0~360), 채도(0~100%), 명도(0~100%) 값으로 정해집니다.
.one {
background-color: hsla(188, 97%, 28%, .3);
}