CSS - CSS란 무엇인가?
CSS - CSS란 무엇인가?
이번 포스팅에서는 CSS를 알아보도록 하겠습니다
CSS를 알기위해선 선행적으로 HTML을 아셔야 합니다
간단하게 설명한다면 HTML은 웹사이트에서 화면에 표시되는 정보이며, CSS는 웹 사이트에서 화면에 표시되는 정보들을 꾸며주는(디자인) 역할을 하게됩니다
초창기에 웹은 HTML만으로도 만들기, 꾸미기를 하였습니다
그러나, 웹 사이트가 폭발적으로 커지면서 여러개의 공통적인 문서(HTML)를 1개의 디자인이 변경되면 모든 파일을 수정하여야 되는 문제가 발생하게 되었습니다
CSS는 이런 문제를 동시에 해결할 수도 있고, 웹 페이지 정보와 스타일을 분리하여 유지보수를 수월하게 할 수 있습니다
CSS - CSS 사용방법 |
CSS는 보편적으로 사용되는 방법은 3가지이며, 어떠한 방법으로 작성하냐의 따라 차이가 존재하게 됩니다
큰 틀에서 사용법은 다음과 같습니다
1. HTML 안에서 style 속성을 이용하는 방법입니다
2. <style> 태그를 통해 HTML 문서 내부에서 이용하는 방법 입니다
3. 별도로 CSS 파일을 분리하여 HTML의 문서에 연결하는 방법 입니다
1. HTML 안에서 style 속성을 이용하는 방법
<!DOCTYPE html> <html> <head> <title>타이틀</title> </head> <body> <div style="color:blue"> 서버구축이야기!! </div> </body> </html>
위 코드는 HTML 태그 안에서 style 입력 후 안에 원하는 속성을 입력하는 방법입니다
사용법 : < [태그] style = " [속성] " >
2. <style> 태그를 통해 HTML 문서 내부에 이용하는 방법
<!DOCTYPE html>
<html>
<head>
<style>
.my_css{color: blue}
</style>
</head>
<body>
<div class="my_css">
서버구축이야기!!
</div>
</body>
</html>
위 코드는 HTML 페이지 안에서 head안에 style 태그로 분리하는 방법입니다
사용법 : <style> [id또는 클래스] { [속성] } <style>
3. 별도로 CSS 파일을 분리하여 HTML의 문서에 연결하는 방법
가장 많이 사용하는 방법이기도 합니다
CSS를 별도의 파일로 생성하여 여러개의 HTML 문서를 같은 CSS로 적용하였을때 중복과 유지보수 혹은 관리가 편리합니다
File : my.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="my.css" type="text/css"> </head> <body> <h1>서버구축이야기!!</h1> <div>서버구축이야기!!</div> <div class="my_css">서버구축이야기!!</div> </body> </html>
위 코드는 CSS 파일을 분리하기 위한 코드이며, 먼저 HTML 문서안에 link 태그를 이용하여 별도로 생성한 css 파일을 연결합니다
사용법 : <link rel="stylesheet" herf=" [파일의경로] " type="text/css">
File : my.css
@charset "utf-8";
h1 {color:green}
div {color:blue}
.my_css {color:red}
위 코드는 CSS 코드이며, CSS 처음코드에 @charset "utf-8"; 코드는 CSS 인코딩 설정입니다
그리고 CSS를 적용할 태그, class, id 입력 후 속성을 적용하시면 됩니다
사용법 : [ [tag] or [class] or [id] ] { [css 속성] }
앞으로 CSS 포스팅에서는 별도로 CSS 파일을 분리하여 HTML의 문서에 연결하는 방법 으로 CSS를 알아보도록 하겠습니다.
