STORAGE/CSS10 tailwind 다루기 같이 보기 https://tailwindcomponents.com/cheatsheet/ https://umeshmk.github.io/Tailwindcss-cheatsheet/ 단위 표기 1 = 0.25rem = `4px` `w-full` = width: 100% `w-screen` = width: 100vw `max-w-xs` = max-width: 20rem Max / Min max-width CSS min-width CSS max-w-xs max-width: 20rem min-w-0 min-width: 0 max-w-sm max-width: 30rem min-w-full min-width: 100% max-w-md max-width: 40rem max-w-lg max-width: 50rem max-.. 2024. 4. 8. scrollbar 스타일링 보호되어 있는 글 입니다. 2023. 8. 8. 텍스트 데코레이션 스킬 업 보호되어 있는 글 입니다. 2023. 7. 29. display, visibility, opacity 속성 1. display: none; 화면에 표시를 하지 않음. 즉 렌더링 하지 않음. 2. visibility: hidden; 눈에 보이지 않게 숨김. 컨텐츠는 없으나 자리를 차지하게 됨. 3. opacity: 0; 투명하게 하여 보이지 않게 함. 투명한 컨텐츠가 자리를 차지하게 됨. 헷갈리는 프로퍼티 모음. 오늘은 CSS편이다. 세가지 속성 모두 요소를 화면에서 보이지 않게 한다는 공통점이 있다만 실제 화면에 존재하는지의 여부에서 차이가 발생한다. display: none은 렌더링을 하지 않는다는 점에서 명쾌하다. 화면에 보이지 않을 뿐 아니라 존재하지 않기 때문에 스크린리더가 내부 텍스트를 읽지 않는다. 시멘틱 텍스트를 display로 숨기지 말 것! visibility: hidden는 화면에 보이지 않.. 2023. 5. 14. 미묘한 Text 스타일링 속성들 모음(공백처리 방식) 1. line-height: 리딩(leading) 조절 2. vertical-align: 수직 정렬 3. word-spacing: 단어 간격 4. letter-spacing: 글자 간격 5. text-overflow: 말줄임 6. white-space: 공백 문자 처리 7. word-break: 글자/단어 기준 줄바꿈(띄어쓰기 단위 줄바꿈은 keep-all) 8. word-wrap: 컨테이너 기준 줄바꿈 9. text-indent: 들여쓰기 조절 10. overflow-wrap + overflow See the Pen Untitled by wavy (@_wavy) on CodePen. 2023. 5. 12. 이전 1 2 다음