주의사항

• 이 사이트는 발표자료용으로, 일반 사이트와 다릅니다.
  환경에 따라 깨질 수도 있습니다.
• 이 발표자료의 내용이 반드시 옳다고 할 수는 없습니다.
  더 바르게 이해하기 위해, 직접 스펙을 읽는 걸 권장합니다.
• 원문 페이지
  http://unformedbuilding.com/slide/back-to-basics-2015-08-30/
• 이 발표자료는 원작자인 國仲 義則님에게 허가를 받고 번역한 자료입니다.
  임의의 퍼가기는 자제해주세요.

기본 이전의 기초지식

August 30, 2015

國仲 義則
Yoshinori Kuninaka

（a.k.a. Matori / @ub_pnr）
株式会社シフトブレイン

목차

1. CSS 기본 문법
2. 프로퍼티 스펙과 값 구문
3. 형과 단위
4. 함수 표현

스펙을 엿보자

스펙이란 무엇인가?

• CSS current work & how to participate
• CSS3 일본어 번역 - 血統の森 web実験小屋

일본어 번역본을 볼 때는, 영어 원문과 읽는 걸 권장합니다.
또한, 오역을 발견하면 번역자에게 연락하시는 게 좋습니다.

CSS 기본구문

선언

property: value

선언 단락

property: value;
property: value;

선언 블록

{
  property: value;
  property: value;
}

스타일 룰
（룰 세트 / 규칙 세트）

selector-lists {
  property: value;
  property: value;
}

셀렉터에 관련된 내용은 Selectors Level 3을 확인해주세요.

@ 룰

@ 룰은 그 역할에 따라 구문이 다릅니다.
자세한 사항은 스펙을 참고해주세요.

@charset "UTF-8";          

@import url("...");        

@keyframes foo {
  from { property: value; }
  to { property: value; }
}

외에도 여러가지 @ 룰이 있습니다

주석

주석은 1종류입니다.

/* 여기에 주석을 다세요 */

/*
  여기에 주석을 다세요.
*/

주석 기호부터 행의 끝까지 주석으로 삼는
1행 코멘트는 존재하지 않기 때문에

// 여기가 주석입니다 
# 여기가 주석입니다    

같은게 불가능합니다.

각종 속성 관련 스펙을
읽는 기본 방법

각각의 스펙에 올라있는 속성의 스펙표를 읽어봅시다.

Name: 속성명
Value: 정규 값과 구문
Initial: 초기값
Applies to: 이 속성을 사용할 수 있는 요소
Inherited: 속성의 상속여부
Percentages: 퍼센테이지가 어떻게 해석되는가
Media: 이 속성을 사용할 수 있는 미디어 그룹
Computed value: 값이 어떻게 계산되는지
Animatable: 애니메이션 가능여부

값 구문

Value Definition Syntax

자주 나오는 화제

어떤 순서로 써야 좋을까？

border 단축 속성

border: 1px solid red;
border: red 1px solid;
border: solid red 1px;

예：box-shadow 속성값 구문

Drop Shadows: the ‘box-shadow’ property

box-shadow: none | <shadow> [ , <shadow> ]*   

<shadow> = inset? && <length>{2,4} && <color>?

키워드

키워드는 스펙에 따라 문자 그대로 기술합니다. /나 ,도 동일합니다.

box-shadow: none | <shadow> [ , <shadow> ]*   

<shadow> = inset? && <length>{2,4} && <color>?

데이터 형

<와>로 감싸져 있는 것은 데이터형을 표시합니다.

box-shadow: none | <shadow> [ , <shadow> ]*   

<shadow> = inset? && <length>{2,4} && <color>?

나란히 표기

나란히 표기되어있는 단어는, 그 순서를 지켜서 표기합니다.

counter-set: [ <custom-ident> <integer>? ]+ | none

&&（더블 앰퍼센트）

&&는 2개 이상의 구성요소의 단락으로, 기술 된 모든 걸 순서 상관없이 기술합니다.

<shadow> = inset? && <length>{2,4} && <color>?

||（더블 바）

||는 2개 이상의 구성요소의 단락으로, 기술 된 것 중 1개 이상을 순서 상관없이 기술합니다.

border: <line-width> || <line-style> || <color>

|（싱글 바）

|은 2개 이상의 구성요소의 단락으로, 기술 된 것 중 1개를 기술합니다.

box-shadow: none | <shadow> [ , <shadow> ]*

[와]

[와] 조합은 그룹을 묶을 때 사용합니다.

box-shadow: none | <shadow> [ , <shadow> ]*

우선순위: 나란히 표기 > && > || > |

  a b   |   c ||   d &&   e f    

우선순위대로 보면……

[ a b ] | [ c || [ d && [ e f ]]]

1. [a b]와[e f]는 그 표기대로 작성
2. d와[e f]는 양쪽 다 필수적으로 순서 상관없음
3. c와[d && [e f]]는c만, [d && [e f]]만,
   혹은 양쪽 다 순서 상관없이 기술
4. [a b]と[c || [d && [e f]]]는 둘 중 하나를 기술

수식자

• *은 선행하는 형, 단어, 그룹이 0회 이상출현하는 걸 표현합니다.
• +은 선행하는 형, 단어, 그룹이 1회 이상출현하는 걸 표현합니다.
• ?은 선행하는 형, 단어, 그룹이 임의인 경우를 표현합니다.
• 괄호 안에 있는 숫자 {A}는, 선행하는 형, 단어, 그룹이 A회 출현하는 걸 표현합니다.
• 괄호 안에 있는 콤바로 구분되어있는 숫자 페어 {A,B}는, 선행하는 형, 단어, 그룹이 최소 A회, 최대 B회출현하는 걸 표현합니다.
• #은 콤마로 구분되는 선행하는 형, 단어, 그룹이 1회이상 출현하는 걸 표현합니다.
• 그룹 뒤에 있는 !는 그 그룹이 필수인 동시에 1개 이상의 값을 생성해야한다는 걸 표현합니다.

즉 box-shadow 속성의 값은……

box-shadow: none | <shadow> [ , <shadow> ]*

• none 키워드, 또는 콤마로 구분하여 반복이 가능한 <shadow>형을 나타내고 있습니다.

<shadow> = inset? && <length>{2,4} && <color>?

이기 떄문에……

• inset키워드, 2회 이상 4회 이내로 반복 가능한 <length>형, <color>형의 조합이 됩니다.
• inset키워드, <color>는 필수지만, 2회이상 4회이내 반복하는 <length>와 함께 기술해야할 필요가 있습니다.
• 이 순서는 변화 가능합니다.

또한, 반복되는 <length>가 각각 무엇을 나타내는 지는 이후에 기술되어있습니다.

주의

여전히 현재 <shadow> 구문으로 표시가 잘 안되는 경우가 있습니다.
inset이 <length>{2,4}와 <color> 사이에 들어간 경우입니다.

box-shadow: 1em 1em inset red;
box-shadow: red inset 1em 1em;

예전 <shadow> 구문은 아래와 같은 형태였기 때문에,
현재 스펙과의 호환성이 있는 스펙에 맞춰서 적어두는게 안전합니다.

<shadow> = inset? && [<length>{2,4} && <color>?]

border

<line-width> || <line-style> || <color>

각각의 순서는 상관없어서

border: 1px solid red;
border: red 1px solid;
border: solid red 1px;

스펙상으로는 어떤 순서대로 적어도 상관없습니다.

형과 단위

각 속성에 지정할 수 있는 값의 다양한 형에 대해서.

텍스트 데이터형

정해져있는 키워드

속성채로 정해져있는 키워드

margin-top: auto;
font-size: medium;
text-transform: uppercase;

아까 전 box-shadow로 하면 none과 inset이 여기에 속합니다.

CSS-wide 키워드

모든 속성에 적용 가능한 키워드
현재는 아래 3개

• initial: 속성의 기초값을 나타냅니다
• inherit: 부모로부터 상속받는 값을 나타냅니다
• unset: 그 속성의 상속 여부에 따라서 initial 또는 inherit이 됩니다.

<custom-ident>

기정 키워드가 해석되지 않는, 작성자에 따른 CSS 식별자
사용 가능한 문자의 상세내역은 스펙을 확인해주세요.

counter-increment: my-counter;
animation-name: rotation360;
will-change: transform;

안맞는 예

.foo { animation-name: none; }

@keyframes none {
  to { opacity: 0; }
}

animation-name에 들어갈 수 있는 값은

<single-animation-name>#
<single-animation-name> = none | <custom-ident>

이기 때문에 none은 기정 키워드가 됩니다.
그렇기 때문에 이 구문은 맞지 않습니다.

위 문제를 아래와 같이 해결할 수 있습니다.

.foo { animation-name: fade-out; }

@keyframes fade-out {
  to { opacity: 0; }
}

<string>

<string>은 쌍따옴표나 홑따옴표에 들어가있는 문자열입니다.

.foo::before {
  content: "before!";
}

.bar::after {
  content: 'after!';
}

<url>

리소스 경로를 지정합니다.

<url> = url( <string> <url-modifier>* )

예

background-image: url("./kawaii-icon.png");

background-image: url("icons.svg#kawaii"); 

@import같은 경우에는 함수식이 아닌 <string>만으로 지정하는 것도 가능합니다.

@import "./reset.css"

호환성을 위해 따옴표 없이 정의하는 것도 가능합니다.

background-image: url(./kawaii-icon.png);

다만, 이러한 대체기법으로 <url-modifier>는 사용 불가합니다.

수치 데이터

<integer>

정수
하나 이상의 10진수 0~9 숫자를 늘어뜨려놓은 것으로,
숫자 앞에 +-를 붙이는 게 가능합니다.
범위는 제한되는 경우가 있습니다.

z-index: 0;
order: -1;
counter-increment: my-counter 1;

<number>

실수
<integer> 또는 0개이상의 숫자 뒤에 .과 1개 이상의 10진수
그리고 임의로 e 또는 E 및 정수로 구성되어있는 지수를 나타냅니다.
범위는 제한되는 경우가 있습니다.

line-height: 1.6; /* 0 이상 */
opacity: 0.2; /* 0.0 ~ 1.0 */

<percentage>

퍼센테이지
<number>와 퍼센트 기호（%）로 구성됩니다.
퍼센테이지는 항상 다른 값에 상대적으로 변화합니다.

퍼센테이지가 사용가능한 속성은
퍼센테이지가 무엇을 기준으로 하는지 정의합니다.

font-size: 200%; /* 부모의 폰트 사이즈 */
padding-top: 50%; /* 대상 블록의 폭 */

디멘션

<number> 뒤에 단위가 붙는 것
<percentage>는 포함하지 않는다.

<length>

길이
길이가 0인 경우는<length>에 단위를 표기하지 않아도 되며、
구문으로써는 <number>와 동일해집니다.
또, 길이의 범위는 제한될 가능성이 있습니다.

상대 단위

폰트에 상대적인 단위

• em: 이 단위를 사용하는 요소의 font-size 속성의 출력값
• ex: 이용가능한 최초 폰트의 x 높이（x-height）
• ch: 화면에 표현할 때 사용한 폰트의 0（U+0030）글자의 폭
• rem: 루트 요소의 font-size 출력값

폰트에 대해 상대적인 길이에 대해서

• 단위 rem을 제외하고 폰트에 상대적인 길이는 사용되는 요소의 폰트 계량법을 참조합니다.
• 단 font-size 속성에 나타나는 경우에는 부모 요소의 폰트 계량법을 참조합니다.
• 부모가 없는 요소인 경우에는 font 속성의 초기값에 대응하는 폰트 계량법을 참조합니다.

margin: 1rem; /* 루트 폰트사이즈 */
padding: 0.5ch; /* 이 요소의 폰트사이즈 */
font-size: 1.2em; /* 부모의 폰트사이즈 */

rem에 대해서

• HTML에서 루트 요소는 html요소입니다.
• 루트요소에 사용되는 경우에는 속성의 초기값을 참조합니다.
• font-size의 초기값은 medium입니다.
• 어디에서 사용해도 항상 루트 요소의 폰트사이즈를 기본으로 하기 때문에
  산출값을 계산(예상)하기 편리한 단위입니다.

뷰포트에 상대적인 단위

• vw: 초기 블록의 폭 1%
• vh: 초기 블록의 높이 1%。
• vmin: vw와 vh의 최소값을 지정
  구 스펙에선 vm 단위였습니다.Internet Explorer 9이vm을 사용합니다.
• vmax: vw와 vh의 최대값을 지정
  나중에 추가된 단위이기 때문에, 아직 구현되지 않은 브라우저도 있습니다.

뷰포트에 상대하는 비율의 길이

• 뷰포트에 상대하는 비율의 길이란, 초기 블록에 대응하여 상대적으로 길이를 갖는 것을 의미합니다.
• 초기 블록이란, 연속한 미디어(웹페이지 등)에서는 표시영역, 페이지미디어에서는 페이지 영역이 됩니다.
• 루트 요소의 overflow 값이 auto인 경우, 스크롤바는 존재하지 않는 걸로 측정됩니다.
• 예를 들어, 가로 스크롤바가 있는 경우
  html {width: 100vw; }와
  html {width: 100%; }는 다른 길이를 가집니다.

절대단위

물리단위

• cm: 센티미터. 1cm = (96/2.54)px
• mm: 밀리미터. 1mm = (1/10)cm
• q: 쿼터 밀리미터. 1q = (1/40)cm
• in: 인치. 1in = 2.54cm = 96px
• pc: 파이카. 1pc = 1/6in
• pt: 포인트. 1pt = 1/72in

시야각단위

단위는 px뿐.

• 간단히 말하면 화면 해상도 의존 단위
• 저해상도 환경, 예를들어 일반적인 컴퓨터같은 경우
  1px은 화면의 1도트
• 예를 들어 iPhone 6에서는1px평방단위는2x2=4도트가 됩니다.
  마찬가지로, 고해상도환경인 프린터에서는 4x4=16도트인 경우도 있습니다
• 해상도가 높아질 때마다1px평방을 나타내는데 필요한 화면 도트수가 늘어납니다.

절대단위에 대해서

• 스크린을 대상으로 하는 경우는 기본적으로 px로 작성하면 문제없습니다.
• 물리단위를 이용하는 경우, 실제 스크린에 표현되는 길이가 물리적 길이와 동일하다고 확정할 수 없습니다.
• 절대단위 스펙은 꽤 복잡하니, 상세한 건 스펙문서를 확인해주세요.

<angle>

각도를 표현합니다.

• deg: 도수법. 익숙한 방법입니다. 원의 전체는 360deg.
• grad: 그라지안. 1 직각을 100 단위로, 원의 전체는 400grad.
• rad: 호도법(레디안). 원의 전체는 2πrad.
• turn: 회전수. 원의 전체는 1turn.

값이 0이어도 단위 생략이 불가합니다.

<time>

시간을 나타냅니다.

• s: 초
• ms: 밀리 초1000ms는 1s와 같습니다.

값이 0이어도 단위 생략이 불가합니다.

<frequency>

주파수를 나타냅니다.

지금 사용할 수 있는 방법이 없습니다.
(현재 이 값을 지원하는 브라우저는 존재하지 않습니다)

• Hz: 헤르츠. 1초간 주파수 입니다.
• kHz: 킬로헤르츠. 1kHz는 1000Hz와 같습니다.

CSS2에서 진행한 감각 미디어 그룹의 pitch 속성에서 이용 가능하여, Opera Presto에서 지원하는 버전이 있었습니다.（현재 Opera는 Presto가 아닌 Blink를 사용합니다）

<resolution>

해상도를 나타내 미디어쿼리 등에 사용됩니다.

• dpi: 인치당 도트수
• dpcm: 센티미터당 도트수
• dppx: px단위당 도트수

다른 모듈에서 정의되어있는 형

여기까지는 CSS Values and Units Module Level 3（ED）를 바탕으로 보았지만, 다른 모듈에서 정의하고 있는 형도 있습니다.

<color>

CSS Color Module Level 3에서 정의합니다

• 컬러 키워드
• transparent 키워드
• currentColor 키워드
• 16진수 RGB 포맷
• rgb()와 rgba()함수
• hsl()과 hsla()함수
• 시스템컬러 키워드도 정의되어있지만,
  폐기 예정입니다.

CSS Color Module Level 4에서는 더 늘어날 예정입니다.

그 외 형

• <image>
• <position>
• <ratio>
• <blend-mode>
• <counter>
• <gradient>
• <shape>
• <timing-function>

……등이 있습니다 (더 있어요).

함수표현

calc()

• 수식을 값으로써 이용 가능한 함수로, 수식은 사칙연산이 가능합니다.
• <length>, <frequency>, <angle>, <time>, <number>, <integer>가 이용 가능한 장소에서 사용 가능합니다.
• 덧셈+과 뺄셈- 기호 전후에는 공백이 필요합니다.

.foo {
  width: calc(100% - 20px);
  font-size: calc(16px + 0.1vw);
  margin-left: calc((50% + 10vh) / 2 );
}

attr()

요소의 속성값을 참조합니다

attr( <attr-name> <type-or-unit>? [ , <attr-fallback> ]? )

구문이지만, 현재 브라우저에선 attr(<attr-name>) 같은 기본형만 지원하고, 사용장소는 content 속성 같은 형식만 지원합니다.

스펙상으로 요소의 속성값값으로 지정된 길이나 색등 다양한 CSS의 형을 지정한채로 속성값을 참조해, 속성 값으로써 사용 가능합니다. (이후에 제거될 수도 있습니다)

현재 스펙이 전체 지원하는 경우는,
이런 경우에만 지원합니다.

<div data-z="7">...</div>
---
div { z-index: attr(data-z integer); }

현재는 아래와 같은 느낌으로만 사용 가능합니다.

<div data-t="FOO!">...</div>
---
div::before { content: attr(data-t); }

toggle()

지원하는 브라우저가 현재는 없습니다.

ul {
  list-style-type: toggle(disc, circle, square, box);
}

이는 아래와 같이 동작합니다.

ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
ul ul ul ul { list-style-type: box; }
ul ul ul ul ul { list-style-type: disc; }
ul ul ul ul ul ul { list-style-type: circle; }
...

그 외

다른 모듈에서 정의된 특유의 함수가 있습니다.

정리

여러가지로 소개했지만, 한번에 기억하지 못하더라도 다양한 속성의 스펙을 읽고있으면 언젠가 기억할 수 있을거라 생각합니다.
이러한 것들을 몰라도 CSS는 쓸 수 있지만, 스펙을 읽어나가며, 실제로 부딪혀있는 문제를 해결하는데 도움이 될거라 생각합니다.

이번에는 조잡하게 소개해드렸지만, 더 자세한 건 스펙을 읽어보시길 바랍니다
바라보는 것만으로도 꽤 즐겁습니다.