html로 웹 문서를 작성했다 하더라도, 바로 사용자가 이용하기에는 무리가 있습니다.
가독성이 심각하게 떨어지기 때문입니다.
그래서 html문서를 꾸며주는 css를 사용하게 되는데요,
바로 알아보도록 하겠습니다.
우선, css는 선택자를 가지게 됩니다.
이 선택자는 html의 태그들을 선택하거나, 우리가 html에서 지정한 id, 클래스 이름들, 또는 문서 전체를 선택하게 됩니다.
그 다음 {중괄호}를 열어 이 안에 우리가 선택한 것들에 대해 꾸며주는 속성들을 넣어주게 됩니다.
<html>
<div class="box1">box1</div>
<div id="box2">box2</div>
</html>이러한 html상의 태그, 지정한 클래스와 id값, 또는 html 자체를 꾸며주는 방법은 다음과 같습니다.
* {
margin: 0;
pading: 0;
}
/*별 표시는 html 전체에 대한 선택자로, 여기에서 지정한 값들은
문서 전체에 적용되게 됩니다.*/
div {
height: 40px;
width: 40px;
}
/*여기서는 div 태그를 지정해 주었습니다. 여기서 지정한 값들은
html 문서 안의 모든 div 태그들에 적용되게 됩니다.*/
.box1 {
color: red;
}
/* .(점)과 함께 html상에서 지정해 둔 클래스의 이름을 작성해 주면,
클래스 이름을 지정해 둔 부분에 대해 꾸며줄 수 있습니다.*/
#box2 {
back ground-color: blue;
}
/* #과 함께 html에서 지정한 id의 이름을 작성해 주면 id이름을 지정해 둔
부분에 대해 꾸며줄 수 있습니다.*/이렇게 선택자를 이용해 {중괄호} 앞에서 꾸며줄 범위를 지정해 주었다면,
중괄호 안에 다양한 속성값들을 입력해 지정한 태그, 클래스, id 들을 꾸며 줄 수 있습니다.
이 속성들에 대해서 오늘은 간단하게만 설명하겠습니다.
먼저 margin과 pading입니다. 마진과 패딩은 각각 html에서 지정한 영역의 바깥 부분과 안쪽 부분을 채워주는 속성들입니다.
height는 지정한 영역을 세로로,
width는 가로의 크기를 지정해 주게 됩니다.
color 속성은 선택자로 지정한 영역의 텍스트들의 색상을 지정해 주며, back gound 컬러는 지정한 영역 전체의 배경색을 지정해 줍니다.
css의 스타일 속성값들은 너무 방대한 관계로, 이번 문서에서는 간단히 훑고 넘어가는 수준으로만 설명드리는 점 양해 부탁드립니다.
끝으로, css와 html은 html의 헤드 부분에 link 태그를 작성하여 연결합니다.
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
</html>보통은 style.css로 많이 지정하시겠지만, 본인이 다른 이름을 지정하셨다면 링크된 부분에 반드시 그 이름으로 작성하셔야 합니다.
lewandowski.css로 이름을 지정하셨다면 반드시 href="lewandowski.css"가 되어야 합니다.
오늘도 읽어주셔서 감사합니다.
