📝em, rem
<style>
.parent{
font-size: 20px;
}
.child {
font-size: 2em;
}
</style>
<body>
<div class="parent">
parent
<div class="child"> child</div>
</div>
</body>
<style>
.parent{
font-size: 20px;
}
.child {
font-size: 2rem;
}
</style>
<body>
<div class="parent">
parent
<div class="child"> child</div>
</div>
</body>
em은 font-size와 밀접한 관련이 있는데 상위 태그의 font-size 기준으로 px이 계산 된다
parent가 20px이기 때문에 child는 40px이 되게 된다 이런식으로 계산하면 상위 태그의 px에 따라서 동적으로 변하기 때문에 상위가 바뀌면 하위를 건드릴 필요 없이 비율로 맞게 줄어들게 된다
이러한 em 계산은 복잡하기 때문에 rem이라는 게 나온다 rem의 경우 기준이 상위태그가 아니라 HTML 전체에 적용된 px 기준으로 부모만 바꾸면 알아서 기준에 따라 조절이 됩니다
📝가변 폰트(글꼴)
기존의 가변 폰트는 em, rem 단위를 사용하여 브라우저 비율에 따라 글자 크기가 늘어나거나 줄어드는 폰트였는데 Adobe, Apple, Google, Microsoft 가 협력하여 폰트의 너비, 두께, 스타일마다 별도의 다른 파일을 사용하는 기존 폰트 대신 다양한 유형의 폰트를 단일 파일에 통합할 수 있는 OpenType 폰트 사양을 발전시킨 것으로 가변 폰트는 width(너비), weight(두께), slant(기울기) 등 폰트 별로 다양한 축을 가지고 있으며 이 축을 수치로 조정하여 원하는 스타일을 지정하고 조합할 수 있습니다
- Noto+Sans+KR:wght@200, Noto+Sans+KR:wght@200;300;500처럼 폰트나 폰트 굵기에 따라 파일을 여러개 다운 받는게 아닌 하나의 파일에다가 옵션을 줌으로 해당 폰트들을 사용할 수 있습니다
📝Sass, Scss
Sass는 CSS의 확장된 문법을 제공하는 스타일 시트 언어입니다
Sass는 기본적으로 Ruby 언어로 작성되었으며, Sass 파일은 .sass 확장자를 가집니다
하지만 Sass의 문법은 초기에 채택하기 어려운 부분이 있었기 때문에, 이에 대한 대안으로 SCSS(Sassy CSS)가 나왔습니다. 참고로 사용하려면 npm install과 같이 라이브러리 설치가 필요합니다.
Sass
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
Scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Scss (변수사용)
/** 변수 사용1 **/
$bgColor: red;
body {
background-color: $bgColor;
padding: 0;
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
/** 변수 사용2 **/
%alert {
margin: 10px;
padding: 10px 20px;
border-radius: 10px;
border: 1px dashed black;
}
.success {
@extend %alert;
background-color: green;
}
.error {
@extend %alert;
background-color: tomato;
}변수를 사용해 재활용 및 가독성 증가
Scss (Nesting)
ul {
list-style-type: none;
padding: 0;
display: flex;
gap: 10px;
li {
background-color: tomato;
color: white;
padding: 5px 10px;
border-radius: 7px;
&:hover {
opacity: 0.8;
a {
color: gray;
}
}
a {
text-decoration: none;
color: white;
text-transform: uppercase;
}
}
}Nesting으로 알아보기 쉽게 표현 가능 (너무 많아지면 가독성 떨어지긴 함)
Scss (mixin)
@mixin alert($bgColor, $borderColor) {
background-color: $bgColor;
margin: 10px;
padding: 10px 20px;
border-radius: 10px;
border: 1px dashed $borderColor;
}
.success {
@include alert(green, blue);
}
.error {
@include alert(tomato, white);
}함수와 같이 만들어서 재활용성 및 가독성 증가
🔗 참고 및 출처
https://penguingoon.tistory.com/275
