관심쟁이 영호

[CSS #1] CSS 적용하는 법 ㅣ 현업사람들은 어떻게할까? 본문

Front-End/CSS

[CSS #1] CSS 적용하는 법 ㅣ 현업사람들은 어떻게할까?

관심쟁이 영호 2021. 4. 10. 14:27
반응형

CSS를 HTML에 적용하는 방법은 3가지가 있어요.

 

  • HTML File의 태그마다 CSS 적용하기!
  • HTML File의 <style> 태그 안에 CSS 넣기!
  • CSS File을 새로 만들어서 적용하기!

3가지의 방법을 모두 알아두면 좋지만, 현업에 나가게되면

3번째 방법인, "CSS File"을 새로만드는 방법을 사용해요!

 

그래서 3번째 방법만 알아보도록 합시다.

 

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">
  
  <title>Hello World!</title>
  
</head>

<body>

  <h1>안녕하세요. 관심쟁이 영호입니다.</h1>
  
</body>

</html>

html이 이렇게 있어요!

 

CSS를 적용하기 위해서는,

<head> 태그 사이에 CSS를 가리키는 파일을 명시해주어야 해요!

 

CSS를 명시해볼게요!

 

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">
  
  <title>Hello World!</title>
  
  <!-- CSS 명시 -->
  <link rel="stylesheet" href="/css/CSS_FILE.css">
  
</head>

<body>

  <h1>안녕하세요. 관심쟁이 영호입니다.</h1>
  
</body>

</html>

<link rel="stylesheet" href="/css/CSS_FILE.css"> 라인을 추가했어요!

 

CSS_FILE.css 라는 파일이 css폴더안에 있어야합니다!

 

300x250
Comments