[TIL] CSS 이해 및 문법 적용 방식

이지예·2022년 5월 22일
0

CSS

목록 보기
1/9

CSS

Cascading Style Sheets의 약자이다.
여기서 Style Sheets는 스타일 규칙을 정의하는 것을 말한다.
CSS는 HTML(마크업 언어)을 꾸며주는 언어이고,
HTML이 웹 페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인 하는 역할이다.

css는 마크업 언어와는 독립된 다른 언어이지만 마크업 문서가 없으면 무용지물이다.
마크업 문서가 존재하지 않으면 마크업을 꾸며주는 표현용 언어인 css는 표현할 대상인 콘텐츠가 없어지기 때문이다.
그래서 css는 항상 html과 묶여서 이야기하게 된다.

html의 태그중 자주 사용되는 태그는 10여 개 밖에 없지만 다양하고 독창적인 디자인으로 표현 가능한 이유는 css 덕분이다.

CSS 문법

h1{color : yellow;font-size:2em;}

선택자(selector)

어느 요소를 꾸밀 것인지 선택하는 요소이다.
h1이 해당한다.

속성(property): 값(value)

요소를 어떻게 꾸밀것인지 정하는 요소들
color - 속성의 이름
yellow - 속성의 값
이렇게 두 개를 묶어서 하나의 선언이라고 한다.

html 속성과 css 속성

html의 속성은 Attrubute
CSS의 속성은 Property
영어 해석이 같을 뿐, 둘은 다른 속성이다.

선언부

중괄호를 포함한 내부의 코드를 선언부라고 한다.

규칙

선택자까지 합쳐진 전체를 하나의 규칙 혹은 룰 셋(rule set)이라고 한다.

CSS 적용방식

1. inline 스타일 방식

: 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법
해당 요소에 직접 선언하기 때문에 선택자는 필요x, 선언부의 내용만 스타일 속성의 값에 넣어주면 된다.
적용해야 하는 부분이 많은 경우 일일이 찾아서 다 수정해줘야 하기 때문에 인라인 스타일은 자주 사용되는 방법이 아니다.

2. internal 스타일 방식

문서에 <style>태그를 이용해서 셀렉터를 이용한 방법이다.
style 태그는 <head>태그에 들어간다.
스타일이 변경되더라도 한 줄만 수정하면 된다.
그러나 사이트에는 많은 페이지가 있는데, 여러 페이지에 동일한 스타일 규칙을 적용시키기 위해서는 모든 페이지마다 <style> 태그를 복사해서 붙여 넣어 줘야 하는데 스타일 규칙이 길어지면 쉽지 않은 일이 될 것이다.

0개의 댓글