Documents

Introduction to CSS

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

Value and Units

Alignments

• 콘텐츠 가로 정렬

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

CSS blocks mechanism

• 논리적 속성과 값

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

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

  CSS2의 블록과 인라인 레이아웃 규칙에 따라 상자를 배치하지만 종속 관계를 갖는 하위 요소의 독립적인 배치 방식에 따라 상호작용 범위를 결정하는데 이것을 블록 양식화 문맥이라고 한다. 블록 양식화 문맥을 사용하면 일반적인 요소의 배치 흐름을 갖지 않고 공간을 좀더 다양하게 구성할 수 있다. 즉, 요소 안에 공간 상에 하위 요소들이 일반적인 문서의 흐름에 의해 배치되지 않고 독립적인 위치로 배치할 수 있다.

Layout and Flow

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

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

Styling

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

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

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