HyunJun 기술 블로그

CSS란?, CSS 적용하기(style, .css) 본문

CSS

CSS란?, CSS 적용하기(style, .css)

공부 좋아 2023. 5. 29. 02:00
728x90
반응형

1. CSS (Cascading Style Sheets)

HTML(XHTML, XML)과 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다.

 

  • HTML이 페이지의 요소에 대한 위치 및 형태를 지정해 주었다면, CSS는 모양 및 스타일을 지정해 줍니다.

2. CSS 적용

2-1. Inline Style (인라인 스타일)

가장 기본적인 방법이며, 빠르게 해당 요소에 css style을 적용할 수 있습니다.

<div style="color: white; background-color: orangered; font-size: 50px">스타일 속성 확인하기.</div>

 

다만 HTML의 style 속성으로 CSS를 사용 시 2가지 정도의 큰 단점이 있습니다.

 

  1. 개발자 입장에서, HTML 코드의 양이 많을 경우 HTML 코드에 CSS가 무분별하게 작성되므로 가독성에도 좋지 않고 협업을 가정한다면 유지 보수가 힘듭니다.
  2. 동일하게 적용되는 스타일임에도 불구하고, 일일이 하나하나 적용해 주어야 하는 불편함이 있음.
    <ul>
      <li style="color: red; background-color: black; font-weight: 900">
        가
      </li>
      <li style="color: red; background-color: black; font-weight: 900">
        나
      </li>
      <li style="color: red; background-color: black; font-weight: 900">
        다
      </li>
      <li style="color: red; background-color: black; font-weight: 900">
        라
      </li>
    </ul>

 

2-2. 내부 스타일 시트

<head></head> 내에 작성하면 됩니다. 2-1에서 했던 스타일을 li 엘리먼트에 동일하게 적용해 줌으로써, 2번의 단점은 해결했지만, 여전히 HTML 코드 내의 <head></head>안에 존재하므로 1번의 단점은 여전히 어느 정도 가지고 있습니다. -> CSS의 양이 매우 많아진다면 어떻게 될지 생각해 보면 될 것 같습니다.

<head>
   <style>
      li {
        color: red;
        background-color: black;
        font-weight: 900;
      }
    </style>
</head>

 

<ol>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ol>

 

 

2-3. 외부 스타일 시트

파일명의 확장자를 .css로 만들어 css 전용 파일로 만들 수 있습니다.

.css 파일을 불러오는 태그는 <head></head> 내에 아래처럼 작성하면 됩니다.

index.html

<!-- css 파일 불러오기 -->
<link rel="stylesheet" href="index.css" />

 

index.css

li {
    color: red;
    background-color: black;
    font-weight: 900;
  }
728x90
반응형
저작자표시 비영리 변경금지
'CSS' Related Articles more
Comments