CSS와 관련된 문서 정리
CSS 입문
CSS에서 사용되는 값과 단위에 대한 정리
콘텐츠 정렬에 대한 스타일 처리
CSS 2.0 기준의 inline, inline-block 수준의 요소에 대한 가로 정렬과 그 이외의 요소에 대한 가로 정렬 처리
CSS 블록 메커니즘
CSS는 일반적으로 사용하는 물리적 속성과 예외적으로 사용할 수 있는 논리적 속성이 존재한다. 논리적 속성은 CSS3에서 추가된 새로운 속성들과 밀접한 관련을 가지고 있다.
CSS2의 블록과 인라인 레이아웃 규칙에 따라 상자를 배치하지만 종속 관계를 갖는 하위 요소의 독립적인 배치 방식에 따라 상호작용 범위를 결정하는데 이것을 블록 양식화 문맥이라고 한다. 블록 양식화 문맥을 사용하..
CSS 레이아웃 및 콘텐츠 흐름
양이 적은 하위 콘텐츠를 포함한 레이아웃 항목에 대한 flex 처리에서는 드러나지 않는 존재감이지만 flex-shrink 속성은 나름 유용한 역할을 가지게 된다.
스타일링
나인 패치(nine patch)는 가변적인 사각형의 둘레에 대한 처리를 다루는 구현 방식을 나타내는 관례적으로 사용되는 용어이다.
font-family 속성을 통해 텍스트의 글꼴을 지정할 수 있다. 두 가지 이상의 언어를 사용하여 콘텐츠를 구성하는 경우 언어별로 적합한 글꼴을 지정해야 할 때가 있을 것이다.
스태킹 컨텍스트(stacking context)는 가상의 Z축을 사용한 HTML 요소의 3차원 배치 개념이다. 뷰포트(viewport)를 바라보는 사용자의 시선에서 가상의 거리에 존재하는 요소들의 배치를 다룬다..
CSS 애니메이션
간혹 transform 속성을 이용한 애니메이션 구현을 할 때 값 설정에 있어서 확실한 정립을 해놓지 않고 상황에 따라 문제 해결만을 해왔던 것 같다. 그래서 기본적인 정리를 해볼까 한다.
CSS3는 배경 설정을 두 개 이상 가능하도록 변경되었다. 복수의 배경 설정시 애니메이션 적용을 어떻게 하는 알아보자.
transition, animation 속성을 이용한 크기(width, height) 애니메이션 적용시 auto 값에 대한 문제점을 확인하고 해결 방법을 모색해본다.
CSS 관련 이슈를 다룬다.
img 태그는 width, height 값을 가질 수 있다. 따라서 inline-block 수준을 만족하는 요소라 할 수 있지만 실제로 웹브라우저에서는 inline 수준으로 다룬다.
가상 요소에서 텍스트를 콘텐츠로 설정하는 경우 줄바꿈이 필요할 때가 있다.
