HTML으로 웹 페이지의 내용을 작성한다면 디자인 적인 요소는 CSS를 활용한다. CSS에는 다양한 속성이 있는데 그 중 가장 많이 사용하는 속성들로 이전 포스팅에서 만든 표를 꾸며 보자.
이전글보기: HTML문서로 표만들기
CSS 속성은 표가 들어 있는 body가 아니라 head에 넣는다. <head>태그 안에 <style></style>로 표현 한다.
CSS는 cascading style sheets 의 약자로 정의는 다음과 같다.
“웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다.”
[네이버 지식백과] CSS [cascading style sheets] (두산백과)
아래 적용한 속성들의 결과를 보고 하나씩 알아보자.
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:300px;
height:300px;
border: 3px solid black;
background: yellow;
}
td{
border:3px solid blue;
font-size:15pt;
font-weight:bold;
text-align:center;
background:#bbfca5;
}
</style>
</head>
width:300px; → 가로 너비
height:300px; → 세로 높이
border: 3px solid black; → 테두리에 3px 두께의 검정선 두르기
background: yellow; → 배경색은 노랑
font-size:15pt; → 글자 크기는 15
font-weight:bold; → 글자를 두껍게
text-align:center; → 글자의 정렬을 가운데로
기본적인 영어 단어만 알면 표현할 수 있을 정도로 쉽게 되어 있다. 적어도 중학교 단어에는 위의 속성에 사용하는 단어가 다 들어 있다.
표를 보면 1층은 주인집 인데도 칸이 3개로 구분되어 있다. 2층짜리 건물을 지어 2층은 3개의 원룸으로 만들고 1층에는 주인이 사는 형태의 건물을 만들어보자.
'문돌이의 IT > HTML&CSS' 카테고리의 다른 글
| [문돌이의IT] HTML form태그와 get방식에 대해 알아보자 (0) | 2016.02.04 |
|---|---|
| [문돌이의IT] colspan, rowspan CSS속성으로 표의 셀병합 기능 표현하기 (0) | 2016.01.17 |
| [문돌이의IT] <table>, <tr>, <td>태그 활용해서 HTML 표만들기 (0) | 2016.01.15 |
| [문돌이의IT]HTML 문서로 제곱을 나타내는 방법: <sub> <sup>태그 활용 (1) | 2016.01.14 |
| [문돌이의IT]HTML 문서에 링크 거는 두 가지 방법 <a href> (0) | 2016.01.13 |