091

[JS/React] CSS 문법(선택자,레이아웃), Styled-Component 본문

Programming Language/JavaScript&TypeScript

[JS/React] CSS 문법(선택자,레이아웃), Styled-Component

공구일 2026. 6. 8. 01:51
728x90

1. CSS

 

- CSS는 스타일과 레이아웃을 정의하는 언어로, 크게 선택자(Selector)와 스타일로 구성되어있습니다. 

- Selector

h1 {
    color: green;
}

• Element Selector: 특정 HTML 태그를 선택합니다.

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

#section {
    background-color: blue;
}

• ID Selector: 엘리먼트에 고유 id를 정의하여 사용합니다.

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

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

• Class Selector: 여러 개의 엘리먼트를 분류하기 위해 사용합니다. . 뒤에 클래스명을 붙여서 사용합니다.

* { font-size: 20px; }

• Universal Selector: 전체 요소에 적용할 때 사용하며 *을 사용합니다.

h1, h2 { color: black; }

• Grouping Selector: 여러가지 선택자를 그룹으로 묶어 하나의 스타일을 적용하기 위해 사용합니다.

 

button:hover { font-weight: bold; }
option:checked { background: #0f0; }
a:active { color: red; }
input:focus { color: #000; }
p:first-child { background: red; }
p:last-child { background: blue; }

• 상태(state) 관련 Selector: 요소의 현재 상태에 따라 스타일을 다르게 적용할 때 사용합니다.

-> :hover - 마우스 커서가 엘리먼트 위에 올라왔을 때

-> :checked - radio, checkbox 같은 유형의 input 태그가 체크되어 있는 경우

-> :active - 주로 <a> 태그에 사용. 엘리먼트가 클릭됐을 때.

-> :focus - 주로 <input> 태그에 사용. 엘리먼트가 focus 되었을 때

-> :first-child, :last-child - 상위 엘리먼트를 기준으로 각각 첫 번째 child, 마지막 child일 경우

 

- 레이아웃

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

-> none: 엘리먼트를 화면에 숨기기 위 해 사용합니다.

-> block: 블록 단위로 엘리먼트를 배치합니다. 새로운 줄에서 시작하여 위치한 곳 전체의 width를 차지합니다. <p>, <div>, <h1>~<h6> 태그의 기본 속성입니다.

-> inline: 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치합니다. width, height 속성은 무시됩니다. <span>, <a>, <em> 태그의 기본 속성입니다.

-> inline-block: inline처럼 동작하면서 width, height, margin, padding 등 속성 지정 가능합니다. <button>, <input>, <select> 태그의 기본 속성입니다. 

div {
    display: flex;
    felx-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;
}

-> flex: 엘리먼트를 블록 레벨의 플렉스 컨테이너로 표시하는 것으로 내부에 다른 엘릴먼트들을 포함합니다.

flex-direction

• flex-direction

• align-items

• justify-content

 

- Styled-components는 CSS 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리입니다.

npm install styled-components@latest

 

+) npm 패키지 관련 명령어

npm install <패키지명>@버전 //특정 버전을 설치
npm install -g <패키지명> //패키지를 전역으로 설치

npm update <패키지명> //패키지 업데이트

npm uninstall <패키지명> //패키지 삭제

 

- Styled-components을 기본적으로 사용할 때는 tagged 템플릿 리터럴을 사용합니다.

-> 템플릿 리터럴이란 리터럴을 템플릿 형태로 사용하는 자바스크립트 문법으로, 백틱 기호를 사용하여 문자열을 작성하고 그 안에 대체 가능한 expression을 넣는 방법을 의미합니다.

const name = "공구일";
`안녕 ${name}`           // untagged — 함수 없음, 백틱만
myFunc`안녕 ${name}`    // tagged — 앞에 함수 있음

-> 템플릿 리터럴에는 함수가 없는 untagged 템플릿 리터럴이 있고, 앞에 함수가 붙은 tagged 템플릿 리터럴이 있습니다.

• tagged 템플릿 리터럴

name="공구일"
region="서울"

function tagFunction(strings, nameExp, regionExp) {
//                   ↑배열    ↑첫번째${}  ↑두번째${}

  let str0 = strings[0];  // "제 이름은 "
  let str1 = strings[1];  // "이고, 사는 곳은 "
  let str2 = strings[2];  // "입니다."

  return `${str0}${nameExp}${str1}${regionExp}${str2}`;
  //      "제 이름은 " + "Jeonghun" + "이고, 사는 곳은 " + "Seoul" + "입니다."
}

const output = tagFunction`제 이름은 ${name}이고, 사는 곳은 ${region}입니다.`

console.log(output); //제 이름은 공구일이고, 사는 곳은 서울입니다.

-> tagged 함수의 경우 백틱 안을 JS가 자동으로 분리해서 전달을 하는 특별한 문법입니다. 만약에 regionExp을 파라미터로 받지 않는 경우에는 오류가 발생하지 않고 그냥 사라집니다.

 

import styled from 'styled-components';

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

-> 백틱으로 둘러 쌓인 문자열 부분에 CSS 속성을 넣어줍니다.

-> 태그 함수 위치에 styled.<HTML 태그> 형태로 사용해줍니다.

-> HTML 태그에 CSS 속성들이 적용된 형태의 리액트 검포넌트가 만들어집니다.

 

- 실습: Props로 동적 스타일링

import styled from 'styled-components';

const Button = styled.button`
  color: ${props => props.dark ? 'white' : 'black'};
  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;

 

 

- 실습: 기존 컴포넌트 확장

import styled from 'styled-components';

const Button = styled.button`
  color: grey;
  border: 2px solid palevioletred;
`;

const RoundedButton = styled(Button)`
  border-radius: 16px;
`;

function Sample(props) {
  return (
    <div>
      <Button>Normal</Button>
      <RoundedButton>Rounded</RoundedButton>
    </div>
  );
}

export default Sample;

-> 새로 만들 때는 styled.태그이름, 상속받을 때는 styled(컴포넌트이름)으로 작성합니다.

728x90

'Programming Language > JavaScript&TypeScript' 카테고리의 다른 글

[TS/React] TypeScript  (1) 2026.06.07
[JS/React] Shared State, Context  (0) 2026.06.06
[JS/React] REST  (0) 2026.06.06
[JS/React] 리액트 라우터(React Router)  (0) 2026.05.24
[JS/React] 리스트와 키, 입력 폼  (0) 2026.04.18
'Programming Language/JavaScript&TypeScript' Related Articles more