< Code diaries />

CSS Grid  Flex보다  조금은 더 어려워하는 Grid 속성다루기에 오신 것을 환영합니다.Flex를 이해했다면, Grid도 어렵지 않습니다.한번 시작해 봅시다~~!!  CSS Grid 에 대하여 알아봅시다~! 출발~! Grid Overview- Flex box에서는할 수 없는 그리드 방식을 레이아웃을 구현할 수 있는 속성입니다.- 참조사이트 - 바로가기  A. Grid container- 참조사이트 - 바로가기- Grid연습을 위해 많은 학생들이 한번씩은 해보는 그리드 가든 게임~! - 바로가기 B. Grid items- 참조사이트 - 바로가기 C. Flex, Grid 공통 속성PropertyValueDescriptionnotegapNumber축약형으로 gap : row-gap column-gap..

CSS Flex  많은 사람들이 어려워하는 Flex 속성다루기에 오신 것을 환영합니다.음... 플렉스는 속성이 많아서 좀 복잡해 보일뿐, 원리만 이해하면 많이 복잡하지 않습니다. 한번 시작해 봅시다~~!!  CSS Flex 에 대하여 알아봅시다~! 출발~! Flex Overview- 블럭요소들은 모두 줄바꿈 되어 표시가 되어, 스타일링을 하려면 한줄로 모으던가 여러줄로 나누는 등 디자인에 맞게 스타일링 해야하는데, 이때에 많이 사용하는 것이 flex box 입니다.- 참조사이트 - 바로가기  A. Flex container- 참조사이트 - 바로가기- Flex 연습을 위해 많은 학생들이 한번씩은 해보는 개구리게임~! - 바로가기 B. Flex items- Order 속성을 이용하여 순서를 지정할 수 도 있..

CSS Display  HTML은 크게 Block level element 와 Inline level element로 나뉩니다.이것은 display라는 css속성을 통해 다른 요소처럼 표시되게 할 수 있습니다.하지만 본질적으로 부여받은 블럭,인라인,테이블등의 자기본질은 변하지 않으므로, CSS에서 display 방식을 바꾸었더라도 HTML마크업의 규칙은 지켜야함은 주의하셔야 합니다.예를들어 태그 내에 태그가 오지못하는 경우, css에서 display 방식을 바꾸어도 마찬가지로 유효하다는 이야기가 될 수 있습니다.  CSS display에 대해서 알아봅시다~! Display Overview- 모든 HTML element의 display방식을 변경하여, 원하는대로 css로 제어할 수 있습니다.- 참조사이트..