blog

CSS 선택자와 레이아웃 메모 모음

Front-end / CSS#CSS#선택자#Flexbox#말줄임#모바일#팁 모음

선택자

자식 선택자와 자손 선택자

.list > li { }  /* 자식: .list 바로 아래 li만 */
.list li { }    /* 자손: .list 아래 모든 깊이의 li */

.a.b와 .a .b

.info-pop__text.indonesia { }   /* 두 클래스를 모두 가진 한 요소 */
.info-pop__text .indonesia { }  /* .info-pop__text 안에 있는 .indonesia 요소 */

공백 하나 차이로 의미가 완전히 달라진다.

DOM: Node와 Element

  • Node: DOM 트리를 이루는 모든 것. 요소뿐 아니라 텍스트, 주석, 문서 자체도 Node다.
  • Element: 그중 태그로 만들어진 노드(<div>, <p>).
parent.childNodes; // 텍스트·주석 노드까지 포함
parent.children;   // 요소만

Flexbox

flex 컨테이너의 자식은 줄어든다

display: flex의 자식은 기본값 flex-shrink: 1이라, 공간이 부족하면 자기 내용 크기보다 작게 줄어든다. 또 align-items: stretch가 기본이라 교차축으로는 컨테이너 크기에 맞게 늘어난다. 자식이 의도와 다르게 찌그러진다면 flex-shrink: 0을 준다.

flex-grow가 동작하지 않을 때

flex-grow는 컨테이너의 남은 공간을 나눠 갖는다.

  1. 부모가 flex 컨테이너(display: flex 또는 inline-flex)여야 한다.
  2. 그 요소가 flex 컨테이너의 직계 자식이어야 한다.
  3. 컨테이너의 주축에 남는 공간이 있어야 한다.

가로(row) 방향 블록 레벨 flex 컨테이너는 보통 부모 너비만큼 늘어나므로 남는 공간이 생긴다. 하지만 inline-flex이거나, 세로(column) 방향인데 컨테이너 높이가 내용에 맞춰 정해진다면 남는 공간이 없어서 flex-grow가 효과가 없다. 이때는 컨테이너에 크기(height: 100%, flex: 1 등)를 주어 공간을 만든다.

텍스트

한 줄 말줄임

.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Tailwind에서는 truncate가 이 세 속성을 한 번에 적용한다. 여러 줄 말줄임은 line-clamp-2처럼 쓴다(내부적으로 -webkit-line-clamp와 overflow: hidden이 함께 적용됨). flex 자식에서 말줄임이 안 된다면 그 자식에 min-width: 0을 준다.

빠르게 클릭할 때 텍스트 선택 막기

.button {
  user-select: none;
}

더블클릭이나 연속 클릭 시 글자가 파랗게 선택되는 것을 막는다. 본문처럼 사용자가 복사할 수 있어야 하는 텍스트에는 쓰지 않는다.

모바일

Safari에서 100vh가 화면보다 클 때

모바일 Safari의 100vh는 주소창이 사라졌을 때 높이 기준이라, 주소창이 보이는 상태에서는 화면보다 커진다. 지금은 동적 뷰포트 단위를 쓴다.

.full {
  height: 100vh;  /* 지원하지 않는 브라우저용 */
  height: 100dvh; /* 주소창 상태에 맞춰 변하는 높이 */
}

svh(가장 작은 뷰포트), lvh(가장 큰 뷰포트)도 상황에 맞게 고를 수 있다.

SCSS

SCSS는 CSS에 변수, 중첩, 믹스인, 함수 같은 기능을 더한 전처리기 문법이다. 빌드할 때 일반 CSS로 변환된다. 지금은 CSS 자체에도 변수(--color)와 중첩(&)이 들어와서, 단순한 용도라면 전처리기 없이도 충분하다.

SVG를 코드로 가져오기

웹 페이지에 있는 아이콘 SVG가 필요하면 개발자 도구의 Elements 패널에서 <svg> 요소를 찾아 Copy → Copy outerHTML로 복사하거나, Network 탭에서 .svg 파일 주소를 찾아 내려받는다. 라이선스를 확인한 뒤 사용한다.