7월27일49일차 - meta, react style

class 표현방식 5가지

Abc    : 파스칼케이스
aBc    : 카멜케이스
a_bc   : 스네이크케이스
a-bc   : 케밥케이스
a__b-- : BEM

 

meta tag를 이용하여 검색엔진에 나타날 홈페이지의 설명을 정할 수 있습니다.
    <meta name="description" content="표시할컨텐츠가들어갈위치"/>
naver, facebook, twitter, kakaotalk 등 사이트별로 meta를 지정할 수 있습니다.




반응형으로 사이즈를 바꿀 때 left right를 주어 사이 값을 너비로 만드는 방법은 코드를 줄여주고 유용합니다.
  .topBanner {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    right: 1.5rem;
    transform: translateY(-50%);
  }
  
  

 

export로 function을 내보낼 수 있습니다.
export default function header() {
  return <>header</>;
}

component에 직접 style 속성을 주어도 적용이 안됩니다.
    <header>
      <Header style={{ color: "red" }} />
    </header>

react에서 스타일을 주는 규칙은 ;대신에 ,로 연결하고 -는 카멜케이스로 치환하는 것입니다.
          <li><a href="" style={{ color: "red", fontSize: "40px" }}>menu01</a></li>

속성을 react에서는 property라고 부르고 js에서는 attribut라고 부릅니다.
react에서 속성에 숫자를 입력하려면 {} 중괄호로 감싸주어야 합니다.
      <Header name='yh' age={3} />