Styling
: 웹사이트 전체 레이아웃 구성을 포함하여 버튼의 색깔, 테두리, 폰트의 크기, 색상 등을 모두 포함하는 개념
CSS (Cascading Style Sheets)
: 스타일링을 위한 일종의 언어
*cascading : 계단식
여러가지 스타일이 정의되어 있으며 각 스타일은 해당 스타일이 적용되는 규칙을 갖고 있음
하나의 엘리먼트가 여러 개의 스타일 규칙을 만족할 경우에 해당 스타일들을 마치 계단을 한 칸씩 내려가는 것처럼 우선순위를 가지고 하나씩 적용함
-> 하나의 스타일이 여러개의 엘리먼트에 적용 가능 & 하나의 엘리먼트에도 여러 개의 스타일이 적용 가능
Selector 선택자
: 엘리먼트에 스타일이 적용되는 규칙
스타일을 어떤 엘리먼트에 적용할지를 적용하게 해주는 것
CSS = selector + 실제 스타일
-> Selector를 먼저 작성 후 적용할 스타일을 중괄호 안에 세미콜론으로 구분하여 하나씩 기술
-> Selector = 해당 스타일이 적용될 HTML 엘리먼트 작성
-> 각 스타일 = CSS 속성과 값으로 이루어진 키, 값 쌍이며 CSS 속성의 이름과 값을 콜론으로 구분 / 각 스타일은 세미콜론으로 구분
Selector의 유형
1) Element Selector
: 단순하게 특정 HTML 태그를 선택하기 위한 element selector
selector에 HTML 태그의 이름을 작성
2) ID selector
: HTML에서 정의된 element의 ID를 기반으로 선택하는 형태
고유하다는 성질을 가지고 있어 하나의 엘리먼트에 사용해야 함
# 뒤에 아이디를 넣어 사용
3) Class selector
: 여러 개의 엘리먼트를 분류하기 위해 사용
클래스 선택자는 .(점) 뒤에 클래스명을 넣어서 사용
* p.medium : 엘리먼트 셀렉터와 클래스 셀렉터를 함께 사용한 것
4) Universal selector
: 전체 엘리먼트에 적용하기 위한 셀렉터
* (애스터리스크) 사용
5) Grouping selector
: 여러가지 선택자를 그룹으로 묶어 하나의 스타일을 적용하기 위해 사용하는 셀렉터
-> 간결하고 유지보수도 쉬워지게 됨
여러 선택자를 콤마로 구분하여 grouping selector에 적용
6) Element의 상태와 관련된 selector
* 상태란? 마우스 커서가 엘리먼트 위에 올라오거나 엘리먼트가 활성화되어 있는 경우
< 상태와 관련된 대표적인 selector>
- :hover - 마우스 커서가 element 위에 올라왔을 때
- :active - 주로 <a> 태그 (link)에 사용되는데, element가 클릭됐을 때를 의미
- :focus - 주로 <input> 태그에서 사용되는데, element가 초점을 갖고 있을 경우를 의미
- :checked - radio button이나 checkbox 같은 유형의 <input> 태그가 체크되어 있는 경우를 의미
- :first-child, :last-child - 상위 element를 기준으로 각각 첫번째 child, 마지막 child일 경우를 의미
- 레이아웃과 관련된 속성
layout : 화면에 엘리먼트들을 어떻게 배치할 것인지를 의미
-> layout과 관련된 css 속성들은 화면상의 배치와 관련이 있음
display
: 엘리먼트를 어떻게 표시할지 그 방법에 관한 속성
모든 엘리먼트는 그 종류에 따라서 기본적으로 정해진 디스플레이 속성 값을 가짐
대부분은 block 또는 inline 값을 가짐
< display 속성의 대표적인 값들 >
- 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
: 엘리먼트를 화면에 보여주거나 감추기 위해 사용하는 속성
대표적으로 visible 과 hidden을 가장 많이 씀
< visibility 속성의 대표적인 값들 >
- visibility: visible; - element를 화면에 보이게 하는 것
- visibility: hidden; - 화면에서 안 보이게 감추는 것 / element를 안 보이게만 하는 것이고, 화면에서의 영역은 그대로 차지
position
: 엘리먼트를 어떻게 위치시킬 것인지 즉, 포지셔닝을 어떻게 할 것인지를 정의하기 위해 사용
< position 속성의 대표적인 값들 >
- static - 기본값으로 element를 원래의 순서대로 위치시킴
- fixed - element를 브라우저 window에 상대적으로 위치시킴
- relative - element를 보통의 위치에 상대적으로 위치시킴
- absolute - element를 절대 위치에 위치시킴
2. 가로, 세로 길이와 관련된 속성들
값으로 auto를 사용할 시, 브라우저에서 길이를 계산
실제 값을 사용할 시, 해당 값만큼의 길이를 가짐
3. Flexbox
기존 CSS 레이아웃 사용의 불편한 부분을 개선하기 위해 등장
- 컨테이너 안에 여러 개의 아이템이 존재할 경우
컨테이너에 들어있는 flex와 관련된 css 속성은 이 아이템들을 어떤 방향과 어떤 순서로 배치할 것인지를 정의하게 됨
! 엘리먼트를 flex container로 사용하기 위해서는 display: flex; 를 써주어야 함 !
-> 그렇지 않으면 디스플레이 속성의 값이 flex가 아닌 엘리먼트의 기본값으로 지정되기 때문
flex-direction : 아이템들이 어떤 방향으로 배치될 것인지를 지정
< flex-direction 속성의 대표적인 값들 >
- row : 기본값이며 아이템을 행(row)를 따라 가로 순서대로 왼쪽부터 배치
- column : 아이템을 열(column) 을 따라 세로 순서대로 위쪽부터 배치
- row-reverse : 아이템을 행(row)의 역(reverse)방향으로 오른쪽부터 배치.
- column-reverse : 아이템을 열의 역방향으로 아래쪽부터 배치
* main axis : flex-direction으로 지정된 방향으로 향하는 축
* cross axis : main axis를 가로지르는 방향으로 향하는 축
align-items : 컨테이너 내에서 아이템을 어떻게 정렬할 것인지를 결정
-> cross axis를 기준으로 함
< align-items 속성의 대표적인 값들 >
- stretch : 기본값으로써 아이템을 늘려서 컨테이너를 가득 채움
- flex-start : cross axis의 시작 지점으로 아이템을 정렬
- center : cross axis의 중앙으로 아이템을 정렬
- flex-end : cross axis의 끝 지점으로 아이템을 정렬
- baseline : 아이템을 baseline 기준으로 정렬
justify-content : 컨테이너 내에서 아이템들을 어떻게 나란히 맞출 것인지를 결정
- 맞추는 기준 : main axis를 기준으로 함
< justify-content 속성의 대표적인 값들 >
- flex-start : main axis의 시작 지점으로 아이템을 맞춤
- center : main axis의 중앙으로 아이템을 맞춤
- flex-end : main axis 의 끝 지점으로 아이템을 맞춤
- space-between : main axis를 기준으로 첫 아이템은 시작 지점에 맞추고 마지막 아이템을 끝 지점에 맞춤 중간 아이템들 사이의 간격이 일정하게 되도록 맞춤
- space-around : main axis를 기준으로 각 아이템의 주변 간격을 동일하게 맞춤
4. Font와 관련된 속성
1) font-family
: 어떤 글꼴을 사용할 것인지를 결정하는 속성
사용할 글꼴의 이름을 적어주면 됨
* 글꼴의 이름에 띄어쓰기가 들어갈 경우, 큰 따옴표(" ")로 묶어 주어야 함
(,) 콤마 사용 : fall-back system을 이용한 것
fall-back system : 지정한 글꼴을 찾지 못했을 경우를 대비하여 사용할 글꼴을 순서대로 지정해 주는 것
가장 마지막에 일반적인 글꼴 분류를 적어줌
< 일반적인 글꼴 분류 (Generic font family) >
- serif : 각 글자의 모서리에 작은 테두리를 갖고 있는 형태의 글꼴
- sans-serif : 모서리에 테두리가 없이 깔끔한 선을 가진 글꼴
- monospace : 모든 글자가 같은 가로 길이를 가지는 글꼴. 코딩할 때 주로 사용
- cursive : 사람이 쓴 손글씨 모양의 글꼴
- fantasy : 장식이 들어간 형태의 글꼴
2) font-size
: 글꼴의 크기와 관련된 css속성
ex) px, em, rem, vw(viewport width)
px은 글꼴의 크기를 바꿀 수 없지만, em은 사용자가 브라우저에서 글꼴의 크기를 변경할 수 있게 해줌
[16 * em = pixels] -> 1em은 16px과 동일함
3) font-weight
: 글꼴의 두께와 관련된 css 속성
4) font-style
: 글꼴의 스타일을 지정하기 위한 속성
< font-style 속성의 값들 >
- normal : 일반적인 글자의 형태를 의미
- italic : 글자가 기울어진 형태로 나타남 / 별도로 기울어진 형태의 글자들을 직접 디자인해 만든 것
- oblique : 글자가 비스듬한 형태로 나타남
5. 기타 속성들
1) background-color
: 엘리먼트 배경색을 지정
ex) 16진수 컬러 값, 투명도를 가진 16진수 컬러값, RGB 컬러값, HSL 컬러값 등
2) border
: 테두리를 위한 속성
각 속성을 사용하여 테두리의 두께, 스타일, 색상을 지정할 수 있음
Styled-components
: css 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리
1) styled-components의 기본 사용법
- tagged template literal을 사용하여 구성요소의 스타일을 지정
literal이란?
: 소스코드에 고정된 값
대입 연산자의 오른쪽에 있는 값들이 모두 리터럴
template literal이란?
: 템플릿 형태로 사용하는 자바스크립트의 문법
-> styled-components는 tagged template literal를 사용하여 css 속성이 적용된 react 컴포넌트를 만들어줌
: backticks로 둘러싸인 문자열 부분에 css 속성을 넣고 태그함수 위치에는 styled.html 태그 형태로 사용
2) styled-components의 props 사용하기
Button 컴포넌트는 styled-component를 사용해 만들어짐 -> css 속성 내부에 props가 사용됨
실제 버튼 컴포넌트 부분의 코드에 props로 dark를 넣어줌
3) styled-components의 스타일 확장하기
Button : HTML 버튼 태그를 기반으로 만들어진 단순한 버튼
RoundedButton : HTML 태그 X / Button 컴포넌트를 괄호로 넣어줌 -> 다른 컴포넌트의 스타일을 확장해서 사용하는 부분
'React > 처음 만난 리액트(react)' 카테고리의 다른 글
| sec 16. (실습) 미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치 (0) | 2023.11.01 |
|---|---|
| sec 15. (실습) styled-components를 사용하여 스타일링 해보기 (0) | 2023.11.01 |
| (실습) Context를 사용하여 테마 변경 기능 만들기 (0) | 2023.10.17 |
| Context란? (1) | 2023.10.17 |
| (실습) Card 컴포넌트 만들기 (1) | 2023.10.17 |