3월 4주차. CSS 스타일링

1. CSS Selector

1) 형식

CSS의 기본 문법은 선택자를 먼저 쓰고, 중괄호 안에 속성:속성값 쌍을 세미콜론으로 구분하여 넣는 형태이다.

h1 {
	color: green;
    font-size: 16px;
}

2) 종류

① element selector

• HTML 태그를 선택

h1 {
	color: green;
    font-size: 16px;
}

② id selector

• 엘리먼트에 정의된 id를 선택
• #을 사용

<div id="section">
	...
</div>

#section {
	background-color: black;
}

③ class selector

• 모든 엘리먼트에 대해 고유한 id와 달리 class는 여러 개의 엘리먼트를 분류하기 위해 사용
• .을 사용
• element selector와 혼합하여 사용도 가능

<span class="medium">
	...
</span>

<p class="medium">
	...
</p>

.medium {
	font-size: 20px;
}

p.medium {
	font-size: 20px;
}

④ universal selector

• 모든 엘리먼트에 일괄적으로 적용
• *을 사용

* {
	font-size: 20px;
    color: blue;
}

⑤ group selector

• 여러 선택자를 그룹으로 묶어 하나의 스타일을 일괄적으로 적용
• ,를 이용해 grouping

h1, h2, p {
	color: black;
    text-align: center;
}

⑥ state selector

• 특정 상태의 엘리먼트를 선택
• element selector와 :를 결합하여 사용
• 대표적인 상태 선택자는 아래와 같다.
  • hover: 해당 엘리먼트에 마우스 커서가 올라왔을 때
  • active: 링크(ex: a 태그)를 클릭했을 때
  • focus: 엘리먼트에 포커스를 획득(ex: input 태그)했을 때
  • checked: radio button이나 checkbox 등의 input 태그가 체크되었을 때
  • first-child, last-child: 상위 엘리먼트를 기준으로 첫번째 또는 마지막 child일 때

button:hover {
	font-weight: bold;
}

a:active {
	color: red;
}

input:focus {
	color: #000000;
}

option:checked {
	background: #00ff00;
}

p:first-child {
	background: #ff0000;
}

p:last-child {
	background: #0000ff;
}

2. Layout

1) 레이아웃 관련 속성

화면에 엘리먼트를 어떻게 배치할 것인지와 관련한 속성들에 대해 알아보자.

① display

• none: 엘리먼트를 화면에서 숨긴다.
• block
  • 엘리먼트를 블록 단위로 배치한다.
  • full-width를 차지하기 때문에 한 라인에 하나의 요소만 배치할 수 있다.
• inline
  • 엘리먼트를 인라인으로 배치한다.
  • width와 height가 컨텐츠의 크기에 맞춰진다.
  • width와 height를 직접 조절하는 것은 불가하며, 상하 마진을 적용할 수도 없다(좌우 마진은 적용 가능).
• inline-block
  • 엘리먼트를 인라인 블록 형태로 배치한다.
  • 블록 요소처럼 width와 height를 지정할 수 있으면서, 인라인 요소처럼 한 라인에 여러 아이템을 배치할 수 있다.
• flex
  • 다른 엘리먼트를 포함하는 Flex Conatainer를 생성한다.
  • 사실상 가장 자주 사용되는 display 방식이므로, 아래에서 자세히 설명하기로 한다.

div {
	display: none | block | inline | flex;
}

② visibility

• visibile: 엘리먼트가 보이도록 설정
• hidden: 엘리먼트가 보이지 않도록 설정(영역은 차지)

div {
	visibility: visible | hidden;
}

③ position

• static
  • position 속성의 기본 값
  • 엘리먼트를 원래의 순서대로 배치
• fixed: 화면 스크롤과 무관하게 항상 고정된 자리를 유지
• relative
  • static 포지션에서 배치되는 위치를 기준으로 엘리먼트를 top, bottom, left, right로 상대적으로 이동
• absolute: position 속성이 static이 아닌 가장 가까운 부모(조상) 요소를 기준으로 엘리먼트를 top, bottom, left, right로 상대적으로 이동
• sticky
  • 스크롤이 설정한 임계점에 다다르기 전까지는 relative 방식으로 배치
  • 스크롤이 임계점에 다다른 이후부터는 fixed 방식으로 배치
  • 임계점은 top, bottom, left, right로 지정할 수 있으며, 적어도 하나 이상의 임계 요소가 존재해야 함.

④ height/width

• width, height, min-width, min-height, max-width, max-height가 존재

2) Flex Box

CSS를 이용해 레이아웃을 구성할 때, display: block이나 display: inline 등의 속성만으로는 다양한 레이아웃을 자유롭게 구성하는 데에 어려움이 있다. 이러한 문제를 해결하기 위해 사용하는 것이 Flex Box이다.

Flex Box는 Container와 Item으로 구성된다. 위에서도 잠깐 설명했지만, display: flex를 사용하여 엘리먼트를 Flex Container로 만들 수 있다. 그리고 이 때, Flex Container에 포함된 여러 개의 엘리먼트를 Flex Item이라고 부른다.

컨테이너 안에 존재하는 여러 개의 아이템을 어떠한 방향과, 순서로 배치할지 정의하는 방법은 아래와 같다.

div {
	display: flex;
    flex-direction: row | column | row-reverse | column-reverse;
    align-itmes: stretch | flex-start | center | flex-end | baseline;
    justify-content: flex-start | cetner | flex-end | space-between | space-around;
}

① display: flex

• 엘리먼트를 플렉스 컨테이너로 사용하기 위해 필요한 속성

② flex-direction

• row: 기본 값, 왼쪽에서 오른쪽으로 배치
• column: 위쪽에서 아래쪽으로 배치
• row-reverse: 오른쪽에서 왼쪽으로 배치
• cloumn-reverse: 아래쪽에서 위쪽으로 배치

③ align-items

• cross-axis(Column 방향)를 기준으로 정렬을 수행
• 사용 가능한 속성은 아래와 같음.
  • flex-start: cross-axis의 시작 지점을 기준으로 아이템을 정렬
  • flex-end: cross-axis의 끝 지점을 기준으로 아이템을 정렬
  • center: corss-axis의 중앙을 기준으로 아이템을 정렬
  • stretch: 기본 값, 컨테이너를 가득 채우도록 아이템을 늘림.
  • baseline: baseline을 기준으로 아이템을 정렬

④ justify-content

• main-axis(Row 방향)를 기준으로 정렬을 수행
• 사용 가능한 속성은 아래와 같음.
  • flex-start: main-axis의 시작 지점을 기준으로 아이템을 정렬
  • flex-end: main-axis의 끝 지점을 기준으로 아이템을 정렬
  • center: main-axis의 중앙을 기준으로 아이템을 정렬
  • space-between: main-axis를 기준으로 첫 아이템은 시작 지점에, 마지막 아이템은 끝 지점에 맞추고 중간에 있는 아이템은 가로 간격을 동일하게 맞춤.
  • space-around: 공간-아이템-공간 형식을 모든 아이템에 적용

3. Font 관련 속성

① font-family

• 사용할 글꼴을 지정
• 글꼴 이름에 띄어쓰기가 포함될 경우 큰따옴표로 묶어주어야 함.
• 지정한 글꼴을 찾지 못할 경우를 대비하여 여러 개의 글꼴을 지정하는 것이 일반적임.

#title1 {
	font-family: "Times New Roman", Times, serif;
}

② font-size

• px: 고정된 값이므로 브라우저를 통해 크기를 변경할 수 없음.
• em
  • 1em은 16px과 동일함.
  • 브라우저를 통해 크기를 변경할 수 있음.
• vw
  • viewport width의 약자로, 브라우저 창의 너비에 기반한 상대적 단위
  • 1 vw는 뷰포트 너비의 1%를 의미
  • 높이에 대해서는 vh 사용

#title1 {
	font-size: 16px;
}

③ font-weight

• normal, bold 또는 100 ~ 900까지의 100 단위 숫자 입력 가능

#title1 {
	font-weight: bold;
}

④ font-style

• normal: 일반적인 글자 형태
• italic: 기울어진 글자 형태
• oblique: 비스듬한 글자 형태

#title1 {
	font-style: italic;
}

4. 기타 속성

① backgorund-color

div {
	background-color: red;
}

② border

div {
	border: 1px solid black;
}

5. Styled Componenets

1) 개념

Styled Components는 CSS 문법을 사용하여 스타일링된 컴포넌트를 만들기 위해 사용하는 오픈소스 라이브러리이다. Styled Components를 설치하는 명령어는 아래와 같다.

npm install --save styled-components

이후 아래의 import 문을 작성해야 한다.

import styled from 'styled-components';

사용 형식은 아래와 같다.

const {컴포넌트 명} = styled.{태그명}`
	{속성}: {속성 값};
    ...
`;

이제 실제 사용 방법에 대해 알아보자.

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
    padding: 1em;
    background: grey;
`;

const Title = styled.h1`
    font-size: 1.5em;
    color: white;
    text-align: center;
`;

function MainPage(Props) {
    return (
        <Wrapper>
            <Title>
                안녕하세요!
            </Title>
        </Wrapper>
    )
}

export default MainPage;

2) Styled Component에 Props 전달하기

상황에 따라 동적으로 변하는 값을 스타일링에 사용해야 할 수도 있다. 바로 예시 코드를 살펴보기로 하자.

import React from "react";
import styled from "styled-components";

const Button = styled.button`
	color: ${props => props.dark ? "white" : "dark"};
    background: ${props => props.dark ? "black" : "white"};
    border: 1px solid black;
`;

function Sample(props) {
	return (
    	<div>
        	<Button>Normal</Button>
            <Button dark>Dark</Button>
        </div>
    )
}    

export default Sample;

위 코드는 Button 컴포넌트의 Props로 "dark"가 주어지면 흰 글씨에 검정 바탕이 적용되도록 만드는 것이다. 이와 같이 컴포넌트의 Props를 이용하면, 동적으로 변하는 값을 스타일링에 사용할 수 있게 된다.