Skip to content

Cascading Style Sheets

CSS Properties

  • !important
  • @font-face
  • @keyframes
  • align-content
  • align-items
  • align-self
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • backface-visibility
  • background
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • caption-side
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font
  • hanging-punctuation
  • height
  • icon
  • justify-content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • max-height
  • max-width
  • min-height
  • min-width
  • nav-down
  • nav-index
  • nav-left
  • nav-right
  • nav-up
  • opacity
  • order
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • position
  • quotes
  • resize
  • right
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-indent
  • text-justify
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • vertical-align
  • visibility
  • white-space
  • width
  • word-break
  • word-spacing
  • word-wrap
  • z-index

종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.

현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.

Categories

Projects

  • [추천] Sorted CSS Colors - CSS 색상들을 Hue에 따라 Lightness/Saturation 으로 정렬해서 영문명/RGB/HSL을 보여주는 색상표
  • Github - Pokémon Cards Holographic effect in CSS - CSS로 표현한 포켓몬 홀로그램 카드
    • Pokémon Cards CSS Holographic Effect
    • 수집용 포켓몬 카드의 홀로그램 효과를 실제처럼 보이게 만드는 다양한 CSS 효과들을 적용
      • 3d transforms, filters, blend modes, css gradients
    • 마우스 위치에서 flare/glare 이펙트 처리
    • Holofoil 카드들을 표현하기 위해 Vertical Beam 효과 주기
    • Galaxy Holofoil / Radiant Holofoil 효과등
  • Scrollbar.app - CSS 스크롤바 인터랙티브 디자이너
  • Lenis - 부드러운 스크롤 라이브러리
  • superwhite - HDR 가능한 기기에서 매우 밝은 흰색 표시하기
  • Lightning CSS - Rust로 작성된 초고속 CSS 파서
  • mo.js - 웹용 모션그래픽 라이브러리 오픈소스

Rule Set

Css_rule_set.png

CSS 적용 우선순위

참고로 클래스로 적용할 경우 등급이 동일하다면 먼저 적용된 것이 우선적용되는듯하다.

Sample code

body { color:#009933; }
<body> TAG 안의 전체 글자 색상을 변경한다.
.class-style { /* ... */ }
클래스(class)의 스타일.
#id-style { /* ... */ }
id의 스타일.
p { height:100px; width:100px; }
<p> 블럭의 너비와 높이를 각각 100px, 100px로 고정한다.
td { text-align: center; }
문자열의 가로정렬을 중앙으로 배치한다. td 블럭의 align="center"와 동일하다.
p:nth-child(odd){ color: green; }
홀수

tag의 폰트 색상을 green로 적용.

p:nth-child(even){ color: red; }
짝수

tag의 폰트 색상을 red로 적용.

p:nth-child(4){ color: blue; }
네 번째

tag의 폰트 색상을 blue로 적용.

p[name]{ color: blue; }

tag중 name 속성을 가지고 있는 폰트 색상을 blue로 적용.

p[name="test"]{ color: blue; }

tag중 name 속성의 값이 test일 경우 폰트 색상을 blue로 적용.

p[name^="test"]{ color: blue; }

tag중 name 속성의 처음 문자열이 test일 경우 폰트 색상을 blue로 적용.

p[name$="test"]{ color: blue; }

tag중 name 속성의 마지막 문자열이 test일 경우 폰트 색상을 blue로 적용.

p[name*="test"]{ color: blue; }

tag중 name 속성에 test가 포함될 경우 폰트 색상을 blue로 적용.

word-break:break-all;
하나의 문장을 띄어쓰기할때 쓰인 공백 기준이 아닌 문자 단위로 끊어 주는 역할을 하는 속성 <td>의 크기를 무시하고 늘어 나는 문장(띄워쓰기가 없는 문자)등은 문자 단위로 끊어주면 자동으로 width에 맞춰서 줄바꿈이 됩니다.
word-space:nowrap;
셀의 너비를 지정했다고 해도 자동으로 줄바꿈되지 않는다.
float
Object 즉 block을 정렬시킬때 사용.
display
liline 혹은 block 혹은 hidden 속성값을 지닌다. 출력(위치의 관계성)과 관련된 속성이다.
block으로 설정하면 줄바꿈되고, inline으로 설정하면 줄바꿈이 되지 않는다.
block로 설정하면 상/하 margin과 padding속성을 사용할 수 있지만,
inline으로 설정하면 상/하 margin과 패딩은 사용할 수 없다.
block로 설정하면 width, height 속성을 사용할 수 있지만,
inline으로 설정하면 width, height속성을 사용할 수 없다.
block의 정렬은 float, inline의 정렬은 text-align을 사용해야 한다.
block의 중앙정렬은 margin:0 auto;, 반드시 block는 width값이 있어야 한다.

방어적 CSS

특정 CSS문제가 생기지 않도록 하는 스니펫 콜렉션:

  • Flexbox 줄바꿈 -> flex-wrap: wrap;
  • 여유 공간 주기 -> margin-right: 1rem;
  • 줄바꿈 되지 않아야할 긴 콘텐츠 -> text-overflow: ellipsis; white-space:nowrap; overflow: hidden;
  • 이미지 늘려짐/찌그러짐 방지 -> object-fit: cover;
  • 스크롤 연쇄 잠금 -> overscroll-behavior-y: contain;
  • CSS 변수 폴백 값 주기 -> max-width: calc(100% - var(--actions-width, 70px));
  • 고정 높이 -> height 보다는 min-height 사용
  • 고정 넓이 -> width 보다 min-width 사용
  • 배경 반복 제거 -> background-repeat: no-repeat;
  • 버티컬 미디어 쿼리 활용 -> position:sticky 같은거 쓸 때 특정 세로크기 이상에서만 적용 @media (min-height:600px) {}
  • Flexbox 아이템 배열시 justify-content: space-between; 대신 gap: 1rem; 사용
  • 이미지 위에 하얀 텍스트 올리때 이미지 로딩 실패시 대응 -> background-color: grey; 사용
  • CSS Grid 위에서 고정 값 사용은 조심 -> 항상 미디어 쿼리 사용할 것
  • 필요할때만 스크롤바 보이기 -> overflow-y: auto;
  • 스크롤바 생길때 레이아웃 변화 없애기 -> scrollbar-gutter: stable;
  • Flexbox 에서 최소 콘텐츠 사이즈 지정 -> min-width: 0; (기본값이 auto 여서 overflow 발생 )
  • CSS Grid에서 최소 콘텐츠 사이즈 지정 -> minmax() 사용
  • CSS Grid 사용시 Auto Fit vs. Auto Fill -> 대부분의 경우 auto-fill 이 나음
  • 이미지 최대 넓이 지정 -> max-width: 100%
  • 그리드 컨테이너 차일드에 postition: sticky 사용시 align-self: start 적용
  • 그룹 셀렉터 지정은 다른 브라우저에서는 안될수 있으니 각각으로 분리할 것

더 나은 CSS 트랜지션 & 애니메이션을 위한 팁들

Ten tips for better CSS transitions and animations

  • 생각하는 것보다 더 짧게 할 것
    • 단일 트랜지션은 0.15~0.4초
    • 너무 빠르다고 생각될 때까지 빠르게 한 다음 조금씩 줄이기
  • 액션을 커브에 맞출 것
    • 움직임은 색상만큼 주관적이지만, 그만큰 중요함
    • 실제 세계의 움직임을 생각하고 비교할 것
  • 가속과 감속
    • 애니메이션이 부자연 스럽다면 갑자기 시작하거나 끝나기 때문
    • 미미하더라도 cubic-bezier 커브에 easing-in/out을 추가하는 게 좋음
    • 실제처럼 보이려면 "관성(Inertia)"도 좋음
  • 적을수록 좋음
    • 애니메이션 중에 엘리먼트가 더 많이 변경될 수록, 더 과도하게 보일 위험이 커짐
    • 투명도가 0에서 1로 간다면 1대신 0.4를 시도해보기. 사이즈를 변경한다면 조금만 작은 크기에서 시작해보기
    • 대부분의 경우 자기 자리로 찾아가는 애니메이션은 5~40픽셀 사이에서 움직여야함
  • 브라우저 기본값은 피할 것
    • 브라우저에는 linear, ease, ease-in, ease-out, ease-in-out 같은 커브가 내장
    • 편하고 특정 상황에서는 유용하지만, 너무 일반적이어서 다 똑같아 보임 (마치 Bootstrap/Tailwind로 만든 사이트가 다 비슷해 보이는 것처럼)
    • VS Code에 있는 cubic-bezier 커브의 자동 완성값을 사용해 볼 것
    • 또는 브라우저 개발자 도구를 열고 커브 편집기를 사용해 볼 것
  • 여러가지 속성, 여러가지 easing
    • 항상 유용한 것은 아니지만, 여러개의 속성을 한번에 변경해야 할 때 (transform 과 opacity를 동시에)
      • 같은 cubic-bezier 커브를 적용하면 괜찮게 보일때도 있지만, 실제로 안그럴 때가 있음
      • transform에 잘 동작하는 커브도 fade에는 잘 안어울릴 수 있음
      • 이럴때는 CSS 속성별로 서로 다른 easing을 선택하는게 좋음
    • 속성별로 @keyframes 애니메이션을 나누거나, 여러개의 transition 선택 가능
      • opacity 에는 linear, transform 에는 cubic-bezier(.5, 0, .5, 1)
  • 엇갈린 지연 사용
    • 여러개의 엘리먼트를 트랜지션할때 animation-delay 또는 transition-delay의 효과를 과소평가 하지 말 것
  • In은 나가고, Out은 들어감
    • 이징 커브는 세가지 종류가 있음
      • ease in (느리게 시작)
      • ease out (느리게 끝남)
      • in-out (가운데만 빠르고, 시작과 끝에선 느림)
    • 트랜지션의 까다로운 점은, 종종 in 을 ease-out 하고 싶고, out 이 ease-in 되고 싶을 때가 있다는 것
      • 하나가 나가고 하나가 들어오는 애니메이션은, 사용자 입장에선 하나의 전환으로 보이지만, 내부에선 두개의 전환임
      • 나가는 것은 천천히 하고 싶으니까 ease-in이 필요하고, 들어오는 것은 ease-out 이 되어야 함
  • 하드웨어 가속에 의존하기
    • 모든 CSS 속성이 모든 장치 & 브라우저에서 원활히 동작하는 것은 아님
    • 항상 하드웨어 가속 가능한 속성
      • transform(모든 translate, scale, rotate 및 3D 버전까지)
      • opacity
    • 경우에 따라 하드웨어 가속 가능한 속성
      • 특정 SVG 속성들
      • filter (브라우저 및 필터에 따라)
    • 캔버스 및 WebGL도 하드웨어 가속이 되지만 여기서는 다루지 않음
    • 즉, 이동, 크기 조정, 회전 하려면 항상 CSS tranform 속성을 사용할 것
    • 뭘하든 엘리먼트의 크기나 위치를 직접 변경하지 말 것
      • height, width, border, margin, padding 같이 페이지 레이아웃에 영향을 미치는 속성을 직접 변경하면 페이지 속도가 눈에 띄게 느려질 위험이 있음
  • 필요시 will-change 사용하기
    • 이론적으로는 애니메이션이 부드럽고 성능이 좋아야 하는데, 부자연스러워 보인다면 will-change 속성을 사용할 것
    • 뭐가 변경될지 미리 알려주므로, 다른 계산을 건너 뛸 수 있음
  • 보너스 : 사용자의 선호도를 존중하기
    • 사용자는 기기 설정에서 "reduced motion"을 선호하는지 지정 가능
    • 미디어 쿼리를 이용하거나 자바스크립트를 통해 이 값을 인식하고, 맞게 대응 가능

여러 가지 정렬 방법

  • margin: auto - 컨텐츠를 중앙 정렬한다.
  • text-align: center - 블럭요소 안에 있는 인라인 요소에게 적용됩니다.
    • big, i, small, tt, abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var, a, bdo, br, img, map, object, q, script, span, sub, sup, button, input, label, select, textarea
  • position: absolute - 위에 상황들이 적용되지 않을때 많이 사용한다. position: absolute를 주고, left: 50% 준다.
  • flex 사용하기
    • flex-direction: row; justify-content: center; align-items: center;
    • flex-direction: column; justify-content: center; align-items: center;
    • 동일한 크기의 div 두 개 사이에 flex-grow: 1; 넣기

세로 정렬 방법 (Vertical Align)

사전 지식: height: 100%; 가 작동하지 않는 이유

height: 100%;를 사용하여 div에 세로 크기를 100%로 설정하면, 해당 div의 부모 요소에 대한 상대적인 크기가 적용된다. 그러나 부모 요소의 높이가 명시적으로 설정되어 있지 않거나, 상대적인 크기를 가지고 있지 않으면 제대로 작동하지 않을 수 있다.

height: 100%;는 부모 요소의 크기에 의존하기 때문에, 부모 요소가 명시적으로 높이를 가지거나 상대적인 크기가 설정되어 있어야 한다. 부모 요소의 높이가 설정되어 있지 않으면 기본값인 auto로 간주되어 높이를 상속하지 않는다.

따라서 부모 요소에도 높이를 설정하거나, 부모 요소가 상대적으로 위치한 경우에는 상대적인 크기를 가지도록 해야 height: 100%;가 올바르게 작동한다. 

<div class="flex">
    <div class="flex-item">
        <div class="element">
            The orange element should be as tall as the blue element
        </div>
    </div>
</div>

flex-grow: 1;를 사용할 경우 해당 요소에 height: 0;도 넣어줘야 자식 요소의 height: 100%가 정상 작동한다. 

.flex {
    height: 100px;
    display: flex;
    flex-direction: column;
}
.flex-item {
    background-color: steelblue;
    flex-grow: 1;
    height: 0px;    /* <--- right here! */
}
.element {
    height: 100%;
    background-color: orange;
}

display: table | table-cell

부모요소에 display:table, 자식요소에 display:table-cell, vertical-align:middle 을 적용하여 중앙정렬한다. 

.contentBox{
  display:table;
  table-layout:fixed;
  width:100%;
  height:200px;
  background:#ddd;
  text-align:center;
}
.contentBox__item{
  display:table-cell;
  vertical-align:middle;
}

display: flex | grid

flex와 grid를 사용해서 정렬한다. (direction 은 row가 기준) 단, flex와 grid를 사용할때에는 하위 브라우저 지원에 유의하며 사용한다. 

.flexBox{
  display:flex;
  align-items:center; /* 방향이 row 기준: 세로 중앙 정렬*/
  height:200px;
  background:green;
}

.gridBox{
  display:grid;
  align-items:center; /* 방향이 row 기준: 세로 중앙 정렬*/
  margin-top:30px;
  height:200px;
  background:orange;
}

.boxItem{
  display:inline-block;
  background:blue;
  color:#fff;
}

position: absolute

정렬할 요소에 position 값을 absolute 로 설정하여 중앙정렬 하는 것에는 두가지 방법이 있다. 부모 요소(라기보단 기준이 될 요소)에 position:relative를 적용 후 margin이나 transform: translate 속성을 사용해 중앙정렬 한다.

요소의 가장 좌측과 상단을 기준으로 50%를 이동하는 것이므로, 요소자체를 마이너스 값을 통해 다시 절반을 좌측, 상단으로 당겨오는 것.

마이너스 값을 적용하기 전에는 저 지점이 정 중앙에 배치된 상태. 

.contentBox{
  position:relative;
  height:200px;
  background:#ddd;
}
.contentBox__item{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-25px;
  margin-left:-50px;
  width:80px;
  height:50px;
  background:blue;
  color:#fff;
}

transform 

.contentBox{
  position:relative;
  height:200px;
  background:#ddd;
}
.contentBox__item{
  position:absolute;
  top:50%;
  left:50%;
  width:80px;
  height:50px;
  background:blue;
  color:#fff;
  transform:translate(-50%,-50%); /* translate(x축,y축) */
}

before

부모요소에 가상선택자 before를 적용하는 방법. 정렬할 요소들을 감싸는 가상의 요소를 만들어 그 요소를 중앙정렬한다. 

.contentBox{
  height:200px;
  background:#ddd;
}
.contentBox:before{
  content:'';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.contentBox__item{
  background:blue;
  color:#fff;
}

margin: auto | auto 0

margin에 0 auto 를 적용하면 가로 가운데 정렬이 되는 것은 널리 알려진 스타일 기법이다.

조금 바꿔서 auto 또는 auto 0을 사용하면 세로 영역에서도 중앙정렬이 된다. 몇년전까지만해도 하위 브라우저와 호환이 안돼서 사용하기 어려웠는데, 최근엔 많이 업데이트 되어서 이 방법도 추가한다.

하지만 사용 시에는 역시 주의와 확인이 필요하다고 생각된다. 

.contentBox {
  display: flex;
  height: 200px;
  background: #ddd;
}
.contentBox__item {
  margin: auto;
  width: 80px;
  height: 50px;
  background: blue;
  color: #fff;
}

또는 

.container{
  position:relative;
}
.element{
  position:absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  height: 20px; /*requires explicit height*/
}

@supports

브라우저가 CSS를 지원하는지 알려줌 @supports (display: grid) { ... }

Snap Scroll

Snap Scroll 적용. 모바일 화면 처럼 스크롤된다.

  • scroll-snap-type
  • scroll-snap-align

Flexbox gap

CSS:flexbox#gap 항목 참조. 간단히, 아이템 사이의 간격 조정.

aspect ratio 

img {
  aspect-ratio: 16 / 9;
}

position: stiky

화면 상단에 붙도록 적용할 수 있다.

html: 

<div>
  <section>
    <aside>Header</aside>
  </section>
<div>

css: 

section {
  height: 70%;
}
aside {
  position: sticky;
}

예전엔 javascript를 사용해야 구현할 수 있었지만 이젠 css만드로 적용 가능.

is Pseudo Selector

구식 코드: 

header button,
nav button,
form button {
  background-color: tomato;
}

:is적용: 

:is(header, nav, form) button {
  background-color: tomato;
}

height 100%

이건 부모의 요소의 height 크기에 맞추겠다는 의미이다. 화면의 100%가 필요하다면 height: 100vh;를 쓰면 된다. (Viewport Height)

point-events

Insert CSS Gradient 

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

2012.01.01 추가: 

background: -webkit-gradient(linear, left top, left bottom, from(#ffc400), to(#e59302));

모바일 브라우저 (아이폰, 안드로이드 등의 웹킷용 브라우저) 지원 되는 그라데이션 소스임니다. from과 to속성이 꼭 들어가야 함니다. 모바일 페이지에는 -moz-나 filtter등의 속성은 사용하지 않아도 됩니다. 웹킷이니깐요.

Gradient animation 

background: linear-gradient(270deg, #246655, #246655, #246655, #246655);
background-size: 800% 800%;

-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Responsive Image

반응형 웹을 위한 이미지 크기를 자동으로 조정하는 CSS는 아래와 같다. 

.image-responsive {
  width: 100%;
  height: auto;
  display: block;
}

clear attribute

clear속성은 다음과 같은 값이 있다. div에서 float: left;를 사용할 경우 다음 div부터 정상적으로 변경되지 않는다 그 때 사용하면 된다.

  • clear:left: 왼쪽으로 float된 요소에 대해 clear.
  • clear:right: 오른쪽으로 float된 요소에 대해 clear.
  • clear:both: 양쪽 모두 clear.
  • clear:inherit: 부모 요소의 clear 값을 물려 받음.
  • clear:none: clear값을 없앤다.

Animation 

 /* The animation code */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Ease-out/in 

.toast-popup {
    /* ... */
    transition: transform 500ms ease-out;
}

not so boring fade-in

Fade-in animation that is not so boring: 

{
  0% { opacity: 0; filter: brightness(1) blur(20px) }
  10% { opacity: 1; filter: brightness(2) blur(10px) }
  100% { opacity: 1; filter: brightness(1) blur(0) }
}

Remove scrollbar 

    <style type='text/css'>
        body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
    </style>

React Default Global CSS 

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: white;
    background: black;
  }
}

다크모드 미디어 쿼리 

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: white;
    background: black;
  }
}

개행 적용

\n와 같은 문자를 그대로 개행하게 만드는 방법: 

p {
  white-space: pre;
}

컴포넌트 끝을 넘어가면 자동 개행 되도록 하는 방법: 

p {
  white-space: pre-wrap;
}

그밖에: 

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

Input 에서 포커스가 잡혔을 때 외곽선 제거하는 방법 

*:focus {
    outline: none;
}

CSS 선택자 우선순위를 높이는 의외의 방법

요약하면 선택자를 반복해서 사용하면 됨.

예를 들어 .checkbox__icon.checkbox__icon은 단일 .checkbox__icon보다 높은 우선순위를 가짐.

이 방식이 CSS 핵처럼 느껴질 수 있지만, CSS Selectors Level 4 사양을 보면 "Repeated occurrences of the same simple selector are allowed and do increase specificity. (단순 선택자가 반복되는 것은 허용되며, 특이성을 증가시킨다.)" 라고 명시되어 있음.

CSS with JavaScript

호환성

Compat2021 - 브라우저 호환성 고민 Top 5 해결하기
구글이 브라우저 벤더들과 협동해서 웹개발자들에게 가장 고민스러운 호환성 문제 5가지를 해결하기 위한 프로젝트
  • CSS Flexbox
  • CSS Grid
  • position: sticky
  • aspect-ratio
  • CSS Transform

변수 합성

시간 기반 CSS 애니메이션 기술

  • 시간 기반 CSS 애니메이션 기술 | GeekNews
  • CSS 애니메이션을 위한 시간 기반 방식 활용
    • CSS에서 수학 함수들이 지원되면서, 시간 기반 방식의 CSS 애니메이션을 다시 적용해볼 수 있게 됨
      • mod(), round(), 삼각함수 등이 지원됨
      • 데모를 보기 위해서는 실험적 기능 플래그를 활성화해야 할 수 있음
  • 기본 아이디어
    • CSS Houdini API를 사용하여 시간(밀리초)을 추적하는 사용자 정의 변수를 정의할 수 있음
      • @property 규칙을 사용하여 --t 변수를 정의하고, 초기값을 0으로 설정
      • @keyframes 규칙을 사용하여 --t 변수를 24시간(86,400,000ms) 동안 선형적으로 증가시킴
      • --t를 기반으로 하는 다른 값들은 함께 변경되어 애니메이션 효과를 만듦
      • counter() 함수를 사용하여 --t 변수의 값을 표시할 수 있음
  • 프레임 속도 제어
    • 초당 60 프레임(FPS)의 업데이트 주기를 유지하는 것으로 부드러운 애니메이션에 충분함
    • 필요한 경우 step() 함수를 사용하여 프레임 속도를 수동으로 제어할 수 있음
      • animation-timing-function 속성에서 step() 함수를 사용하여 원하는 FPS 값을 계산
  • 시간 변환
    • --t 값은 한 방향으로 지속적으로 증가하므로, 일부 CSS 속성에는 적합하지 않을 수 있음
    • min() 함수를 사용하여 특정 값에 도달하면 애니메이션을 멈출 수 있음
    • mod() 함수를 사용하여 애니메이션을 다시 시작할 수 있음
    • sin() 함수를 사용하여 앞뒤로 움직이는 효과를 만들 수 있음
  • 사용자 정의 Easing 함수
    • 수학 함수와 --t 변수를 사용하여 사용자 정의 easing 함수를 만들 수 있음
    • cubic-bezier()로는 달성하기 어려운 효과를 만들 수 있음
    • 예시: ease-out-cubic, ease-out-elastic 등
  • CSS Doodle 실험
    • 복잡한 표현식에서 var()와 calc()는 코드의 가독성을 떨어뜨릴 수 있음
    • css-doodle에서는 @t 함수를 사용하여 --t 변수를 나타낼 수 있음
    • 최신 버전의 css-doodle은 인수 내부에서 간단한 수학 표현식을 직접 허용함
    • @T와 @TS 함수도 추가로 제공됨
      • @T는 하루의 시작부터 시간을 나타냄
      • @TS는 @t(/1000)의 단축형으로, 초 단위로 시간을 추적함
    • 시계 예제와 점프 모션 예제 등을 css-doodle로 구현할 수 있음
  • 결론
    • 시간을 변수로 사용하는 이 접근 방식은 흥미로움
    • Keyframes를 사용하는 것이 더 직관적일 수 있지만, 수학 계산과 입력 변수가 많은 데모 장면에서는 시간을 변수로 사용하는 것이 다양한 결과를 얻을 수 있음
  • GN⁺의 의견
    • CSS의 시간 기반 애니메이션 기법은 단순히 CSS로 구현 가능한 애니메이션의 폭을 넓힐 뿐만 아니라, 쉐이더나 WebGL 등 다른 기술과의 연계 활용 가능성도 높여줄 것으로 보임
    • CSS Houdini와 CSS Doodle 등의 도구와 함께 사용하면 더욱 유연하고 다양한 표현이 가능할 것 같음
    • 다만 브라우저 호환성 문제나 성능 이슈 등 실제 프로젝트에 적용할 때 고려해야 할 사항들이 있을 것임. 기존의 Keyframe 방식과 장단점을 잘 비교하여 선택적으로 사용하는 것이 좋겠음
    • GSAP 등 전문 애니메이션 라이브러리와 비교했을 때의 장단점도 분석해볼 필요가 있음. 상호 보완적으로 사용할 수 있는 방안을 모색해보는 것도 좋을 듯함
    • 시간 기반 CSS 애니메이션의 예제와 활용 사례들이 더 많이 공유되어, 프런트엔드 개발자들이 좀 더 쉽게 적용해볼 수 있게 되기를 기대함
  • Hacker News 의견
    • CSS에서 음수 animation-delay 값을 사용하여 JavaScript로 애니메이션 진행을 제어할 수 있음. 예를 들어 animation-delay: -1500ms로 설정하면 즉시 시작하되 1.5초 지점으로 건너뜀. JavaScript로 이 값을 조작하여 CSS 애니메이션을 스크러빙하고, 모든 애니메이션을 게임 엔진 스타일의 계산-업데이트-렌더링 틱 루프와 호환되게 만들 수 있음.
    • 간단한 easing 함수나 한두 개 채널의 기본 키프레임 이상으로 발전하면 이 접근 방식의 한계에 빠르게 직면하게 됨. Theatre.js 라이브러리를 사용하면 키프레임과 베지어 곡선을 편집하기 위한 타임라인이 있는 스튜디오 UI와 이러한 키프레임을 가져와 타임라인과 관련하여 값을 보간하는 런타임으로 구성되어 있어 조정된 애니메이션이 필요할 때 유용함.
    • 이 글에서는 브라우저 지원률이 88%인 사용자 정의 CSS @property를 활용함. 브라우저마다 초기값 설정 방식이 다른 점은 주의해야 함. 크롬은 정의되지 않았거나 유효하지 않은 값이면 초기값을 사용하지만, 파이어폭스는 정의되지 않은 경우에만 초기값을 사용함. 대부분의 프로젝트에는 문제가 되지 않겠지만, 브라우저 간 구현 불일치를 해결하려면 JavaScript로 파이어폭스의 기본값을 설정해야 할 수도 있음.
    • CSS에는 mod(), round(), 삼각 함수 등 충분한 수학 함수가 지원됨. CSS는 JavaScript처럼 타이머를 시작할 순 없지만, 요즘은 CSS Houdini API로 사용자 정의 변수를 정의하여 밀리초 단위로 시간을 추적할 수 있음. 그런데 JavaScript가 있는데 왜 이런 것들이 모두 필요할까? 그리기 레이어는 그리기 프리미티브에만 관심을 가져야 하지 않을까? 왜 고차원 레이어를 점점 더 많이 넣으려 하는 걸까?
    • 만든 시계가 매우 세련되어 보임. 잘 작성된 글임. 크롬은 아직 mod()에 대한 CSS 지원을 출시하지 않아서 미리 보기 릴리스를 사용하지 않으면 페이지의 대부분 예제가 애니메이션되지 않음.
    • 틱을 제어할 필요 없이 모든 브라우저에서 부드러운 CSS 애니메이션을 원한다면 FLIP 방법이 유용함.
    • 들숨-멈춤-날숨-멈춤 단계를 모두 사용자 정의하여 자신의 신체에 맞추고 원하는 효과를 낼 수 있는 '박스 호흡' 같은 것을 하고 싶었는데, 이 페이지에 있는 것 같은 방법 없이는 (JS나 엄청난 복잡성 없이는) 할 방법을 찾지 못했음. 이 페이지에는 정말 창의적인 데모가 있음!
    • 흥미롭게도 mod()를 사용하기 전의 데모는 작동하지만 mod()와 sin()은 최신 안드로이드 크롬에서 아무 작업도 하지 않음.
    • 페이지 하단의 애니메이션이 매우 인상적임. <div> 요소가 아닌 <video>처럼 보임.
    • 매우 인상적이지만, 어떻게 보면 수십 년 전 플래시로 할 수 있었던 것에 가까운 지점에 도달한 것 같음. 플래시가 다시 돌아오길 바라지는 않지만 CSS 애니메이션을 만들기 위한 더 사용자 친화적인 도구가 있으면 좋겠음.

Awesome Web Effect - 웹페이지 효과 모음

🚀 A series of exquisite and compact web page cool effects

배경 꾸미기, 마우스 효과, CSS 3D 효과, 이미지 효과, 입력 효과, 트랜지션 효과, Rain & Snow, 버튼 효과, 로딩 효과, 오디오 효과, WebCam 효과, SVG Animation, 불꽃놀이, 등

Glassmorphism

글래스모피즘 구현 방법

Light theme 

/* Background styles */
body {
    background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100');
    background-position: center;
}

/* Glassmorphism card effect */
.card {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

/* Generated by https://generator.ui.glass/ */

Dark theme 

/* Background styles */
body {
    background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100');
    background-position: center;
}

/* Glassmorphism card effect */
.card {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(17, 25, 40, 0.75);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
}

/* Generated by https://generator.ui.glass/ */

2025년 디자이너를 위한 새로운 프론트엔드 기능들

CSS 컨테이너 쿼리 및 스타일 쿼리

  • 컴포넌트 중심 스타일링 가능
    • 컨테이너의 너비 및 스타일 정보를 쿼리하여 CSS 스타일 적용
    • 여러 변형을 가진 재사용 가능한 컴포넌트 스타일링에 유용
    • 참고: CSS 스타일 쿼리 소개

텍스트 균형 조정 (text-wrap: balance)

  • 타이포그래픽 균형 유지
    • 제목 및 카드 타이틀 등에서 텍스트가 고르게 분배되도록 자동 계산
    • 참고: Ahmad Shadeed의 가이드

폼 입력 필드 자동 크기 조정

  • 입력 크기 자동화
    • 텍스트 입력 또는 선택 메뉴 크기가 컨텐츠에 맞게 자동으로 조정
    • 간단한 CSS 한 줄로 구현 가능
    • 참고: Adam Argyle의 설명

=== 숨겨진 콘텐츠 검색 가능 (hidden=until-found) ===

  • UI 접근성 향상
    • 접힌 아코디언 섹션 등 숨겨진 콘텐츠를 페이지 내 검색 및 검색 엔진에서 검색 가능
    • 참고: Joey Arhar의 가이드

고해상도 색상 지원 (OKLCH, OKLAB)

  • 50% 더 많은 색상 지원
    • 사람의 색상 지각을 기반으로 설계된 새로운 색상 스펙
    • 디자인 시스템과 그라데이션에 적합
    • 참고: Vitaly Friedman의 설명

CSS 상대 색상

  • 기존 색상 기반 색상 계산
    • from 키워드를 사용하여 색상의 밝기 조정, 보색 계산 등 가능
    • 참고: Adam Argyle의 코드 스니펫

View Transitions API

  • 부드러운 화면 전환
    • 기존 화면에서 새로운 화면으로 이동 시 CSS 애니메이션을 활용한 매끄러운 전환 구현
    • 단일 문서 또는 두 개의 문서 간 전환 지원
    • 참고: Bramus Van Damme의 가이드

CSS 스크롤 스냅

  • 정확한 스크롤 경험 제공
    • 사용자가 특정 콘텐츠 항목으로 스냅되도록 스크롤 컨테이너를 설정 가능
    • 참고: Ahmad Shadeed의 가이드

부모 스타일링 (:has)

  • 부모 요소를 자식 요소 상태 기반으로 스타일링
    • 부모-자식 관계를 넘어서 다른 요소의 상태에 따라 스타일 조정 가능
    • 참고: Josh W. Comeau의 가이드

다른 주목할 기능들

  • 입력 상태 스타일링 개선: :user-valid, :user-invalid로 사용자의 입력 변경 후 피드백 제공
  • 모바일 키보드 최적화: inputmode와 enterkeyhint로 가상 키보드 개선
  • <dialog> HTML 요소: 접근 가능한 모달 및 팝오버 구현

Troubleshooting

Vue 컴포넌트에서 scoped style 적용 안되는 현상

Vue Loader#Deep Selector 항목 참조.

See also

Favorite site

Article

Guide

Examples

Tools

  • Ultimate CSS Gradient Generator
  • Code Beautifier: CSS Formatter and Optimiser
  • Devices.css - Modern devices crafted in pure CSS - 순수 CSS로만 그린 요즘 기기들
    • 많이 사용하는 기기들의 외형을 순수 CSS로만 표현 (대부분 바탕화면은 제외하고 프레임만)
    • 폰 : 아이폰 14 Pro/14/X/8 과 3G, 구글 픽셀 6 Pro/2XL, 삼성 갤럭시 S8
    • 컴퓨터 : 맥북 프로, 아이맥, 맥북프로 2018, 맥북, 서피스 북, 서피스 스튜디오
    • 태블릿 : 아이패드 프로, 아이패드 프로 2017, 서피스 프로
    • 시계 : 애플 워치 울트라, 애플 워치 시리즈 8
    • 악세사리 : 홈팟, Pro Display XDR
  • Open-Source UI elements - made with CSS and HTML - HTML/CSS로 만들어진 무료 UI 엘리멘트들
    • 버튼/로더/체크박스/스위치/인풋/카드 등 636개의 컴포넌트
    • 5232명의 컨트리뷰터
    • 완전히 무료. 개인용/상업용 상관없이 이용 가능

Tip

/ 애플리케이션 실행시에 방대한 데이터 리스트/그리드를 로드할 경우에 적합 / {

content-visibility: auto;
contain-intrinsic-size: 1px 5000px;

}

</syntaxhighlight>

References

  1. 15_ways_to_implement_vertical_alignment_with_CSS_-_LogRocket_Blog.pdf ↩

  2. Time-based_CSS_Animations.zip ↩

  3. Awesome-web-effect-README-88db71a.md.zip (2021-04-16) ↩

  4. Why_CSS_has_become_difficult_to_understand_through_CSS_history.pdf ↩

  5. Centering_in_the_Unknown_-_CSS-Tricks.pdf ↩

  6. In_the_Woods_–_Vertical_Centering_With_CSS.pdf ↩

  7. Vertical_Centering_with_CSS_-_ko.pdf ↩

  8. Font_metrics_-_line-height_and_vertical-align.pdf ↩