[CSS] CSS 기본

김현주·2021년 11월 25일
0

CSS

목록 보기
1/18
post-thumbnail

CSS(Cascading Style Sheets)란?

Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다.
CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링 되어야 하는지 지정합니다.
- MDN Web Docs

CSS 기본형태

HTML에 CSS 적용시키기

① 외부 스타일시트

외부 스타일시트는 .css확장자가 있는 별도의 파일을 문서로 가져오는 가장 일반적이며 많이 쓰는 방법이다.
<head>태그안에 <link>태그를 써서 css파일을 불러온다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>
h1 { /* h1 : 선택자 */
 color: blue; /* 선언부  */
 background-color: yellow; /* color(속성) : blue(값) */
}
p {
 color: red;
}

② 내부 스타일시트

내부 스타일시트는 HTML문서내의 <head>태그안에 <style>태그를 만든다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

③ 인라인 스타일

인라인 스타일은 html의 요소에 직접적으로 선언하는 방법으로 잘 사용하지 않는 방법이다.
🤔why? 유지보수가 매우 비효율적이기 때문!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>
profile
✨프론트엔드 개발자가 되기 위한 독학러✨

0개의 댓글