1. 종횡비 조정(aspect-ratio) .imgBox { width: 300px; aspect-ratio: 16 / 9; } 너비 300px 기준으로 종횡비 16 / 9 설정한다. 너비, 높이가 둘 다 적용되는 경우 종횡비가 적용되지 않는다 2. 종횡비 AUTO .imgBox { width: 300px; aspect-ratio: auto 16 / 9; background-image: url(이미지url); } 고유한 종횡비를 가지는 경우 해당 종횡비를 따르고, 아니면 16/9로 맞춘다. 고유한 종횡비 : 이미지와 같은 이미 요소가 가지고 있는 종횡비 3. 종횡비 고정 .imgBox { width: 300px; height: 100%; object-fit: cover; display: block; } ..

1. 밑줄 긋기 // 기본 밑줄 긋기 .underline { text-decoration: underline; text-underline-position:under; // 밑줄이 너무 붙어있을 경우 추가 } // 한번에 모든 속성 주기 .all{ text-decoration: green dotted underline; } .two{ text-decoration: underline red; } 2. 속성 포함 밑줄 긋기 // 밑줄 없음 text-text-decoration-line: none; // 밑줄 긋기 text-text-decoration-line: underline; // 윗줄 긋기 text-text-decoration-line: overline; // 취소선 text-text-decoration..

css 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 한다. css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있다. css를 적용하기 위한 3가지 방법 - 태그에 직접 속성 style={} - 적용 속성 모듈화 파일 생성 (Button.module.css) - Style Component 1. 라이브러리 설치 npm i styled-components /* TypeScript의 경우 추가 */ npm i @types/styled-components 2. 사용방법 import styled from "styled-com..