Frontend/CSS11 [ CSS ] 반응형을 고려하여 Cards 컴포넌트 중앙 정렬하기 📍 반응형을 고려하여 Cards 컴포넌트 중앙 정렬하기 CSS를 만지다 보면 항상 내 뜻대로 안 될 때가 많다. 그럴 때마다 직접 손으로 움직여주고 싶지만 우리는 프로그래머니까 코드로 움직이는 방법을 사용하도록 하자. 여러가지 Card를 모아놓은 Cards 컴포넌트가 있다고 가정하자. 이 Cards 컴포넌트를 중앙 정렬하고 싶다고 했을 때 어떻게 할 것인가? 여러 가지 방법을 떠올릴 수 있겠지만 처음에 나는 피그마에 명시되어있는 margin값을 고정하여 Cards를 중앙에 위치시켰다. 그런데 반응형이미지를 고려하는 환경에서 이러한 방법은 적절하지 못한 선택이었다. 왜냐하면 viewport가 고정되어있을 때는 괜찮지만, viewport가 바뀔때마다 margin값을 하나로 고정해놨기 때문에 CSS가 원하는 .. 2022. 6. 10. [ styled-components ] 태그는 다르지만 css는 동일 할 때 css를 변수로 관리하기 📍 styled-component에서 태그가 다르지만 css는 동일할 때 css를 변수로 관리하기 styled-component로 태그를 꾸미던 중 태그는 다르지만 나머지 스타일은 동일하게 설정하는 경우가 있었다. 그냥 스타일을 중복해서 사용해도 되지만 그것보다 동일한 css를 변수로 관리하여 각각 적용하면 코드를 중복해서 사용하지 않는다. import styled from 'styled-components' // before const divWrapper = styled.div` font-size: 14px; background-color: red; ` const SectionWrapper = styled.section` font-size: 14px; background-color: red; ` // .. 2022. 6. 3. [ styled-components ] pseudo selector를 사용하여 불필요한 styled-component 사용하지 않기 📍 pseudo selector를 사용하여 불필요한 styled-component 사용하지 않기 css 스타일링을 하다 보면 제일 마지막 글자만 다른 색상으로 나타내야 하는데, 번거롭게 styled-component를 하나 더 만들어서 관리하는 경우가 있다. 그럴 때 여러 가지 방법이 있지만 가상 선택자를 이용하면 코드를 줄이고, 직관적으로 스타일을 꾸밀 수 있다. 예를 들자면, FormTitle을 만드는데 필수로 입력 해야하는 *를 FormTitle 제일 마지막에 붙여야하는 경우가 있다. 처음에는 FormTitle과 Required 컴포넌트를 따로 만들어서 하단 코드 블록처럼 관리했다. 코드 블록에 대해 간단하게 설명하자면 FormTitle의 props에는 required가 들어오고(이때 require.. 2022. 6. 1. [ styled-components ] styled-components를 사용하지 않고 viewport 기준으로 img 변경하기 📍 styled-components를 사용하지 않고 viewport 기준으로 img 변경하기 구독신청 페이지를 반응형으로 구성하며 viewport를 기준으로 768px 이하는 모바일 환경, 768px 이상은 데스크탑 환경으로 페이지를 제작하던 중 viewport에 따라 브라우저의 메인 이미지를 다르게 설정해야 하는 방법이 필요했다. 그래서, styled-components로 viewport에 따라서 src를 바꿔 줄 수 있는 방법이 있는지 살펴보다 더 간단하게 사용할 수 있는 HTML태그인 태그가 있었다. 그래서 태그와 태그를 같이 사용했더니 굳이 styled-components를 사용하지 않고도 원하는 기능을 구현할 수 있었다. 우선 태그가 무엇인지 간단하게 살펴보자면, 0개 이상의 요소와 하나의 요소.. 2022. 5. 13. [ CSS ] position 속성 알아보기 📍 position 속성 알아보기 position: 내가 만든 속성을 2차원 혹은 3차원으로 바꿀 수 있는 기능 2차원과 3차원의 속성을 결정짓는 3가지 조건 1. 부모 자식 지간에 발생하는 마진 병합 현상(margin-collapse)이 일어나면 2차원 속성이다. 2. `top`, `left`, `right`, `bottom`을 설정 할 수 있는 속성은 3차원이다. 3. 부모가 높이 값을 갖고 있지 않을 때 자식의 높이 값이 부모의 높이 값에 영향을 준다면 2차원 속성이고, 영향을 주지 않는 다면 3차원 속성이다. position:static: 2차원 속성, 마진 병합 현상(margin-collapse)이 일어난다. top, left, right, bottom 속성을 사용 할 수 없다. 부모가 높이값을.. 2021. 11. 4. 이전 1 2 3 다음
