본문 바로가기

CSS20

[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.

[vue2]jest 단위테스트 css 파일 문법 오류 에러 해결

Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers... 2022. 9. 8.

[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] 여러 줄 텍스트. 보이는 줄 제한하기

multiline 제한하기 chrome같은 최신 브라우저에서 지원하는 css 문법. 하지만, IE에서는 지원하지 않음. 크로스 브라우징을 고려한다면, 다른 방법을 찾아야 함. 예로.. 3줄로만, 화면에 보여줘야 한다면, 다음과 같은 방법을 사용해서 문제를 해결함. .multiline { white-space: normal; text-align: left; word-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; // IE 대응 // line-height: 1.2rem; // max-height: 3.6rem; } IE 대응을 생각한다면, .multiline.. 2022. 2. 8.

[NEXTJS] style jsx 설정 방법

Next.js에서 css-in-js 작성하는 방법 1. inline css(not cool) 2. ) } 전역 style 설정 방법 pages/_app.js를 만들면 됨. APP COMPONENTS APP PAGES차이점 2022. 1. 16.

[CSS] outline 속성

개요 용도는 선택된 요소를 두드러져 보이게 할 때 많이 사용합니다. border를 사용하게 되면, border가 요소 외부 크기에 영향을 줘서, 다른 요소들의 layout이 영향을 받습니다. 하지만, outline은 다른 요소들의 layout에 영향을 주지 않습니다. 사용방법 outline-style: dashed; // 필수 outline-color: red; outline-width: ; 2021. 12. 30.

[CSS] absolute 에서 요소 화면 정 중앙에 배치하기

요소의 style position이 absolute일 때, 화면 정 중앙에 요소를 배치하는 방법을 알아보겠습니다. 아래 사진은 배치한 결과입니다. 아래 코드를 사용하면 됩니다. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 2021. 7. 12.

[CSS] box-sizing 설정 알아보기

box-sizing css 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다. 보통 border를 설정하게 되면, 기존에 요소의 너비와 높이에 border의 두께를 더해서 요소가 화면에 보여집니다. 이 기본 설정이 box-sizing: content-box입니다. 요소에 border를 주더라도, 요소의 크기가 border에 영향을 받지 않게 하려면, box-sizing: border-box를 주면 됩니다. box-sizing: content-box box-sizing: content-box;는 border 바깥 쪽으로 'border'의 크기가 커집니다. 마치 margin을 준 것처럼요. .child_container { box-sizing: content-box; width: 100px; borde.. 2021. 4. 17.

티스토리툴바