728x90 300x250 CSS6 컨텐츠 너비에 따라 박스 크기 조정 width:min-content width: min-content 이 값은 컨텐츠가 가질 수 있는 최소 너비를 기반으로 요소 크기를 결정한다. 해당요소의 내용에 따라서 최소한의 너비 키그로 조절됨 See the Pen width: min-content by kim oya (@ttuttu) on CodePen. 2023. 11. 18. 브라우저 지원 여부 확인 사이트 계속 새롭고 편하고 화려한 기술들이 나오고 있는데 새로운 기술들을 쓰자니 브라우저마다 가능한 기술이 다르기 때문에 지원을 하는지 확인이 필요할때가 많은데요 오늘은 내가 사용할 기술을 어떤 브라우저에서 지원하는지 지원여부를 한눈에 확인할 수 있는 사이트 소개 하겠습니다. https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com caniuse라는 사이트인데요 상단에 확인하고 싶은 기술을 입력을 하면 예를들어서 텍스트에 그림자 효과를 주는 text-shadow를 입력해 보면 아래와 같이 사용가능한 브라우저들을 확인 할 수 있습니다. 빨간색으로 표시된 버전은 지원하지 않는다는 뜻이고 초록색은 지원 가능 노란색으로 표시된 부.. 2021. 11. 20. flex-shrink 속성 flex-shrink 속성은 flex-grow속성이 남는 공간을 분배해서 나눠가지는 것이라면 flex-shrink 속성은 반대로 공간을 넘어갈 경우에 각 아이템들을 줄이는 방법을 설정하는 것입니다. 기본값은 1이고 속성값이 1 이상이라면 부모 컨테이너의 크기가 flex 아이템보다 작아질 경우 부모 컨테이너에 맞춰서 크기가 줄어들게 됩니다. html 1번째 item Lorem ipsum dolor sit amet 2번째 item vero rerum dicta alias voluptates vitae quod veniam obcaecati 3번째 item css .container { width: 500px; } .item { display: flex; flex-direction: column; justif.. 2021. 11. 10. flex-basis과 width 차이 flex-basis에 대한 설명은 앞 포스팅을 참고하세요 flex-basis는 기본 크기를 설정하는 것이고 width는 가로 값을 설정하는 속성이라 얼핏 비슷해 보입니다. .item:nth-child(1) { flex-basis: 200px; } .item:nth-child(2) { width: 200px; } 아래와 같이 1번째 item에는 flex-basis를 2번째 item에는 width를 설정하고 결과를 확인해보면 차이가 없기 때문에 그게 그거 아닌가 하는 생각이 들 수 있습니다. 그럼 구지 따로 쓸 필요가 없겠죠? flex-basis과 width 차이점 1. flex-direction 설정값에 따라서 달라진다. 그렇다면 flex-direction을 변경해 주면 어떻게 될까요? .container.. 2021. 11. 9. 이전 1 2 다음 728x90 반응형
