[React] 리액트 스타일링 (Styling)

React 리액트 스타일링

🍿 CSS

• 웹 개발을 할 때 스타일링을 하기 위해 가장 대표적으로 사용하는 것
• Cascading Style Sheets
• 스타일링을 위한 일종의 언어
• 여러가지 스타일이 정의되어 있고 각 스타일은 해당 스타일이 적용되는 규칙을 갖고 있음
• 하나의 엘리먼트가 여러 개의 스타일 규칙을 만족할 경우에는 해당 스타일들을 우선순위를 가지고 하나씩 적용하게 됨
• 하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음

🍿 CSS 기본 구조

• Selector를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론으로 구분하여 하니씩 기술
• Selector에는 해당 스타일이 적용될 HTML 엘리먼트를 넣게 됨
• HTML 태그를 직접 넣거나 다른 조건들을 조합하여 셀렉터를 작성할 수 있음
• Selector 다음에는 중괄호 안에 적용할 스타일을 선언
• 각 스타일은 CSS 속성과 값으로 이뤄진 키, 값, 쌍이며 CSS 속성의 이름과 깂을 콜론으로 구분
• 중괄호로 묶여있는 하나의 스타일 블록에는 스타일이 여러 개 들어갈 수 있는데 각 스타일은 세미콜론으로 구분

🍿 Select

• 엘리먼트에 스타일을 적용하는 규칙
• 스타일을 어떤 엘리먼트에 적용할지를 선택하게 해주는 것

🍿 Select 유형

• Element Selector 
  • 특정 HTML 태그를 선택하기 위한 엘리먼트 셀렉터
  • 선택자의 HTML 태그의 이름을 써주면 됨 

h1 { 
	color: green;
}

• ID Selector
  • HTML에서 정의한 엘리먼트의 아이디를 기반으로 선텍하는 형태
  • #뒤에 ID를 넣어 사용 

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

#section {
	background-color: black;
}

•  Class selector
  • id는 고유하다는 성질을 가지고 있기 때문에 하나의 엘리먼트에 사용해야 하지만, 클래스는 여러 개의 엘리먼트를 분류하기 위해 사용
  • 점 뒤에 클래스명을 넣어서 사용
  • p.medium은 엘리먼트 셀렉터와 클래스 셀렉터를 함께 사용한 것
  • 해당 HTML 태그에 클래스가 있는 경우에만 스타일 적용됨
  • HTML 태그명 뒤에 점을 찍고 클래스의 이름을 넣어주면 됨

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

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

• Universal selector
  
  • 특정 엘리먼트에만 선택적으로 적용하는 것이 아니라 전체 엘리먼트에 적용하기 위한 셀렉터
  • * (별표)리고 부르는 에스터리스트를 사용

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

• Groupping selector
  
  • 여러 가지 선택자를 그룹으로 묶어 하나의 스타일로 적용하기 위해 사용하는 셀렉터
  • 코드가 간결해지고 유지보수도 쉽게 변함
  • 같은 스타일을 여러 조건의 선택자에 적용하고 싶을 때에는 각 선택자를 콤마로 구분하여 그루핑 셀렉트 적용

h1 { 
	color: black;
    text-dlign: center;
}
h2 { 
	color: black;
    text-dlign: center;
}
p { 
	color: black;
    text-dlign: center;
}
=======>

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

• Element의 상태와 관련된 selector
  
  • 여기서의 상태는 마우스 커서가 엘리먼트 위에 올라오거나 엘리먼트가 활성화되어 있는 경우 등을 의미
    • :hover
      • 미우스 카서가 element위에 올라왔을 때
    • :active
      • 주로 <a> 태그(link)에 사용되는데, element가 클릭되었을 때를 의미
    • :focus
      • 주로 <input> 태그에서 사용되는데, element가 초점을 갖고 있을 경우 의미
    • :checked
      • radio button이나 checkbox 같은 유형의 <input>태그가 체크되어 있는 경우를 의미
    • :first-child, :last-child
      
      • 상위 element를 기준으로 각각 첫 번쨰 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;
}

🍿 Layout

• 화면에 Element들을 어떻게 배치할 것인지를 의미

🍿 display

• 엘리먼트를 어떻게 표시할 것인지 그 방법에 관한 속성

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

• 대부분의 엘리먼트는 블록 또는 인라인 값을 가짐
• 디스플레이 속성의 값으로 많은 종류가 있지만 대표적으로 이 코드에 나온 값들이 가장 많이 사용됨

🍿 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

• 가시성을 뜻함

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;
}

• 값으로 실제 픽셀 값을 넣거나 상대 값인 %를 사용
• 픽셀 단위가 아닌 m, rem 등의 단위도 사용할 수 있음
• 값으로 auto를 사용하면 브라우저에서 길이를 계산하며 실제 값을 사용하면 해당 값만큼의 길이를 가지게 됨

🍿 Flexbox

• 기존 CSS 레이아웃 사용의 불편한 부분을 개선하기 위해 등장
• 컨테이너와 아이템으로 구성
• FlexContainer는 내부의 여러 개의 엘리먼트를 포함할 수 있음
• FlexContainer에 포함되는 엘리먼트들이 바로 FlexBox의 Flexitem이 됨   
• Container 안에 여러 개의 아이템이 존재하는 경우 컨테이너에 들어있는 flex와 관련된 css 속성은 아이템을 어떤 방향과 어떤 순서로 배치할 것인지를 정의하게 됨

🍿 Flex와 관련된 대표적인 속성

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-areound;
}

• 엘리먼트를 flex 컨테이너로 사용하기 위해 display flex를 써주어야 함
• display flex를 사용하지 않으면 디스플레이 속성의 값이 flex가 아닌 엘리먼트의 기본 갑으로 지정되기 때문

🍿 flex-direction

• 아이템들이 어떤 방향으로 배치될 것인지를 지정

🍿 flex-direction

• 아이템 배치와 관련하여 중요한 축은 메인 축과 크로스 엑시스
• Flex Direction으로 지정된 방향으로 향하는 축 main axis
• main axis를 가로지르는 방향으로 향하는 축 cross axis

• row
  
  • 기본값이며 아이템을 행을 따라 가로 순서대로 왼쪽부터 배치
• column
  • 아이템을 열을 따라 세로 순서대로 위쪽부터 배치
• row-reverse
  • 아이템을 행의 역 방향으로 오른쪽부터 배치
•  column-reverse
  
  • 아이템을 열의 역 방향으로 아래쪽부터 배치 

🍿 align-items

• Container 내에서 아이템을 어떻게 정렬, 얼라인 할 것인지를 결정
• 정렬은 cross axis를 기준으로 함

🍿 align-items 속성의 대표적인 값들

• Stretch
  
  • 기본값으로써 아이템을 늘려서 컨테이너를 가득 채움
• flex-start
  • cross axis를 시작 지점으로 아이템을 정렬
• center
  • cross axis의 중앙으로 아이템 정렬
• flex-end
  
  • cross axis의 끝 지점으로 아이템 정렬 
• baseline
  • 아이템을 baseline 기준으로 정렬

🍿 justify-content

• Container내에서 아이템들을 어떻게 나란히 맞출 것인지를 결정
• 정렬은 main axis를 기준으로 함

🍿justify-content 속성의 대표적인 값들

• flex-start
  
  • main axis의 시작 지점으로 아이템을 맞춤
• center
  • main axis의 중앙으로 아이템을 맞춤
• flex-end
  
  • cross axis의 끝 지점으로 아이템 정렬 
• space-between
  • main axis를 기준으로 첫 아이템은 시작 지점에 맞추고 마지막 아이템은 끝 지점에 맞추며, 중간에 있는 아이템들  사이의 간격이 일정하게 되도록 맞춤 

• space-around
  • main axis를 기준으로 각 아이템의 주변 간격을 동일하게 맞춤

🍿 font와 관련된 대표적인 속성

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

• font-family 
  • 어떤 글꼴을 사용할 것인지를 결정하는 속성
  • 속성의 값으로는 사용할 글꼴의 이름을 적어주면 됨
  • 글꼴에 띄어쓰기가 들어쓰기가 들어갈 경우 큰 다옴표로 묶어 주어야 함 
  • 사용할 글꼴이 하나가 아니라 콤마로 구분하여 여러 개의 글꼴이 쓰여 있는 것은 font-family의 폴백 시스템 때문임
  • font-family의 폴백 시스템은 지정한 글꼴을 찾지 못했을 경우를 대비해서 사용할 글꼴을 순서대로 지정해 주는 것
  • 최대한 많은 브라우저와 운영체제에서 글자가 깨지지 않고 나올 수 있도록 하기 위함'
  • 사용하고 싶은 글꼴의 이름을 콤마로 구분하여 순서대로 적고 가장 마지막에 일반적인 글꼴 분류 작성
  • 만일 사용하고자 하는 글꼴이 모두 없을 경우 브라우저가 일반적인 글꼴 분류에서 가장 유사한 글꼴을 선택하도록 하기 위함 

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

• font-family의 일반적인 글꼴 분류 (Generic font family)
  • serif
    
    • 각 글자의 모서리에 작은 테두리를 갖고 있는 형태의 글꼴 
  • sans-serif
    
    • 모서리에 테두리가 없이 깔끔한 선을 가진 글꼴
    • 컴퓨터 모니터에서는 serif보다 가독성이 좋음 
  • monospace
    
    • 모든 글자가 같은 가로 길이를 가지는 글꼴,. 코딩을 할 때 주로 사용  
  • cursive
    
    • 사람이 쓴 손글씨 모양의 글꼴 
  • fantasy
    
    • 장식이 들어간 형태의 글꼴 
• font-size
  
  •  px (pixel)
  • em
  • rem
  • vw (viewport width)

• font-weight
  
  • normal
  • bold
  • 100~900까지의 100단위 숫자로 된 값
  • 숫자의 값이 클수록 두꼐가 두꺼워짐

• font-style
  
  • 글꼴의 스타일을 지정하기 위한 속성
    • normal
      • 일반적인 글자의 형태를 의미
    • italic
      • 글자가 기울어진 형태로 나타남
      • 별도로 기울어진 형태의 글자들을 직접 디자인해서 만든 것
    • oblique
      • 글자가 비스듬한 형태로 나타남
      • 그냥 글자를 기울인 것

🍿 자주 사용되는 CSS 속성 

• background-color
  • 엘리먼트의 배경색을 지정
  • 값으로 색상이 들어감
  • 색상 값으로 사용할 수 있는 것의 종류는 다양하지만 보통 미리 정의된 색상의 이름을 사용하거나 16진수의 컬러값을 사용
  • CSS의 색상 값
    • 16진수 컬러 값
      • #ff0000
    • 투명도를 가진 16진수 컬러 값
      • #ff000055
    • RGB 컬러 값
      • rgb(255,0,0)
    • RGBA 컬러 값
      • rgba(255,0,0,0.5)
    • HSL 컬러 값
      • hsl(120, 100%, 25%)
    • HSLA 컬러 값
      • hsla(120, 100%, 50%, 0.3)
    • 미리 정의된 색상의 이름
      •  red
    • currentcolor 키워드
      • 현재 지정된 색상 값을 사용

 

• border
  
  • 테두리를 위한 속성
  • border-width, border-color, border-style 등 3가지 속성을 축약시켜서 한 번에 사용할 수 있게 만든 것
  • 각 스타일을 사용하여 테두리의 두께, 스타일, 속성을 지정할 수 있고 border 속성을 사용하여 한 번에 지정할 수도 있

div {
	border: border-width border-style border-color;
}

 

공부한 자료

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 (소플) - 인프런