CSS의 모든 것 5부 - CSS 속성 목록, 표, 그림
저번 포스팅에서는 HTML의 element에 부여해줄 수 있는 스타일의 속성들에 대해 대략적으로 알아보고, 문자에 부여해줄 수 있는 스타일들과 박스에 부여할 수 있는 스타일에 대해 알아보았습니다. 이번에는 목록, 표, 그림에 부여할 수 있는 스타일들에 대해 알아보겠습니다.
1. CSS속성 - 목록
HTML에서 목록을 정의할때, 목록을 정의할떄, number를 부여하여 정의할 수 있고, number없이 목록을 정의할 수도 있습니다. 우선, number없이 목록을 정의할때, 스타일을 부여하는 방법에 대해 알아보겠습니다. 먼저, number없이 목록을 만들기 때문에, number대신 특정 symbol혹은 marker를 지정할 수 있습니다. 이를 list marker라고 하는데, 이를 바꾸려면, list-style-type을 선언하고, 여기에 적절한 값을 부여하여 스타일을 부여할 수 있습니다. list-style-type에 부여해줄 수 있는 스타일에는 square와 같은 것들이 있습니다. 한편, 이런 symbol외에도, image를 넣어주는 방법도 있는데, image를 넣어주려면, list-style-image를 선언하고, 값으로 url을 적어줍니다.
1
2
3
4
5
6
ul{
list-style-type: square;
list-style-image: url('......gif');
background-color: lightgray;
width: 150px;
}
그런데, 이렇게 image를 넣어주는 방법은 크기조절이나 색상변경등 컨트롤하기게 매우 불편합니다. 그래서, icon-font와 같은 것을 주로 이용합니다. icon-font에는 font awesome, glyphicon, material icon과 같은 것들이 있습니다. 이들을 사용하는 방법은 모두 동일하기 때문에, 일단 대표적으로 Google에서 만든 material icon을 이용해 보겠습니다.
Material icon을 적용하는 방법은 아래와 같이 html code의 head부분에 stylesheet에 링크를 주면 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>My CSS website</title>
<link rel="stylesheet" href="somewhere/style.css">
<link rel="stylesheet" href="https://fonts/googleapis.com/icon?family=Material+Icons">
</head>
<body>
<ul>
<li><i class="material-icons">home</i>Home</li>
<li><i class="material-icons">public</i>News</li>
<li><i class="material-icons">restaurant</i>Contact</li>
<li><i class="material-icons">headset</i>About</li>
<li>Banana</li>
<li> </li>
<li> </li>
</ul>
</body>
</html>
위와 같이 링크를 걸고나면, 사용하고싶은 위치에 tag를 이용합니다. 원래 i tag는 italic채를 이용할때 사용하지만, icon을 이용하는 tag를 이용할때 쓸수도 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ul{
list-style-type: square;
list-style-image: url('......gif');
background-color: lightgray;
width: 150px;
}
a{
color: black;
text-decoration: none;
display: block;
}
a:hover{
color: white;
background-color: green;
}
li{
display: inline;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>My CSS website</title>
<link rel="stylesheet" href="somewhere/style.css">
<link rel="stylesheet" href="https://fonts/googleapis.com/icon?family=Material+Icons">
</head>
<body>
<ul>
<li><a href="#">home</i>Home</li>
<li><a href="#">public</i>News</li>
<li><a href="#">restaurant</i>Contact</li>
<li><a href="#">headset</i>About</li>
<li>Banana</li>
<li> </li>
<li> </li>
</ul>
</body>
</html>
2. CSS속성 - 표
이번에는 표에 부여해줄 수 있는 속성들 입니다. 사실 표에 부여할 수 있는 속성은 그렇게 많지는 않습니다. 아래는 표를 나타내는 예시 html code와 적당한 css 정보들 입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
table, th, td{
border: 1px solid black; /* shorthand property <- 이러면 선이 여러개 나옴 */
border-bottom: 1px solid black; /* 가로선만 선을 그을 수 있음 */
}
table{
border-collapse: collapse; /* 외각선을 합쳐버림 */
}
tr:hover{ /* hover -> pseudo class 선택자 */
background-color: lightgray;
}
tr:nth-child(odd){ /* odd : 홀수 even: 짝수 */
background-color: lavender;
}
th{
height: 50px;
color: white;
background-color: green;
}
td{
text-align: center; /* 텍스트를 중앙정렬 가능 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<link rel="stylesheet" href="somewhere/style.css">
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<th> John </th>
<th> 18 </th>
</tr>
<tr>
<th> Albert </th>
<th> 22 </th>
</tr>
<tr>
<th> Smith </th>
<th> 21 </th>
</tr>
<tr>
<th> Jack </th>
<th> 21 </th>
</tr>
</table>
</body>
</html>
3. CSS속성 - 그림
Img tag에서 사용할 수 있는 css 스타일들은 앞서 소개했던 정보들과 거의 비슷합니다. 가령, width, padding, border등등을 사용할 수 있고, 이에 대한 예시를 아래와 같이 적어두었습니다.
1
2
3
4
5
6
7
8
9
10
img {
width: 150px;
padding: 5px;
border: 2px solid gray;
border-radius: 20px; /* 50%로 설정하면 타원형 */
margin: auto; /* */
display: block;
opacity: 0.5; /* 투명도 */
box-shadow: 10px 10px 5px gray;
}
여담이지만, img tag는 inline형식이기 때문에, 가로방향으로 img가 배치됩니다. 만약, 그림을 세로방향으로 배치하고 싶다면, 위의 css예시처럼, display속성에서 그 값을 block으로 설정해 주면 됩니다.
그 외에 image와는 상관없지만, 다양한 속성들에 평소와는 다른방법으로 값을 할당하는 방법 몇가지를 알려드리겠습니다. 먼저, background-color의 경우, 단순히, red, blue와 같이 줄수도 있지만, 16진수를 이용해 rgb값을 직접적으로 할당해줄 수 있습니다. 16진수 2개를 하나의 color channel의 값으로 정해줍니다. 가령 #000000은 black이고, 16진수에서 가장 높은 수인 #ffffff은 white로 표기됩니다. 한편, rgb각각의 값을 8bit로 할당해주는 방법도 있습니다. 그 방법은 rgb(255,0,0)과 같은 방법으로 부여할 수 있습니다. 한편, 다른 color space를 이용할 수 있는데, 가령, hsl color space와 같은것도 이용할 수 있습니다.
background도 단순 color값을 부여할 수 있지만, gradient를 표시할수도 있습니다. 바로, linear-gradient를 이용하면 됩니다. 만약, linear-gradient(red, yellow)라고 할당하면, 위에서 아래 방향으로 붉은색에서 노란색으로 색이 변화합니다. 만약, 인자로 to right를 넣어서, linear-gradient(to right, red, yellow)로 하면 왼쪽에서 오른쪽으로 색이 변화합니다. 한편, linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet)와 같이 여러색상을 넣어서 색을 변화시킬 수 있습니다.
background-image를 선언하고, url()을 통해 image의 경로를 넣어주면, background에 image를 넣어줄 수 있습니다. 만약, url('something.img'), url('something2.img') 이런식으로 지정하면, 두개의 이미지가 겹쳐서 나오게 됩니다. 순서는 먼저 작성한 image가 맨앞쪽으로 나오고, 뒤에 호출한 image는 뒷쪽에 배치됩니다.
background-repeat는 backgroun에 정의된 컬러나 이미지를 반복시키는 속성으로, repeat-x나 repeat-y를 통해 반복시킵니다. 만약 no-repeat으로 지정하면, 반복하지 않습니다. 아래는 간단한 예시 입니다.
1
2
3
4
5
6
7
p{
background-color: ; #000000
background: linear-gradient(red, yellow);
background-image: url('something.img');
background-repeat: repeat-x;
background-position: right top;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<link rel="stylesheet" href="somewhere/style.css">
</head>
<body>
<img src="someimg.jpg">
<p>
Something text here.
</p>
</body>
</html>