css | Notion

HTML의 속성을 이용하여 웹페이지를 스타일링하는것은 한계가 있다.

내부 구문 내에 너무 많은 코드가 들어가게 되어 구문 오류를 유발하기 쉽기 때문이다.

따라서 사람들은 CSS라는 것을 이용하게 되었고, 오늘은 CSS를 알아보도록 하자.

인라인 CSS

인라인 CSS는 HTML 파일내부에 style을 추가하는것이다.

아래 예시로 body에 배경색을 지정할 수 있다.

<body style = "background-color : blue">

내부 CSS

head 내부에 style을 추가하여 전체 스타일을 지정할 수 있다.

내부 CSS는 인라인CSS 보다는 훨씬 편리하지만, 다른 페이지에 똑같이 하드코딩해야한다는 단점이 있다.

<head>
  <meta charset="utf-8">
  <title>철이의 개인 사이트</title>
  <style media="screen">
    body {
      background-color: #EAF6F6;
    }

    hr {
      background-color: white;
      border-style: none;
      height : 2px;
    }

    img {
      height : 20px;
    }

  </style>
</head>

외부 CSS

외부 CSS는 css파일을 생성하여 이를 링크하는것이다.

head 내부에 link태그를 생성하여 아래와같이 링크를 추가하면 실행할 수 있다.

대부분의 웹페이지 개발자들이 가장 많이 쓰는 방식이 외부 CSS이다.

페이지가 아무리 많아도 실제로 css파일만 수정하면 되기 때문에 상당히 편리하다.

<head>
  <meta charset="utf-8">
  <title>철이의 개인 사이트</title>
  <link rel="stylesheet" href="style.css">
</head>