IT입문자를 위한 CSS 이해하기

안녕하세요. 이번 포스팅에서는 IT입문자를 위한 CSS 이해에 관련된 포스팅을 해볼까 합니다.

이제 IT용어들을 접하신 분들은 CSS 단어가 굉장히 생소하실 것 같은데, 실제로 CSS는 웹페이지 개발에서 빼놓을 수 없는 언어입니다. 우리는 실습과 활용을 제외하고 언어과 활용 자체에 대해서 이해하는 정도로 진행할 예정이니, 가벼운 마음으로 시작해보도록 하겠습니다.

 

CSS란 무엇인가

CSS(Cascading Style Sheets)는 웹페이지의 스타일과 디자인을 담당하는 언어입니다. 글자색이라던지, 배경색을 담당하는 언어라고 이해하시면 편합니다. 지난 시간에 알아봤던 HTML로 웹페이지의 뼈대와 구조를 작성하고, CSS로 이것을 꾸몃 사용자에게 시각적으로 좋은 웹페이지를 보여줄 수 있도록 하는 것입니다.

 

CSS의 기본구조

CSS는 선택자와 스타일 선언 블록으로 구성되어 있는데요.

선택자는 HTML 요소를 가리키고, 스타일 선언 블록은 해당 요소에 적용되는 스타일을 지정하는 역할을 합니다. 이 말이 조금 어려울 수 있을 것 같은데요. 간단하게 예를 들어보자면 선택자는 HTML의 특정 글자(요소)에 스타일을 적용할 때 쓰는 것이고, 스타일 선언 블록은 특적 요소를 그룹화하여 선언 후 적용하는 역할을 합니다. 

간단한 스타일 선언 블록

위의 사진을 기준으로 설명하면, '<p>'라는 요소에 묶인 글자 색상을 파란색으로 지정하고, 크기를 16픽셀로 지정할 수 있도록 적용해놓게 되는 것이죠.

 

 

크롬 브라우저에서 style 영역에서 검색창의 색깔을 바꿔보는 것도 할 수 있습니다.

실제 응용은 교육이나 강의를 통해서 익히시는 것을 추천드립니다.

 

CSS를 이해하기 위한 Q&A

사실 CSS를 올바르게 이해하기 위해서는 HTML에서 작성되는 구조를 제대로 아는 것이 필요합니다. 아래 글을 참고하셔서 간략하게나마 HTML에 대해서 이해하는 시간을 가져보시길 바랍니다.

 

IT입문자를 위한 HTML 이해하기

 

이제 간략하게 CSS를 더 폭넓게 이해하기 위한 Q&A를 진행해보겠습니다. 제가 처음 CSS를 공부할 때 궁금했던 것을 위주로 작성해보았는데, 많은 도움이 되었으면 좋겠습니다. 

 

1. CSS와 HTML은 어떤 관계를 가지나요?

 - 우선 CSS는 HTML과 별도라고 이해하시는 게 좋겠습니다. 다만 HTML 파일에 '<'style'>' 태그를 사용하여 CSS코드를 작성하는 것도 가능하고, 물론 '<link>' 태그로별도의 파일과 파일로 연결하는 것도 가능합니다.  조금 쉽게 비유하자면 웹페이지의 구조는 HTML이고, 그 위의 옷은 CSS라고 생각하시면 좋겠습니다.

 

2. CSS는 어떤 분야에 사용되나요?

 - 기본적으로 웹페이지 개발에서 HTML 과 함게 사용하여 레이아웃 , 색상, 글꼴, 그림자 등 시각적 요소를 디자인하는 역할을 합니다. 물론 웹페이지 뿐만 아니라, 모바일앱, 게임개발, 프린트 인쇄 문서 등을 디자인할 수도 있습니다. 사실 어떤 개발을 하든 필수적으로 이해하고 있어야 하는 언어라고 생각합니다.

 

3. CSS를 사용하기 위한 준비는 어떤 것이 있을까요?
 - 우선 HTML의 텍스트 편집기와 웹 브라우저에서 개발자 도우를 사용해서 웹페이지의 CSS구조와 변경에 관련된 실습을 해보는 것을 추천드립니다. 모방/복제해보는 것이 제일 빠른 방법이라고 생각합니다. 

 

마치며

이번 포스팅에서는 IT입문자를 위한 CSS를 이해하는 방법에 대해서 다루어보았습니다. 제가 처음 접했을 때 쉬운 듯 하면서도 실제 적용할 때는 어려운 점이 많았는데요. 웹 페이지를 개발하거나 IT쪽으로 취업을 준비하시는 분들이 아니더라도 우리가 일상적으로 마주하는 웹/앱이 어떤 식으로 구성되어져있고 구동되는지 상식으로 알고 계시는 것도 좋을 것 같습니다. 이 글이 CSS를 이해하고 다루는 데 조금이라도 도움이 되었으면 좋겠습니다.