s e o p p o r t . l o g

Today I Learned

2024.02.08 TIL

Seo Ji Won 2024. 2. 8. 21:33

parseInt는 공백 있거나 해도 대충 숫자면 다 변환해줌
문자열 있어도 제외하고 숫자만 반환

Number은 엄격하게 체크

태그에 onClick 같은 건 있는데
내가 스타일드를 위해 선언한 props는 인식할 수 없자나
그니까 스타일드에서만 받는 프롭스는 딸라를 붙여줘

 

마지막 아이템에만 적용되는 스타일: IconWrap에 margin-left: auto;를 적용하여, 마지막 아이콘만 오른쪽 끝으로 이동시킬 수 있습니다. 이 방법은 Flexbox에서 한 요소를 나머지 요소들로부터 분리하여 오른쪽으로 밀어내고 싶을 때 유용합니다.

 

span 등 inline 속성의 margin은 양 옆으로만 적용 때문에
위 아래 마진을 적용하고 싶으면 inline block을 지정해 주거나
block 속성태그를 사용해야한다.

 

https://seons-dev.tistory.com/entry/display-flex-%EC%A2%8C%EC%9A%B0-%EC%A0%95%EB%A0%AC

 

(CSS) display: flex에 여러 요소가 있을때 좌우 정렬 하는 방법

오늘은 HTML의 부모 클래스가 display: flex일 때, 자식 클래스를 좌우로 떨어뜨려 정렬하고 싶을 때 어떻게 하는지 알아보도록 하겠습니다. display flex 좌우 정렬 방법 우선, 부모 클래스가 display: flex

seons-dev.tistory.com

 

css 줄 넘어가면 말줄임표

overflow: hidden; // 벗어나면 안보이게
  text-overflow: ellipsis; // ...으로 표시하겠다
  word-break: break-word; 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

 

 justify-content: 중심축 방향으로 어떻게 정렬할지 결정

align-items: 교차축 방향(기본: 수직) 정렬

 

마지막요소의 margin-bottom이 부모요소때문에 적용이 안되면 padding을 써보자

'Today I Learned' 카테고리의 다른 글

2024.02.14 TIL  (0) 2024.02.14
2024.02.13 TIL  (0) 2024.02.13
2024.02.07 TIL  (0) 2024.02.07
2024.02.06 TIL  (0) 2024.02.06
2024.02.05 TIL  (0) 2024.02.05