2021-05-07 Todo scss설정하기

CSS 단위 em rem

CSS의 길이 단위 중 em rem은 상대적 기준으로 크기를 정한다.

em은 상위 요소 기준으로 크기를 정한다.

만약 html테그의 font-size가 16px이고 html의 하위 요소인 body의 font-size를 1.5em으로 잡는다면 body의 실질적인 font-size는 32px이 된다.

 

rem은 최상위 요소인 html 기준으로 크기를 정한다.

세부 작동 방식은 em과 비슷하니 생략하겠다.

요소의 가운데 정렬

아래 코드와 같이 width를 먼저 지정해준 뒤 margin-left, margin-right 속성에 auto 값을 부여하면 가운데 정렬이 된다.

.TodoTemplate {
   width: 512px;
   //width가 부여된 상황에서 중앙정렬
   margin-left: auto;
   margin-right: auto;
}

SVG, 아이콘 조작

color나 font-size를 통해 직접적으로 아이콘을 조작할 수 있다.

 button {
    color: white;
    font-size: 1.5rem;
 }

input, button 기본 설정

input이나 button은 보통 아래와 같이 기본 설정을 해준 뒤 사용하자

 button {
    background: none;
    outline: none;
    border: none;
 }

developer.mozilla.org/ko/docs/Web/CSS/Adjacent_sibling_combinator

인접 형제 결합자 - CSS: Cascading Style Sheets | MDN