본문 바로가기
스터디/프론트엔드

CSS 참고 키워드 - CSS 요소

by sepang 2024. 9. 24.
반응형

CSS를 학습하면서 기억하면 나중에 유용하겠다 싶은 키워드들을 기록한 글이다. 하나하나 상세히 설명을 적기엔 내용이 방대해서 필요하면 직접 검색을 하면서 그때그떄 활용을 하면 좋을 것 같다.

올바른 단위 선택하기

font-size (root element)

  • %: 브라우저 설정보다 웹 사이트의 기본 폰트 크기를 작게하려면 해당 값을 사용할 수 있다.
  • 단위를 사용하지 않는 게 좋다

font-size

  • rem: 루트 요소에 아무런 폰트 크기를 적용하지 않은 경우, rem이 적용된 font-size는 항상 이 루트 요소를 참조한다. em은 자식 요소에 적용하되 연쇄적으로 적용하면 크기 제어가 복잡해진다.

padding, margin

  • rem: 만약 요소 사이의 margin을 고정하고 싶다면, 이때는 rem을 적용하지 않아도 된다.

border

  • px: 고정된 값을 사용하는게 좋다. rem 등의 값을 사용한 두꺼운 테두리를 굳이 사용하지는 않기 때문이다.

width, height

  • %: 요소에 적용되는 position 프로퍼티에 따라  달라지는 컨테이닝 블록을 염두에 두자.
  • vw, vh: 요소의 크기를 뷰포트와 연관짓고 싶을 때 사용.

top, bottom, left, right

  • %: 요소를 어떻게 움직이는지에 대해서는 일반적으로 컨테이닝 블록과의 관계가 필요하기 때문에 백분율을 사용하게 된다.

 

CSS 명시도

div#test span {
  color: green;
}
div span {
  color: blue;
}
span {
  color: red;
}

명시도는 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단이다. 즉 동일한 html 요소에 여러 css 속성이 설정되어 있을 때, 어떤 것을 우선적으로 적용할지 찾는 것이다. 이는 명시도가 높은 순서를 토대로 적용되고 그 순서는 아래와 같다.

  1. 인라인 스타일
  2. #ID 선택자
  3. .class, :pseudo-class, [attribute] 선택자
  4. <Tag>, ::pseudo-element 선택자

명시도의 계산 방법은 4자리 숫자(0, 0, 0, 0)을 사용하면 계산할 수 있다. 각 숫자의 자릿수는 위 1, 2, 3, 4에 해당하는 선택자의 개수다.

div {
      color: red;
    }

.box {
  color: green;
}

#main {
  color: blue;
}

예를 들어 위 css의 명시도는 각각 0, 0, 0, 1 / 0, 0, 1, 0 / 0, 1, 0, 0으로 계산할 수 있다. 이때 더 높은 수를 가지는 것이 적용된다고 보면 된다.

 

여백 상쇄

https://medium.com/@joseph0crick/margin-collapse-in-css-what-why-and-how-328c10e37ca0

2개의 html 요소가 나란히 있을 때, 둘 사이 바깥쪽 여백(margin)이 상쇄되는 것이다. 더 큰 쪽이 작은 쪽을 덮어씌우게 된다. 두 요소간 거리가 너무 멀어지지 않게 유지할 수 있다.

 

Box Sizing

CSS를 통해 박스 요소의 너비(width)나 높이(height)를 조절할 때, 기본적으로 content를 기준으로 적용이 된다. 예를 들어 위 그림 기준으로

  • box-sizing: content-box라면 해당 요소의 너비는 div의 300px에 padding과 border 너비까지 더해진 380px이 된다.
  • box-sizing: border-box라면 해당 요소의 너비는 300px 내에 padding과 border의 너비가 모두 포함된다.

 

CSS 요소 배치 시 참고

왜 위치관련 프로퍼티가 적용이 안됐었는가

요소를 원하는 위치에 배치할 때, 적절한 position 프로퍼티를 적용해야한다. 이때 기본값은 static인데, 이때는 top, bottom 같은 속성값을 추가해도 적용이 되지 않는다.

position: fixed / position: absolute

이 두 개의 값은 모두 적용 시 요소가 문서 대열에서 제거된다. 즉 해당 요소가 기존 문서의 흐름에 따라 배치되지 않아서 다른 요소는 이 요소가 없는 것 처럼 배치된다.

position: fixed 프로퍼티는 뷰포트를 기준으로 배치 컨텍스트(요소가 어느 기준으로 위치할지를 결정하는 영역)가 구성된다.

반면 position: absolute 속성은 position 속성의 조상이 없으면 HTML 기준으로 적용되고 만약 position 조상이 있는 경우에는 해당 프로퍼티가 적용된 가장 가까운 조상이 해당 요소를 기준으로 배치 컨텍스트가 구성된다.

position: relative

position: relative는 요소를 현재 위치를 기준으로 얼마나 떨어지는지를 기준으로 배치한다. 즉 해당 요소 자체가 배치 컨텍스트가 되는 것이다.

이때 overflow: hidden 속성을 추가해주면 부모 요소를 벗어나려고 할 때 해당 요소를 표시하지 않는다.

 

배경 이미지 삽입 시

background-image, background-size

특히 background-size는 수동으로 크기를 설정하는 것 보다는 cover, contain 속성을 사용하는 것이 편리하다.

background-position

이미지를 삽입하면 페이지에 크기가 딱 들어맞는 경우는 거의 없기에 잘리는 부분 같은게 생길 수 있다. 그래서 이미지의 어느 부분을 표시할지를 해당 속성을 통해 설정이 가능하다.

background-position: 50% 50% 같이 2개의 값을 넣을 수 있는데, 각각 컨테이너를 초과할 때 왼쪽, 상단에서 어느 정도의 비율로 자를지를 나타낸다. 50% 50%으로 하는 것은 왼쪽/오른쪽, 상단/하단의 비율이 모두 동일한 비율로 처리되므로 컨테이너보다 큰 이미지라면 이미지의 중앙 부분이 표시될 것이다.

직접적인 수치 대신 auto, left, top 등의 값을 넣을 수 도 있다.

 

% 단위와 position 속성

컨테이닝 블록이란 요소의 크기나 위치에 영향을 주는 기준이라고 보면 된다.

position: fixed일 때

%가 적용된 요소가 position: fixed일 때는, 뷰포트가 컨테이닝 블록이 된다.

position: absolute일 때

%가 적용된 요소가 position: absolute일 때는, 조상의 contents, padding 기준으로 계산된다. 이 때 조상은 abolute, relative, fixed, stick 프로퍼티가 적용되어 있어야 한다. 즉 position: static(기본값)이 아닌 가장 가까운 인접 조상이 컨테이닝 블록이 된다.

position: static 또는 position: relative일 때

%가 적용된 요소가 position: static 또는 position: relative일 때는, position: absolute 일 때와 유사하나 가장 가까운 block 레벨 인접 조상의 contents만 고려하면 된다.

 

반응형

댓글