프로그래밍-Web/CSS(15)
-
[개념정리] Flex-box
flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 요거 하면서 생각난김에 정리 (몇몇 자료의 출처: heropy.blog/2018/11/24/css-flexible-box/developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container) 동적인 화면 요소들의 정렬을 효율적으로 하기 위해. 컨테이너: 아이템을 감싸는 Element, 박스라고 통칭하며 늘어나는 방향(flex-direction), 다음줄로 넘어가는 방식(flex-wrap), 컨테이너 속 아이템 정렬(align-items, justi..
2021.01.12 -
[개념정리] Margin vs Padding
간단하게 그림 한장으로 정리 객체(컨테이너)를 기준으로 객체 안에서의 공간은 padding, 객체와 객체 사이의 공간은 Margin으로 표현한다 하나의 division을 기준으로 안쪽을 패딩, 바깥을 마진이라고 한다.
2021.01.12 -
[자료정리] 왜 styled-component 인가
기존 sass방식의 문제 - 기존에는 sass 파일을 설정해서, 같은 클래스네임 정의 후 관리하였다 - 하지만 sass코드와 컴포넌트가 문법적으로 연결이 되어있지 않았기 때문에, 적용되지 않는 부분을 알아차릴 수 없다는 문제가 있었다 - 그 외에도, 컴포넌트별로 sass 파일을 달아놓으면 이름이 충돌할 수도 있다 styled-component - 얘는 라이브러리를 불러와서 아예 리액트 컴포넌트를 생성한다. - 예시 코드의 경우는 CodeTd라는 컴포넌트를 만들었다 - 우선 이 방식은 js코드로 제어가 가능하고, 심지어 props를 받아 사용할 수도 있다. 즉 js 로직과 연동이 되기 때문에 누락의 위험이 사라지게 된다. - 이때 template literal 방식으로 코드를 정의하여 이를 Tagged T..
2021.01.11