CSS가 어려운 이유

2021-12-07

HTML & CSS / CSS

값 정의 구문: css 속성의 유효한 값과 순서
| : 파이프라인, only. 양쪽에서 하나만 사용할 수 있다.

유효한 값 형식

keywords

예약한 단어. 따옴표 없이 사용. 대소문자 구별 안함.

ex) initial, inherit, unset, block, inline, inline-block, auto, disc, collapse, separate …

기본 자료형 <*>

<string>: 문자열, 따옴표로 구성
<url>: url() 함수
<integer>: 정수
<number>: 실수
<percentage>: 백분율 (%)
<length>: 길이
<position>: 위치 (left, center, right, top, bottom, px, % …)
<color>: 색상
<image>: 이미지
<angle>: 각도(deg ★…)
<time>: 시간(s ★, ms…)
<custom-ident>: 작성자 정의 임의 식별자. 대소문자 구별
<ratio>: 비율 (너비/높이)
<frequency>: 빈도 (Hz, kHz)
<resolution>: 해상도 (dpi, dpcm, dppx)

따옴표가 없으면 기본 자료형, 따옴표가 있으면 그 이름의 속성값을 참조

조합자와 증가기호

결합기호: |, &&, and 조건인지, or 조건인지, only 조건인지
증가기호: /,?, 한번만 사용할 수 있는지, 몇회 사용할 수 있는지

결합기호

공백(and): 둘 이상의 값이 필수. 순서 유지 필수.
&&(and): 둘 이상의 값이 필수. 순서 변경 가능.
||*(or): 두 값 중 하나 이상 필수. 순서 변경 가능.
|(only): 두 값중 하나만.
[](group): 그룹.

1~4는 우선 순위. 순위가 높은 기호를 먼저 해석해야 한다.

증가기호

*: 횟수 제한 없음 / 0 ~ : 이만큼 가능.
+: 1회 이상
?: 0회 또는 1회.
{A}: 정확히 A회.
{A, B}: 최소 A회, 최대 B회
{A,}: 최소 A회 필요, 최댓값 무제한.
#: 1회 이상. 값을 콤마(,)로 분리. 횟수 제한 가능. (예) <length>#{1, 4}
[]!: 그룹에서 적어도 1회 이상.

반복 제한 횟수보다 많은 값을 선언하면 무시됨.

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님