CSS 뜻과 기본 문법

웹 언어 배우기/CSS
2018. 11. 1. 08:06

html이 웹페이지의 뼈대(틀) 역할을 한다면, css는 웹페이지의 디자인, 레이아웃 등 스타일 역할을 합니다.

CSS는 Cascading Style Sheets의 약자로 html 요소들이 각종 디자인, 레이아웃 등 사용자에게 어떻게 보여지는지 정의하는 스타일 시트 언어입니다. html과 css의 결합형태 즉, 기본 문법은 어떻게 되는지 알아보겠습니다.

CSS 기본 문법

구글이라는 링크를 코드로 적어보면,

<body>
   <a href="https://www.google.com">구글로 이동</a>
</body>

여기에 CSS를 적용하여 폰트의 색깔을 하얀색, 배경색을 빨간색으로 하는 코드를 적어보면,

<head>
   <style>
      a{color:white;background-color:red}
   </style>
</head>

로 적을수 있습니다.

css 기본 문법

CSS 문법은 선택자와 선언부로 구성됩니다. 위 코드에서 선택자는 a태그 입니다. 즉, 적용하고자하는 html 요소를 의미합니다.

선언부는 하나 이상의 속성과 속성값으로 중괄호({,})로 선언을 시작하고 마지막에 선언을 끝으로 하나의 css 문법을 만들 수 있습니다. 또한, 하나의 속성과 속성값 사이에는 콜론(:)으로 연결되며, 하나 이상의 속성을 사용하기 위해서는 세미클론(;)으로 끝마치고 새로운 속성을 쓰면 됩니다.

CSS 선택자

그렇다면 CSS 선택자는 어떤 것들이 올 수 있을까요? 앞서 예제에서 HTML의 a 태그에 디자인을 하기 위해 선택자로써 적었습니다. 즉, html 요소로 선택자로 스타일을 적용할 수 있습니다. 또, 앞서 배운 id와 class도 선택자로 선택하여 스타일을 적용할 수 있습니다.

링크 역할하는 a 태그의 많이 쓰는 속성들 살펴보기

요약