본문 바로가기

CSS9

table 태그에서 텍스트가 넘어갈 경우 > 이슈 table 요소와 overflow 속성의 공존은 불가능하다. 예시로 display: table/table-cell 등 너비값을 가진 table 요소에 overflow 속성을 선언하면 먹히지 않는 현상. tailwind CSS에서 truncate에 해당하는 옵션(overflow / text-overflow / white-space)을 td에 적용해도 해결이 안됐지만, table태그에 옵션을 추가하여 해결하였다! > 해결 table { table-layout: fixed; // 👍 border-collapse: separate; // 👍 td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2023. 9. 19.
상하좌우 중앙 정렬시키기 기준 1. Flexbox 사용 .parent { /* 상하좌우 정중앙 정렬하기 */ display: flex; justify-content: center; align-items: center; } .child { } 2. CSS의 Transform과 Translate 사용 .parent { /* 설정 */ position: relative; } .child { /* 상하좌우 정중앙 정렬하기 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } [참조 URL] https://www.freecodecamp.org/korean/news/cssro-mueosideun-jungang-jeongryeolhaneun-bangbe.. 2023. 8. 22.
CSS 테두리 선으로 삼각형 화살표 만들기 CSS 트릭을 활용하면 제한적이지만 삼각형 도형을 만들어 활용할 수 있다. 삼각형을 만드는 트릭은 두꺼운 상하좌우의 테두리선(border)을 맞붙여서 삼각형 형태를 만드는 것으로 다음과 같은 원리로 만들어진다. .arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #000; /* ▲ */ } .arrow-down { width: 0; height: 0; border-top: 10px solid #000; /* ▼ */ border-left: 10px solid transparent; border-right: 10px so.. 2022. 11. 24.
background-image 명도 조절 (linear-gradient) > background-image 어둡게 하기 section { background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(${url}); } > #fff to #e8e8e8 section { background-image: linear-gradient( to bottom, #fff, #fff, #fdfdfd 50%, #f0f0f0 85%, #eaeaea, #e8e8e8 ); } > 텍스트 절반 밑줄 긋기 background: linear-gradient( to bottom, #fff 50%, rgb(203, 203, 203, 0.44) 50% ); #cbcbcb + opacity 0.44를 한 줄로 표현하면 rgb(203.. 2022. 10. 27.
table 태그에 직접 적용 안되는 속성들 > 텍스트 생략 (ellipsis) td 내부 태그에 걸어야 적용된다! (td not working) {{ address }} div.address-width { width: 100px; // 필수 고정값! overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } > 스크롤바 (overflow-y) table 외부 태그에 걸어야 적용된다! (table not working) div.content { overflow-y: auto; } 2022. 9. 28.
HTML input number maxLength 설정하기 > type tel 숫자만 입력 X maxlength 적용O > type number 숫자만 입력 O maxlength 적용 X 이중에서 number 속성을 가지고 최대 길이(maxLength)를 설정하는 방법을 정리해보고자 한다. solution 1 oninput상태일 때 slice하는 방법인데, 핸드폰 번호 4자리를 잘라낼때 유용하게 사용할 수 있을 듯! function maxLengthCheck(object){ if (object.value.length > object.maxLength){ object.value = object.value.slice(0, object.maxLength); } } solution 2 스택오버플로우에서 찾은 Vue solution으로 잘 동작하니 참고해보는 것도 좋을 .. 2022. 9. 26.
웹 제작하면서 알게된 반응형 css 개발하면서 알게된 지식들을 정리해보고 싶었다. 앞으로도 써먹을 반응형 css! 1. 웹 Header - Main - Footer 구조 #app { min-width: 1300px; min-height: 100vh; } .view { min-height: calc(100vh - header - footer); } 👉 Main 높이는? header { } main { min-height: calc(100vh - header - footer); } footer { } 👉 Header가 position: fixed일때 Main 높이는? header { } main { padding-top: header; min-height: calc(100vh - footer); } footer { } ✅ 웹에서도 min-he.. 2022. 1. 1.
반응형 CSS 어떤걸 사용할까 ? 1. 부모요소에 사이즈가 반응한다면? (페이지 어디에서 사용되느냐에 따라 사이즈가 변경되야 한다면) 👉 %, em 2. 부모요소가 아닌 Browser 사이즈에 반응한다면? (페이지 어디에서 사용되어져도 사이즈가 고정되야 한다면) 👉 v*, rem 박스 사이즈를 결정한다면? 👉 %, v* Font-size에 비례해서 변경 👉 em, rem 이렇게 사용해보자 !! 1. Font-size는 rem (em은 상위 부모때메 복잡할 수 있음) 2. Margin,padding은 위아래 em, 좌우정렬 rem (폰트 사이즈 변경에 따라) 3. width는 % // 예시 @media screen and (max-width: 48rem) .first-component { padding: 0.5em; // 부모 font-s.. 2021. 8. 15.
반응형 CSS 단위 정리 html의 기본 font-size는 16px이다. 즉, 최상위 요소에서 font-size: 100% 는 16px를 뜻하는 것! %와 em은 같은 개념이다 !!! 1. % relative to "parent" .parent { font-size: 800%; // 16px * 8 = 128px } .child { font-size: 50%; // 128px * 0.5 = 64px } 2. em relative to "parent" font-size 해당 단위가 사용되고 있는 요소의 font-size 속성값 기준 .parent { font-size: 8em; // 16px * 8 = 128px } .child { font-size: 0.5em; // 128px * 0.5 = 64px } html { font-.. 2021. 8. 10.

티스토리툴바