[CSS2, 3] CSS 이야기 - 1

10월 마지막날 유난히 차가운 공기를 마시며 사당역에서 지하철을 타고 구로디지털단지에서 내렸다. 익숙한 풍경이 한눈에 들어왔고 갈곳의 골목을 헤아려 보지도 않고 찾아갔다. 오늘은 처음으로 CSS강좌를 듣는날이다. CSS 를 강좌로 들어보질 않았고 어떤 내용일지 하나하나 따져보고 싶기 때문에 프론트 앤드 개발을 위해 수강하게 되었다. CSS는 디자인 영역이기도 하지만 개발자 영역에 들어와 함께 고려해야할 사항이다. 총 4일간의 일정으로 CSS 배우게 된다. 실습을 통해 보고 느껴보자. CSS는 사랑. Love is Touch~~~ 

Web Components의 세상

늦어도 5년 후에는 웹 컴포넌트로 통일 된다. 컴포넌트의 구성요소는 HTML, CSS, DOM, JavaScript 이고 이들은 분리해서 생각할 수 없고 개발자는 각 요소를 확실히 알고 가야 한다. 최근 인기있는 프레임워크인 Angular, React, Polymer등의 기본은 웹 컴포넌트이다. CSS는 HTML, SVG 콘텐츠의 시각적 표현을 담당한다. 

CSS Specification

CSS 스펙 진행사항

  - Level1 : 1996.12.17

  - Level2 : 2011.06.07 종료

  - Level3, 4 : 진행중

CSS 스펙 한글버전

W3C는 표준이 아니라 권고(Recommendation)을 사용

  - 표준은 모든 브라우저(5대 브라우저)가 사용해야 표준이 된다.

  - 표준 진행 상태 단계

    WD: 초안

    LC, LCWD: 최종 초안

    CR: 권고 후보

    PR: 권고안 

    REC: 최소 2개 브라우저에서 지원

CSS 룰셋

Selector와 Property 에 값을 설정한다. (참조)

Value 설정

  |, ||, && 사용

  modifier: 정규표현식으로 [] * + ? 기호 사용

그외

  shorthand 사용   

  벤더 식별자(prefix) 사용: -ms- mso- (MicroSoft), -moz- (Mozilla), -o- -xy- (Opera Software), -webkit- (Google Chrome, Apple) - 참조

  @import "xxx.css"; 처럼 뒤에 반드시 ; 세미콜론 넣는다. @안에 @을 넣을 수 없다. 

  Default Style Sheet : selector에 기본 적용된 스타일이 있다. - 스펙

  길이 단위: px, em 이다. 0일 경우 px 붙이기는 옵션

단위

  절대 단위 

    - mm(밀리미터) 

    - cm(센치미터)

    - 1in(인치) === 2.54cm

    - pt(포인트) === 1in/72

    - pc(피카) === 12pt

    - 1px(픽셀) === 0.75pt

 상대 단위

    - em: font-size가 상댓값의 기준 예) font-size em을 작성하면 부모 엘리먼트의 font-size가 기준이 된다. 반응형 웹 사이트의 경우 유용

    - ex: 영문 소문자 x의 높이가 상댓값 기준. x-height라 부름

    - %: font-size 50% 형태로 작성. 부모값 기준

JS Bin on jsbin.com

  

Cascade

케스케이딩은 3가지 스타일시트를 적용하는 규칙이다. 

스타일 시트 원천(origin) 타입

 - Author: 개발자가 작성한 것

 - User: 콘텐츠 사용자가 직접 핸들링 가능

 - User agent: 브라우저 디폴트 스타일시트 적용

   (스펙)

개발자 스타일(Author)

  <link href="xxx.css" rel="sytlesheet" type="text/css">

  <p style="property: value">

사용자 스타일

  - IE에서 적용가능

케스케이딩 사전 준비

  - 스타일을 적용을 위해 먼저 DOM(Document) Tree를 만들어야 한다. 

  - DOM트리를 읽으며 CSS 적용을 위한 박스 모델을 생성(generate)한다. 

    즉, HTML에 DOM tree처럼 CSS는 Box 모델이 있다. HTML/CSS는 둘다 DOM, Box와 같이 오브젝트 모델을 갖는다. 

  - 생성된 박스 모델에 따라 프로퍼티 값 추가

  - 박스 모델

    

엘러먼트에 스타일시트 프로퍼티 적용 우선 순위

  - 밑으로 갈 수록 우선순위가 높음: 되도록 !important는 사용치 말자. 

    1. 브라우저 디폴트 스타일 시트

    2. 사용자 스타일 시트

    3. 개발자 스타일 시트

    4. 개발자 !important

    5. 사용자 !important

  - selector에 따른 적용 순위

    우선 순위 계산 방법에 따라 적용 (참조)

    CSS 스펙에서 #wrap은 id="wrap" 이고, .wrap은 class="wrap"을 표현한다. 

  - 적용 방법

    <link>

    @import

    <style>: head 또는 body 작성가능 

    inline: <p style="xxx">

@import

  - 파일을 분리해서 관리 

  - @import  url("xx.css");

Box Model

박스 모델을 통해 컨텐츠의 위치와 이웃과의 경계를 만든다.  (참조)

- line box

  margin, border, padding, 컨텐츠를 가진 박스생성하고 엘리먼트에 연결(링크)

  DOM트리의 논리적 순서(Logical Order) 중심

- inline box 

  style 중심의 시각적인 순서(Visual Order)로 각 엘리먼트를 정리함

- border-color

  border-<top, right, bottom, left>-color

Border Color on jsbin.com

- border-style

  디폴트 none

JS Bin on jsbin.com

- border-width

  thin, medium, thick

JS Bin on jsbin.com

- border-shorthand

  border-width, border-style, border-color 지정

  TRBL 지정불가

Border Shorthand on jsbin.com

- border-radius

  모서리 둥글게

Border radius on jsbin.com

- padding

  table에서는 패딩은 제외된다. 

  1개 모두

  2개 위/아래, 좌/우

  3개 위/좌/우, 아래

  4개 위/우/아래/좌

- margin, margin-collapse(상쇄) 

  margin-top, margin-bottom, margin-left, margin-right

  2개 이상의 box(엘리먼트)가 연속되어 있을 때 마진이 상쇄된다. 한쪽으로 접힌다. 하나는 10이고 다른 하나가 10이면 20이 아니라 10이 된다. 

  수직(위/아래) 마진 상쇄가 기본이다.  (밑의 값이 마진으로 잡히고 위의 값이 상쇄된다.)

  수평방향은 상쇄하지 않는다. 

JS Bin on jsbin.com

- outline

  자리를 차지 하지 않고 콘텐츠 위에 표현

  width, height에 영향을 주지 않는다. 

  TRBL 지정 불가 

  

- outline-style

  border-style과 유사

- outline-width

- outline-color  

outline on jsbin.com

Formatting 

DOM 트리 구조를 시각적 형태와 구조로 만들려면 규칙이 필요하다. 이를 위한 규칙을 정의한것이 시각적 형태 모델(Visual Formatting Model)이다. 

박스 생성 레이아웃 조건

  - 박스 치수 : w, h

  - 타입: block level, inline level

  - 위치 결정: flow, float 절대 위치

  - DOM 트리에서 엘리먼트 간의 관계 

  - 외부 정보, 예) viewport size, 이미지 본래 사이즈

사용할 프로퍼티 

  - display: 박스 표시

  - position: 박스 위치 

  - float: 박스 정렬

  - clear: float 삭제

  - z-index: 3차원 레이어 

Viewport

  브라우저가 제공하는 window 또는 다른 형태의 스크린 영역, viewport에 다큐먼트의 콘텐츠 표현

  CSS의 Canvas는 정형화된 구조로 렌더링되는 공간을 의미

  뷰포트 사이즈가 변경되면 브라우저는 다큐먼트 레이아웃을 변경

  

포함블록(Containing Block)

  안에 Child 엘리먼트가 들어갈 수 있는 엘리먼트로 박스 위치와 크기는 시각형 가장자리를 기준으로 계산된다. 이때 사각형을 포함 블록이라 한다. 

  - 블록 레벨 엘리먼트 : <p>, <div>

  - 블록 레벨 박스 : display 프로퍼티를 이용. 의도적으로 블록 레벨 박스를 만들고 싶을 경우 display 속성을 이용하는 것이다. 

     display: block, list-item, table 

  - 블록 컨테이너 박스 : 블록 박스로 보자

  - 블록 : 블록 레벨 박스, 블록 컨테이너 박스, 블록 레벨 엘리먼트 3가지를 총칭해 블록이라 한다.  

  * 부모 블록 박스내에 텍스트는 익명 블록 박스로 만든다. 

inline-level box

  <em>, <strong> 인라인 엘리먼트는 새로운 콘텐츠 블록을 형성하지 않고 라인안에 콘텐츠를 분리. 인라인 엘리먼트는 인라인 레벨 박스를 생성한다.  

  display: inline 설정 

  

display

  inline, block, list-item ... 종류가 많음. 기본값 inline 이다. 

  상속 안됨 

formatting on jsbin.com

위치 결정 체계

3가지 체계로 포지셔닝 한다. 

  - Normal Flow: 일반적인 포지셔닝. block level box의 블록 포맷팅. inline-level box의 포멧팅

  - Float : Normal Flow로 포지셔닝한 후 박스를 왼쪽 또는 오른쪽으로 이동

  - Absolute :  지정한 위치로 이동, Normal Flow와 연동안함 

Position

  - 종류: static, relative, absolute, fixed, inherit 

  - static 

    디폴트 값으로 Normal Flow의 일반적 포지셔닝

    top, right, bottom, left 적용 안 됨 

  - relative

    Normal Flow로 박스 위치 계산. 해당 위치에서 상대 offset 값을 구해 포지셔닝, 

    relative 박스의 다음 박스는 relative 박스 공간을 유지한다. 

Position relative on jsbin.com

  - absolute

    TRBL지정위치로 이동

    Normal Flow와 완전히 단절 된다. 

  - fixed 

    absolute와 같은 방법으로 포지셔닝이나 창 스크롤해도 지정한 위치에 고정

Position absolute on jsbin.com

   

  - relative 부모와 absolute 자식을 혼합할 때

    relative 부모는 body가 되어 absolute 자식이 움직인다. 

    이때 offset 기준으로 relative 값이 반영된다. 

Position relative absolute on jsbin.com

  - fixed

    스크롤에도 박스가 그대로 위치한다. 

Position fixed on jsbin.com

Box offset 

  - position static이 아닐 때 지정가능 

  - top, right, bottom, left로 지정: %로 지정 가능

  - 부모의 width 에 대한 %만큼 위치 offset을 한다. 

Box Offset on jsbin.com

float

  - 포함 블록 행을 기준으로 박스를 좌우로 이동한다. 

  - float된 박스가 있으면 겹치지 않고 좌우로 이동한다. 이동할 공간이 없으면 수직으로 이동한다. 

  - float 해제를 위해 clear를 사용한다. 

float on jsbin.com