728x90 300x250 SMALL CSS7 마진 병합 : 인접 요소 마진이 함께 적용되는 문제 해결 문제 시나리오 html css.parent { background-color: lightgrey; height: 150px;}.child { margin-top: 20px; background-color: lightblue; height: 100px; width: 100px;} 이 경우 .child 요소 상단에만 20px의 마진을 기대 했지만의도와 다르게 .parent 요소도 내려가게 된다. 이유.paert 요소 상단 마진과 병합이 된다. 마진 병합은 css 레이아웃 엔진이 블록 요소의 수직 간격을 보다 직관적으로 처리하기 위해 설계되었다.이 개념은 요소 간의 중복된 마진을 줄이고 더 깔끔한 레이아웃을 생성하는데 도움된다. 하지만 이것이 예상치 못한 문제를 야기함.. 2024. 7. 10. 컨텐츠 너비에 따라 박스 크기 조정 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. 이전 1 2 다음 728x90 반응형 LIST
