TIL 21.06.03

Jaemin Jung·2021년 6월 3일

CODESTATES Today I learned

Today I Learned

목록 보기

34/62

오늘한일

이전 과제를 이어서 UI컴포넌트의 css를 구현하였고 그에 맞는 속성을 연구하고 공부해보았다.

UI컴포넌트 과제로 알게된 CSS속성들

(이해한대로 작성하였기에 틀릴수도 있습니다.)

position : 요소의 위치를 지정해줌 top left right bottom
(static; relative; absolute; -webkit-sticky; fixed;)

그중에서 position : fixed는 부모 말안듣는 사춘기 학생이라고 비유해보고싶다.
부모태그의 공간을 무시하고 전역에서 위치를 조절하여 놓는다.

z-index : 999; - 출력되는 우선순위? 요소들의 쌓임에 대한 위치를 조정 가능하다.
숫자가 높을수록 가장 앞에서 위치하며, 가장 상단에 위치해야하는 요소에 경우 속성값을 999를 사용한다고 한다.

rgba(0,0,0,0) - 색상을 지정하는 속성이며 0,0,0,0은 투명한색으로 항목의 뒷편이 모두 보이지만, 여기서 숫자 조금 조절해서 약간의 색상만을 줄수도있다. - transparent로 대체 가능

Grid -
Flex는 한 방향 레이아웃 시스템이고 (1차원)
Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)
display: grid;로 스타트 끊어주고, 상세 내용을 설정 가능하다.
place-items: center; 해당 요소가 정가운데 위치하도록 설정해줌

cursor : 마우스를 해당 요소에 올렸을때 마우스의 모양이 바뀌게 설정
속성 리스트 - https://developer.mozilla.org/ko/docs/Web/CSS/cursor

(by StyledComponent)
클래스 네임이 중첩된상황에는 클레스 네임이 너무 길어지니까 그 해당 클래스 내부에서 &를 사용한다.

<div className=`toggle-container toggle--checked`/>

> .toggle-container {
    background-color:  gray;

    &.toggle--checked{
    background-color:  #4000c7;
    }
  }