[React] JSX 03

JSX 스타일링 😲

• 스타일링이란?

  CSS와 같은 스타일 규칙을 이용해 요소의 크기, 색상 등을 결정하는 일입니다.
  
  

• 인라인 스타일링

  JSX 문법 중 하나로 HTML의 style 속성을 이용해 직접 스타일을 정의하는 방법입니다.
  JSX의 인라인 스타일은 style={{스타일 규칙들}}과 같은 문법으로 작성합니다.

  function Body() {
     return (
         <div style={{ backgroundColor: "red", color: "blue" }}>
             <h1>body</h1>
         </div>
     )
  }
  export default Body;

  
  

• 스타일 파일 분리

  스타일을 정의한 CSS 파일을 따로 작성해준 뒤에 연결해줍니다.
  class가 자바스크립트의 예약어이기 때문에 JSX에서는 HTML 문법과는 달리 요소의 이름을 지정할 때 class 선택자가 아닌 className을 사용합니다.

  import "./Body.css";
   function Body() {
     return (
         <div className="body">
             <h1>body</h1>
         </div>
     )
  }
  export default Body;

  //css
  .body {
     background-color: green;
     color: blue;
  }

  
  

💡

• CSS

  .을 포함한 선택자는 클래스를 가리키며, 클래스를 가진 요소에 스타일을 적용합니다.
  .이 없는 선택자는 요소 타입을 가리키며, 해당 타입의 요소에 스타일을 적용합니다.