언제나 피어있는 꽃

저번 글에서는 문단 태그에 대해 알아봤으며, 이번 글에서는 CSS에 대해서 간단하게 알아보도록 하겠습니다


# CSS?

Cascading Style Sheets의 약자입니다만, 이번에도 마찬가지로 이부분은 그냥 넘어갑니다(...)
풀 네임을 안다고 지식이 훌쩍 늘어나는건 아니니까요- _ㅠ


# 기본 양식

CSS는 HTML과 연동되는 다른 언어라고 보면 되겠습니다
티스토리의 스킨 수정 화면을 보면 알겠지만, HTML과 CSS로 나누어져있음을 확인할 수 있는데, 이처럼 HTML과 CSS는 따로 구분하는 편이 가독성에도 좋습니다(그말은, 같이 쓸 수 있다는 말이기도 하죠)

CSS에서는 ID과 CLASS로 분류됩니다. ID는 모든 문서에서 중복되지 않아야하지만, CLASS는 중복되어도 ID로 구분되기 떄문에 상관이 없습니다


ID는 이름 앞에 #(샵)을 붙이고, CLASS는 이름 앞에 .(닷 or 점)을 붙입니다


CSS 코드 1에서 적은대로, 'CLASS는 중복되어도 ID로 구분된다'는 말을 코드로 구현하면 아래와 같습니다


이처럼, 클래스1은 중복되는 이름이지만 아이디1과 아이디2에 따라 구분이 되므로 사실상 중복이 아니게됩니다

설정하는 명령은 상당히 많으므로, 여기에서 모두 다루는게 아니라 하나하나 따로따로 다루도록 하겠습니다. 설정은 1개 이상 얼마든지 넣을 수 있으며, 각 설정의 종료는 세미콜론(;)으로 구분합니다


# HTML과의 연동

이렇게 작성된 CSS는 HTML문서와 연동되어집니다. HTML문서를 문단으로 나눈 이유는 바로 여기에있죠
즉, 문단 태그에 ID나 CLASS를 정해주면, CSS에서 설정한 값이 적용된다는 것 입니다

HTML문서를 다음과 같이 저장한후


CSS에서 다음과 같이 작성합니다


이렇게 작성하면, CSS에서 설정한 값이 HTML문서와 연동, 적용됩니다
물론 CSS를 저렇게 설정할 수 는 없겠죠^^;


간단한 설정중 하나인 글씨 크기를 한번 정해 봅시다
다음과 같은 HTML문서를 작성하고


CSS값을 설정합니다


결과(이미지) :

아무런 변화가 없습니다...
왜냐하면, HTML문서엔 CSS를 불러오라는 명령어를 넣지 않았으니 말이죠


# 진짜 연동!

제대로 결과 값이 표현되기 위해, HTML문서에 CSS의 설정을 읽으라는 명령을 해줄 필요가 있습니다
HTML의 HEAD 안에 그 명령을 넣어주면 됩니다


저렇게 해주면, CSS의 설정을 불러와 HTML문서에 적용할 수 있게 됩니다
하지만 주의점이 있습니다. CSS의 파일 이름은 꼭 style.css로 해야한다는 것이죠
바꾸고 싶으신 분은 위의 소스에서 해당 부분만 바꾸면 되지만, 가급적 이대로 사용하는걸 추천합니다

자, 그럼 파일을 볼까요?

두 파일이 오손도손 있습니다. 이 둘은 이제 앞으로도 쭉~ 같이 나갈겁니다(...)
자, 위에서 작업했던 걸 그대로 적용해 볼까요?



결과(이미지) :

네, 잘 적용되어 보여지고 있습니다



이 글로서 HTML과 CSS가 어떻게 연동되는지 알게 되었습니다
다음 글에서는 CSS의 간단한 설정에 대해 진행하겠습니다