22. 인라인 스타일

• 광고란에 이미지 사이즈가 틀어지지 않았는지 확인하기 위해 일시적으로 인라인 스타일을 적용해보았다.

//Section.tsx
import { ReactNode } from 'react';
.
.
.

interface Props {
  img?: string;
  body?: ReactNode;
}

export const AdvSection: React.FC<Props> = ({ img }) => {
  return (
    <>
      <AdvSectionFrame>
        <img
          alt='advertise'
          style={{ border: '1px solid blue' }}
          src={img}
          width={SECTION.ADV_WIDTH}
          height={SECTION.ADV_HEIGHT}
        />
      </AdvSectionFrame>
    </>
  );
};

• 인라인 스타일
  -> 태그 props에 자바스크립트 객체 형식으로 직접 넣는 스타일 방식

• CSS, styled-components는 세미콜론(;)으로 항목들을 구분함에 반해
  인라인스타일은 컴마(,)로 구분하고, 양쪽에 따옴표('')를 넣어줘야 한다 + 중괄호로 묶어서 넣는다.

1) CSS, Styled-components
display: flex;
border: 1px solid blue;

2) Inline style
<div 
 style = {
 {display:'flex', border: '1px solid blue'}
 }>
</div>

----------
스타일을 바로 넣지 않고 상수를 사용해서 넣을 수도 있다.
<div style = {makeBlue}></div>

const makeBlue = {
display:'flex', 
border: '1px solid blue'
}