Daily Coding - FE 2주차 - 19강 20강

==================== ! 강의 내용 ! ====================

19강

BEM 네이밍 규칙

: Block Element Modifier

: 3가지 단계로 CSS의 네이밍을 가져간다

: 소문자 + 숫자로만 조합

: 조합은 하이픈(-)으로 연결하여 작명한다

 

: 네이밍 조합은 '형태 > 의미 > 순서_상태' 를 기본 순서로 사용한다

ex) btn_cancel_01_off  => '형태_의미_순서_상태' // 옳은 예

      cancel_btn_off_01  => '의미_형태_상태_순서' // 잘못 된 예

 

: 네이밍 조합의 _ 는 파일, 폴더, 이미지 등에 사용한다

ex) customerService // 잘못 된 예

      customer_service // 옳은 예

 

CSS 적용하는 여러가지 방법

- Inline CSS

- CSS Module

- styled-components // 많이 사용하는 라이브러리

- emotion // 많이 사용하는 라이브러리

- tailwindcss

- And more

 

 

리액트 CSS 실습 준비 과정

1. App.js

*하기 구문만 남기고 모두 지우기.

import logo from './logo.svg';

import './App.css';

function App() {

     return (

         <div className="App">

 

         </div>

    );

 }

export default App;

 

2. App.css

기본으로 기재되어 있던 모두 지우기.

 

20강

props

: Properties 의 약자

: 함수에 매개변수를 넣는 것처럼 컴포넌트에 전달하는 값

: 값을 지닌 존재 // <-> method '함수'

!쉽게 말하면 값을 함수에 담아서 전달하는 거라고 생각하면 됨!

 

ex)

<APP />

const num = 10; 이라는 변수를 만든다

 

<Component num = {num} />

<p> {props.num} </p>

 

 

==================== ! 실습 중 알게 된 정보들 ! ====================

1rem = 16px

*rem : root element를 뜻함

 

margin: 1rem auto;

: 위아래 1rem 

: 좌우 자동

: 부모 요소가 100vw 일 때 자식 요소는 부모를 기반으로 위아래 1rem(16px) 떨어지고

  좌우는 100vw를 바탕으로 마진을 갖게 된다는 뜻이다

 

text-transform : capitalize

: 시작하는 문자의 첫 글자를 대문자로 치환해준다

ex) <p>success</p> 가 실제 웹페이지에서는 Success 로 보이게 된다.

 

background: transparent;

: 백그라운드 투명으로 줄때 사용한다

 

font-family: inherit;

font-size: inherit;

: 폰트가 가지고 있는 속성 값을 따라간다라는 의미.

 

실제 예제)

javascript

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="wrapper">
      <div className='toast toast-success'>
        <main className='toast__message'>
          <header className='toast__message-title'>success</header>
          <p className='toast__message-text'>Right On!</p>
        </main>
        <button className='toast__button'>Dismiss</button>
      </div>

      <div className='toast toast-warning'>
        <main className='toast__message'>
          <header className='toast__message-title'>warning</header>
          <p className='toast__message-text'>Turn Off</p>
        </main>
        <button className='toast__button'>Dismiss</button>
      </div>

      <div className='toast toast-error'>
        <main className='toast__message'>
          <header className='toast__message-title'>error</header>
          <p className='toast__message-text'>Go Back Home!</p>
        </main>
        <button className='toast__button'>Dismiss</button>
      </div>
    </div>
  );
}

export default App;

 

 

css

.wrapper {
  background: #f4f4f4;
  width: 100vw;
  height: 100vh;
}

.toast {
  background: white;
  border-left: 1rem solid #666666;
  border-radius: 0.5rem;
  box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  margin: 1rem auto;
  width: 25rem;
}

.toast__message-title{
  font-weight: bold;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  margin-top: 0;
  text-transform: capitalize;
}

.toast__message-text{
  margin-bottom: 0;
}

.toast__button {
  color: rgb(0, 0, 0);
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  opacity: .5;
  padding: 0;
}

.toast-success {
  border-color: #09ff00;
}

.toast-warning {
  border-color: #ffe100;
}

.toast-error {
  border-color: #ff0000;
}

 

 

==================== ! 느낀 점 ! ====================

다시 여유를 갖고 들으니깐 이제 이해가 된다

이걸 왜 6월에는 어렵게 느껴졌던 건지 이해가 안가는디야?,,,,,