CSS - 각종 태그!

작성일 Edited on In

각종 태그 스타일

태그별로 중복되는 스타일 속성도 많지만 해당 태그에서만 적용되는 속성도 있다.

a 태그 스타일

a태그에선 default로 한번도 가지 않은 url주소는 글자색 파랑색,
접속 기록이 있는 url주소는 보라색으로 나타낸다.

default로 a태그를 사용하면 너무 촌스럽기 때문에 대부분 a태그에 여러 css를 적용한다.

네이버 사이트에선 클릭가능한 링크에 마우스를 올리면 밑줄이 쳐친다,
글자색은 대부분 검정색이고 접속했다고 파랑이나 보라색으로 바뀌지 않는다. 

1
2
3
4
5
6
7
a{
  color: black;
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

text-decoration에는 3가지 속성이 있다, 밑줄, 삭선, 윗줄…

1
2
3
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;

text-decoration: overline underline line-through; 이런식으로 3개를 한꺼번에 지정 가능, css에서 보통 띄어쓰기로 여러 속성을 지정하는게 가능함.

a태그의 각종 동작(미방문, 방문, hover, active)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a:link{ /* 방문한적 없을경우 */
  color: green;
  text-decoration: none;
  background-color: transparent;
}
a:visited{ /* 방문한적 있을경우 */
  color: pink;
  text-decoration: none;
}
a:hover{ /* 마우스를 올릴경우 */
  color: red;
  text-decoration: underline;
  text-transform: capitalize; /* 앞글자 대문자로 변경 */
}
a:active{ /* 클릭할 경우 */
  color: yellow;
  text-decoration: underline;

}

항상 link - visited - hover - active 순서대로 css작성하자.

ol, ul 태그 스타일

li태그

ol과 ul의 자식으로 사용되는 li태그는 block모드의 태그이다.
인라인모드처럼 옆으로 쌓이지 않고 아래로 블럭쌓이듯이 쌓인다.

스타일 시트를 사용하면 인라인모드처럼 옆으로 추가할 수 있다. 

1
2
3
li {
    float: left;
}

바닥이 left에서 시작되도록 설정, 이제 왼쪾에서 오른쪾으로 추가된다.

주의! left되는 순간 ul태그의 자식이 아니다.

a태그 색깔과 hover를 조금 추가해 주면 아래 사진처럼 구현 가능

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
li {
    float: left;
}
a {
    text-decoration: none;
    background-color: black;
    color: white;
    width: 100px;
    padding: 10px;
}
a:hover{
    background-color: white;
    color: black;
}
ul {
    list-style-type: none;
}

css3{: .shadow}

li태그 사이의 공백은 인라인 모드특성상 어쩔 수 없다. padding을 통해 공간을 늘리면 사라진다.

만약 메뉴를 왼쪽 상단에 딱 붙이고 싶다면 body와 ul의 margin, padding을 0으로 설정하면 된다.

깔끔하게 보이고 싶다면 ul에 overflow: hidden; 을 사용해서 ul의 범위를 넘어가는 영역을 숨길 수 있음,

css4{: .shadow}

왼쪽 위에 딱 붙어서 출력됨, 크기를 늘리고 싶다면 overflow: hidden;을 지우고 a태그의 padding을 늘리면 된다.

inline-block
inline모드의 태그는 width 속성이 먹히지 않는다, 안의 content가 늘어나지 않는 이상…
따라서 display: block; 속성을 사용해서 blcok모드로 바꾸면 width를 조절할 수 있긴 하지만 inline특징이 사라진다(아래로 쌓임)
만약 width도 늘리면서 오른쪽에 추가시키도록(inline특성) 유지하고 싶다면 display: inline-block 속성을 사용하면 된다.

list-style-position 

1
2
3
4
5
<ul style="border: solid 1px gray;"> 
    <li style="border: solid 1px red; width: 100px">Lorem.</li>
    <li style="border: solid 1px red; list-style-position: inside; width: 100px">Quis!</li>
    <li style="border: solid 1px red; list-style-position: outside; width: 100px">Corporis.</li>
</ul>

css-attr-6.png{: .shadow}

list-style촌스러워서 none으로 설정해서 사용하지만 만약 사용해야 한다면 기본적으로 li의 width에 list-style은 포함 안된다는 것을 알아두자.
list-style-position: inside;을 통해 포함되도록 변경 가능하다.

width와 max-width, min-width

max-width 말그대로 최대 넓이를 지정한다. 요소의 너비가 max-width보다 커지는 것 을 방지한다.
min-width 말그대로 최소 넓이를 지정한다. 요소의 너비가 min-width보다 작아지는 것 을 방지한다.

max-width: 800px;
기존에는 800px로 존재하다 브라우저가 줄어들면 같이 줄어든다. (width의 상위호환, width가 설정되어있다면 덮어씌운다.)

min-width: 600px;
최소크기 600px, 브라우저를 따라 줄다가 600px이하로는 줄어들지 않고 스크롤바가 생긴다.

반응형 웹을 위한 @mdedia에서 600px까지 적용되는 화면 레이아웃을 적용할때 max-width:600px이런식으로 사용한다. 

1
2
3
4
5
6
@media screen and (max-width:600px) { /* 스마트폰(600px아래로) 적용되는 스타일 */
    .col-75, .col-25, input[type="submit"] {
        width: 100%;
        margin-top: 0;
    }
}

img 태그

clip

img의 특정부분만 나오고 싶게 할 경우 사용하는 css 속성
rect( <top>, <right>, <bottom>, <left> )

1
2
3
4
img {
    position: absolute;
    clip: rect(0px, 365px, 365px, 0);
}

절대좌표로 선택된 부분만 잘려서 출력된다.

기본 속성은 auto로 모든 부분이 출력된다.

img의 max-width

1
2
<img src="/WebPro/css/images/img_girl.jpg" alt="" style="max-width: 100%"/>
<img src="/WebPro/css/images/img_girl.jpg" alt="" width="100%"/>

style="max-width: 100%"은 사진 원본의 크기는 넘어가지 않는다.

이미지 속성의 width="100%"는 사진이 깨지더라도 브라우저 크기만큼 커진다.

opacity

투명도를 0.0 ~ 1.0까지 설정 가능하다.
img뿐만 아니라 다른 태그에서도 쓰이지만 투명도는 img에서 많이 쓰이기 때문에….

1
2
3
4
img:hover {
    opacity: 0.5;
    filter: alpha(opacity = 100); /* iex8을 위한 코딩 */
}

img에 hover하면 반투명하게 설정한다.

input 태그

background-image

밑에서 background 속성은 배경 이미지를 넣는것인데 input태그에도 넣을 수 있다.

transition 애니메이션 효과

input태그의 width가 변경될 경우 한번에 변경되지 않고 1초동안 천천히 변경되도록 하는 속성
transition: width 1s 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
input[type=text] {
width: 130px;
border: solid 2px #ccc;
border-radius: 4px;
background-color: white;
background-image: url("/WebPro/css/images/searchicon.png");
background-repeat: no-repeat;
background-position: right center;

padding: 12px 20px 12px 40px;

/* 2d효과 */
transition: width 1s; /* width속성값이 바뀔때 1초 시간동안 전환 */
-webkit-transition: width 1s;
}

css-attr-8.png{: .shadow}

background-position: right center;을 통해 돋보기 모양의 아이콘을 우측 중앙에 위치
border와 padding, border-radius를 통해 input태그를 이쁘게 꾸밀 수 있다.




속성

text 속성

text-align

블록 레벨 요소안의 content를 정렬할 때 쓰이는 속성, width를 지정 가능한 div나 hn, p태그 등에선 안의 내용을 좌,우,가운데 정렬할 수 있다. 

1
2
3
<h2 style="text-align: left;">Lorem ipsum dolor.</h2>
<h3 style="text-align: center;">Lorem ipsum dolor.</h3>
<h4 style="text-align: right;">Lorem ipsum dolor.</h4>



text-align: justify 

1
2
3
4
5
<div style="border: solid 1px gray; padding: 10px; width: 200px; 
text-align: justify; text-indent: 5px">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Natus neque sunt inventore atque quia doloribus minima dolores animi nobis at.
</div>

단어 길이에 의해 우측에 계행될 때 생기는 공백이 거슬린다면 text-align: justify속성을 사용하면 된다.
단어 사이의 공백을 조절해 우측의 계행공백을 매꾸어 줌.

text-indent: 5px
문장 앞에 공백이 필요하다면 text-indent 사용,

css-attr-4.png{: .shadow}



글 간격 

1
2
3
4
5
<div class="box" style="letter-spacing: 5px; line-height: 3; word-spacing: 10px">
        Lorem ipsum dolor sit amet,
        consectetur adipisicing elit.
        Natus neque sunt inventore atque quia doloribus minima dolores animi nobis at.
</div>

letter-spacing은 글자간의 간격,
line-height는 라인 사이의 간격, 음수값이 되면 아예 겹쳐진다.
word-spacing은 단어사이의 간격.

css-attr-5.png{: .shadow}



direction: rtl

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus neque sunt inventore atque quia doloribus minima dolores animi nobis at.

문장을 우측 정렬(워드에서 사용하는 그 우측정렬)
좌측 정렬은 기본값이고 가운데 정렬은 없다….
~~text-align 있는데 왜쓰는거지? ~~



white-space

white-space는 텍스트에서 출력 부분에서 여러가지 기능을 가지고 있는 속성이다.

white-space: pre

원래 html에선 계행을 인식못하고 공백도 한칸밖에 인식하지 않지만 pre태그를 사용하면 모두 인식한다.

pre태그 대신 스타일 시트로 해당 기능을 하는게 white-space: pre 이다. 

1
2
3
4
5
<p style="white-space: pre">This is sime.text
  This is sime.text
  This is sime.text
  This is sime.text
</p>

white-space를 통해 pre태그처럼 사용 가능하다.
white-space: pre-line 사용하면 탭은 무시하고 계행만 인식한다.(normal은 평소 적용되는 기본 속성값) 

1
<h2 style="color: black; text-shadow: 5px 2px gray">Text-Shadow-Effect</h2>

text에 그림자 붙이기, 오른쪽5px, 아래2px만큼 이동해서 그림차를 표시

text-overflow

텍스트가 넘칠경우 처리하는 속성이다.
보통 텍스트가 넘쳐 border밖으로 빠져나가지 못하도록 overflow: hidden속성을 사용했지만 너무 없어보인다….

div나 p태그등 width를 지정하면 안의 텍스트들은 가로로 넘치지 않고 height가 늘어나면서 border 밖으로 넘치지 않는다.
게시판에선 아무리 긴 제목의 글이라도 height가 늘어나지 않고 width만큼 출력하고 한줄로 끝나야 한다.

height를 고정하고 oveflow: hidden으로 지정한 높이를 벗어나는 글을 수도 있지만
white-space: nowrap과 text-overflow를 사용해도 된다.

또한 text-overflow: ellipsis 속성값을 사용하면 문자열이 잘릴때 … 특수기호를 붙이는 기능을 할 수 있음.

text-overflow는 넘친 text들을 처리하는 속성으로 text-overflow: clip을 사용하면 overflow: hidden과 같은 기능을,
text-overflow: ellipsis를 사용하면 다음과 같이 생략 기호를 붙여넣을 수 있다. 

1
2
3
p.ex01{
  text-overflow: ellipsis;
}
1
2
<p class="ex01">Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Corporis repellendus.</p>

css-attr-10.png{: .shadow}

writing-mode

text가 써내려가는 방향을 지정할 수 있다.
보통 왼쪽에서 오른쪽으로 글을 써내려가는 기본속성이 writing-mode: horizontal-tb
새로로 쓰고 싶다면 vertical-rl

1
2
3
4
5
6
7
8
9
10
11
p.test1 {
  writing-mode: horizontal-tb; 
}

p.test2 {
  writing-mode: vertical-rl; 
}

span.test2 {
  writing-mode: vertical-lr; 
}
1
2
3
<p class="test1">Some text with default writing-mode.</p>
<p>Some text with a span element with a <span class="test2">홍길동</span> writing-mode.</p>
<p class="test2">Some text with writing-mode: vertical-rl.</p>

rl와 lr별 차이없다.

css-attr-11.png{: .shadow}

영어는 글 방향도 가로 방향이지만 한글같은 경우 세로로 쓰되 방향은 정방향이다.

color

배경색, 글자색, border색 등 각종 color를 지정하는 방법은 총 6가지

1
2
3
4
5
6
7
8
9
10
11
<span style="background-color: Tomato">Lorem.</span>
<span style="background-color: rgb(255,99,71)">Rem.</span>
<span style="background-color: #ff6371">Fuga.</span>
<!-- h색조(0~360) s채도 l명도 -->
<span style="background-color: hsl(120, 50%, 50%)">Dolor?</span>

<!-- rgba(alpha) 투명도 -->
<span style="background-color: rgb(255,0,0,0.2)">Esse!</span>

<!-- hsla(alpha) 투명도 -->
<span style="background-color: hsl(120, 50%, 50%, 0.2)">Voluptate.</span>

주로 사용하는건 이미 널리 알려진 색 (blue, red, black등)을 사용하는것,
16진수 rgb를 사용하는것(#FFFFFF), 대소문자 구별하지 않는다.



border

레이아웃을 방해하는, 또는 도와주는 요소중 하나인 border, 굉장히 많은 속성값들이 있다. 

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
32

p.solid {
    border-style: solid;
}
p.dotted {
    border-style: dotted;
}
p.dashed {
    border-style: dashed;
}
p.hidden {
    border-style: hidden;
}
p.double {
    border-style: double;
}
p.groove {
    border-style: groove;
}
p.ridge {
    border-style: ridge;
}
p.inset {
    border-style: inset;
}
p.outset {
    border-style: outset;
}
p.inherit {
    border-style: inherit;
}

css8{: .shadow}

inherit는 상속이란 뜻으로 상위 태그의 border-style속성값을 물려받음.

상하좌우 하나씩 설정도 가능하다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p.box {
    padding: 10px;
    /*
    border-top-style: dotted;
    border-right-style: solid;
    border-left-style: dashed;
    border-bottom-style: double;
     */
     
    /* border-style: dotted dashed; */
    /* 두개만 설정시 상하, 좌우 */

    border-style: dotted solid dashed double;
    /* top부터 시계방향 */
}

css9{: .shadow} 

1
2
3
4
5
6
7
8
9
#demo {
border-color: green;
border-width: 1px;
border-style: dotted;
}

#demo {
border: dotted 1px green;
}

두개의 스타일 시트는 동일한 효과를 가진다. 하나만 지정해야 한다면 첫번째를, 모두 한꺼번에 지정해도 상관없다면 아래 형식을 사용.



outline

outline속성도 border처럼 선을 그리는 css 속성인데 border보다 바깥쪽 선을 그린다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
p.solid {
    border: solid 2px red;
    outline-color: aqua;
    outline-style: solid;
    outline-width: medium;
}
p.dotted {
    border: dotted 2px red;
    outline-color: aqua;
    outline-style: dotted;
    outline-width: 4px; /* 점의 직경 */
}
p.dashed {
    border: dashed 2px red;
    outline: aqua dotted medium;
}
p.groove {
    border: groove 2px red; /* 약간 입체적 */
    outline: aqua groove medium;
    outline-offset: 5px; /* border와 바깥선의 경계 길이*/
}

css-attr-3.png{: .shadow}

outline은 width와 height에 관여하는게 정말 하나도 없다!
box-sizing: border-box;을 쓰지 않으면
border의 1px때문에 레이아웃이 흐트러질 수 있는데 outline을 사용하면 괜찮다!

역으로 디자인적으로 사용하려면 약간 골치아플 수 있음, width에 영향주지 않고 출력하기 때문에 서로 겹칠 수 있음.(margin을 잘 줘야 안겹치게 설정 가능)

border-background

1
2
3
4
5
6
#borderimg {
    border: solid 10px;
    padding: 15px;
    /* border-image: url("/WebPro/css/images/border.png") 30 stretch; */ /* 늘리기 */
    border-image: url("/WebPro/css/images/border.png") 30 round;
}

border에 이미지를 적용할 수 도 있음. 알아만 두자…

https://developer.mozilla.org/ko/docs/Web/CSS/border-image



background

각종 요소들의 backgound-color를 지정하기 위해 많이 사용,

배경이미지를 지정하는대에도 사용 가능하다.

background-image 

1
2
3
body {
    background-image: url("/WebPro/css/images/paper.gif");
}

배경이미지는 기본적으로 가로, 세로 반복출력된다. (타일처럼) 



1
2
3
4
body {
    background-image: url("/WebPro/css/images/gradient_bg.png");
    background-repeat: repeat-x;
}

반복 조건을 설정할 수 있다, 가로만 반복할지, 세로만 반복할지, 반복하지 않고 한번만 출력할지.

css-attr-1{: .shadow}

이런식으로 x축만 반복하면 그라데이션 효과를 줄수도 있음.

반복되는게 싫다면 background-repeat: no-repeat;를 사용, 

1
2
3
4
5
6
body {
    background-image: url("/WebPro/css/images/img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed; /* 사진 고정 */
    margin-right: 200px;

보통 한번만 출력할 때에는 한 사진을 계속 배경화면으로 고정시키는데 background-attachment: fixed; 속성을 사용하면 된다.

background-attachment속성의 기본값은 scroll, 보통 스크롤을 내리면 이미지도 같이 내려간다.

만약 사진을 글자가 가리는게 싫다면 body에 오른쪽 바깥 여백을 주도록 하자. 

1
2
3
4
5
6
body {
  background: white url("/WebPro/css/images/img_tree.png") no-repeat right top ;
    /* 한번에 여러개 설정 가능. */
    background-attachment: fixed; /* 사진 고정 */
    margin-right: 200px;
}

css-attr-2{: .shadow}

배경이미지 2개 적용

2개의 이미지를 한 배경으로 집어넣을 수 있다. 

1
2
3
4
5
6
7
8
9
#demo {
    padding: 15px;
    /* background-image: url("/WebPro/css/images/img_flwr.gif"), url("/WebPro/css/images/paper.gif");
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat; */
    background: url("/WebPro/css/images/img_flwr.gif") right bottom, no-repeat
                          url("/WebPro/css/images/paper.gif") left top, repeat;
    /* 뒤에 있는 배경에 위로 올라감. */
}

background-size

1
2
3
4
5
6
7
8
9
10
11
12
#box2 {
    background-size: 100px 80px; /* 고정 값 */
}

#box2 {
    background-size: contain; /* 늘릴수 있는 만큼 가로 세로를 늘린다. */
}

#box3 {
    background-size: cover; /* 영역의 비율에 맞게 늘림 */
    /*  */
}

배경이미지의 size를 조절할 수 있다.

background-origin, clip

베경 이미지와 배경 색 시작위치는 paddind을 시작점으로 잡는다.
origin은 배경 이미지의 시작 위치를, clip은 이미지 뿐만 아니라 backgound-color 의 시작위치또한 정할 수 있다. 

1
2
3
4
5
6
7
8
9
10
11
#demo1 {
    background-clip: padding-box;
}

#demo2 {
    background-origin: border-box;
}

#demo3 {
    background-clip: content-box;
}

css-attr-2{: .shadow}

background-clip이 더 사용범위가 넓다!



image spright

background-image는 배경이미지 말고 버튼, 아이콘 이미지로도 쓰인다.

css13{: .shadow}

위의 네이버 검색창에 있는 돋보기 아이콘, 키보드 아이콘, ▼ 같은 아이콘 모두 background-image를 통해 그린 이미지들이다.

backgound-image 속성으로 하나의 큰 이미지를 한번만 가져와서 x, y좌표를 사용해서 계산한다. 

1
2
3
width: 21px;
height: 21px;
background-position: -4px -60px;

background-position 속성을 사용해서 21px X 21px 만큼의 이미지를 잘라서 가져온다.

img_navsprites_hover

이런 이미지가 있다 하였을때 background-position 속성을 통해 원하는 부분을 잘라와서 사용할 수 있다.
각 이미지를 li태그의 background-image로 사용해서 아이콘처럼 만들어보자. 

1
2
3
4
5
6
7
8
9
10
11
12
13
ul#navlist {
    float: left;
    padding: 0;
}

ul#navlist li {
    list-style: none;
    width: 44px; /* 한칸당 가로, 세로 44px */
    height: 44px;
    background: url("/WebPro/css/images/img_navsprites_hover.gif"); /* 모든 li가 쓸 아이콘이미지 */
    float: inherit;
    display: block;
}

칸당 width, height길이가 같기 때문에 44px로 설정, 모든 li태그가 한 이미지를 잘라와서 쓰기때문에 background: url("/WebPro/css/images/img_navsprites_hover.gif") 한번만 서버에서 가져오면 된다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul#navlist li#home {
    left: 0;
    background-position: 0 0;
}
ul#navlist li#home:hover {
    background-position: 0 -45px;
}

ul#navlist li#prev {
    background-position: -47px 0;
}

ul#navlist li#next {
    background-position: -91px 0;
}

시작 위치만 정해주면 hegiht와 width가 44px로 설정되어 있기 때문에 44x44만큼 잘라서 설정한다.
오버효과를 위해 home:hover되면 출력되는 이미지 position을 아래에 있는 어두운 집 모양 아이콘으로 변경.

오버효과: hover를 통해 이미지가 어두어지거나 튀어나오는 효과

css-attr-7{: .shadow}



google, bootstrap icon

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
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
a:link, a:visit {
    background: navy;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: block;
};
a:hover, a:active {
    background: blue;
}
span:hover {
    cursor: crosshair; /* 커서모양을 다양하게 바꿀수 있음. */
}
</style>
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<!-- i태그는 원래 italic 태그이지만 google에서 아이콘으로 변경 가능. -->
<hr />
<i class="glyphicon glyphicon-cloud" style="font-size: 100px"></i>
<i class="glyphicon glyphicon-favorite" style="font-size: 100px"></i>
<i class="glyphicon glyphicon-user" style="font-size: 100px"></i>
<i class="glyphicon glyphicon-envelope" style="font-size: 100px"></i>
<i class="glyphicon glyphicon-thumbs-up" style="font-size: 100px"></i>
<!-- https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp -->
<hr />
<a href="#">this is link</a>
<hr />
<span>test</span>
</body>
</html>

i태그는 원래 itelic 태그이지만 link태그와 구글, bootstrap에서 이모티콘을 가져오는 태그로 사용할 수 있다.

앞으로 아이콘을 사용해야 할때 img를 찾을필요 없다.

https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp 

1
2
3
4
5
6
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
1
2
3
.checked {
    color: orange;
}

별점을 매기는 것도 가능



웹폰트

보통 font-family: 'Courier New', Courier, monospace; 이런식으로 클라이언트 시스템에도 있는 글꼴을 주로 적용한다.
만약 클라이언트 시스템상에 없는 글꼴이지만 적용시키고 싶다면 웹폰트를 사용하면 된다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@font-face {
    font-family: myFirstFont;
    src:url("/WebPro/css/images/sansation_bold.woff");
    font-weight: bold;
}
@font-face {
    font-family: myFirstFont;
    src:url("/WebPro/css/images/sansation_light.woff");
    font-weight: normal;
}

* {
    font-family: myFirstFont; 
    /* 폰트가 없다면 기본폰트인 Malgun Gothic 이 지정된다.*/
}

당연히 클라이언트에게 myFirstFont라는 폰트는 없다. css로 myFirstFont라는 폰트를 @font-face를 사용하면 정의할 수 있다.

웹폰트에서 bold처리는 브라우저가 알아서 어느정도 해주지만 마음에 들지 않는다면 다음과 같이 bold용 글꼴을 하나더 정의!
italic체도 마찬가지로 마음에 들지 않는다면 font-style: italic;로 정의한 @font-face 정의를 한번 더 하면된다.

video

웹에서 mp4, webm, ogg 형식 비디오를 재생할 수 있도록 하는 태그

1
2
3
<video id="rain_mp4" src="/WebPro/css/images/rain.mp4">
    your browser not support html5 video element
</video>

브라우저에서 지원하지 않을시 비디오 대신 태그안의 텍스트가 대신 출력된다. 

1
2
3
4
<video id="rain_mp4" autoplay="autoplay" loop="loop" muted="muted">
    <source src="/WebPro/css/images/rain.mp4">
    your browser not support html5 video element
</video>

이런식으로 나누어 작성도 가능, 사실 모든 html5 태그들이 src속성이 있을경우 나눠서 작성 가능하다. 

1
2
3
4
5
6
7
8
9
10
11
function video_play() {
    var videoElement = document.getElementById("rain_mp4");
    var btnPauseElement = document.getElementById("btnpause");
    if (videoElement.paused) { /* 상태값 체크 */
        videoElement.play();
        btnPauseElement.innerText = "STOP";
    } else {
        videoElement.pause();
        btnPauseElement.innerText = "PLAY"
    }
}

JS코딩을 통해 영상이 재생중인지 체크하고 정지시킬 수 있다.