CSS 완벽 가이드 (4th)

1. CSS와 문서

CSS3 부터는 CSS 명세라는것이 없다. CSS의 기능범위가 빠르게 커짐에 따라 css3부터는 모듈 기반으로 기능 개발을 하기 때문.

모듈별 개발단계

1. Draft(초안)
2. Working Draft(작업 초안)
3. Candidate Recommendation(권고 후보)
4. Proposed Recommendation(최종 권고안)
5. Recommendation(권고안)

진행단계는 https://www.w3.org/Style/CSS/current-work 에서 확인 할 수 있다.

대체되는 요소

예를들어 img요소 는 문서외부에 있는 이미지 파일로 대체된다.

input요소도 대체되는 요소다.

대체되지 않는 요소

img input 을 제외한 거의 모든 요소

블록요소

p, div 가 대표적인 블록요소다.

부모요소의 컨텐츠 영역을 채우며 양옆에 다른 요소가 위치할 수 없다.

인라인요소

a, strong, em 요소가 대표적인 인라인 요소다.

텍스트 중간에 박스를 만들어 넣을수 있도록 고안된 요소이다.

html 모델에서는 인라인요소 안에 블록요소를 넣을수 없지만, css 모델에서는 어떻게 넣어도 상관없다. xml을 이용한 display모델을 변경하여 사용시 유용함.

link 요소

html과 css를 연결해주는 요소

head요소 안에 있어야 한다.

@import 를 이용해 다른 css를 불러올수도 있으며 스타일시트의 가장 위에 정의되어야 한다.

href, type, media

브라우저가 대체 스타일 시트 선택을 지원하는 경우 rel=“alternate stylesheet” 와 같이 사용할 수 있으며 title 속성과 함께 사용된다. 주요 브라우저에서 모두 지원하지 않음.

style 요소

외부 파일에서 스타일을 가져오지 않고 내부에서 style 태그 안에 정의 가능하다.

http 연결

아래와 같이 http 헤더에 넣는 방식으로 스타일을 불러올수도 있지만 주요 부라우저에서 지원하지 않는다. ** HeaderaddLink"s/ui/resting.csss;relestylesheet;type=text/css"**

인라인 스타일

아래와 같이 태그 안에 스타일 속성을 넣는 방식으로 사용가능 사용을 지양해야 함

규칙구조

선택자와 선언블록이 있다.

아래의 코드에서 h1이 선택자 중괄호 안에 있는 내용이 선언블록이다.

h1 {
  color: red;
}

벤더 프리픽스

특정 브라우저 제작사가. 실험적 이거나 독점적 기능을 제공하는 속성에 프리픽스를 붙이는걸 말한다.

실험적인 기능들이 잘못된 관행으로 이어지는 것을 막기위함이며, 현재는 브라우저에서 서서히 제거되는 중이다.

• -epub- , -moz-, -ms-, -o-, -webkit-

규칙사이의 공백은 신경쓰지 않으며 동작에 영향을 주지 않는다

다만 키워드 목록은 공백으로 구분해야 한다 (1px solid red)

주석 /* */

미디어 쿼리

스타일을 어떤 미디어에서 사용할지 결정할 수 있다. 타입과 서술자로 표현

• 프로젝터에서 사용할때만 스타일을 적용할 때의 예

  @media projection {
    body {background: yellow;}
  }
  

• link 태그나 style 태그에도 속성을 넣을 수 있다

  • 컬러 프린터에 인쇄시 또는 8비트 컬러 이상을 지원하는 모니터에서만 적용 (and or not only 를 관계 연산자로 사용할 수 있다.)

    <link href="print-color.css" type="text/css" rel="stylesheet" media="print and (color), screen and (color-depth: 8)">
    

  • 최소 해상도를 지원할때만 적용 예

    amedia (min-resolution: 96dpi) {...)
    

• 타입

  • all - 모든경우 (굳이 사용 안함)
  • print - 인쇄할때나 미리보기를 표시할때
  • screen - 보통 모니터에서 볼때

• 서술자 목록

  • width
  • min-width
  • max-width
  • device-width
  • min-device-width
  • max-device-width
  • height
  • min-height
  • max-height
  • device-height
  • min-device-height
  • max-device-height
  • aspect-ratio
  • min-aspect-ratio
  • max-acnect-ratio
  • device-aspect-ratio
  • min-device-aspect-ratio
  • max-device-aspect-ratio
  • color
  • min-color
  • max-color
  • color -index
  • min-color -index
  • max-color-index
  • monochrome
  • win-monochrome
  • max-monochrome
  • resolution
  • min-resolution
  • max-resolution
  • orientation
  • scan
  • grid
  • radio

기능쿼리

• 브라우저가 특정 기능을 지원할때만 스타일을 적용할 수 있다.

  @supports (display: grid ) {
    section#main {display: grid;} /*그리드를쓰지않은예전레이아웃을리셋할스타일*/
  }
  

• 미디어 쿼리 안에 기능쿼리를 적용할수 있고, 그 반대도 허용된다.

• and, or, not 관계연산자 사용 가능.

2. 선택자

키워드 끝에 세미콜론은 필수문법으 아니지만 컴퓨터가 잘못 해석할 가능성이 있는 경우도 있으며, 가독성 문제가 있으므로 생략 하지 않는게 좋다.

요소 선택자

정리 생략

요소 키워드

여러 값을 가지는 키워드는 공백으로 구분하지만, h2{font:large/150%sans-serif:} 와 같이 슬래시로 구분하여 쓸수 있는 속성도 많이 늘어나고 있는 추세다.

경우에 따라스는 콤마로 구분하는 속성도 있다. a:hover (transition: color, background-color 200ms ease-in 50ms;)

그룹화

여러 선택자에 같은 키워드를 적용

h2,p {
  color:gray;
}

전체선택자 (애스터리스크 * )

오래된 브라우저에서 css 가 특정 태그를 인식하게 하려면 javascript를 이용할 수 있다.

// IE8이 <main> 태그를 인식할수 있다.
document.createelement('main');

클래스 선택자와 아이디 선택자

• 클래스 선택자는 프리픽스로 (.) 을 붙이고 아이디 선택자는 (#) 을 붙인다.
• 아이디는 문서에 하나만 존재해야 한다.
• 클래스 선택자는 p.className 처럼 다른 표현과 결함하여 사용할수 있다.
• 아이디 선택자는 조합할수 없으며 단독으로 사용해야한다. 문서에 하나뿐이 없으므로
• 아이디나 클래스 선택자는 대소문자를 구분한다.

속성 선택자

• p태그에 moon 이라는 속성을 가진 태그 (

  aa

  ) 를 선택할때 속성 선택자를 사용할수 있다.

p[moon] {
  color: blue
}

• 타이틀 속서을 가진 모든 요소 선택시 예

*[title] {
  color: blue
}

• 속성의 값까지 고려하여 선택시 예

a[href=“http://www.css-discuss.org/about.html"] {
  font-weight: bold;
}

• 여러 속성값을 체인으로 연결

a[href=“http://www.w3.org/"][title=“w3CHome"]{font-size:200%:}

• 속성 값 선택자는 문자열 자체를 체크하므로 아래의 두 예는 찾는 방식이 틀림.

  h#page-title
  h[id="page-title"]

• 부분 일치 탐색

  • [foo|=“bar”] -> bar로 시작하고 뒤에 하이픈이 오는 모든 속성
  • [foo~=“bar”] -> 공백이 포함된 키워드 리스트 중 bar라는 단어가 포함된 요소
  • [foo*=“bar”] -> 문자열에 일부분으로 bar라는 단어가 포함된 요소
  • [foo^=“bar”] -> 속성값이 bar로 시작할때
  • [foo$=“bar”] -> 속성값이 bar로 끝날때

• 대소문자 구분 없이 탐색 (css level4)

  • a[href$=".PDF” i] i를 붙이면 대소문자 구분없이 pdf로 끝나는 케이스를 찾는다.

자손 선택자

• hl의 자손인 em을 선택 h1 em {color: gray;}
• 여러 깊이도 선택 가능 ul ol ul em { color:gray;}
• 그룹선택자와 조합하여 선택 가능 blockquote b, p b {color: gray;}

자식 선택자

• 바로 아래 한단계 자식 요소만 선택
  • 오른쪽 꺽쇠 하나로 표현 h1 > strong { color:red; }

인접한 형제 요소 선택

h1 + p { margin-top: 0; } - h1 바로 다음에 오는 p요소

인접하지 않아도 되는 형제 요소 선택

h2 ~ ol { font-style: italic; } h2뒤에 나오는 모든 형제 요소 선택

가상 클래스 선택자

• 가상클래스는 이미 선택하고 있는 요소에 조건을 추가하는 것이다. 말 그대로 가상의 클래스를 의미한다.

이미 방문했거나 방문하지 않은 독일어 페이지를 가리키는 링크에 커서를 올렸을때 색상변경

a:link:hover:lang(de) { color: gray; } a:visited:hover:lang(de) { color: silver; }

루트요소 선택

:root { border: 10px; } or html { border: 10px; }

빈 요소 선택

• 공백도 없고 콘텐츠도 없고 자손 요소도 없는 요소를 선택
  • img 와 img:empty 는 사실상 동일하다

유일한 자식 선택

• only-child 형제요소가 없는 요소를 선택한다.

  • img:only-child { border: 1px solid black; }

• only-of-type img인 형제요소가 없는 img 요소를 선택한다()

  • img:only-of-type { border: 1px solid black; }

첫번째 자식요소

• first-child or last-child
  • 첫번째 자식요소가 p 태그인 요소 선택 예
  • p:first-child { font-weight: bold; }

첫번째 오는 타입 또는 마직에 오는 타입

• first-of-type or last-of-type

table:first-of-type {} - 테이블 앞에 무슨 요소가 있든 상관없이 첫 번째 테이블을 선택

n번째 자식 선택

• p:nth-child(1)
• li:nth-child(3n + 1) 1, 4, 7, 10, 13… 번째 요소 선택
• nth-last-child 는 뒤에서 부터 거꾸로 센다.

n번째 오는 타입 요소 선택

• a:nth-of-type(even) - 짝수번째 존재하는 a 링크 선택
• a:nth-last-of-type(even)

동적 가상 클래스

• 설명생략
  • :link
  • :visited
  • :focus
  • :hover
  • :active

여러가지 가상 클래스

• :enabled - 활성화된 상태의 폼 요소
• :disabled - 비활성화된 상태의 폼 요소
• :checked - 체크된 상태의 체크박스나 라디오요소
• :indeterminate - 불확정 상태의 체크박스나 라디오 요소
• :default - 기본값으로 선택되어있는 체크박스나 라디오 요소
• :valid
• :invalid
• :required
• :optional - 사용자가 꼭 입력할 필요는 없는 값인지 체크
• :in-range - 최대값 최소값 안쪽인지 체크
• :out-of-range - 최대값 최소값 바깥쪽인지 체크
• :read-write - 입력, 수정 가능 요소
• :read-only - 입력, 수정 불가능 요소
• :target - 앵커가 달린 페이지링크가 있을때 활성화된 타겟 요소(앵커에 해당하는 페이지 요소를 선택할 수 있다)
• :lang - 프랑스어로 작성된 요소를 이텔릭으로 표현 ex) :lang(fr) (font-style: italic;)
• :not(부정할 셀렉트 규칙) - 셀렉터를 부정문으로 사용하고 싶을때

가상 요소 선택자 (가상 요소는 콜론 두개로 사용)

• ::first-letter - (블록 요소에만 적용됨) 요소의 첫 글자에 스타일을 지정 p::first-letter { color: red; }
• ::first-line - (블록 요소에만 적용됨) 첫 줄에 스타일 지정

앞뒤에 컨텐츠 생성

• ::after - 설명생략
• ::before - 설명생략

3. 우선순위와 캐스케이드

우선순위

• 인라인 선언 - 1, 0, 0, 0
• 아이디- 0, 1, 0, 0
• 클래스와 속성선택자- 0, 0, 1, 0
• 요소와 가상요소- 0, 0, 0, 1
• 전체선택자와 콤비네이터 - 0, 0, 0, 0
• !important 사용 - 1, 0, 0, 0, 0

위쪽 body 요소와 함께 적은쪽이 우선순위 합계가 크므로 우선 적용된다.

• 만약 우선순위가 같다면 더 아래에 기입한 것이 적용된다.
  • linked, visited, focus, 와 같은 가상 클래스들은 정의 순서가 중요할 수도 있다.
  • 보통 linked, visited, focus, hover, active 순으로 정의하면 부작용을 방지할 수 있다.

body h1 {color: green;} /* 0,0,0,2 */
h1 {color: red;} /* 0, 0, 0, 1 */

그룹 선택자라면 나누어서 우선순위가 매겨진다

/* h1, h2.section { color:silver; background:black; } */

h1 { color: silver;} /* 0, 0, 0, 1 */
h1 { background: black; } /* 0, 0, 0, 1 */
h2.section { color: silver; } /* 0, 0, 1, 1 */
h2.section { background: black; } /* 0, 0, 1, 1 */

브라우저 사용자 스타일 시트가 있을 경우 우선순위

1. 사용자스타일시트에서 !important가포함된선언
2. 제작자스타일시트에서 !inportant가포함된선언
3. 제작자스타일시트의 나머지선언
4. 사용자스타일시트의 나머지선언
5. 사용자에이전트 스타일시트

상속

예를들어 h1요소에 색상을 지정하면 해당색상은 h1안의 모든텍스트에 적용될뿐 아니라, h안의 자식요소에도 모두 적용됩니다.

• 다만 백그라운드, 보더, 마진, 패딩 과 같은 요소는 상속되지 않는다.

• 상속받아 적용되는 값에는 우선순위가 0이다.

• 전체선택자는 모든 요소와 일치하므로 자연스럽게 적용되는 상속을 끊어버리는 부작용이 있으므로 주의해서 사용해야 한다

4. 값과 단위

전역키워드 (IE는 전부 미지원, 오페라 미니도 미지원)

• inherit - 기본 상속되지 않는 값들도 상속되게 만듬
• initial - 기본값으로 리셋
• unset - 상속값이 있는 경우 inherit 상속값이 없는 경우 initial (inherit과 initial 을 합친 효과가 있다)

all 속성

진짜 모든 속성을 변경하므로 주의해서 쓰는게 좋다

• direction및unicode-bidi를 제외한 모든 속성을 대체 주의해서 #example (all: inherit;}

문자열 줄바꿈

• ex ) "This is a better place \Afor a newline."

url

• 절대 경로 @import url(http://web.waffles.org/toppings/special/toppings.css)

• 상대 경로 @import url(../toppings/special/toppings.css)

절대 길이 단위

• 인치, 센티미터, 밀리미터, 쿼터밀리미터, 포인트, 피카, 픽셀

픽셀

모니터에 표현되는 1px은 명확하게 화면상에 실제 픽셀을 사용한다. 하지만 프린터와 같은 다른 장치에 표현할때는 다른 단위로 변환해야 한다. 보틍 1px은 1/96 인치를 말한다.

해상도 단위

미디어쿼리와 반응형 디자인이 생기면서 새로운 단위가 생김

• dpi - 1인치에 표현할수 있는 도트 수(도트란 물리적 화면의 디스플레이 단위, 예를들어 픽셀)
  • 브라우저는 1px이 몇 dpi인지 정확히 알려주지 않는다.
    • 다만 devicePixelRatio 값을 통하여 물리적 픽샐 해상도와 css 픽샐 해당도의 비율을 반환한다. (css 해상도 또한 브라우저 마다 틀리다 보통 96dpi로 여겨진다.)
• dpcm - 1센치미터에 표현할수 있는 도트수
• dppx - 1px 당 도트수

상대길이 단위

• em - fontSize가 14px 일때 1em은 14px
• ex - 사용된 폰트의 소문자 높이가 1ex가 된다.
• rem - em과 같지만 root 요소의 폰트 크기를 기준으로 한다.

ch단위

• 폰트의 0 기호가 차지하는 너비

뷰포트 단위

• vw - 뷰포트의 너비를 100으로 나눈 값
• vh - 뷰포트의 높이를 100으로 나눈 값
• vmin - vh 와 vw중 작은값
• vmax - vh 와 vw중 큰값

계산된 값

• calc() - 설명생략

프로퍼티 값

• html 어트리뷰트에 있는 값을 가져와서 사용할수 있음
  • a:after {content: " (" attr(href) ")";} 보통 이런식으로 사용됨

색상

• 기본 16색 키워드가 존재 (red, blud, green 등)
• 16진수 색상 표기법 유효

RGB와 RGBa

• 사용 예

rgb(100%,100%,100%)
rgb(0%, 0%, 0%)

rgb(255,255,255)
rgb(0.0,0)

// 투명도 추가
rgba(255, 255, 255, 0.5)
rgba (100%, 100%, 100%, 0.5)

hsl과 hsla

• 색조 채도 선명도의 비율로 색상을 표현
• hsla는 hsl에 투명도 추가

transparent

투명

currentColor

현재 스타일에 color와 같은색상을 의미

main { color: gray; border-color: currentcolor; }

각도

• deg, grad, rad, turn - 설명생략

시간과 주파수

• s, ms - 초 밀리초
• hz - 주파수 (청각관련 값)

커스텀 값 (변수)

html {
  --base-color: #639;
  --highlight-color: #AEA;
}

h1 { color: var(--base-color); }
h2 {color: var(--highlight-color); }

5. 폰트

폰트패밀리

• Times라는 폰트는 사실 TimesRegular, TimeBold, TimesItalic 등 여러가지 폰트페이스의 집합이다.
  • 보통 font-family: Times 라고 정의하면 패밀리에 묶인 모든 폰트 페이스가 전부 사용되는 것이다.

범용 폰트의 분류

• 세리프 폰트 - 가변폭 폰트이며 폰트에 끝에 장식선이 있다.
• 산세리프 폰트 - 가변폭 폰트지만 작식선이 없다.
• 고정폭 폰트 - 모든 폰트가 일정한 폭을 가지며 프로그래밍이나 표 등에 쓰인다.
• 필기체 폰트 - 사람의 필기체를 흉내낸 폰트이며 세리프폰트보다 가변폭이 크다.
• 판타지 폰트 - 분류할 수 없는 특수한 폰트이며 장식용 폰트이다.

범용 폰트 페밀리 사용

body{ font-family:sans-serif; } 와 같이 사용하면 시트템 폰트중 알아서 산세리프에 해당하는 대표 폰트를 적용해준다.

폴백폰트

h1 {font-family: Georgia, serif;} 는 사용자가 Georgia 폰트를 가지고 있지 않다면 아무 세리프 폰트로 표현해준다.

폰트 이름에 따움표 사용

폰트 이름에 특수기호가 들어가있다면 따움표를 사용하는게 좋다.

@font-face 커스텀 폰트 사용

• 폰트 페밀리 이름에 특정 폰트를 연결해 사용할 수 있다. 또한 문서를 렌더링하는데 꼭 필요한 폰트만 불러올 수 있는 용도로도 사용된다.

  @font-face {
    font-family: "SwitzeraADF";
    src: url("SwitzeraADF-Regular.otf") format("woff"), url(...); // 폭백 url를 콤마로 연결하여 사용할 수 있다.
  }
  

• 브라우저 마다 지원하는 폰트포멧이 틀리므로 폴백을 format() 기능과 함께 사용하여 대비하면 좋다.
• 사용하려는 폰트의 라이센스를 고려하는게 좋다.

커스텀 폰트를 쓸때는 플래시 현상을 염두해 두고 사용해야 한다.

• font-display 속성을 알고 있으면 도움이 된다.

  • (foit은 폰트가 다운로드 되기전에 폰트를 보여주지 않는다. 보통 브라우저의 기본 속성이다.)
  • (foout은 폰트가 다운로드 되기전에 다른 폴백 폰트를 보여준다.)

• <link rel="preload" 와 같이 사용하면 최대한 빨리 우선순위를 높여서 폰트 리소스를 다운로드 하게 해준다.

• 특정 도구를 사용하면 폰트에서 꼭 필요한 하위집합만 모아놓은 글꼴 지정하여 폰트파일을 생성할 수 있다.

기타 폰트 서술자

• font-face에 정의해 놓음으로서 해당 폰트 패밀리의 기본 상태를 정의할 수 있다.
  • font-style - 이탤릭 등 오블리큐등 폰트 눕힘 스타일
  • font-weight - 폰트 굵기
  • font-stretch - 글자폭
  • font-variant - 영문에서 소문자를 작은 대문자로 변경
  • unicode-range - 특정 언어에 특정 폰트를 사용하려 할때 사용

폰트 사이즈의 절대크기

font-size: xx-small // x-small, small, medium, large, x-large, xx-large

폰트 사이즈의 상대크기

• larger, smaller - 상속된 크기보다 약 1.2배수 크거나 작은 사이즈를 적용

퍼센트와 크기

• 퍼센트 크기는 상속 값을 기준으로 퍼센트로 계산한 값이 반영된다.
• 아래 두 예는 같은 크기이다.

  p.one (font-size: 60%;}
  p.two (font-size: 1.6em;}
  

소수점 계산

폰트사이즈는 브라우저마다 디스플레이 할때 소수점을 반올림 하는 방식이 모두 틀리다. (소수점은 디스플레이상 정확히 표현되지 않음을 의미)

길이 단위 사용

• 아래는 전부 같은 크기다.

  p.one {font-size: 36pt;}
  p.two {font-size: 3pc;}
  p.three {font-size: 0.5in;}
  p.four {font-size: 1.27cm;}
  p.five (font-size: 12.7mm;}
  

font-style

• oblique 폰트는 normal 수직 폰트를 그냥 기울인 것이고. italic 은 별도의 폰트이다.

font-kerning

• 문자와 문자 사이의 간격을 말하며 일부 지원하는 폰트에서만 동작한다.

font-feature

• 폰트의 기능을 저수준에서 제어할수 있다. 잘 사용하는 경우는 없고 오픈타입 폰트에서만 동작한다.

font-synthesis (파이어폭스에서만 작동)

• font-synthesis: none 을 설정하면 브라우저가 알아서 폰트에서 지원 안하는 이탤릭이나 볼드를 표현하기 위해 강제로 변형하는걸 막을 수 있다.

폰트 단축속성

• 속성을 순서대로 나열하는 방식으로 단축속성을 사용할 수 있다(구체적 사용법 생략)

시스템폰트

• 시스템에 사용되는 폰트 속성이 모두 한번에 적용된다. ex ) font: caption

  • caption - 아이콘 제목에 사용
  • status-bar 등등 나머지 설명 생략

• 모두 한번에 적용되며 특정 속성만 변경하려면 아래처럼 재정의 해야한다.

    button{ font: caption; font-stze: 1em; }
  

폰트매칭

css는 사용자가 정의한 폰트관련 속성에서 최대한 비슷한 것을 찾으려고 시도하며, 폰트매칭이라는 알고리즘을 통해서 작동한다.

• 페이지에 너무 많은 폰트를 사용하면 페이지가 무거워 질 수 있으므로 현명하게 사용해야 한다.

6. 텍스트 프로퍼티

text-indent

• 문단의 첫번째 줄에 들여쓰기 효과를 준다. (음수로도 설정 가능)`

  p {text-indent: 3em;}
  

text-align

• left, right, center - 설명생략
• start, end - 언어의 쓰는 방향에 따라 결정됨
• justify - 텍스트 사이에 공백이 있을 경우 양쪽으로 늘려서 정렬해준다
  • (명확하게는 브라우저마다 처리해 주는 방식이 틀리다)

text-align-last

• 요소에 마지막행에 있는 정렬을 다른 행과 다르게 정렬 할 수 있다.

line-height

• 텍스트 행의 베이스라인 사이의 최소거리를 정의할 수 있다.
• 보통 폰트 크기의 1.2배로 정의한다.

행 만들기

line-height의 값에서 font-size의 값을 뺀 크기를 리딩 합이라고 한다. 이 값은 음수가 될수도 있다.

리딩 을 반으로 나눈 값을 하프리딩 이라고 한다. 이 하프리딩을 콘텐츠 영역에 위와 아래에 적용하면 인라인 박스가 만들어진다.

여러개의 인라인 박스들이 모여서 라인 박스의 높이는 가장 높은 인라인 박스의 상단과 가장 낮은 인라인 박스의 하단을 감싸는 높이이다.

line-height 상속

line-height 의 값에 단위를 표기하면 변환된 실제 크기가 상속되지만, 단위 없이쓰면 상대값이 그대로 상속되므로 부작용을 막을 수 있다.

텍스트 세로정렬 vertical-align

• 이 속성은 상속되지 않는다.
• 기본값은 baseline이다.
• 속성값 설명
  • bottom - 인라인 박스의 하단을 라인박스의 하단에 맞춤
  • text-bottom - 인라인 박스의 하단을 라인박스의 텍스트 하단에 맞춤
  • up - 인라인 박스의 상단을 라인박스의 상단에 맞춤
  • text-up - 인라인 박스의 상단을 라인박스의 텍스트 상단에 맞춤
  • middle - 인라인박스의 중앙을 부모박스의 베이스 라인보다 살짝(살짝의 기준은 에이전트에 따라 틀림) 위로 맞춘다.
  • super - 에이전트가 알아서 판단해서 위로 올려줌
  • sub - 에이전트가 알아서 판단해서 아래로 내려줌
• 값을 퍼센트로 지정하면
  • 부모의 베이스라인을 기준으로 현재 인라인박스의 베이스 라인을 퍼센트로 위치 조정된다.
• 값을 px로 지정하면 베이스라인을 기준으로 위치조정 된다.

ward-spacing

• 단어 사이의 간격 (normal | 수치값)

letter-spacing

• 문자 사이의 간격 (normal | 수치값)

텍스트 변형 text-transform

• 대소문자 변형
  • uppercase, lowercase, capitalize, none

text-decoration

• 상속되지 않음
• underline, overline, line-through, blink(지원 중단하는 추세라고 함 크롬에서 안됨), none

text-rendering

• 텍스트를 렌더링 할때 무엇을 가장 중요하게 여길지 결정 (가독성 이나 속도나 선명도를 선택할 수 있다)
• auto | optimizeSpeed | optimizeLegibility | geometricPrecision

text-shadow

• 텍스트에 그림자 효과를 준다. 사용법 생략

white-space

• normal - 줄바꿈 문자는 공백으로 바뀌고 하나이상의 공백은 하나의 공백으로 바뀜 (nowrap과는 틀리게 자동줄바꿈 됨)
• nowrap - 줄바꿈 무시
• pre - 여러개의 공백을 무시하지 않고, 줄바꿈도 유지시킴, 자동 줄바꿈 안됨
• pre-wrap - pre와 비슷하지만, 자동 줄바꿈 됨
• pre-line - 자동 줄바꿈과 인위적인 줄바꿈을 모두 유지하지만 공백만 하나로 합침

tab-size

• 탭 하나를 스페이스 몇개로 취급할지 결정

hypens

• 줄바꿈 힌트로 하이픈을 사용할지 결정할 수 있음
  • .cl01 {hyphens: auto;} - 줄바꿈시 자동으로 하이픈을 붙여줌(브라우저마다 정밀한 동작이 다를 수 있다고 함)
  • .c102 {hyphens: manual;} - 기본값으로 css가 관여하지 않음
  • .cl03 {hyphens: none; } - 하이픈 제거됨

word-break

텍스트가 너무 길어서 한줄에 들어가지 않을때 자동으로 줄바꿈 해주는걸 소프트랩 이라고 하고 줄바꿈 문자와 br등은 하드랩 이라고한다.

word-break 는 소프트랩이 어떠한 조건에서 일어날지 컨트롤 할수있게 해준다.

• normal - 기본값으로 단어 사이에서 소프트랩이 일어난다 (한국어 같은 언어는 문자 하나를 단어로 취급한다고 함)
• break-all - 문자에 종류에 상관없 어느 문자 사이에서든 소프트랩이 일어난다
• keep-all - 문자 단위로 줄바꿈이 일어나지 않는다 (공백이 없는 문자열에서는 소프트랩이 일어나지 않음)

line-break

• 에이전트별로 동작이 명확하지 않다고 함 기본값은 auto로 알아서 해줌
  • auto - 상황에 따라 에이전트가 알아서 loose, normal, strict를 결정
  • loose - 가장 제한이 적은 규칙
  • normal - 제한이 적거나 엄격하지 않은 보통 규칙
  • strict - 엄격한 규칙

overflow-wrap (word-wrap 은 비표준)

• 줄바꿈 옵션을 전부 제대로 했는데도 텍스트가 넘칠때 이 속성을 break-word 로 하면 어쩔수 없는 경우 그냥 단어 중간이라도 개행 해준다.
• white-space 속성이 개행을 허용할때만 동작한다.

write-mode 쓰기모드

• 언어별로 글자를 쓰는 방향이 틀리며. css에서는 쓰기모드를 지원한다.
  • horizontal-tb - 가로방향 왼쪽에서 오른쪽 위에서 아래(기본값)
  • vertical-rl - 세로방향 위에서 아래로, 개행방향은 오른쪽에서 왼쪽으로
  • vertical-lr - 세로방향 위에서 아래로, 개행방향은 왼쪽에서 오른쪽

text-orientation 글자 방향 바꾸기

• upright - 세로방향
• sideaway - 가로방향
• mixed - 여러나라 문자가 섞여있을 경우 언어타입에 따라 에이전트가 알아서 변경

direction

• 브라우저가 알아서 lang 프로퍼티를 보고 설정해 주겠지만 알고 있으면 좋다.
  • *:Lang(ar), *:lang(he){ direction:rtl; }
• 텍스트의 방향과 관련하여 블록요소의 동작을 교정해준다.

unicode-bidi

• 유니코드에서 텍스트의 방향을 바꾸는 훨씬 안정된 방법.
• 디테일한 동작은 잘 설명 안되어 있어서 필요시 테스트 해봐야겠으나…
  • embed로 설정하면 direction에서 결정한 방향으로 설정된다. 기본값은 normal이며 정방향이다.

7. 레이아웃 기본

css는 모든 요소가 하나이상의 사각형 요소 박스를 생성한다고 가정한다.

• 레이아웃은 마진영역, 보더영역, 패딩영역, 콘텐츠영역 이 존재한다

블록박스, 인라인박스, 인라인블록박스

인라인박스는 블록박스의 자손이 될수 있지만 블록박스는 인라인박스의 자손이 될 수 없다.

• 블록박스(block) - 문단, 제목, div같은 줄바꿈 되어 세로로 쌓이는 요소
• 인라인박스(inline) - strong, span과 같은 텍스트라인에 가로로 쌓이는 요소
• 인라인블록(inline-block) - 내부적으로는 블록박스처럼 동작하고 외부적으로는 인라인박스처럼 동작하는 요소

박스 유형 변경 display 속성

• display: inline | block | inline-block

box-sizing

박스의 크기는 페이지 전체 레이아웃에 영향을 미친다

• 박스의 너비를 취급하는 방식을 결정한다.

  • box-sizing: content-box | padding-box | border-box

• content-box - padding 안쪽까지 인정

• padding-box - padding 까지 인정

• border-box - border 까지 인정

수평 레이아웃

• 가로 레이아웃에 관여하는 프로퍼티

  • margin-left, border-left, padding-left, width, padding-right, porter-right, margin-right

• auto 값 사용

  • auto값을 설정하면 부모박스의 너비에 맞 맞춰주는데 필요한 길이로 설정된다.
  • with 와 margin 만 auto로 지정할 수 있다.
  • 세 값이 모두 auto가 아니고 길이가 모자라면 margin-right값이 auto로 리셋된다.
  • width와 margin 모두 auto라면 margin은 0으로 설정된다.

• margin 값은 마이너스 값이 될 수 있다.

• 이미지 같은 다른 리소스로 대체되는 요소의 width 나 height값을 auto로 지정하면 원래 크기에 맞는 비율로 설정된다

세로 레이아웃

• 세로 레이아웃에 관여하는 프로퍼티

  • margin-top, border-top, padding-top, width, padding-bottom, porter-bottom, margin-bottom

• 기본 높이는 콘텐츠에 크기에 따라 결정된다.

• 콘텐츠의 크기가 박스의 높이보다 작다면 padding-bottom 이 생긴 것처럼 동작하게 된다.

  • 그 반대라면 박스의 overflow 속성에 따라서 동작하게 된다.

• height 와 margin 만 auto로 지정할 수 있다.

• margin 값을 auto로 하면 자동으로 0으로 지정된다(가로 레이아웃과는 다르다)

• height을 auto로 지정하면 컨텐츠의 높이와 같아진다.

세로 레이아웃의 auto 높이

• auto로 지정한 박스에 패딩이나 보다가 있다면 자식 박스의 마진까지 포함하도록 높이가 지정되고,
  • auto로 지정한 박스에 패딩이나 보다가 없다면 자식 박스의 컨텐츠 영역까지를 높이로 지정된다.

수직 여백 병합

• 수직으로 인접한 마진은 병합된다.
  • 위 아래의 마진중 절대값으로 계산하여 큰쪽만 적용되고 작은쪽은 사라진다.

인라인 요소

• 기본 용어 개념
  • 리딩 - line-height 에서 font-size값을 뺀 크기 인라인 박스의 폰트 위 아래로 붙은 공백의 크기
  • 인라인박스 - line-height의 크기와 같다
  • 라인박스 - 인라인 박스들이 모여서 만들어진 박스, 인라인박스들을 전부 포함시키는 박스 크기를 가진다
• 대체되지 않는 요소의 인라인박스의 보더 마진 박스는 라인박스의 크기에 영향을 미치지 않는다. (오직 line-height만 영향을 미침)
• img 요소와 같은 대체되는 요소는 요소의 보더, 마진 값이 인라인 박스에 영향을 미치고 부모 라인박스에도 영향을 미친다
• 대체되는 요소의 하단은 전체 라인 박스의 베이스 라인에 위치한다.
• 블록박스의 line-height값은 블록박스 자체에는 아무런 영향이 없지만 그 블록에 포함되는 인라인 박스에 상속되어 동작한다.

수직정렬

• vertical-align 속성을 사용해서 정렬할수 있다.
• line-height 값에 절대값을 주면 부작용이 있으므로, 폰트의 배율로 수치 단위 없이 써주는게 좋다.
  • (line-height 에 em을 붙이면 절대값으로 바꿔서 하위 요소에 상속되므로 주의해야한다.)
• 대체되지 않는 요소의 마진값은 라인박스의 수직높이에는 영향을 미치지 않지만 좌우에는 공간이 생기게 된다.

줄바꿈 방식 변경 box-decoration-break

• 인라인 박스의 라인이 길어져서 줄바꿈이 일어날때의 방식을 변경할 수 있다.
  • slice - 하나의 긴 박스를 칼로 잘라 아래로 내린듯이 개행된다.
  • clone - 새로운 라인을 위해 박스가 새로 생성하여 붙인듯이 개행된다.

인라인블록 요소

• 내부적으로는 블록박스처럼 동작하고 외부적으로는 인라인박스처럼 동작하는 요소
• width와 text-align 같은 블록 요소에서 사용할수 있는 속성을 적용하면서 다른 인라인 요소 처럼 라인박스의 흐름대로 처리된다.
• 인라인박스의 너비를 auto로 주면 컨텐츠가 차지하는 만큼이 너비만 갖게 된다.

flow 디스플레이

• 내부 디스플레이 타입과 외부 디스플레이타입을 나눠서 정의할수 있다.
  • block -> block flow
  • inline -> inline flow
  • grid -> block grid
  • inline-grid -> inline grid
  • flex -> block flex
  • inline-flex -> inline flex

8. 패딩, 보더, 외각선, 마진

너비와 높이

• 인라인 박스는 너비와 높이 속성을 적용해도 무시되야 정상이다.

패딩

• 기본적으로 배경은 패딩에 비쳐 보이지만 background-clip 속성을 사용하 배경이 패딩으로 확장되지 않게 할 수 있다.
• 패딩은 값 하나로 쓰면 좌 우 위 아래 전부 적용되지만 top right bottom left 순으로 각각 모든 값을 지정할수 있다.
  • padding: top right bottom left
• 값을 두개만 사용할경우 bottom 값은 top과 같게 되고 left값은 right값과 같게 된다.
• padding-right, left, top, bottom 과 같이 한쪽패딩만 적용할수도 있다.
• 퍼센트 값은 부모요소의 너비 값을 기준으로 계산된다.

인라인 요소의 패딩

• 인라인요소의 패딩은 줄 높이에는 영향을 주지 않는다.
• 하지만 대체되는 인라인 요소의 패딩은 높이에 영향을 준다.

보더

• border-style 의 기본값은 none(존재하지 않음)이다.
• 보더 색상의 기본값은 텍스트의 색상과 같다.
• 배경은 기본적으로 보더에 비쳐보인다.
  • (background-clip 과 같은 속성으로 배경색이 어디까지 확장될지 변경할 수 있다)

보더 스타일

• none, hidden, solid, dotted, dashed, double, groove
• p.aside{ border-style:solid dashed dotted solid; }
  • 위, 아래, 오른쪽, 왼쪽 각각 전부 다른 스타일로 정의할 수 있다.
• border-right-style, border-top-style와 같이 사용할수도 있다.

border-width

• 보더 너비에는 퍼센트값을 사용할 수 없다
• 보더 두께 설정 thin, medium, thick, 12px

border-color

• 보더 색상 정의, border-top-color와 같이 각 변별로 정의 가능하며 단축속성으로도 정의 가능하다.
• 투명한 보더는 값을 transparent로 설정하면 된다.

보더 단축 속성

• 보더 두께, 보더 스타일, 보더 색상은 값 키워드를 나열하는 방법으로 단축속성으로 표현 가능하다.
  • border: 1px solid red

border-radius

border-radius 는 보더와 배경을 그리는 방식만 바꿀뿐 콘텐츠 영역 자체는 여전히 사각형이다.

• 해당 값을 반지름으로 하는 곡선으로 모서리를 만들어 준다.
• 퍼센트로 지정할 경우 요소의 너비, 높이에 따른 퍼센트 비율로 값이 정해진다.
• 다른 속성들처럼 border-radius: top left right bottom 으로 설정 가능하다.

더 복잡한 모서리

• 모서리의 좌우와 / 위아래에 각 각 다른 크기의 반지름을 적용하는 법 (아래 두 예는 같은 결과가 나온다)
  • #example{ border-radius: 3ch / 1ch; }
  • #example{ border-radius: 3ch 3ch 3ch 3ch / 1ch 1ch 1ch, 1ch; }

개별 모서리 곡선 프로퍼티

• border-top-left-radius 와 같은 속성을 사용하여 개별 적용 가능하다.

border-image-source

• 보더 모서리에 적용할 이미지 리소스를 연결할 수 있다.

border-image-slice

• border-image-source 에서 지정한 이미지 리소스를 각각의 모서리에서 어떻게 특정 부분을 잘라 사용할지 지정할 수 있다.

  border: 25px solid;
  border-image-source: url(i/circles.png);
  border-image-slice: 33.33%; // 퍼센트로 사용하는게 좋다.
  

border-image-width

• border-image-slice는 이미지를 자르는 방법을 정의하고, border-image-width는 자른 이미지를 화면에 표시하는 크기를 정의한다.

border-image-outset

• padding을 쓰지 않고도 보더와 컨텐츠 영역이 겹치지 않도록 보더를 밖으로 밀어낼 수 있는 속성

border-image-repeat

• stretch | repeat | round | space
• 보더 이미지의 크기가 박스보다 모자랄 경우 어떻게 표시할지 결정할 수 있다.

단축속성을 사용할수있다.

• 내용생략

외각선

• 사용자가 어떤 요소를 선택했을때 브라우저 에이전트에서 그려주는 선
• 와각선은 화면 레이아웃에 전혀 영향을 주지 않는 속성이다.

outline-style

• auto | solid, dotted, double, dashed, groove, ridge 등등

outline-width

• thick, thin, medium, none

outline-color

• 색상코드 또는 invert(현재 지원하는 브라우저 업음)

margin (마진)

• 다른 요소가 존재할수 없는 요소와 요소 사이의 부모요소의 배경이 보이는 공간을 말한다.
• 기본값은 0이어야 하지만, 실제로는 브라우저 마다 다른 기본값이 존재한다.

퍼센트 마진

• 다른 속성과 마찬가지로 부모 영역의 컨텐츠 너비를 기준으로 동작한다.

단면 마진 프로퍼티

• border-bottm 과 같이 단면 마진 속성을 사용할 수 있다.

마진 병합

• 블록박스의 상하 마진은 병합된다.
• 세로 레아아웃의 auto 높이를 지정할때 패딩이나 보더를 기존으로 높이가 설정되므로 마진값이 가시적으로 보이지 않아 헷갈리는 경우가 있으므로 유의해야 한다.

마이너스 마진

• 내용생략

9. 색깔, 배경, 그라디언트

전경색

• 요소의 텍스트나 보더 색상을 전경색이라고 한다.

• color: red와 같이 color속성을 이용해 바꿀수 있다.

• border-color 속성은 color 속성을 덮어쓰게 되면서 보더 색상을 바꿀 수 있다.

  • (border-color: currentcolor; 으로 숨겨진 default속성이 있다고 생각하면 편하다)

• 폼요소의 전경색은 에이전트마다 어떻게 적용되어 보일지 다를 수 있다.

• color 프로퍼티는 하위 요소로 상속된다.

배경

backgrond-color

• 설명생략

background-clip

• content-box | padding-box | border-box | text
• 배경이 표시될 영역을 패딩영역이나 컨텐트 영역으로 제한할 수 있다.
• text 영역에만 배경이 적용되도록 제한할수도 있다.

background-image

• body{ background-image:url(bgz3.gif); }

• 배경이미지는 항상 배경색상과 함께 쓰는것이 좋다.

  • 이미지를 못불러와도 적어도 텍스트는 읽을수 있도록 대비된다.

background-position

• 특별한 경우 음수값으로도 세팅이 가능하다.
• 포지션을 절대값으로 주면 위치의 기준은 요소의 왼쪽 상단이 된다.
• 포지션을 퍼센트 값으로 주면 요소의 위치와 이미지의 위치에 전부 적용된다.
  • (0%나 100% 로 줘도 배경이미지가 요소 밖으로 튀어 나가지 않는다.)
• bottom, top, left right 속성을 이용하면 포지션이 시작되는 기준값을 바꿀 수 있다.
  • background-position: right 33% bottom 30px;

background-origin

• 배경이 시작되는 위치를 박스의 어떤 기준으로 할지 지정할수 있다.
  • border-box | content-box | padding-box

background-repeat

• repeat-x
• repeat-y
• repeat
• no-repeat
• space - (패턴이 딱맞게 들어갈만큼 채우고 나머지는 공백처리)
• round - (space와 비슷하지만 남는 공간은 늘려서 꽉채움)

background-attachment

• scroll - 기본값
• fixed - 배경 이미지가 뷰포트 전체 영역을 기준으로 고정됨
• local - 배경과 스크롤이 함께 움직임

background-size

• 배경 이미지 크기 변경 가능
• cover와 contain도 가능하며 cover의 경우는 이미지가 요소 밖으로 벗어나더라도 이미지를 요소로 꽉채워주며, contain은 이미지가 요소밖으로 벗어나지 않는 내에서 꽉 채워줌

backgroud 단축속성 가능

• 내용 생략

다중 배경

• 아래와 같이 여러 레이어의 배경을 겹쳐서 표현 가능하다.

section {
  background-image: url (bg01.png), url(bg02.gif), url(bg03.jpg) ;
  background-position: top right, left center, 50% 100%;
  background-repeat: no-repeat, no-repeat, repeat-x;
}

선형 그레이디언트

• 그라이디언트는 css가 만들어 주는 이미지이다.

• 예1) 첫번째 인자는 그라디언트의 방향이고, 색을 여러개 지정 가능하며, 각 색마다 중단점을 지정할 수 있다.

  #spectrum {
    background-image: linear-gradient(
      90deg, // to right 와 같은 값이다 180deg to bottom과 같다.
      red,
      orange 25px,
      yellow 50x,
      green 75x,
      blue 100px,
      indigo 125px,
      violet 150px);
  }
  

• 중단점의 위치를 잘 활용하면 스프라이드 효과를 낼수도 있다.

• 그라디언트 중단점 단위는 한가지 단위로 통일해서 쓰는게 여러모로 좋다.

방사형 그레이디언트

• 첫번째 인자가 circle일 경우 요소크기와 상관없이 타원형으로 방사된다. 정의 안했을때 기본값은 ellipse

• 예1) 여러 색상에 서로 다른 중단점이 있는 경우

  #grad {
    background-image: radial-gradient(red 5%, yellow 15%, green 60%);
  }
  

• 예2) 여러 색상에 서로 다른 중단점이 있는 경우

  #grad {
    background-image: radial-gradient(red 5%, yellow 15%, green 60%);
  }
  

• 예3) 중심좌표에서 특정 거리옵션까지 방사

  • background: -webkit-radial-gradient(60% 55%, closest-side, red, yellow, black);
  • 거리옵션
  • closest-side - 중심 좌표에서 가장 가까운 모서리까지 방사합니다.
  • farthest-side -중심 좌표에서 가장 먼 모서리까지 방사합니다.
  • closest-corner - 중심 좌표에서 가장 가까운 꼭짓점까지 방사합니다.
  • farthest-corner - 중심 좌표에서 가장 먼 꼭짓점까지 방사합니다. (기본값)

repeating-linear-gradient 반복형 선형 그라이디언트

• 사용법 생략

repeating-radial-gradient 반복형 방사형 그라이디언트

• 사용법 생략

box-shadow

• 박스 요소에 그림자를 생성함 (가로, 세로, 그림자가 번지는 정도, 색상)
  • box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

10. 플로트와 셰이프

float: left | right | none

• 플로트란 어떤 요소를 강제로 한쪽으로 정렬하고, 다른요소들은 플로트된 요소 주위로 흐르게 만드는 기능을 말한다.
• 플로트된 요소의 마진은 세로병합되지 않는다.
• 대체되지 않는 요소를 플로팅 할때는 반드시 너비를 정해줘야 한다, 그렇지 않을 경우 너비 0으로 취급된다.
• 플로팅된 요소는 원래 어떤요소였는지에 상관없이 항상 블록요소이다.

clear

• 예를들어 h3의 태그에 왼쪽요소에는 float: left로 된 요소가 없어야 할때 아래처럼 할 수 있다.
  • h3{ clear: left;} // left | right | both

쉐이프

• float 박스를 사각형이 아닌 다른 형태로 만들 수 있다.

shape-outside

• 이미지를 셰이프로 사용하려면 이미지에 투명한 영역이 있어야 한다.
• 이미지의 불투명 부분을 따라서 다른 요소들이 흐르도록 만든다. img.lunar {float: left; shape-outside: url (moon.png) ;}

인셋 쉐이프

• 쉐이프 라인 안쪽으로 2.5em 들어가도록 쉐이프 라인을 새로 만든다.
  • shape-outside: inset(2.5em) padding-box;
• 쉐이프 모서리를 반지름 5px로 둥글게 만들고 싶을때.
  • shape-outside:inset(7% round 5px);
• 원 쉐이프

  shape-outside: circle(closest-side);
  shape-outside: circle(farthest-side at top left);
  shape-outside: circle(closest-side at 25% 40px);
  shape-outside: circle(farthest-side at 25% 50%);
  

• 다각형 쉐이프나 shape-margin도 넣을 수 있다.

11. 포지션

• 요소 박스의 위치를 지정하는 법
  • static - 기본값으로 문서 흐름에 일부가 되어 동작한다.
  • absolute - 문서의 흐름에서 완전히 빠져나와 포함하는 블럭을 기준으로 배치된다.
  • relative - 포지션이 지정되지 않을경우에는 원래의 기분 흐름대로 동작하고, 포지션을 지정할 경우 현재 위치를 기준으로 동작한다.
  • fixed - absolute 처럼 동작하지만 포함하는 블록은 뷰포트가 된다
  • sticky - 일반적인 요소처럼 동작하지만, 특정 조건에서 absolute처럼 동작한다.

포함하는 블록 (포지션의 위치기준이 되는 블록을 말한다)

• 포지션 값이 relative나 static인 요소의 포함하는 요소는 가장 가까운 블록레벨 요소가 된다.
• 포지션 값이 absolute인 요소의 포함하는 요소는 position 값이 static이 아닌 가장 가까운 조상요소가 된다.

overflow

• 포함하는 요소가 요소를 전부 담지 못할경우 overflow 속성을 scroll | visible | hidden 으로 줌으로서 다양하게 처리할 수 있다.

visibility

• 가시성 제어 visible | hidden | collapse * display 와는 틀리며 display: none은 완전 문서에서 없어지지만 visibility: hidden은 존재는 하지만 opacity: 0 인 것처럼 동작한다.

absolute 포지션

• 포지션이 absolute 일때 top, left, bottom, right 와 같은 값을 auto로 지정하면, 해당요소가 static 상태일때의 원래 위치에 놓이게 된다.

z-index

• 여러 요소간에 포지션이 겹칠 경우 어떤 요소가 앞이나 뒤에 높은 우선순위로 보이게 될지 결정해준다.(음수도 가능하다)
• (요소의 포지션이 static일때는 동작하지 않는다)
• 주의할 점은 조상들 중에 z-index가 있으면 z-index 가 있는 조상 요소를 기준으로 z-index가 동작한다.

fixed 포지션

• 사용법 생략
• 부모 요소가 transform 요소를 사용했다면 정상 동작하지 않을수 있음에 유의해야한다

relative 포지션

• 사용법 생략

sticky 포지션

• 자신의 부모 요소 안에서만 동작한다.
• 부모요소나 조상요소에 overflow 속성을 정의하였다면 스티키가 동작하지 않음에 유의해야한다

12. 플랙서블 박스 레이아웃 display: flex

• 손쉽게 요소내 공간을 분해하고 정렬할 수 있다.
• 특정 요소에 display: flex나 display: inline-flex를 정의하면, 그 요소는 플렉스 컨테이너로 동작하게 된다.
• 플렉스 컨테이너의 자식 요소들을 플렉스 아이템이라고 한다.

flex-direction

• write-mode 나 dirction 설정에 따라 방향이 틀려질수 있다. 아래는 보통의 기본 방향일 경우이다.
  • row - 수평으로 나열
  • row-reverse - 수평 역순으로 나열
  • column - 수직으로 나열
  • column-reverse - 수직 역순으로 나열

flex-wrap

• flex-wrap: nowrap | wrap | warp-reverse // wrap 또는 wrap-reverse 로 개행 방향을 변경할수 있다.
• 플랙스 컨테이너를 한줄짜리로 제한할지, 여러 줄이 될 수 있도록 할지 결정한다.

flex-flow

• flex-dirction과 flex-wrap 속성이 합쳐진 단축 속성, 정의 순서는 상관없다.
  • flex-flow: row-reverse wrap;

justify-content

• 아이템들이 메인축을 기준으로 어떻게 정렬할지 결정
  • flex-start - 축 시작점 부터 정렬
  • flex-end - 축 종료점 부터 정렬
  • center - 가운데 정렬
  • space-around - 각 아이템의 둘레에 균등한 마진을 준것처럼 정렬
  • space-between - 축의 처음과 끝이 꽉차도록 균등하게 정렬
  • space-evenly - 모든 공간이 균등하게 나눠지도록 정렬 (space-around의 좌우 종이마진이 있는것 처럼)

align-items (한줄 내에서 아이템들 간의 정렬)

• (요소의 마진이나 크기 값이 지정되어 있으면 예상대로 보이지 않을 수 있으므로 유의해서 사용해야 한다)
• 아이템들이 크로스축을 기준으로 어떻게 정렬될지 결정
  • flex-start - 크로스 축 시작점 부터 정렬
  • flex-end - 크로스 축 끝점 부터 정렬
  • center - 크로스축 가운데로 정
  • baseline - 모든 플랙스 아이템의 베이스라인중 시작점과 가장 먼 베이스라인을 기준으로 정렬
  • stretch - 양 끝으로 늘려버림

align-content (여러 라인간의 정렬)

• 크로스 축의 남는 공간을 어떻게 처리할지 결정
  • flex-start | flex-end | center +space-between | space-around | space-evenly | stretch

플렉스 아이템

• 플렉스 아이템의 마진은 병합되지 않는다.
• 플렉스 아이템은 float과 clear 를 무시한다.
• 플렉스 아이템에 min-width는 auto다.
  • auto인 경우 인라인블럭 처럼 동작해서 너비를 컨텐츠 너비에 맞춰준다.

align-self (플렉스 아이템)

• 플랙스 아이템에 정의하여 align-items의 값을 덮어쓸 수 있다.
• auto로 정의하면 부모값을 따른다.

flex (플렉스 아이템 단축속성)

• flow: flexGrow flexShrink flexBasis
  • 아이템 요소에 width나 height이 있더라고 flex 속성을 우선으로 크기가 결정된다.
• flex: initial -> flex: 0 1 auto
• flex: auto -> flex: 1 1 auto
• flex: none -> flex: 0 0 auto
• flex: 3 -> flex: 3 0 0

flex-grow (플렉스 아이템)

• 컨테이너에 여유공간을 배분할때 아이템 하나가 어떤 비율로 여유공간을 배분 받을지 결정한다.
• 값이 0일 경우 기본 요소의 흐름대로 갖게되는 width값이 유지된다.
• flex-grow나 flex 속성을 지정하지 않았다면 확대인자의 기본값은 0이다 (잘못적은게 아니고 0이 맞다).
• flex 속성을 지정했지만 flex-grow에 관한 값을 지정하지 않았다면 기본값은 1이다.

flex-shrink (플렉스 아이템)

• 컨테이너가 아이템 전체를 담을 공간이 없을때 아이템 하나가 어떤 비율로 작아질지 결정한다.
• flex-shrink나 flex 속성을 지정하지 않았다면 축소인자의 기본값은 1이다.
• flex-shrink 값이 0이면 컨테이너 박스가 줄어들어도 아이템은 축소되지 않는다.

flex-basis (플렉스 아이템)

• auto | content | px or percent
• 기본값 auto인 경우 요소에 너비를 명시적으로 정해놓았다면 그 너비를 따르고 아닌 경우 컨텐츠의 너비가 된다.
• content는 거의 모든 브라우저에서 지원하지 않는다고 함
• 이 값이 0이면 flex-grow나 shrink 값에 따라 너비를 배분할때 컨테이너의 전체 너비를 기준으로 배분하게 된다.
• 이 값이 지정되어 있다면 전체 컨텐츠 너비에서 이 값을 제외한 여분의 값이 너비 배분에 사용된다.
• flex나 flax-basis 모두 정의 되지 않았다면 이 값의 기본값은 auto이다
• flex를 선언했지만 flax-basis를 선언하지 않았다면 이 값의 기본값은 0이다.

order (플렉스 아이템)

• 아이템들의 출력 순서를 정할 수 있다.
• 기본값 0

13. 그리드 레이아웃

• 행과 열을 표현하는 테이블보다 더 강력하고 다재다능한 레이아웃
• flex는 행과 열을 개수에 상관없이 유연하게 배치할수 있지만, grid는 행과 열의 정확한 교차점을 중심으로 배치한다.
• flex와 grid는 사용용도가 틀리므로 알맞는 곳에 사용해야 한다.
• grid의 마진은 종이 마진이 아니다
• grid 레아아웃은 다른 일반 블록 레벨이 아니다. 하지만 일반 적으로 블록요소와 같이 표현된다.
• float 요소와의 관계에서는 float 요소 밑으로 들어가지 않고 인라인 요소처럼 float요소 주위를 흐른다.
• 그리드라인, 그리드트랙, 그리드셀, 그리드영역 이라는 개념으로 표현된다.

너비가 고장된 그리드 트랙 (grid-template-columns, grid-template-rows)

/* 컬럼의 크기를 지정하는 예 */
#grid {
    display: grid;
    grid-template-columns: 200px 50% 100px;
}

/* 컬럼에 크기와 이름을 지정하는 예 */
#grid {
    display: grid;
    grid-template-columns: [start col-a] 200px [col-b] 50% [col-c] 100px [stop end last];
}

/* grid-template-rows를 이용해 행 표시된 그리드라인에도 너비와 이름을 지정한 예 */
#grid {
    display: grid;
    grid-template-columns: [start col-a] 200px [col-b] 50% [col-c] 100px [stop end last];
    grid-template-rows: [start masthead] 3em [content] 80% [footer] 2em [stop end];
}

/* grid-template-rows를 이용해 특정 행에 minmax 속성을 이용하여 최대 높이 최소 높이값을 저정한 예 */
/* minmax 대신 calc 를 사용하는게 유용할수도 있음 */
/* 높이값을 지정할때는 까다로울수 있기때문에 유의 해야함 */
#grid {
    display: grid;
    grid-template-columns: [start col-a] 200px [col-b] 50% [col-c] 100px [stop end last];
    grid-template-rows: [start masthead] 3em [content] minmax(3em, 100%) [footer] 2em [stop end];
}

플랙서블 그리드 트랙 (grid-template-columns, grid-template-rows)

• grid-template-columns: 1fr 1fr 1fr 1fr; - 균등하게 배분
• grid-template-colums: 15en 1fr 10% - 때에따라 섞어써도 유용하게 사용할 수 있음
• max-content나 min-content 를 사용하면 유용할수 있다.
• `fit-content도 알아두면 좋다
  • (매개변수가 필요하며 매개 변수는 길의의 최대값을 정하는 것이며, 하지만 max-content값을 넘어갈순 없다.)`
    • fit-content(argument) => min (max-content, max(min-content, argument))

라인 반복 (repeat)

• 라인 반복 예

#grid {
    display: grid;
    grid-template-columns: repeat(10, 5em 1fr 1fr) 2em;
}

• 컨테이너가 채워질때까지 반복하기

`grid-template-rows: repeat(auto-fill, [top] 5em [bottom]);`

• 템플릿 속성에 자동 채우기 반복 옵션은 하나만 쓸수 있다. 여러개는 안됨
• (하지만 일반 반복과, 자동반복은 섞어서 쓸수 있다)
• auto-fit 값을 auto-fill 대신 쓸수 있으며 채우고 남은 공간이 있을경우 처리하는 방식이 틀려진다.
  • auto-fix은 가용 범위내에서 최대한 너비를 늘려서 채우려고 하고, auto-fill은 아이템의 갯수로 채우려고 한다.

grid-template-areas

• 그리드 영역이다. 그리드 라인과는 틀리다.
• 그리드 영역을 문자열 표시 방식으로 정의할수 있다.

grid-(row | column)-(start | end) (연결하기)

• 음수로도 세팅 가능하다.
• end 값을 생략하면 start값의 다음 라인이 자동으로 선택된다.

.one {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 4;
}
.two {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 5;
    grid-column-end: 10;
}
.three {
    gria-row-start: 4;
    grad column-start: 6;
}

• span값을 사용하면 시작 라인에서 특장 값 만큼 사용하겠다는 의미로 사용된다(span값에 음수는 쓸 수 없다)

.two {
    grid-row-start: 1;
    grid-row-end: span 2;
    grid-column-start: 5;
    grid-column-end: span 5;
}

• 라인에 이름이 붙어 있다면 이름으로도 세팅 가능하다.
• 같은이름이 여러개 반복되는 경우 같은 이름을 사용하는 행이나 열중 몇번째인 것을 선택할지도 세팅 가능 하다.

/* 이름이 cal-A인 3번째 라인에서 시작하여,  그지점부터 cal-A 를 두번 더 만날때까지를 크기로 세팅 */
grid-column-start: col-A 3; grid-column-end: span 2 col-A;}

grid-(row | column) (연결하기 단축속성)

• start와 end를 한줄로 표현

#grid {
    display: grid;
    grid-template-roms: repeat(10, [R] 1.5em):
    grid-template-columns: 2em repeat(5, [col-A] 5em [col-8] 5em) 2em;
}
.one {
    grid-row: R 3 / 7;
    grid-column: col-B / span 2;
}
.two {
    grid-row: R / span R 2;
    grid-column: col-A 3 / span 2 col-A;
}
.three {
    grid-row: 9;
    grid-column: col-A -2;
}

• 슬래시 두번째 값을 생략할 경우 auto로 동작 (auto는 보통 1이고 이름이 지정된 경우는 같은 이름의 다음라인까지 확장된다.)

grid-row: 2;
grid-row: 2 / auto;

grid-column: header;
grid-column: header / header;

• grid-row 나 grid-column에서는 라인명이나 영영명을 전부 사용할수 있지만 헷갈려서 오동작 버그가 생길수 있으므로 구분해서 사용하는게 좋다.

암시적인 그리드 라인

• 가급적 명시적인 그리드 라인을 사용하는게 좋다.
• template 로 그린 라인의 범위를 넘어서는 값으로 연결할 경우 암시적인 라인이 생긴다.
• 확장은 명시적인 그리드 라인에서 시작된다. 암시적인 라인이 있을경우 명시적인 라인의 값을 찾아서 그 값부터 시작된다.
  • (암시적인 라인이 있을경우 확장값을 사용하지 않는게 정신 건강에 좋을것 같다)

에러처리

사용자가 start, end에 배치할수 없는 이상한 값을 세팅할경우 브라우저는 알아서 정상적인 값으로 바꿔서 세팅해주므로 알아두고 혼란에 빠지는 상황이 없도록 하자.

• 예를들면 대표적으로 start 와 end값이 크기가 start가 더 클경우 말도 안되는 값으로 판단하여 알아서 두 값을 바꿔준다.

grid-area

• 행과 열을 사용한 그리드 연결 외에 영역을 사용할 수도 있다.

grid-area 요소와 그리드 영역 연결 예

#grid {
    display: grid;
    grid-template-areas:
        "header header header header"
        "leftside content content rightside"
        "leftside footer rooter footer";
}

#masthead {grid-area: header;}
#sidebar {grid-area: leftside;}
#main frid-area: content;}
#navbar {grid-area: rightside;}
#footer {grid-area: footer;}

grid-area 요소와 그리드 라인 연결 예

• grind-area: row-start / col-start / row-end / col-end 으로 반 시계방향으로 정의한다.

• 그리드 라인의 이름이 그리드 영역과 일치하면 그 값은 -start 나 -end 로 대치되므로 아래는 전부 같은 규칙이다.

  grid-area: footer;
  grid-area: footer / footer / footer / footer;
  grid-area: footer-start / footer-start / footer-end / footer-end;
  

그리드 아이템 겹침

• 그리드 아이템은 겹칠수 있다.

grid-auto-flow

• 그리드가 채워지는 방향을 선택할수 있다. flex레이아웃의 dirction 과 비슷하다.

  #grid {
      display: grid;
      width: 45em;
      height: 8em;
      grid-auto-flow: row; /* 또는 column */
  }
  

• dense 키워드를 사용하면 빈공간이 생길경우 더 뒤에나오는 작은 아이템들로 채워 넣을 수 있다.

  • grid-auto-flow: row dense
  • grid-auto-flow: dense column

grid-auto-rows, grid-auto-columns

• 암묵적인 그리드 효과로 인해 추가되는 트랙의 크기를 원하는 대로 조절할 수 있다.

grid 단축프로퍼티

• 단축 속성을 나중에 정의하면 다른 프로퍼티를 덮어쓸 수 있으므로 단축속성은 항상 먼저 정의해야 한다.
• 단축속성 예

grid: 3em 1fr 5em / 2em 3fr minmax(10em,1fr) 2em; /* 행 / 열 순으로 정의 */

• 단축속성 예 template-area 함께 쓴 예

grid:
    "header header header header" 3em
    ". content sidebar ." 1fr
    "footer footer footer footer" 5em /
    2em 3fr minmax(10em, 1fr) 2em;


/* 위와 동일하다 */
grid-template-areas:
    "header header header header"
    ". content sidebar ."
    "footer footer footer footer";
grid-template-rows: 3em 1fr 5em;
grid-template-columns: 2em 3fr minmax(10em, 1fr) 2em;

• 단축속성 예 grid-auto 타입 예

#layout {
  grid: dense rows 2em / minmax(1em, 3em);
}


/* 위와 동일하다 */
#layout {
  grid-auto-flow: dense rows;
  grid-auto-rows: 2em;
  grid-auto-columns: minmax(1em, 3em);
}

grid-row-gap, grid-column-gap

• 트랙 사이에 공간 크기를 지정할 수 있다.
• 단축속성 grid-gap: row-gap / column-gap

정렬과 그리드

• justify-content - 가로 방향 전체 정렬

• justify-items - 가로 방향 아이템간의 정렬

• justify-self - 가로 방향 아이템 하나의 정렬

• align-content - 세로 방향 전체 정렬

• align-items - 세로 방향 아이템간의 정렬

• align-self - 세로 방향 아이템 하나의 정렬

order

flex와 마찬가지로 드려지는 순서를 결정할수 있으며 order는 그려지는 순서 뿐만 아니라 z-index와 같은 효과를 낼 수 있다(스택 순서는 그냥 z-index만 사용해도 동작한다).

14. 테이블 레이아웃

• 현재는 잘 사용 안하며, 자주 사용해봐서 익숙하므로 패스

15. 리스트와 생성된 콘텐츠

list-style-type

• display 값이 list-item인 요소에만 사용할 수 있다.
• 리스트의 머리 스타일 - 엄청 많음
• list-style-type 값에는 임의에 문자열을 세팅할수 있다.

list-style-image

• 이미지 및 그레이디언트 이미지 생성도 가능하다.

list-style-position

• inherit
• inside - 마커가 컨텐츠 안에 위치
• outside - 기본값 마커가 컨텐츠 밖에 위치

list-style

• 단축속성 - 사용법 생략ㅓㅓ
• 들여써지는 방식은 브라우저마다 기본 스타일이 margin-left padding-left로 틀릴수 있으니 변경할때 유의해야 한다.

생성된 컨텐츠

• ::before, ::after 선택자 사용
• 대상인 요소의 속성을 상속 받는다.
• content 속성에는 이미지 텍스트를 넣을 수 있고 attr 속성을 이용해서 dom에 있는 애트리뷰트 값을 가져와서 사용할수도 있다.
• quote 속성을 정의해 놓고 content속성에서 사용하는 방법도 있다.

  /* .quote {quotes: '\201C' '\201D' '\2018' '\2019';} */
  /* 중첩되게 쓰면 중첩되는 태그에서는 다음 창례에 있는 quete를 사용하게 된다 */
  .auote { quotes: '"' '"' } 
  .quote::before {content: open-quote;}
  .quote::after {content: close-quote;}
  

카운터

• 아래와 같이 동작한다

/*
1. The Secret Life of Salmon
1.1. Introduction
1.2. Habitats
1.2.1. Ocean
*/

h1 {
    counter-reset: section subsec; // 변수처럼 세팅 가능하다
    counter-increment: chapter; // 상위에서 정의 된 값을 증가시킨다
}
h1::before {
    content: counter(chapter) ". "; // 값을 사용한다. 카운터의 두번째 인수를 사용하면 숫자 외에 다른 스타일로도 가능하다.
}
h2 {
    counter-reset: subsec;
    counter-increment: section;
}
h2::before {
    content: counter(chapter )"." counter (section) ". ";
}
h3 {
    counter-increment: subsec;
}
h3::before {
    content: counter(chapter) "." counter (section) "." counter(subsec) ". ";
}

@counter-style 최근 새로나왔으며 이걸 사용하면 위에처럼 복잡하게 안해도 된다고 한다.

• 커스텀 카운트 스타일을 정의하는 새로운 방법이다. 아래처럼 사용 가능하다
• (옵션도 엄청 많고 복잡하지만 자주 사용하지 않으므로, 자세한 속성이나 사용법은 생략)

@counter-style emojiverse {
    system: cyclic;
    symbols: \sadg \svae \sdgs \sdg;
    prefix: '~';
    suffix: '!';
}
ul.emoji {list-style: emojiverse;}

16. 트랜스폼

• transform 속성을 사용한다.
• 블럭 속성의 요소에만 동작한다.
• 좌표계는 카테르시안 좌표계와 구면 좌표계가 쓰인다. 각각 2차원 3차원이다.
• 함수들을 정의할때 순서가 바뀌면 결과도 크게 달라질수 있다.
  • (rotate와 같은 경우 회전시켜버리면 좌표계의 방향도 회전에 따라 바뀌어 버리기 때문이다)
• 속성은 누적되지 않지만, 해당 요소에 트랜지션이 적용되어 있을때만 누적된다. 나머지의 경우는 덮어쓰는 방식으로 동작한다.
• transform에 사용할 수 있는 함수의 개수는 21가지가 있다.
  • translate translateX translateY translateZ translate3d
    • Z에는 퍼센트 값이 허용되지 않는다.
    • 3d값에는 인수에 폴백값이 없으므로 전부 정의 해야한다.
  • scale scaleX scaleY scaleZ scale3d
    • 일반 요소에는 깊이가 없으나, 회전된 일반요소는 깊이가 생기므로 Z값이 유효해진다.
    • 3d 값을 쓸때는 전부 정의해야한다.
  • rotate rotateX rotateY rotateZ rotate3d
    • rotateZ는 Z축을 중심으로 회전하므로 rotate와 같다.
    • 3d의 경우 4개의 인자가 필요하며, 앞의 3개의 인자는 최전축을 결정하는 xyz에 대한 백터값이고 마지막 인자의 값은 각도이다.
  • skew skewX skewY
    • 요소 기울기를 결정 z값은 존재하지 않음
  • perspective
    • 원근감 - 회전으로 원근감이 존재하는경우 이 값이 크면 원근감이 강조된다.
    • 이 값은 순서상 원근감이 필요한 함수를 적용하기 전에 가장 먼저 적용해놔야 한다.
  • matrix matrix3d
    • 행렬 변환을 이용한 특수 효과를 줄 수 있다.

transform-origin

• 변형을 위해 좌표계를 사용할때 원점이 되는 기준점을 변경할 수 있다.
• x, y 퍼센트 값으로 지정한다.

transform-style

• 값을 preserve-3d 으로 변경하면 3d 공간에 있는것처럼 요소를 표현할 수 있다
• 하지만 특정 속성은 이 값을 다시 flat으로 덮어 쓰므로 주의해야한다.
  • overflow: visible
  • filter: none
  • clip: auto
  • clip-path: none
  • mask-image: none
  • mask-border-source: none
  • mix-blend-mode:normal

perspective() 외에 perspective 속성으로 정의할 경우

• perspective() 함수는 이 함수가 적용되는 요소에 투시도를 준다.
• perspective 속성은 자식 요소 전체에 적용되는 투시도를 만든다.

perspective-origin

• 투시도 원점이동 (내용 생략)

backface-visibility

• 뒷면 다루기 - 뒷면을 보이거나 숨기는 효과를 사용하면 재미있는 교과를 내는 것도 가능하다.

17. 트렌지션

• 요소의 특정 속성이 시간에 걸쳐서 어떻게 바뀔지 정의할 수 있다.
  • trainsition - 단축속성 (내용생략)
  • transition-property - 어떤 속성에 적용할지 결정 ('all’도 가능)
  • transition-duration - 몇초에 걸쳐서 애니메이션이 보여질지 결정
  • transition-timing-function - 애니메이션 속도에 그루브를 줄수 있다. (cubic-bezier() 함수를 이용하면 그루브를 커스텀할수 있다)
  • transition-delay - 애니메이션이 일어나기전에 대기시간을 결정한다.
    • (마이너스 값을 지정하면 애니메이션이 중간지점부터 동작한다).

속성마다 다른 옵션을 적용하고 싶을때 예

transition-property: all, border-radius, opacity;
transition-duration: 1s, 2s, 3s;

특정상황에서만 트랜지션을 사용하고 싶지 않을때

• transition-property:none

트랜지션 이벤트

• 트랜지션이 끝나면 transitionEnd 이벤트가 일어난다.
• 하나의 속성에 트랜지션이 걸려있다고 해도 여러번 이벤트가 일어날수 있음에 유의해야한다.

document.querySelector('div').addEventListener('transitionend', function (e) {
    console.log(e.propertyName, e.propertyElement, e.elapsedTime); // elapsedTime 는 진행시간이다
});

처음 상태로 돌아가는 트랜지션

• 상태마다 트랜지션 속성을 지정하면 활성화 될때나 비활성활 될때 각 각 다른 트랜지션 효과를 적용할 수 있다.
• 아래 예는 호버할때와 보통 상태로 바뀔때의 애니메이션이 틀리다.

a {
    background: yellow;
    transition: 200ms background-color linear 0s;
}
a: hover {
    background-color: orange; * delay when going TO the :hover state */
    transition-delay: 50ms;
}

18. 애니메이션

• 트랜지션보다 다양한 케이스로 애니메이션을 만들 수 있다.
• 애니메이션을 적용 불가능한 요소도 있다.

키프레임 만들기

@keyframes fadeout {
    from {
        opacity: 1;
    to {
        opacity: 0;
    }
}

@keyframes color-pop {
    0% {
        color: black;
        background-color: white;
    }
    33% {
        color: gray;
        background-color: yellow;
    }
    100% {
        color: white;
        background-color: orange;
    }
}

애니메이션 api

• 스크립트로도 특정 키 프레임을 찾거나 재정의 할수 있다.
• appendRule(),deleteRule(),findRule()

애니메이션 이벤트

• animationstart, aninationend, animationiteration (시작, 끝, 반복주기)

animation-name (애니메이션 적용)

• 한개이상 적용 가능하며 겹치는 속성이 있는경우 나중에 정의한 애니메이션이 적용된다.

div {
    animation-name: change_bcolor, round; 
}

animation-duration (애니메이션 적용)

• 몇초에 거쳐서 애니메이션이 진행되는지 결정
• animation-name 의 개수에 따라 여러개 정의 가능

animation-iteration-count (애니메이션 반복 적용)

• 숫자만큼 반복되며 무한반복되게 할수도 있다.

.flag {
    animation-name: red, white, blue;
    animation-duration: 2s, 45, 65;
    animation-iteration-count: 3, 5;
}

animation-direction (애니메이션 방향 적용)

• 사용법 생략

animation-delay

• 이 속성을 잘 사용하면 여러 애니메이션이 동시에 진행되지 않고 차례대로 일어나도록 할 수 있다.
  • (애니메이션 체인)

animation-timing-function

• 애니메이션 속도에 그루브를 줄수 있다

animation-play-state

• 애니메이션을 일시 정지 시킬 수 있다. running | paused

animation-fill-mode

• 애니메이션이 끝난 후 값을 그대로 유지할지 되돌릴지 결정

animation 단축속성

• 내용 생략

19. 필터, 혼합, 자르기, 가리기

필터

• 사용법 - filter: blur(1px)

기본 필터

• blur - 흐리게
• opacity - 투명
• drop-shadow - 그림자

색상 필터

• grayscale, sepia, invert, hue-rotate,

밝기, 대비, 채도

• brightness, contrast, saturate

SVG 필터

img.logo.print {filter: url/assets/filters.svg#spotlight) grayscale(100%) ;}

“혼합” "클립"과 “마스크” 등등 요소에 여러가지 이미지 처리 를 할 수 있다.

• 사용법 생략

20. 미디어 전용 스타일

<link rel="stylesheet" type="text/css" media="screen" href="visual.css">
<link rel="stylesheet" type="text/css" media="print" href="visual.css">

<!-- or -->

@import url(visual.css) screen;
@import url(outloud.css) speech;
@import url(article-print.css) print;

• 미디어 쿼리에 조건문 처리

<link href="print-color.css" type-"text/css" media="print and (color), screen and (color)" rela"stylesheet">
@import url(print-color.css) print and (color), screen and (color);

@media screen and (min-resolution: 72dpi) {
    •cl01 {font-style: italic;}
)
@media screen and (min-resolution: 32767dpi) {
    •cl02 {font-style: italic;}
}
@media not print {
    .cl03 {font-style: italic;}
}

미디어 서술자 정의

• width, min-width, max-width (디스플레이 영역의 크기)
• height, min-height, max-height (디스플레이 영역의 크기)
• device-width, min-device-width, max-device-width (디바이스 랜더링 영역의 크기)
• device-height, min-device-height, max-device-height서 (디바이스 랜더링 영역의 크기)
• aspect-ratio, min-aspect-ratio, max-aspect-ratio (디스플레이 비율)
• device-aspect-ratio,min-device-aspect-ratio,max-deviceaspect-ratio (디바이스 렌더링 크기 비율)
• color,min-color,max-color (출력장치의 색깔 표현 가능성)
• monochrome, min-monochrome, max-monochrome (출력장치가 모노크롬 디스플레이를 사용하는지)
• resolution,min-resolution,max-resolution (장치의 해상도)
• orientation (가로모드 세로모드 상태)
• scan (디스플레이의 스캔방식)
• grid (터미널 같은 그리드 방식 출력 장치 존재 유무)

반응형 스타일

Amedia (max-width: 400px) {
    /*좁은화면용스타일*/
}
@media (min-width: 401px) and (max-width: 1000px) {
    /*중간크기화면용스타일*/

@media (min-width: 1001px) {
    /*넓은화면용스타일*/
}

@media (orientation: landscape) {
    /*가로로넓을때사용할스타일치/
}

@media (orientation: portrait) {
    /*아래위로길때사용할스타일*/
}