CSS의 주요 속성과 사용법

주요 CSS 속성과 그 사용법에 대해 알아보자.

CSS의 주요 속성과 사용법

1. justify-content 속성: Flexbox나 Grid 컨테이너에서 아이템들을 수평 방향으로 정렬할 때 사용됩니다.

.container {
  display: flex;
  justify-content: center; /* 수평 가운데 정렬 */
}

주로 center, flex-start, flex-end, space-between, space-around 등의 값이 있습니다. 예와 같이, justify-content: center;는 아이템들을 수평으로 가운데 정렬합니다.

2. align-items 속성: Flexbox나 Grid 컨테이너에서 아이템들을 수직 방향으로 정렬할 때 사용됩니다.

.container {
  display: flex;
  align-items: center; /* 수직 가운데 정렬 */
}

주로 center, flex-start, flex-end, stretch, baseline 등의 값이 있습니다. 예와 같이, align-items: center;는 아이템들을 수직으로 가운데 정렬합니다.

3. display: inline-flex; vs display: flex;: display: flex;는 블록 수준 요소를 Flex 컨테이너로 지정합니다. display: inline-flex;는 인라인 요소를 Flex 컨테이너로 지정합니다.

.container {
  display: flex; /* 블록 수준 요소를 Flex 컨테이너로 지정 */
}

.container {
  display: inline-flex; /* 인라인 요소를 Flex 컨테이너로 지정 */
}

display: flex;는 블록 수준 요소를 Flex 컨테이너로 지정합니다. 해당 요소는 블록 수준으로 동작하며, 부모 요소의 전체 너비를 차지합니다.

반면에 display: inline-flex;는 인라인 요소를 Flex 컨테이너로 지정합니다. 해당 요소는 인라인으로 동작하며, 내용에 따라 너비가 변할 수 있습니다.

CSS 속성의 응용

1. 동적 속성 설정: React Styled Components를 사용하여 동적으로 스타일을 변경할 수 있습니다. 아래 예시에서는 버튼의 배경색을 조건부로 변경합니다.

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'green'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

// 사용 예시
<Button primary>Primary Button</Button> {/* 파란색 배경 */}
<Button>Secondary Button</Button> {/* 초록색 배경 */}

2. 부모-자식 컴포넌트 간의 상호작용: 부모 컴포넌트에서 자식 컴포넌트로 속성을 전달하여 스타일을 동적으로 변경할 수 있습니다.

import styled from 'styled-components';

const ChildComponent = styled.div`
  font-size: ${props => props.large ? '24px' : '16px'};
`;

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent large>Large Text</ChildComponent> {/* 큰 텍스트 */}
      <ChildComponent>Normal Text</ChildComponent> {/* 보통 크기의 텍스트 */}
    </div>
  );
};

이러한 CSS 속성과 Styled Components의 활용을 통해 동적이고 유연한 스타일링을 구현할 수 있습니다.