<22.03.14> CSS 공부 일지 #01. CSS 기본 문법
CSS는 HTML, Javascript와 더불어 웹 페이지를 구성하기 위해 필수적으로 사용되는 요소이다. 흔히 HTML은 웹 페이지의 뼈대를 만들기 위해서, Javascript는 웹 페이지의 동적인 기능 구현을 위해서, 그리고 오늘 포스팅할 CSS는 웹 페이지를 꾸미기 위해 사용한다. 오늘은 CSS의 개념과 기본 문법에 대해 간단히 포스팅한다.
CSS는 Cascading Style Sheets의 줄임말로, HTML 태그와 함께 쓰여 HTML 태그를 더욱 다채롭게 꾸미는 역할을 한다. 주로 웹페이지의 레이아웃을 구성하거나 스타일을 정의하기 위해 작성된 만큼 문법 구조 자체는 HTML과 마찬가지로 간단하지만, 깊게 들어가면 복잡한 동작 원리를 가지고 있다.
위 사진에 나와있는 코드가 CSS 코드이다. CSS 코드를 작성하기 위해서는 세 가지만 기억하면 된다. 선택자(Selector), 속성(Property), 값(Value). 아래는 선택자와 속성 값으로 이루어진 간단한 CSS 코드의 기본 구성을 표현한 그림이다.
선택자는, CSS로 꾸밀 대상이 되는 HTML Tag를 의미한다. 위 예시의 경우 body 태그를 꾸미겠다는 의미이다. <h1> 태그를 꾸미고 싶다면 h1 {} 으로, <p> 태그를 꾸미고 싶다면 p {} 로 작성하면 된다.
속성은 어떻게 꾸밀 것인지를 정하는 것으로, 향후 포스팅에서 언급하겠지만, padding, margin, background-color 등 다양한 속성들이 존재한다. 이 속성들을 통해 웹 페이지에서 보여지는 HTML 태그의 크기나 배경화면 등을 자유롭게 꾸밀 수 있다.
값은 말 그대로 속성에 해당하는 값이다. 위 그림을 예시로 들면, 넓이로 300px를 주겠다는 의미이다. 값에는 속성에 따라 숫자나 문자열, 색상값을 표현하는 16진수값이 들어올 수 있다.
위처럼 CSS 기본문법은 어떻게 보면 HTML보다 더욱 간단하다고 볼 수 있다. 예시로 든 그림은 아주 기본적인 구성으로, 속성은 하나가 아닌 여러개가 들어갈 수도 있으며, 선택자에는 단순히 HTML 태그뿐만이 아니라 Class나 Id를 지정하여 설정할 수 있다. 이는 향후 포스팅에서 언급하도록 하겠다.
오늘은 CSS의 기본문법에 대해 알아보았다. 앞으로는 CSS 코드를 작성하면서 핵심이 되는 것들을 추려 포스팅하도록 하겠다. 다음에도 재미있는 공부거리를 들고 찾아오겠다.
P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.