본문 바로가기

CSS36

[CSS] flex-grow, flex-shrink, flex-basis 알아보기

flex-grow(기본값: 0) 부모 영역에서 자식 요소들이 부모 영역에 여백이 있으면, 채우기 정도를 요소마다 설정할 수 있게 해주는 옵션이다. 기본값이 0이니까, 아무런 설정을 안 하면, flex로 한 부모 요소의 자식요소들은 빈 영역이 있어도 채우지 않는다. flex-grow: 1로 설정한 자식요소는 flex의 부모 요소의 빈공간을 채운다. flex-shrink(기본값: 1) 자식 요소들의 크기들이, 부모 요소보다 클 경우, 자식요소들의 크기를 부모 요소의 크기에 맞춰서 줄어드는 정도를 설정할 수 있게 해주는 옵션이다. 기본값이 1이므로, 자식요소들이 부모 요소의 크기를 넘어도, 자식요소들이 부모 요소 밖으로 튀어나오지 않는다. 만약, flex-shrink: 0으로 전부, 자식요소를 설정하고, 부모.. 2023. 3. 20.

[CSS] 색깔있는 이미지 회색으로 처리하기

img { filter: grayscale(100%); } 결과 2023. 2. 25.

[CSS] transition과 transform을 함께 사용할 때, transition이 작동 안 하는 경우

display:none이 되어 있으면, transition 애니메이션 효과가 작동하지 않는다. 2023. 1. 11.

[CSS]textarea 세로로만 늘어나게 설정하기

https://developer.mozilla.org/en-US/docs/Web/CSS/resize resize - CSS: Cascading Style Sheets | MDN The resize CSS property sets whether an element is resizable, and if so, in which directions. developer.mozilla.org textarea 세로로만 늘어나게 하는 방법임. 2022. 10. 1.

프로젝트에 node-sass 없애고, dart-sass로만 운영하기

sass-loader에서 scss로 작성된 코드들을 인식해서 node-sass로 던져서 css로 코드를 변경하고 있었습니다. implementation은 이제 node-sass가 아닌 dart-sass (sass)를 이용하라고 선언하는거고요 2022. 9. 16.

[css] image 이미지 사진 비율 변형 안 하고 보이기

before img { width: 100%; height: 130px; } after img { width: 264px; } 2022. 9. 10.

[CSS] p또는 div 태그 안에 img가 들어있으면, 밑에 공백이 생김 해결

개요 어드민에 상품 소개 에디터를 개발하는 중,, p태그 안에 img 태그가 들어가는 요소가 있는데, p에 계속 css로 설정하지 않은 아래 공백이 발생하였다. 이부분을 꼭 제거해달라는 md분의 요구사항으로 2시간동안 파악해보았다. 원인 image태그가 인라인 요소라서 그렇다고 한다. 인라인 요소는 블록 요소랑 다르게 보이지 않는 가상의 기준선이 존재한다. 기본값으로 vertical-align baseline을 가진다고 한다. 이건, p나 y처럼 아래 삐져나오는 글자를 위해 마련한 공간이다. 이 공간때문에 발생한 것이었다. 해결방법 참고 https://ux.stories.pe.kr/45 2022. 9. 2.

[css] 텍스트 블럭 방지

.banselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* 인터넷익스플로러 */ user-select: none; } 2022. 8. 2.

checkbox 기본 아이콘 크기 키우기

input[type='checkbox'] { zoom: 2; } 2022. 7. 7.

[기본 selectbox] 화살표 이미지 변경하기

화살표 이미지 변경하는 방법 html css select { -webkit-appearance: none; /* for chrome */ -moz-appearance: none; /*for firefox*/ appearance: none; background: url(화살표로 사용하고 싶은 이미지 url) no-repeat 95% 50%; } select::-ms-expand { display: none; } // IE 10, 11 네이티브 화살표 숨기기 2022. 5. 19.

티스토리툴바