CSS 정의 & CSS란 무엇인가?

 

안녕하세요, '손재의 파이프라인' 블로그를 운영 중인 주인장 '손재'입니다. 지난 4월 22일부터 저는 본격적으로 국비과정으로 진행되는 웹디자인 프런트엔드 과정을 수강 중에 있습니다. IT 개발자 직업군에는 특히 국비지원 과정에서는 생각보다 전공자보단 비전공자의 비율이 훨씬 높습니다. 그래서 아무래도 비전공자들은 처음부터 이해하기가 어렵기도 하지만, 따라가는데 급급할 수밖에 없지요. 그래서 무엇보다도 복습이 철저하게 진행돼야 하는데, 이곳을 빌어 저는 개인적인 복습도 진행하면서 제가 만든 자료와 공부 내용도 공유하고자 이렇게 포스팅을 진행하게 되었습니다.

 

'CSS의 정의' 기초 편을 보기 전에 아래 링크를 클릭하여 'HTML의 정의'편을 가볍게 보고 오시길 바랍니다.

 

https://sungjaecloud.tistory.com/213

프론트엔드 - HTML 정의

CSS의 정의

 

CSS란 Cascading Style Sheet의 약자로 웹 요소에 스타일을 적용할 때 사용하는 언어예요. CSS는 Cascading이라는 말처럼 폭포처럼 스타일 시트에서 자동으로 우선순위가 매겨져 위에서 아래, 즉 계단식으로 적용된다는 걸 의미한답니다.

 

CSS는 쉽게 얘기해서 '웹 문서의 뼈대를 구성하는 HTML에 옷을 입힌다, 스타일링을 한다.'라고 이해하시면 될 것 같습니다.

제가 맨 처음 CSS를 접할 때, 가장 이해가 쉽게 되지 않았던 부분은 바로 이 기초적인 내용이었습니다. 전체 선택자가 무엇인지 패딩과 마진은 무엇인지 왜 점(.)과 샵(#)을 이용해 코딩을 작성하는지 등 기본적인 약속임을 받아들이는 데 오래 걸렸죠.

 

전체 선택자 (*) : 말 그대로 모든 문서에 가장 기본이 되는 초창기 상태 즉, Reset 상태에서의 초기 설정을 줄 때와 그리고 같은 태그 모두에게 주고 싶일 때 사용합니다.

 

마진과 패팅(margin & padding) : 웹 문서 내에서 공간을 주고 싶을 때 사용합니다.

 

클래스 선택자(Class Selector) : 어떤 특정 부분에만 스타일을 주고 싶을 때 사용합니다.

 

아이디 선택자(Id Selector) : 특정 태그를 사용하는 모든 부분에 스타일을 주고 싶을 때 사용합니다.

*보통 딱 1번만 사용한다.

그리고 가장 중요한 부분 중에 하나인 바로 텍스트의 스타일과 크기, 너비 등을 지정해주는 속성 font-family, font-size, font-weight 등이 있습니다. 이 기초적인 부분을 건드려줘야 웹 문서에서 우리가 텍스트를 봤을 때 보기 좋은 크기와 굵기, 글꼴 등을 변경하여 사용할 수 있습니다. 디자인적인 요소로 따져보면 꽤 중요한 역할을 하겠죠?

초보자인 저 같은 경우는 보통 구글 폰트를 많이 사용합니다.

 

링크를 불러와 그대로 복사 붙여 넣기 하기만 하면 사용할 수 있기 때문이죠. 그러나 구글 폰트는 한글 폰트보다는 영어 폰트가 훨씬 많기 때문에 한글 폰트를 입히고 싶으시다면 직접 TTF 폰트를 변환해서 사용해야 합니다. 저는 너무 어려워서 아직 해보진 않았는데 웹문서에 한글 폰트도 입힐 수 있으면 좋을 것 같아요.

 

한글은 세상에서 가장 아름다운 언어이니까요.

이 밖에도 텍스트, 문단의 정렬을 해주는 text-align 속성도 있습니다.