반응형
Style
Style은 html의 태그들에 디자인을 입히는 과정으로, html 태그들이 틀을 담당했다면, style은 그 태그들을 꾸미는 작업을 한다.
앞으로의 글들에서 소개할 Style 속성으로 Web을 꾸밀 것이다.
style에 대해서는 이정도로만 소개하고, 앞으로 있을 설명에서 더 자세하게 설명할 것이니, 아래 코드들을 참조하면서
이런 것이 있다라고만 기억하고 있으면 된다.
CSS
CSS는 html 각 태그의 style 속성을 한 파일에 몰아 html에 연결하여 style별로 분류해 보기 쉽게 만들어 놓은 구조다.
가독성이 뛰어나며, 무엇보다 모듈화를 하여 추후 수정할 일이 생기면 좀 더 쉽게 작업할 수 있는 장점이 있다.
기존의 html style 방법과 css 방법의 차이점에 대해 설명한다.
html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div style="width:300px; height:500px; margin:0 auto;border: 1px solid black">
</div>
<div style="width:200px;height:60px;margin: 20px auto; border: 1px solid black; border-radius: 5px;">
</div>
</body>
</html>
위의 코드에서 나와있듯이 style 속성을 한줄에 지정하는데, 코드가 더럽게 보이고 가독성이 없다.
이를 정리하기 위해 head 부분에 style 태그로 정리하여 지정할 수 있다.
html Style
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#mainbox {
width: 300px;
height: 500px;
margin: 0 auto;
border: 1px solid black;
}
#subbox {
width: 200px;
height: 60px;
margin: 20px auto;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="mainbox">
</div>
<div id="subbox">
</div>
</body>
</html>
하지만, html 수정을 하기 위해서 보기에 좀 그렇고, 수정 작업이 힘들다.
이에 style을 css 파일에 옮겨 연결시켜 모듈화를 하는 것이다.
html / css
<!-- HTML File (main.html) -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="mainbox">
</div>
<div id="subbox">
</div>
</body>
</html>
/* CSS File (main.css) */
#mainbox{
width: 300px;
height: 500px;
margin: 0 auto;
border: 1px solid black;
}
#subbox{
width: 200px;
height: 60px;
margin: 20px auto;
border: 1px solid black;
border-radius: 5px;
}
더 상세한 이론이 있겠지만, 이해를 쉽게 하기 위해 생략한다.
위의 코드를 보듯이 CSS를 사용하기 위해서는 tag지정 , id 지정, class 지정이 있는데 이는 다음에서 알아볼 것이다.
반응형
'Develop > Web' 카테고리의 다른 글
| [HTML / CSS] CSS기초 3. CSS 연결 (link / import) (2) | 2018.11.22 |
|---|---|
| [HTML / CSS] CSS기초 2. style 선언자 (tag, id, class) (0) | 2018.11.22 |
| [WEB / JQuery] Click 이벤트가 작동하지 않을 때 대처 (0) | 2018.11.10 |
| [WEB / Javascript] IE9 이하 브라우저 html5 지원 (0) | 2018.11.08 |
| [WEB / JQuery] 태그 삭제 함수 (remove, detach, empty) (0) | 2018.11.07 |