CSS(3)
-
[css] Grid 레이아웃에 대해 배워보자
지난 게시물에서는 flex box에 대해 알아봤는데요, flex box 역시 간편한 속성이지만 격자 무늬를 만들기 어려운 단점이 존재합니다 https://www.day-na.com/product/list.html?cate_no=60 이런 식으로의 게시판, 쇼핑몰을 꾸미기 어렵기 때문에 Grid 라는 속성을 사용하게 됩니다. 그렇다면 Grid의 기본 문법에 대해 알아보겠습니다~!! 목차 1. grid는 부모 컴포넌트에서만 선언해야한다. 2. grid-template 사용하기 3. gap 사용하기 4. auto란? 5. grid-template-areas 사용하기 6.grid-column/grid-row 사용하기 -span 사용하기 7.fr 사용하기 1. grid는 부모 컴포넌트에서만 선언해야한다. /* A..
2022.10.14 -
[CSS]Flex 속성 총정리/ display:flex 이 뭘까
(그냥 나 혼자서 보려고 정리한 거...) FlexBox는 css의 display 요소 중 하나이다. 이는 기존의 display 요소들이 가지는 단점을 보완하기 위해 생겼다! 그럼 먼저 display 속성에 들어가는 기존 요소에 대해 살펴보자 - block: 너비와 높이를 가지며 사진과 같이 margin이 존재하는 단점이 있다 ㅠㅠ 또한, element가 한 줄을 차지하여, 옆에 다른 element가 올 수 없어 아래로 배치된다. // App.js import "./App.css"; function App() { return ( ); } export default App; /* App.css */ .wrapper { display: block; height: 500px; width: 500px; back..
2022.10.08 -
[JS/CSS] styled-components가 뭘까?/ styled-components 기본 문법 정리!
(1) 왜 styled-components를 사용해야할까? (2) styled-components 환경설정하기 (3) styled-components의 기본문법 (4) styled-components에서 props 사용하기 프론트엔드 개발자의 기본소양 html , css, js! 이제 styled-components 안 쓰면 개구린 프론트 개발자라고 합니다 요즘 프론트 트렌드는 한 컴포넌트에 html js css 코드를 다 때려박아서 컴포넌트 별로 관리하는 게 대세라는데요.... 이는 재활용성도 높고 "아 이게 무슨 코드구나!" 읽기 좋고 유지보수에 유리한 코드를 작성할 수 있다고 하는데... 이를 실현시켜주는 게 styled-components! 한 번 배워봅시다 (1) 왜 styled-componen..
2022.05.05