CSS32

• 

  [CSS] 그리드 Grid를 익혀보자 (일단 기초편 #1) 제가 최근에 사용했던 CSS 레이아웃 스킬은 조금은 챙피하지만 display: flex; 이게 전부였습니다. 하지만 최근 Grid로 간단하게 레이아웃을 짤 수 있고, 이 방법이 유용하다는 것을 배우면서 확실히 쉽고 직관적으로 할 수 있다고 생각하여 최근에는 자주 애용하고 있습니다. ※ CSS grid는 IE, 즉 인터넷 익스플로러에서는 지원하지 않습니다. IE를 대응을 해야되는 분들에게는 display:grid가 아닌 다른 방법으로 레이아웃을 짜는 것을 권장드립니다. 1. HTML 코드 일단 그리드를 그릴 수 있는 HTML 코드를 작성합니다. 2. CSS 코드 .grid-container{ display:grid; grid-template-columns: 100px 100px 100px; grid-tem.. CSS 2022. 11. 7.

• 

  [CSS] box-sizing, 테두리까지 포함 시키는 방법! 여러 요소를 배치하려면 각 요소들의 너비 값을 기준으로 해야합니다. width, height 속성 값이 컨텐츠 영역의 너비와 높이만 나타내게 되는데, 여기에서 padding이나 border를 설정했다면 설정된 값만큼 빼서 width와 height를 계산해야합니다. 이렇게 매번 계산하게 되면, 너무 비효율적입니다. 이러한 방법을 CSS 속성인 box-sizing을 이용하면 padding과 border값을 포함시켜서 사용할 수 있게 설정이 가능합니다. .box1{width:300px;height:300px;padding:20px;border:5px solid #ccc;} .box2{width:300px;height:300px;padding:20px;border:5px solid #ccc; box-sizing.. CSS 2021. 12. 27.