본문 바로가기

Programming/함께 하는 기초코딩

기초코딩 - CSS 이란 무엇일까?

 

지난 글에서 웹사이트는 최소 2가지에서 최대 3가지 

종류의 언어로 이루어져 있다고 말했습니다.

 

첫 번째 언어 : HTML

두 번째 언어 : CSS
세 번째 언어 : JavaScript

 

이렇게 구성되어 있다고 말이죠.

 

그래서 HTML에 대해 설명드렸고 

이번 글은 바로 CSS에 대해 알려드리도록 하겠습니다.

 

HTML에 대해 궁금하신 분들은

여기를 참고하세요~~

tm-csc.tistory.com/1128

 

바로 CSS 정의에 대해 살펴볼까요?

 

캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)

 

종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가

실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에

주로 쓰이며, XML에서도 사용할 수 있다.

W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 

출처 : 위키백과

 

이 설명을 보고 바로 이해한다면 당신은 프로그래머이거나

코딩에 관심 있는 분이라고 봐야 할 거예요.

 

제 글만 보고 HTML에 관해 이제 알기 시작한 분들은

무슨 소리야, 안 하고 싶어!라고 생각하실 수도 있는데요.

 

제가 간단하게 설명해드리도록 할게요.

 

위키백과에 나와있는 글에서도 보면 

HTML에 주로 쓰이며 라는 부분이 보이시죠?

 

CSSHTML과 같이 써야 한다는 뜻이에요.

 

실제로 HTML만 단독으로 사용하거나 

CSS만 따로 사용하는 경우는 없다고 생각하시면 돼요.

항상 두 가지는 같이 사용합니다.

 

그렇다면 왜 같이 써야 할까요?

 

CSS는 브라우저(크롬, 파이어폭스, 네이버 웨일)에게

웹사이트가 어떻게 보여야 하는지 설명해줘요.

 

HTML 글을 보신 분이라면 더 쉽게 설명해드릴게요.

 

지난 글에서 책상 위에 있는 모니터, 키보드, 마우스

의 위치를 제게 설명해달라고 말씀드렸었죠

 

이 글을 읽으시는 분마다 다른 곳에 위치하고 있는

물건들을 저에게 설명하기 위해서 더욱더 

꼼꼼하게 얘기해야 한다고 말씀드렸는데요.

 

이번엔 모니터, 키보드, 마우스의 색깔과 모양

그리고 시간이 지나 바뀐 위치까지 또는

손이 키보드에 올라감에 따라 바뀌는 현상까지

저에게 설명해 주세요!

 

각기 다른 환경에 있으신 만큼 또 변화하는 

모습이 다른만큼 이것 또한 자세하고 꼼꼼하게

설명해주셔야겠죠?

 

네 이게 바로 CSS입니다.

 

HTML은 브라우저에게 이건 이미지고 

이건 글이야 라고 말한다면

 

CSS는 이 글의 크기는 15px이고

색깔은 녹색이었는데 내가 마우스를 

올리면 빨간색이면 좋겠어~

라고 말하는 거죠.

 

만약 네이버에 일부 CSS가 없다면 

이렇게 보이게 되는 거죠.

 

즉 HTML만으로 웹사이트를 만든다면

뼈대만 존재하는 사이트가 될 테고

여기에 CSS를 사용해야 우리가 원하는

디자인으로 예쁘고 눈에 들어오는

사이트를 만들 수 있는 거죠.

 

이게 우리가 CSS를 배워야 하는 이유이고요.

 

혹시나 궁금한 점이 있으시다면 댓글을 달아주시고요.

 

공감구독도 같이 부탁드릴게요~~~