Front-End

[CSS] CSS란 / CSS 구성 요소 / CSS 연동방식

saying.ME 2023. 2. 27. 16:36
728x90

CSS란?

Cascading Style Sheet

  • 정보(HTML)와 디자인(CSS)의 분리
  • 문서의 레이아웃과 스타일 정의
  • HTML로 작성된 정보를 꾸며주는 언어

 

CSS 구성 요소

선택자 { 속성 : 속성값; }
h1 {
    font-size: 20px;
    font-family: sans-serif;
    color: blue;
    background-color: yellow;
    text-align: center;
}

선택자

  • 디자인을 적용할 HTML 영역

속성

  • 어떤 디자인을 적용할지 정의

속성값

  • 어떤 역할을 수행할지 구체적으로 명령. 세미콜론(;) 필수 입력

 

CSS 연동 방법 세 가지

Inline Style Sheet

<h1 style="color: red;">coding 101</h1>

 

  • 태그 안에 직접 원하는 스타일을 적용

 

Internal Style Sheet

<head>
<style>
    h1 { background-color: yellow; }
</style>
</head>

 

  • <style> 태그 안에 넣기

 

External Style Sheet

<head>
    <link rel="stylesheet" href="style.css">
</head>

 

  • <link> 태그로 불러오기
  • html, css 각각의 문서 안에서 따로 관리해서 상대적으로 가독성이 높고 유지보수가 쉬움
728x90
반응형