[css]CSS 기초

CSS란

자주 쓰는 CSS 요소 확인 - React로 스타일링

• Cascading Style Sheets의 약자로 HTML, XHML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다
• CSS는 HTML태그의 스타일을 지정해주기 위해 사용

JS(JSX) 사용과 CSS 활용 했을때의 차이점

• JS에서 styled등 라이브러리 사용해 css 스타일링 가능한데,
  css에서는 calc(100vh-50px) 이런식으로 사칙연산 가능한 함수 존재

• JS에서 또 스타일링 할때 SCSS문법인 &:hover{} 이런것도 사용하는데,
  css에서는 .class이름:hover{} 이런식으로 이벤트를 작성한다.

• JS에서 styled 사용해서 스타일링 할때 border: ${(props) => props.type === "filled" && "none"}; 처럼 js문법을 바로 사용할 수 있고,
  css에서는 아래처럼 className=”widgetLgButton Approved” 이런식으로 속성줘서 css에서 적용가능

  // jsx
  const Button = ({ type }) => {
      return <button className={"widgetLgButton " + type}>{type}</button>;
  };
    
  <Button type="Approved" />
    
  // css
  .widgetLgButton.Approved{
      background-color: #e5faf2;
      color: #3bb077;
  }
  .widgetLgButton.Declined{
      background-color: #fff0f1;
      color: #d95087;
  }
  .widgetLgButton.Pending{
      background-color: #ebf1fe;
      color: #2a7ade;
  }
  

id, class 정리

id 는 스타일을 지정할 때 한 가지만 지정해서 쓰는 이름이다.(표기방식은 #이름)
하나의 문서에 고유한 Id 하나 밖에 쓸 수 없습니다.

• #btn { color:...}

class 는 그룹으로 묶어서 스타일을 지정할 때 쓰는 이름이다.(표기방식은 .이름)
하나의 문서에 여러번 쓸수 있다. 고유값이 아님.

• .menu { color:...}

• 우선순위 : !important>인라인>id>class>tag 순이다

3가지 스타일 방식

• 내부 스타일, 외부 스타일, 인라인 스타일 3가지 방식으로 지정할 수 있음.

내부 스타일

html 내부에 직접 사용.

• <style> ~~ \</style> 태그안에 작성.

외부 스타일

확장자css 인 파일을 새로 만들어서 html에 연결하는 방식.

• <link href="style.css" rel="stylesheet"> 태그로 연결.
• <div id="root"></div> 처럼 id를 html에서 태그마다 적용해줘서 css파일에서 스타일 지정하는 방식
  • css에서는 #id{ display: flex; } 이런식으로 스타일을 주면된다.
  • 보통 id는 #, class는 . 으로 css에서 구분한다. (위에서 설명함)

인라인 스타일

모든 html태그엔 style 속성을 사용 가능.

• <p style="color:green;">이런식으로 사용\</p>

CSS 기본 형태 - 선택자{속성:속성값;}

• p{color:blue;}
  => p가 선택자(모든p태그), color가 속성, blue가 속성값을 의미.

{속성:속성값;}

• 이부분을 선언부라고 부름.

선택자

• 스타일링 하고 싶은 HTML 태그 영역

CSS color 속성과 색상 단위

• 방법 2가지 : 키워드 방법, RGB 방법

1. 키워드

red, green, blue… => 키워드로 색을 변경

• h1{color:red}
  => h1태그를 빨간색으로 스타일하라.

​

2. RGB

rgb(255,0,0), rgb(0,255,0), rgb(0,0,255) => Red, Green, Blue를 각각 나타냄.

• h1{color:rgb(255,0,0)}
  => h1태그를 빨간색으로 스타일하라.

+정보

• h1{color:rgba(100,100,255,0)}
  => rgba를 통해 마지막에 알파값(투명도) 적용. 예: 1=불투명, 0=완전투명, 0.5=중간쯤

3. HEX

색상을 16진수로 입력하는 방식 => #RRGGBB 형태
#ff0000, #00ff00, #0000ff => 각각 Red, Green, Blue를 각각 나타냄.

• h1{color:#ff0000}
  => h1태그를 빨간색으로 스타일하라.

+정보

• #00f 는 #0000ff와 동일하다. 즉, 연속된건 한번 생략 가능.

​

3가지 방법 정리

h1태그를 빨간색으로 스타일하라.

• h1{color:red}

• h1{color:rgb(255,0,0)} +정보 h1{color:rgba(255,0,0,1)}

• h1{color:#ff0000}

폰트 크기 변경(단위포함)

font-size 속성 사용

• h1{font-size:32px;}
  => h1태그를 32픽셀 사이즈로 스타일하라.

참고 : css에서 사용가능한 단위(px, rem, em, vw, vh 등등..)

1. px(픽셀)

px는 웹에서 사용되는 가장 기본적인 크기 단위.

px는 해상도와 관련 있고, 해상도에서 1개의 점이 1px이다.

2. rem(root em)

root:최상위태그(html태그를 의미), em:배수를 의미.

rem 단위는 html 태그의 폰트 크기를 기준으로 배수에 해당하는 크기를 가지게 하기 위해서 사용.

• h1{font-size: 2rem;}
  => 보통 root인 태그의 폰트 크기는 16px이므로 h1태그는 2*16px=32px 크기로 적용된다.

​

3. em

rem과 유사하지만 최상위태그(html태그)가 아니라 부모 태그를 기준으로 사용.

=> 부모 태그 기준이란게 핵심!

​

4. vw(viewport witdh)

vw는 화면의 가로 크기와 관련 있는 단위.

1vw는 화면 가로 크기의 1/100이다. 따라서 100vw는 100/100 즉, 100%크기이다.

• h1{font-size : 10vw;}
  => 화면크기 500px이라 가정하면. 500px0.1=50px 이다.
  *=> 5vw였다면? 500px0.05=25px 이다.

​

5. vh(viewport height)

vh는 vw과 유사하지만 화면의 세로 크기와 관련 있는 단위라는 점.

​

!체크 할 부분

• rem, em은 기준이되는 태그가 크기 변할때마다 유동적으로 같이 변함.

• vw, vh는 기준이되는 화면크기가 웹이면 웹의 크기가 변할때마다 유동적으로 같이 변함.

텍스트를 제어할 수 있는 CSS속성

• font-size, color, font-family, font-weight, line-height

1. font-size

텍스트(=글자) 크기를 조정하기 위해 사용하는 CSS 속성.

• h1{font-size:16px;}
  => h1태그 폰트 크기를 16px.

2. color

텍스트(=글자) 색상을 변경하기 위해서 사용하는 CSS 속성.

• h1{color:red;}
  => h1태그 색상을 red.

​

3. font-family

[글꼴], [글꼴유형] => 텍스트 글꼴 변경.

• h1{font-family: 'Times New Roman', Times, serif;}
  => Times New Roman이란 글꼴 없으면 Times란 글꼴 적용. 이마저도 없을수 있음.
• 뒤의 serif는 글꼴이아니라 글꼴유형임.(고딕, 필기체 등등) 즉, 반드시 적용되는것임.
  [글꼴유형] : generic-family - serif, sans-serif, cursive, fantasy, monospace

​

4. font-weight

텍스트 두께를 변경.

• p{font-weight:bold;}
  => 해당 폰트에선 700이 bold체였음. 즉, 700을 의미하기도 함.

• 굵기 단위 : 100~900, normal, bold, bolder, lighter
  => 참고 : 폰트마다 굵기 허용 달라서 먼저 폰트 확인이 필요함.

​

5. line-height

크기 : 단위 or 배수
=> 텍스트 글자 높이를 변경.

• p{ font-size:20px; line-height: 1.5; }
  => 20*1.5로 적용이 되어서 30px만큼 줄간격이 생김.
  => 만약 1.5가 아니라 10px로 적용시키면 10px만큼 줄간격이 생기고 글자 크기보다 작아서 겹침.

리액트의 기본 CSS 설정 예시

.App {
  text-align: center;
  /* 중앙 정렬 */
}

.App-header {
  background-color: #282c34;
  /* 배경색 지정 */
  min-height: 100vh;
  /* 이 요소의 최소 높이를 브라우저 높이만큼 설정 */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* display: flex; 와 함께 사용할 수 있는 중앙 정렬 */
  
  font-size: calc(10px + 2vmin);
  /* 기본 값이 10px인 폰트 크기를 화면 크기에 비례하여 조절 */
  color: white;
  /* 폰트 컬러 설정 */
}

.App-logo {
  height: 40vmin;
  /* 로고의 크기를 모니터 크기의 40% 정도로 설정 */
  pointer-events: none;
  /* 마우스 포인터 관련 이벤트를 보이지 않음 */
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    /* 로고에 적용 */
    animation: App-logo-spin infinite 20s linear;
    /* 아래 정의된 이름의 키프레임을 20초간 선형으로 진행되는 애니메이션을 무한 반복 실행 */
  }
}

@keyframes App-logo-spin {
  from {
    /* 처음엔 회전이 아무 것도 없는 상황에서 시작 */
    transform: rotate(0deg);
  }
  to {
    /* 끝날 때 한 바퀴(360도) 회전한 상황으로 마무리 */
    transform: rotate(360deg);
  }
}