CSS Reference
HTML
JavaScript
SVG
Linux Server
Development
highlight_alt
Selector
work_outline
Properties
settings
Functions
rule
Rules
category
Types
straighten
Units
article
Documents
manage_search
Indexing
search
검색
Documents
Documents
folder
Introduction to CSS
description
선택자(Selector)의 우선 순위
folder
Value and Units
folder
Alignments
description
콘텐츠 가로 정렬
folder
CSS blocks mechanism
description
논리적 속성과 값
description
블록 양식화 문맥(Block Formatting Context:BFC)
folder
Layout and Flow
description
컨테이너에 꽉찬 콘테츠를 포함한 자식 요소에 대한 flex 처리
folder
Styling
description
작성 언어 및 텍스트 유형(예: 숫자)에 따라 글꼴을 적용
folder
CSS Positioning
description
스태킹 컨텍스트(Stacking context)
folder
CSS animation
description
다중 배경 설정에서 애니메이션 처리
description
크기 관련 애니메이션 처리에서 auto값에 대한 이슈
folder
Issue
description
img 태그의 inline vs inline-block
folder
Resources
description
Character entities
description
SVG를 URL 인코딩으로 사용하기
folder
Misc
description
가상 요소에서 텍스트 줄바꿈
bug_report
Documents
CSS와 관련된 문서 정리
Introduction to CSS
CSS 입문
선택자(Selector)의 우선 순위
Value and Units
CSS에서 사용되는 값과 단위에 대한 정리
Alignments
콘텐츠 정렬에 대한 스타일 처리
콘텐츠 가로 정렬
CSS 2.0 기준의 inline, inline-block 수준의 요소에 대한 가로 정렬과 그 이외의 요소에 대한 가로 정렬 처리
CSS blocks mechanism
CSS 블록 메커니즘
논리적 속성과 값
CSS는 일반적으로 사용하는 물리적 속성과 예외적으로 사용할 수 있는 논리적 속성이 존재한다. 논리적 속성은 CSS3에서 추가된 새로운 속성들과 밀접한 관련을 가지고 있다.
블록 양식화 문맥(Block Formatting Context:BFC)
Layout and Flow
CSS 레이아웃 및 콘텐츠 흐름
컨테이너에 꽉찬 콘테츠를 포함한 자식 요소에 대한 flex 처리
양이 적은 하위 콘텐츠를 포함한 레이아웃 항목에 대한 flex 처리에서는 드러나지 않는 존재감이지만 flex-shrink 속성은 나름 유용한 역할을 가지게 된다.
Styling
스타일링
작성 언어 및 텍스트 유형(예: 숫자)에 따라 글꼴을 적용
font-family 속성을 통해 텍스트의 글꼴을 지정할 수 있다. 두 가지 이상의 언어를 사용하여 콘텐츠를 구성하는 경우 언어별로 적합한 글꼴을 지정해야 할 때가 있을 것이다.
CSS Positioning
스태킹 컨텍스트(Stacking context)
스태킹 컨텍스트(stacking context)는 가상의 Z축을 사용한 HTML 요소의 3차원 배치 개념이다. 뷰포트(viewport)를 바라보는 사용자의 시선에서 가상의 거리에 존재하는 요소들의 배치를 다룬다. 레이어(layer)의 개념과 다르지 않다.
CSS animation
CSS 애니메이션
다중 배경 설정에서 애니메이션 처리
CSS3는 배경 설정을 두 개 이상 가능하도록 변경되었다. 복수의 배경 설정시 애니메이션 적용을 어떻게 하는 알아보자.
크기 관련 애니메이션 처리에서 auto값에 대한 이슈
transition, animation 속성을 이용한 크기(width, height) 애니메이션 적용시 auto 값에 대한 문제점을 확인하고 해결 방법을 모색해본다.
Issue
CSS 관련 이슈를 다룬다.
img 태그의 inline vs inline-block
img 태그는 width, height 값을 가질 수 있다. 따라서 inline-block 수준을 만족하는 요소라 할 수 있지만 실제로 웹브라우저에서는 inline 수준으로 다룬다.
Resources
Character entities
SVG를 URL 인코딩으로 사용하기
Misc
가상 요소에서 텍스트 줄바꿈
가상 요소에서 텍스트를 콘텐츠로 설정하는 경우 줄바꿈이 필요할 때가 있다.