Documents

Introduction to CSS

• 선택자(Selector)의 우선 순위

Value and Units

Alignments

• 콘텐츠 가로 정렬

  CSS 2.0 기준의 inline, inline-block 수준의 요소에 대한 가로 정렬과 그 이외의 요소에 대한 가로 정렬 처리

CSS blocks mechanism

• 논리적 속성과 값

  CSS는 일반적으로 사용하는 물리적 속성과 예외적으로 사용할 수 있는 논리적 속성이 존재한다. 논리적 속성은 CSS3에서 추가된 새로운 속성들과 밀접한 관련을 가지고 있다.

• 블록 양식화 문맥(Block Formatting Context:BFC)

Layout and Flow

• 컨테이너에 꽉찬 콘테츠를 포함한 자식 요소에 대한 flex 처리

  양이 적은 하위 콘텐츠를 포함한 레이아웃 항목에 대한 flex 처리에서는 드러나지 않는 존재감이지만 flex-shrink 속성은 나름 유용한 역할을 가지게 된다.

Styling

• 작성 언어 및 텍스트 유형(예: 숫자)에 따라 글꼴을 적용

  font-family 속성을 통해 텍스트의 글꼴을 지정할 수 있다. 두 가지 이상의 언어를 사용하여 콘텐츠를 구성하는 경우 언어별로 적합한 글꼴을 지정해야 할 때가 있을 것이다.

CSS Positioning

• 스태킹 컨텍스트(Stacking context)

  스태킹 컨텍스트(stacking context)는 가상의 Z축을 사용한 HTML 요소의 3차원 배치 개념이다. 뷰포트(viewport)를 바라보는 사용자의 시선에서 가상의 거리에 존재하는 요소들의 배치를 다룬다. 레이어(layer)의 개념과 다르지 않다.

CSS animation

• 다중 배경 설정에서 애니메이션 처리

  CSS3는 배경 설정을 두 개 이상 가능하도록 변경되었다. 복수의 배경 설정시 애니메이션 적용을 어떻게 하는 알아보자.

• 크기 관련 애니메이션 처리에서 auto값에 대한 이슈

  transition, animation 속성을 이용한 크기(width, height) 애니메이션 적용시 auto 값에 대한 문제점을 확인하고 해결 방법을 모색해본다.

Issue

• img 태그의 inline vs inline-block

  img 태그는 width, height 값을 가질 수 있다. 따라서 inline-block 수준을 만족하는 요소라 할 수 있지만 실제로 웹브라우저에서는 inline 수준으로 다룬다.

Resources

• Character entities

• SVG를 URL 인코딩으로 사용하기

Misc

• 가상 요소에서 텍스트 줄바꿈

  가상 요소에서 텍스트를 콘텐츠로 설정하는 경우 줄바꿈이 필요할 때가 있다.