html style 지정 시 왜 css을 사용 할까? & 간단한 css 사용법

티스토리를 운영 하다 보면 css라는 부분을 쉽게 찾아 볼 수 있다. 처음에는 이게 뭐지?하고 생각하다 익숙 해 지고 나니 

아, 별거 없네라는 결론을 도출하게 되었다.

html 스타일 지정 時 크게 세 가지 방법이 있는데,

첫째, 스타일 바꾸고 싶은 태그 자체에 스타일 지정.

<button style=“”></button>

 

둘째, html 안에 스타일태그를 별도로 만들어 지정.

<style>

button{}

</style>

 

마지막으로, css안에 스타일지정.

button{}

 

즉흥적이고 직관적인 방법은 첫 번째 방법이나, 

익숙 해 지고 나면 css를 이용하는 것이 여러 가지면에서 이득이다. 

우선 복잡하고 장문의 스타일 지정 時 별도의 css에 넣어두면 html의 가독성에 좋고, button에 대한 공통된 스타일 지정에 있어 css만 바꿔주면 되니 관리면에서 편하다. 물론 두 번째 방법도 html 안에 따로 공간을 마련하여 작성하면 되기는 하나, 아무래도 html 공간이 늘어난다는 것에 한계를 가졌다.

 

css에서 이름 지정 時,

html에서 id로 연결점을 만든다면 #~으로 시작해야 하고,

#a{}

html에서 class로 연결점을 만든다면 .~으로 시작하면 된다.

.a{}

다만 기존의 있는 태그에 스타일 지정한다면 그저

button{}

그 태그명을 그대로 사용하면 된다. 다만, button에도 여러 가지 스타일이 있으니

button.a{}

button.b{}

이렇게 사용하면 된다. 그리 된다면 html에서는

<button class=’a’></button>

<button class=’b’></button>

이렇게 사용하면 된다.

 

우선 시중에 나와 있는 스타일을 button에 적용 해 보면 css가 왜 필요한지 이해하기 쉽다. button만에 해도 써야 할 코드가 많다.

https://codepen.io/

해당 링크를 따라 가서 원하는 스타일의 버튼을 선택 해 적용 할 수 있다면, 오늘의 수업은 끝이다.