MarkUp/CSS

CSS_CSS문법과 적용

hhnn 2021. 1. 7. 14:39

1. CSS란? 

Cascading style sheets의 약자로 HTML(마크업 언어)을 꾸며주는 언어

HTML는 웹페이지의 정보를 표현한다면, CSS는 HTML을 보기좋게 디자인해주는 역할

2. CSS문법

h1 { color: yellow; font-size:2em; }
  • 선택자(selector) - "h1"
  • 속성(property) - "color"

     HTML과 CSS의 속성은 상이함(한국어로 표현할때 둘다 속성이라고 하나 영문으로는 다름)

     HTML의 속성: Attribute

     CSS의 속성: property

 

  • 값(value) - "yellow"
  • 선언(declaration) - "color: yellow", "font-size: 2em"
  • 선언부(declaration block) - "{ color: yellow; font-size:2em; }"
  • 규칙(rule set) - "h1 { color: yellow; font-size:2em; }"

 

3. HTML 내에 CSS파일 연결하기

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

CSS파일 경로 기재시 rel="stylesheet" 로 명명함

head부분에 <link>삽입을 통해 CSS파일 경로를 기재함

rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet' 라고 적어야 합니다.

외부 스타일 시트 방식으로 스타일을 선언하면 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있습니다.

또한, 수정이 필요할 때도 CSS 파일을 수정하면 연결된 모든 페이지에 반영할 수 있습니다.

외부 스타일 시트 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용되는 방법입니다.

반응형
SMALL