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 속성이 설정되어 있을 때, 어떤 것을 우선적으로 적용할지 찾는 것이다. 이는 명시도가 높은 순서를 토대로 적용되고 그 순서는 아래와 같다.
- 인라인 스타일
- #ID 선택자
- .class, :pseudo-class, [attribute] 선택자
- <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으로 계산할 수 있다. 이때 더 높은 수를 가지는 것이 적용된다고 보면 된다.
여백 상쇄
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만 고려하면 된다.
'스터디 > 프론트엔드' 카테고리의 다른 글
CSS 참고 키워드 - 반응형 웹사이트 (1) | 2024.09.25 |
---|---|
[JS, React]이벤트 버블링과 실제 개념 활용 사례 (1) | 2024.08.29 |
[Internet] 브라우저의 동작 방식 (0) | 2024.08.27 |
[Internet] DNS (0) | 2024.08.26 |
프론트엔드 첫 글 (0) | 2024.08.25 |
댓글