통계 위젯 (화이트)

251495
8881
2514302

저작권

Do not be afraid to fail. Be afraid not to try. Pain is temporary, suck is forever. Keep it small and simple.

카카오 광고







CSS, 이런 것도 가능하네!! 이것만은 알고 가자 by 미친병아리

아, UI 만드는건 정말 싫어요. 근데, 안할 수는 없잖아. 싫어 하는 걸 묵묵히 할 줄 알아야 어른 이라고들 하는데, 그럼 어른 되기 싫다 정말로. 아무튼 먹고 살기 위해 필요한 것도 배우긴 해야 합니다. 라고 말하기엔 너무 하기 싫은건 사실.

아무튼, 알아두면 요긴한 CSS 팁을 잘 정리해둔 영상이 있길래 일단 메모. 어려운 내용은 없으니 한번 보면 다 아는 것 같은데, 돌아서면 기억이 안 나잖아. 아무리 10분짜리 동영상이라 다시 보는데 부담 없다고 하더라도 메모해 둔 것 스윽 보며 복습 하는 것이 훨씬 빠르지.

라고 말하기엔 유투브 동영상 10분짜리 짬짬히 여러번 보는게 더 재미날지도 모름.

아래 내용은 fireship 동영상 내용을 정리했습니다




1. box model

모든 HTML 엘리먼트가 박스모델을 가지고 있음
패딩, 보더, 마진
일단, 머 외우는거지. 패보마, 남들은 이렇게 외운다던데




2. flexbox

올~ 플렉스~ 이렇게 쓰는 것 이었구만. 이 친구 참 영상 잘 만든다
이제 정말 디자인은 CSS로 다 할 수 있구만




3. grid

flexbox : single columns / rows
grid : multiple columns / rows

테이블 같은 정렬을 이젠 CSS로 완전 간편하게




4. clamp it down

MIN, preferred, MAX - 이런 개편한 방법이 이제 있구만

언제 생겼는지 모르겠지만, 옛날에 알던 CSS 와는 너무 다른, 완전 편해진 세상




5. aspect ratio

비디오, 이미지 등에 활용하면 좋겠네




6. variables for variables

이런 기능이 다 있었군요. 알아두면 정말 요긴한 상황에 잘 써먹을 수 있을 것 같다

라고 쓰긴 했지만 솔직히 아직은 언제 써먹을지 별로 감은 안온다




7. fancy calculations

음, 계산도 가능하다니 놀랍다 라고 적고 어따 써먹을 수 있을지는 나중에 고민해 보자




8. state management counter

숫자를 매기는 경우 아니면 끝 활용은 없을 듯




9. focus-within

오올~ 이건 정말 괜찮네. 심지어 토글 버튼까지 CSS만으로 해결이 되다니

CSS 만쉐이!!




기타 팁 이라고 알려준 내용은 사실 별로 와닿지는 않는다

1. firefox가 chrome 보다 좋다 - 근데 난 잘 모르겠다. 내용을 들어도 여전히 난 크롬이 더 좋은걸

2. 이모지 사용 가능 - 가끔씩 사용해보면 재밌겠어~

3. https://postcss.org - 음, 일단은 이런게 있다는 것만 알아두자




[에버키] Atlas S15 아틀라스 S15 EKP121S15, 본상품선택 BOSE QC35 II 2세대 노이즈 캔슬링 헤드폰, 블랙, QuietComfort 35 II Apple 2020년 맥북 프로 13 (M1 칩셋 8코어 CPU 8코어 GPU), 8GB, SSD 256GB, 스페이스 그레이 키크론 K6 무선 기계식키보드 WHITE LED 핫스왑 갈축, 혼합색상 마이크로소프트 모바일 마우스 KGY-00060, 포피레드 한성컴퓨터 39.62cm FHD DEX 포터블 HDR 멀티터치 휴대용 모니터, TFX156T
쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 있습니다.

카카오 광고