Styling

CSS와 selector

Cascading Style Sheets

웹페이지의 디자인, 레이아웃 및 스타일을 정의하기 위한 언어

 

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

h1 : Selector(선택자)
color, font-size : property(속성)
green, 16px : Value(값)

color: green; / font-size: 16px; => Declaration(선언)

 

Selector의 유형

유형	Element	ID	Class	Universal	Grouping
	h1 { color: green; }	<div id="section"> ... </div>	<span class="medium"> ... </span> <p class="medium"> ... </p>	* { font-size: 20px; color: blue; }	h1, h2, p { color:black; text-align: center; }
		#section { background-color: black; }	.medium { font-size: 20px; } p.medium { font-size: 20px; }

 

Element의 상태와 관련된 selector

• :hover
  • 마우스 커서가 element 위에 올라왔을 때
• :active
  • 주로 <a> 태그(link)에 사용, element가 클릭됐을 때를 의미
• :focus
  • 주로 <input> 태그에 사용, element가 초점을 갖고 있을 경우
• :checked
  • radio button이나 checkbox 같은 유형의 <input> 태그가 체크되어 있는 경우
• :first-child, :last-child
  • 상위 element를 기준으로 각각 첫 번째 child, 마지막 child일 경우를 의미

레이아웃과 관련된 CSS 속성

레이아웃 : 구성 요소의 배치

웹 화면에 요소들을 어떻게 배치할 것인가.

 

display 속성

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

 

• display: none;
  • element를 화면에서 숨기기 위해 사용
  • <script> 태그의 display 속성 기본값은 display: none;
• display: block;
  • 블록 단위로 element를 배치.
  • <p>, <div>, <h1>~<h6> 태그의 display 속성 기본값이 display: block;
• display: inline;
  • element를 라인 안에 넣는 것.
  • <span> 태그의 display 속성 기본값이 display: inline;
• display: flex;
  • element를 블록 레벨의 flex container로 표시.
  • container이기 때문에 내부에 다른 element들을 포함.

visibility 속성

div {
	visibility: visible | hidden;
}

 

visibility속성의 대표적인 값들

• visibility: visible;
  • element를 화면에 보이게 하는 것
• visibility: hidden;
  • 화면에서 안 보이게 감추는 것
  • element를 안 보이게만 하는 것이고, 화면에서의 영역은 그대로 차지.

position 속성

div {
	position: static | fixed | relative | absolute;
}

 

position속성의 대표적인 값들

• static
  • 기본값으로 element를 원래의 순서대로 위치시킴
• fixed
  • element를 브라우저 window에 상대적으로 위치시킴
• relative
  • element를 보통의 위치에 상대적으로 위치시킴
• absolute
  • element를 절대 위치에 위치시킴

가로, 세로 길이와 관련된 속성

div {
    width: auto | value;
    height: auto | value;
    min-width: auto | value;
    min-height: auto | value;
    max-width: auto | value;
    max-height: auto | value;
}

 

FlexBox

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

 

FlexBox이해를 돕기 위한 사이트 (개구리 옮기다 보면 이해 됨)

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

 

Font와 관련된 CSS 속성, 기타 많이 사용하는 CSS 속성

 

#title {
    font-family: "사용할 글꼴 이름", <일반적인 글꼴 분류>;
    font-size: value;
    font-weight: normal | bold;
    font-style: normal | italic | oblique;
}

// font-family (글꼴)
#title1 {
    font-family: "Times New Roman", Times, serif;
    // 순서대로 해당 폰트가 없을 시에 대비한 폰트, 뒤로 갈수록 일반적
}

// font-size (크기)
px(pixel), em, rem, vw(viewport width)
16 * em = pixels
#title1 {
    font-size: 16px;
    font-size: 1em;
    font-size: 10vw; /* viewport 가로 길이의 10%를 의미 */
}

// font-weight (두께)
#title1 {
    font-weight: bold;
    font-weight: 500;
}

// font-style (모양)
#title1 {
    font-style: italic;
    font-style: oblique;
}

// 기타
div {
    background-color: color | transparent;
    border: border-width border-style border-color;
}

 

 

styled-components

React와 React Native 애플리케이션에서 스타일링을 쉽게 할 수 있도록 도와주는 라이브러리입니다.
이 라이브러리는 CSS를 JavaScript로 작성할 수 있게 해주며, 컴포넌트 기반 개발 패턴과 잘 어울립니다.

 

설치방법

#npm 사용
npm install --save styled-components
// 만약 cannot read properties of null (reading 'usecontext') 에러 발생 시
// npm uninstall styled-components 후
// npm install styled-components@5.3.10 등 최신버전으로 재설치 요망
// 본인이 겪었음...

# yarn 사용
yarn add styled-components

 

예제 코드

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;

 

기본 사용법

 

Tagged Template Literals

literal : 소스 코드의 고정된 값 / let number = 20; (20 ==> literal)
styled-components는 ES6의 템플릿 리터럴(tagged template literals)을 사용하여 스타일을 정의합니다.
이는 CSS를 직접 자바스크립트 파일 안에 작성할 수 있게 해줍니다.

import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

 

props 사용

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

const Button = styled.button`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
`;

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

export default Sample;

 

styled-components의 스타일 확장

// 1. 기본 버튼 컴포넌트 정의
import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

export default Button;

// 2. 기본 버튼 컴포넌트를 확장

import styled from 'styled-components';
import Button from './Button';

const LargeButton = styled(Button)`
  font-size: 1.5em;
  padding: 0.5em 1.5em;
`;

const PrimaryButton = styled(Button)`
  background: blue;
  border: 2px solid blue;
`;

export { LargeButton, PrimaryButton };

// 3. 확장된 컴포넌트 사용

import React from 'react';
import Button from './Button';
import { LargeButton, PrimaryButton } from './ExtendedButtons';

const App = () => (
  <div>
    <Button>Default Button</Button>
    <LargeButton>Large Button</LargeButton>
    <PrimaryButton>Primary Button</PrimaryButton>
  </div>
);

export default App;

---

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[지금 무료] 처음 만난 리액트(React) | Inje Lee (소플) - 인프런

 

https://www.w3schools.com/css/css_selectors.asp

CSS Selectors

https://www.w3schools.com/cssref/css_selectors.php

CSS Selectors Reference

https://flexboxfroggy.com/#ko

Flexbox Froggy

https://www.w3schools.com/csSref/index.php

CSS Reference

https://developer.mozilla.org/en-US/docs/web/javascript/reference/template_literals

Template literals (Template strings) - JavaScript | MDN

https://styled-components.com/docs

styled-components: Documentation

https://github.com/soaple/first-met-react-practice/blob/master/src/chapter_15/Blocks.jsx

first-met-react-practice/src/chapter_15/Blocks.jsx at master · soaple/first-met-react-practice

https://velog.io/@pcs/styled-component-%EC%98%A4%EB%A5%98

styled-component 오류??