CSS

목록 보기

1/4

CSS란 무엇인가?

CSS는 캐스케이딩 스타일 시트(Cascading Style Sheet)의 약자 이며 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어다.
CSS는 HTML과 같이 쓰이며, 웹사이트의 CONTENT가 어떻게 보여야하는지 알려주는 것이다.
HTML은 인간의 뼈대였다면, CSS는 인간의 근육이라고 생각하면 된다.

❗ CSS는 HTML 없이는 아무것도 할 수 없다.

CSS 적용 방법 (3가지)

<span style="color:blue"> CSS </span>

<head>
    <style>
      span {
        color: red;
      }
    </style>
  </head>

  <body>
    <span> CSS </span>
  </body>

같은 HTML 파일에 style 태그를 사용하여 편하고 빠르게 적용이 가능하다.
하지만 이 역시 인라인 적용방법과 같이 HTML과 CSS가 분리되지 않았기 때문에 코드 가독성이 떨어지며 유지보수에 적합하지 않다는 단점이 있다.

❗body 태그가 아닌 head 태그 안에 작성해야 한다. ( header와 헷갈림 주의 )

<link href="styles.css" rel="stylesheet" />

CSS 작성 방법

span {
        color: red;
        font-size: 20px;
      }

디자인을 적용할 선택자(위 코드에서 span)을 지정하고 속성 다음 클론,
값 다음 세미콜론으로 닫아줘야 한다.
브라우저는 CSS를 읽을 때 위에서부터 순서대로 읽기 때문에 같은 selector를 가리키는 CSS가 여러개라면 가장 마지막 스타일이 적용된다.

💡 CSS의 다양한 스타일을 더 알아보고 싶다면

멋진 개발자가 될거야

CSS란 무엇인가?