CSS기본구조

전 포스팅에서는 HTML에대한 정보와 기본문법에 대해서 간략히 다루었다면 

이번엔 CSS에 대해서 다루어 볼까합니다 

CSS

Cascading Style Sheets 한국말로는 종속형 시트 라고 적혀있는데 

쉽게 생각해보면 웹사이트를 보기 좋게 꾸며주는 도구입니다. 

HTML로 구성된 웹사이트의경우 그저 웹문서에 지나치지 않습니다 

이런식으로 꾸며지지않은 그저 그런 웹문서에 지나치지 않습니다 

하지만 CSS를 이용하여서 웹사이트를 제작한다면 이야기가 달라집니다.

많이 접속하는 네이버는 CSS로 각각의 위치 지정과 그리고 사진,텍스트 등을 배치시켜 사용자가 이용하기 편하게 제작되었습니다.

구글같은경우 간단한 CSS로 각각을 배치시켜 간결한 이미지로 배치시켜놨습니다.

CSS의 기본구조는 

전에 HTML의 태그를 쓰시면 CSS를 쓰실수 있습니다 

<style> 

   CSS 셀렉터 {

  CSS내용 

}

</style>

CSS셀렉터에대해서는 추후에 다시다루면서 내용까지 다루겠습니다.

보통은 저방식을 통해 CSS를 다루거나 혹은 .css파일을 html 파일에 연동시켜서 하는 방식도 이용합니다 

후자에 말씀드린 방식은 협업등이 필요한 실제 IT기업등에서 사용하는 방식입니다 

HTML의 링크태그로 css파일을 연동시켜놓는것입니다 보통은 main.css, user.css 등의 파일로 나눠서 관리하든지 하는 편입니다.

  <link rel="stylesheet" type="text/css" href="styles.css">

이런식으로 링크태그를 통해 연동시키는 편입니다.

그리고 CSS에대해서 어렵거나 혹은 CSS를 간편히 사용하고 싶은경우 

CSS 프레임워크를 많이 사용합니다 

CSS 프레임워크는 다른 언어와 마찬가지로 프레임워크가 많이 존재합니다 

https://zetawiki.com/wiki/CSS_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC

링크는 참조만 하시고 

보통은 트위터에서 제작한 부트스트랩을 많이 사용합니다 

쉽고 각각의 버튼을 꾸미기도 편하고 반응형웹도 편하게 만들수 있습니다 

단지 단점이라면... 부트스트랩의경우 부트스트랩을 쓴것이 너무 티난다? 정도 밖에 없네요 

저도 요즘은 CSS공부중이라 사용안하지만 프로젝트할때 기능을 유용하게 쓴 기억이 있습니다