<목차>
- css란?
- css의 역할
- css와 html의 관계
<CSS란?>
CSS(Cascading Style Sheets)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로 HTML에서 주로 쓰인다. CSS는 HTML과 같은 하나의 언어다. 그리고 이 언어의 목표는 디자인하는 것에 최적화 되어있다고 볼 수 있다.
<CSS의 역할>
css는 기본적으로 html을 꾸며주는 역할을 한다고 보면된다.
기존에 가지고 있던 엘리먼트의 속성을 변경시켜주는 역할을 하는 것이 css이다.
예를 들면 display가 블럭인 것을 인라인으로, 인라인인 것을 블럭으로 변경하는 등 요소를 내 마음대로 조절할 수 있다. 더 나아가서 글자크기, 색상 등도 조절할 수 있다.
ex) <h1>엘리먼트의 속성은 블럭형태, css를 활용하여 블럭형태->인라인형태로 변경가능, 글자크기도 조절가능
<CSS와 HTML의 관계>
그렇다면 html을 사용하여 웹페이지를 꾸미지 않고 css를 사용하는 이유는 무엇일까?
html을 쓰는 이유는 웹페이지 상에 어떠한 데이터를 넣고 싶을 때 데이터들 간의 구분값을 명시하기 위함이다.
즉, html은 어떠한 내용들을 꾸며주기 위해 쓰는 것이 아니다.
<header></header>
<aside></aside>
<section></section>
위의 세 코드는 <div></div>와 쓰임이 똑같다.
위와 같이 쓰는 이유는 해당 영역을 엘리먼트로 표현해주기 위함이지 기능적인 효과는 없다.
<header></header>의 경우, 명시적으로 "<header>라는 엘리먼트 안에서는 header내용을 넣을거야"라는 내용만 있을 뿐 다른 기능이 들어가 있지는 않다.
다시말해, html은 데이터의 구분을 짓기 위해 생긴 엘리먼트들이 많을 뿐 다른 기능을 가진 것은 없다.
다음 포스팅에서 css를 활용하여 html에서 작성된 엘리먼트들에게 스타일을 주는 방법에 대해 알아보도록 하자.
'CSS' 카테고리의 다른 글
CSS skills(2) - 속성 선택자 , display:none; , input[id=" "]:checked{ } , 인접 접근자 + , :nth-child (0) | 2021.12.27 |
---|---|
CSS skills(1) - display, float, position (0) | 2021.12.22 |
CSS 문법 (0) | 2021.12.21 |
CSS(2) - width, height, margin, padding (0) | 2021.12.21 |
CSS (1) - CSS 적용 방법 (0) | 2021.12.21 |