본문 바로가기

🆂🆃🆄🅳🆈/𝘾𝙤𝙖𝙙𝙞𝙣𝙜

React 기반 홈페이지 만들기 스터디 1-2 CSS 준비

2. CSS

 

기본 소개

-Cascading Style Sheets 의 약자로, HTML을 꾸미기 위해 작성하는 코드.

-<head> 부분에 <style> 태그를 사용해 집어넣음

<head>
  <style>
    .color-primary{
    color: red;
    }
  </style>
</head>

이걸 'class'라고 한다. 사용하려면

<body>
 <p class ="color-primary"> hello </p>
</body>

이와 같이 사용.

body에 class 속성을 넣은 것.

 

css 파일 따로 빼기

<head> 부분에 있던 CSS를 아예 다른 파일로 뽑아내자.

<head>의 CSS 코드를 지운 뒤 mystyle.css 라는 이름의 새 파일 생성.

내용은 다음과 같다.

.color-primary{
    color:red;
}
.font-50{
    font-size: 50px;
}

기존의 <head> 파일에는 css 파일에 접근할 수 있도록 다음과 같이 경로 제공.

<head>
 <link rel="stylesheet" href="mystyle.css">
</head>