(CSS) Cascading Style Sheets

Mirrer·2022년 4월 29일
0

CSS

목록 보기
1/15
post-thumbnail

CSS란?

마크업된 HTML문서에 Style을 적용하기 위해 사용되는 스타일 언어

CSS(Cascading Style Sheets)는 HTML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다.

CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 지정하는 역활을 담당한다.

즉 마크업 언어(HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다.

이를 활용하여 HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.


HTML문서에 CSS파일을 적용하는 방법

스타일을 적용 및 수정할 때 HTML문서를 확인하는 것은 비효율적이다.

즉 스타일에 관한 코드를 작성할 때는 CSS파일만 바라보는 것이 바람직하다.

HTML문서에 CSS파일을 적용하는 방법은 크게 3가지로 구분된다.

<head>태그에 <link>태그로 적용

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<head>태그에 <style>태그로 적용

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      font-size: 32px;
    }
  </style>
</head>

inline스타일 방법으로 적용

<body>
  <p style="font-size: 32px;">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
    Ipsum optio sequi vero nesciunt commodi voluptates voluptatum.
  </p>
</body>

특수한 상황이 아니라면 <head>태그에 <link>태그로 적용하는 방법을 사용하는 것이 일반적이다.


참고 자료

CSS: Cascading Style Sheets | MDN

profile
memories Of A front-end web developer

0개의 댓글