CSS

CSS에서 어떤 태그나 클래스 등에 스타일을 입힐 건지 결정하는 것이 셀렉터다. 기본적으로는 아래와 같은 것이다.

/* body 태그 전체에 적용되는 스타일 */
body { ... }

/* container 라는 클래스에 적용되는 스타일 */
.container { ... }

/* seorenn 이라는 아이디에만 적용되는 스타일 */
#seorenn { ... }

특정 태그의 특정 클래스에 스타일을 적용하는 경우는 이런 식으로 쓴다.

/* content 클래스를 사용하는 p 태그에만 입혀지는 스타일 */
p.content { ... }

여러 스타일에서 공통된 부분을 만들 때 콤마를 이용해 셀렉터 그룹을 만들 수 있다.

.foo_style,
.bar_style,
.foo_container .foobar_style,
.bar_container .foobar_style {
  font-size: 12px;
  ...
}
.foo_style {
  font-color: red;
  ...
}

이런 식으로 공통된 스타일을 하나로 모으고, 별도의 스타일은 별도로 나눠서 코딩 양을 줄일 수 있다.

태그나 클래스 간의 관계를 명시할 수도 있다.

/* content 라는 클래스를 선언한 div 태그 안에 있는 첫 p 태그에 입혀지는 스타일 */
div.content > p { ... }

아래는 자주 사용되는 가상 요소들이다.

::first-line    /* 첫 줄 */
::first-letter  /* 첫 글자 */
::before        /* 콘텐츠 앞 */
::after         /* 콘텐츠 뒤 */
::selection     /* 선택 영역 */
::placeholder   /* 폼 필드 플레이스홀더 */

::before 를 써서 예를 만들어보자.

<style>
.goodhead {
  color: gray;
}
.goodhead::before {
  color: white;
  content: "[GOOD] ";
}
</style>

<div class="goodhead">Sample</div>

이렇게 하면 아래 처럼 표시된다.

여러모로 활용 방법이 많을 것 같다.

• px: Pixel(픽셀) 즉 화소 단위. 비트맵 이미지의 정확한 크기를 지정하는 등의 특수한 경우를 제외하곤 그다지 쓸 일은 없을 것 같다.
• %: 부모 요소에 상대적인 백분율 크기 단위.
• em: 부모 요소에서 지정한 글꼴의 크기 배율. 즉 1em 은 부모 요소의 폰트 크기다.
• rem: root em, 최상위 글꼴 크기의 배율. em 이 부모 요소에 상대적인 것에 비해 rem 은 단 하나의 고정 기준을 이용한다고 볼 수 있다.
• vh, vw, vmax, vmin: CSS Viewport 간단 정리 참고

동적인 계산을 위해 아래의 calc 항목을 참고할 수도 있다.

테두리다.

border: 1px solid;
border-radius: 3px;

위 처럼 border-radius를 이용해 테두리를 둥글게 할 수도 있다.

border랑 비슷하면서도 다르다.

outline: solid;

outline: dashed red;

outline: 1rem solid;

outline: thick double #32a1ce;

outline: 8px ridge rgba(170, 50, 220, .6);
border-radius: 2rem;

마지막 예제에서 border는 outline의 안쪽에 생성되고 따로 논다(?).

.element {
    background-image: image-set(
        url("foo") 1x,
        url("bar") 2x
    );

    background-image: -webkit-image-set(
        url("foo") 1x,
        url("bar") 2x
    );
}

레티나를 안다면 쉽게 눈치챌 수 있는 기능이다.

width: min(100px, 50%);

당연한 그 함수로 두 수 사이에 작은 값을 선택한다.

width: max(100px, 50%);

역시 당연한 그 함수로 두 수 사이에 큰 값을 선택한다.

width: clamp(100px, 50%, 10vw * 2)

최적값을 구하는 용도다. 매개변수는 순서대로 최저, 최적, 최대를 의미한다. 즉 범위 사이의 값을 선택하기 위한 용도로 사용한다.

문장이 길어져서 다음 줄로 넘어갈 때 단어를 중간에 자르면 가독성에 문제가 있을 수 있다. 이럴 때는 아래와 같은 스타일을 넣을 수 있다.

word-break: keep-all;

border-radius: 8px;

저기엔 숨겨진 많은 옵션이 있다.

테이블 등에서 실수를 표시할 때 소수점 기준으로 표시하려면 아래와 같은 스타일을 추가할 수 있다.

.table {
  font-variant-numeric: tabular-nums;
}

달러나 유로 단위의 경우 소수점 아래도 표기하는데 이럴 때 유용할 것 같다.

콘텐츠를 좌 혹은 우측에 끼워 넣기 위해서 자주 사용하는 그 Float다.

.left-content {
  float: left;
}
.right-content {
  float: right;
}

그런데 이 부유 블록이 가끔 그 아래의 침범하지 않았으면 하는 블록에도 영향을 줄 때가 있다. 이럴 때는 그 아래 블록에 clear를 지정해주자.

.following-div {
  clear: both;
}

이러면 부유 블록은 자동으로 격리된다.

블록 안의 콘텐츠가 float 속성을 사용하고 있을 때 그 바깥쪽 블록의 사이즈가 자동으로 결정되지 않는데 이럴 때는 아래 속성을 그 바깥 블록 스타일로 지정해버리면 해결될 수도 있다.

.outer-div {
  overflow: hidden;
}

미디어 쿼리를 이용하면 브라우저 크기 별로 대응할 수 있다.

@media screen and (min-width: 1280px) {
  /* if screen width >= 1280px */
}

@media screen and (min-width: 800px) and (max-width: 1279px) {
  /* if screen in (800px <= width < 1280px) */
}

@media screen and (max-width: 799px) {
  /* if screen width <= 799px */
}

backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);

팝업 스타일에서 유용하게 써먹을 수 있는 예제다.

backdrop-filter: blur(4px) grayscale(90%);
-webkit-backdrop-filter: blur(4px) grayscale(90%);

아예 배경을 더 어둡게 만들어 버리면 더 눈에 띄는 팝업 스타일을 만들 수도 있다.

아래와 같은 식으로 CSS 백그라운드 이미지를 쓸 수 있다.

{
    background-image: url(/foo/bar/image.png);
    background-repeat: repeat-x;
}

여기서 background-repeat 에 따라 패턴화 되는 경향이 다르다.

• no-repeat 는 한 장의 이미지만 쓴다. 즉 패턴을 쓰지 않는다.
• repeat-x 의 경우 가로축으로만 패턴이 나열되며 이미지가 크기에 따라 클리핑 될 수도 있다.
• repeat-y 의 경우 세로축으로 나열되며 나머진 위와 동일하다.
• repeat 는 x, y축 둘 다 위 처럼 나열된다.
• round 는 패턴이 잘리지 않게 비율에 맞는 확대와 나열을 쓴다. 패턴 방식이라면 가장 효율적일 것 같다.
• space 는 패턴을 나열하되 확대를 하지 않고 패턴 사이에 공백을 준다. 배경색에 영향을 받지 않고 이미지 크기를 그대로 유지하고자 한다면 효율적인 선택이다.

content-visibility: auto;

화면 밖 먼 요소를 렌더링하지 않는다. 초기 로딩 성능에 도움이 될 듯 하다. 렌더링만 하지 않을 뿐 문자열 검색이나 인터랙션 등도 가능하다. 크롬85부터 지원된다.

불행히도 렌더링만 하지 않을 뿐이지 레이아웃을 잡으려면 크기 계산 등은 미리 해야한다. 이 부분을 미리 계산하지 않고 빠르게 대충 박아 넣으려면 아래 속성도 추가한다.

contain-intrinsic-size: 1000px;

이러면 화면 밖에 있어서 렌더링 하지 않은 블록 요소의 크기를 미리 계산하지 않고 대충 1000 픽셀 높이를 가지고 있다고 가정하고 처리한다.

다 좋긴 한데 렌더링 상황에 따라 스크롤바 위치가 멋대로 바뀔 가능성도 있어서 크기가 정해져 있는 요소에 주로 사용하는 편이 자연스러울 것 같다.

img:not([alt]) {
    border: 5px solid red;
    filter: blur(5px);
}

alt가 없는 img를 빨간색 테두리와 흐림 처리를 하는 무섭고 이상한 코드다.

alt는 접근성을 보완하기 위해 중요한 설명이다. 예를 들어 시각장애인의 경우 이 alt 설명이 없으면 이미지가 무엇인지 전혀 알 수가 없다.

아래 옵션이 붙은 블록은 스크롤 할 때 강제로 딱 맞춰 준다.

scroll-snap-type: x mandatory;

뭔 소리인지 이해가 안 되면 🌏scroll-snap-type의 예제를 살펴보자.

a:is(:not([href]), [href=""], [href="#"]) {
    outline: 2px dotted red;
}

앵커(a)에 링크가 없거나 href 속성 자체가 없는 경우 등에 빨간색 점선 테두리로 경고해주는 스타일이다.

scroll-behavior: smooth;

하지만 진정장애가 있는 사람의 경우 이 속성은 부담을 줄 수도 있다. 이럴 때를 대비해 관련 설정이 되어 있지 않은 경우에만 사용하도록 설정할 수도 있다.

@media (prefers-reduced-motion: no-preference) {
    body {
        scroll-behavior: smooth;
    }
}

font-display 속성을 이용하면 웹폰트가 로딩되기 전에 어떻게 할 것인지를 설정할 수 있다.

@font-face {
    src: ...;
    font-family: ...;
    font-display: swap;
    ...
}

swap 은 대체글꼴을 먼저 표시한 후 폰트 로딩이 끝나면 해당 폰트로 변경한다. 만약 로딩 속도에 따라 웹폰트 표시 여부를 결정하려면 fallback 이나 optional 을 사용하자.

• 🌏CSS 말줄임표 뒤에 컨텐츠 두기
• 🌏1-Line Layouts*: 10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be.

• 🌏이번에야말로 CSS Grid를 익혀보자
• 🌏CSS Grid Generator

• 🌏이번에야말로 CSS Flex를 익혀보자
• 🌏The Complete CSS Flex Box Tutorial

• 🌏🌙 다크모드 웹 페이지 디자인
• 🌏Minimum viable dark mode

• 🌏Neumorphism.io: Generate Soft-UI CSS code. 버튼 스타일 만들 때 참고
• 🌏Glassmorphism CSS Generator: macOS Big Sur 혹은 Windows 11 에서 볼 수 있는 스타일. 불행히도 Big Sur 기준 사파리에서는 블러가 안 먹히는 듯
• 🌏Buttons Generator
• 🌏Stitches: Layout Template Generator

• 🌏Pico.css - Minimal CSS Framework for semantic HTML
• 🌏Water.css

• 🌏Thinking About The Cut-Out Effect: CSS or SVG?: CSS나 SVG로 잘린 효과나 마스크를 사용하는 방법

• 🌏1-Line Layouts: Some Layout Examples and Tips
• 🌏10 Ways to Hide Elements in CSS
• 🌏Modern CSS Solutions for Old CSS Problems