letter-spacing : 글자 사이의 간격

word-spacing : 단어 사이의 간격

line-height : 줄 간격 (글자 높이 포함)



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    /* 
    letter-spacing: 글자사이의 간격
    word-spacing: 단어사이의 간격
    line-height: 줄간격 (글자 높이 포함)
    */
    h1 {
        letter-spacing: 0.3em;
    }
    p {
        word-spacing: 0.5em;
        font-size: 1.3em;
        line-height: 2;    /* 단위가 지정되지 않으면 배수(2배)라는 뜻 */
    }
    </style>
</head>
 
<body>
    <h1>글자 사이의 간격</h1>    
    <p>바나나 사과 딸기 복숭아 수박 파인애플 귤 오렌지 블루베리</p>
</body>
</html>
cs



결과



저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 이미지, 텍스트 수직으로 가운데 정렬하기  (0) 2017.06.02
HTML5/CSS3 text-index : 글자 들여쓰기  (0) 2017.06.01
HTML5/CSS3 @font-face : 폰트파일 사용하기  (0) 2017.05.30
HTML5/CSS3 :first-letter, :first-line 선택자  (0) 2017.05.29
HTML5/CSS3 :before, :after 선택자  (0) 2017.05.28

@font-face : 폰트파일 사용하기



.woff : 익스플로어

.ttf, : 크롬, 파이어폭스, 사파리, 오페라



html)

font폴더에 .woff 폰트파일 과 .ttf 폰트파일 추가

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    /* 
    @font-face {
        font-family : 폰트명;
        src : url(폰트경로);
    }
    */
    @font-face {
        font-family: 'Nanum Gothic';
        src: url(fonts/NanumGothic.woff) format("woff"),
             url(fonts/NanumGothic.ttf) format("truetype")
    }
    
    
    p {
        font-family: monospace;
        font-size: 1.3em;
        color: #0054FF;
    }
    p.nanum {
        font-family: "Nanum Gothic";
    }
    </style>
</head>
 
<body>
    <p class="nanum">나눔고딕 : 가나다라마바사아차자카타파하</p>
    <p>monospace : 가나다라마바사아차자카타파하</p>
</body>
</html>
cs



결과




저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 text-index : 글자 들여쓰기  (0) 2017.06.01
HTML5/CSS3 letter-spacing, word-spacing, line-height : 글자 간격  (0) 2017.05.31
HTML5/CSS3 :first-letter, :first-line 선택자  (0) 2017.05.29
HTML5/CSS3 :before, :after 선택자  (0) 2017.05.28
HTML5/CSS3 속성관련 선택자  (0) 2017.05.27

:first-letter 요소의 첫번째 글자 선택

:first-line 요소의 첫번째 라인 선택



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    /* :first-letter 요소의 첫번째 글자 선택 */
    h1:first-letter {
        font-size: 1.3em;
        color: #f00;
    }
    
    /* :first-line 요소의 첫번째 라인 선택 */
    p:first-line {
        font-size: 1.5em;
        color: #0f0;
    }
    </style>
</head>
 
<body>
    <h1>대한민국</h1>
    <p>가나다라마바사아자차카타파하아야어여오요우유으이</p>
</body>
</html>
cs



결과

대한민국의 첫번째 글자와 글자가 길어 2줄로 표현된 p태그의 첫번째 줄에 스타일이 적용되었다




저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 letter-spacing, word-spacing, line-height : 글자 간격  (0) 2017.05.31
HTML5/CSS3 @font-face : 폰트파일 사용하기  (0) 2017.05.30
HTML5/CSS3 :before, :after 선택자  (0) 2017.05.28
HTML5/CSS3 속성관련 선택자  (0) 2017.05.27
HTML5/CSS3 인접 형제 선택자, 형제 선택자  (0) 2017.05.26

:before, :after 선택자

:before 요소의 시작지점 선택

:after 요소의 끝지점 선택



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style type="text/css">
    /* :before 요소의 시작지점 선택 */
    h1:before {
        content: "Before";
        font-size: 1.5em;
        color: #FF0000;
    }
    
    /* :after 요소의 끝지점 선택 */
    h1:after {
        content: "After";
        font-size: 1.5em;
        color: #0000FF;
    }
    </style>
</head>
 
<body>
    <h1>가나다라마바사아자차카타파하</h1>
</body>
</html>
cs



결과

h1요소 내용의 앞 뒤로 Before와 After가 추가되었다




저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 @font-face : 폰트파일 사용하기  (0) 2017.05.30
HTML5/CSS3 :first-letter, :first-line 선택자  (0) 2017.05.29
HTML5/CSS3 속성관련 선택자  (0) 2017.05.27
HTML5/CSS3 인접 형제 선택자, 형제 선택자  (0) 2017.05.26
HTML5/CSS3 :root 선택자 : body태그 보다 위의 최상위 선택자  (0) 2017.05.25

속성관련 선택자

[속성] : 속성을 가지는 선택자

[속성=value] : 속성의 값이 value와 일치하는 선택자

[속성~=value] : 속성의 값중 value를 포함하는 선택자

[속성^=value] : 속성의 값이 value로 시작하는 선택자



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    /* [속성] : 속성을 가지는 선택자 */
    p[title] {
        color: gray;
        font-size: 1.3em;
        font-weight: bold;
    }
    /* [속성=value] : 속성의 값이 value와 일치하는 선택자 */
    p[name=apple] {
        color: red;
        font-size: 1em;
    }
    /* [속성~=value] : 속성의 값중 value를 포함하는 선택자 */
    p[name~=banana] {
        color: green;
        font-size: 1em; 
    }
    /* [속성^=value] : 속성의 값이 value로 시작하는 선택자 */
    p[name^=value] {
        color: blue;
        font-size: 1em;
    }
    </style>
</head>
 
<body>
    <p title="타이틀">과일들</p>
    <p name="apple">Apple = 사과</p>
    <p name="Banana, banana">Banana = 바나나</p>
    <p name="peach">Peach = 복숭아</p>
</body>
</html>
cs



결과



저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 :first-letter, :first-line 선택자  (0) 2017.05.29
HTML5/CSS3 :before, :after 선택자  (0) 2017.05.28
HTML5/CSS3 인접 형제 선택자, 형제 선택자  (0) 2017.05.26
HTML5/CSS3 :root 선택자 : body태그 보다 위의 최상위 선택자  (0) 2017.05.25
HTML5/CSS3 색조,채도,명도 입력법  (0) 2017.05.24

인접 형제 선택자(E+F) : E요소 다음의 F요소

형제 선택자(E~F) : E요소 다음의 모든 F요소



html)

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
45
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    /* 인접형태 선택자 E+F : E요소 다음의 F요소 선택 */
    .box h3+p {
        color: #22741C;
        font-size: 1.5em;
    }
    
    /* 형제 선택자 E~F : E요소 다음의 모든 F요소 선택 */
    .box2 h3~p {
        color: #002266;
        font-size: 1.5em;
    }
    </style>
</head>
 
<body>
    <!-- h3태그 뒤의 하나의 p요소만 스타일 적용 -->
    <div class="box">
        <h3>가나다라마바사아자차카타파하
            <span>01234567890</span>
        </h3>
        <p>가나다라마바사아자차카타파하</p>
        <p>가나다라마바사아자차카타파하</p>
    </div>
    
    <hr/>
    
    <!-- h3태그 뒤의 모든 p요소에 스타일 적용 -->
    <div class="box2">
        <h3>가나다라마바사아자차카타파하
            <span>01234567890</span>
        </h3>
        <p>가나다라마바사아자차카타파하</p>
        <p>가나다라마바사아자차카타파하</p>
    </div>
</body>
</html>
cs



결과)



저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 :before, :after 선택자  (0) 2017.05.28
HTML5/CSS3 속성관련 선택자  (0) 2017.05.27
HTML5/CSS3 :root 선택자 : body태그 보다 위의 최상위 선택자  (0) 2017.05.25
HTML5/CSS3 색조,채도,명도 입력법  (0) 2017.05.24
HTML5/CSS3 colspan, rowspan : 테이블의 가로, 세로셀 합치기  (0) 2017.05.23

:root 선택자 : body태그 보다 위의 최상위 선택자



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    
    <style>
    :root {
        font-size: 12px;
    }
    p {
        font-size: 1.1em;    <!-- 12*1.1 = 13.2px -->
    }
    span {
        font-size: 2rem;    <!-- 12*2 = 24px -->
    }
    </style>
</head>
 
<body>
    <p>가나다라마바사아자차카타파하
        <span>가나다라마바사아자차카타파하</span>
    </p>
</body>
</html>
cs



결론

최상위 선택자의 font-size가 12px 이므로 12px를 기준으로 p, span태그의 font-size가 결정된다




저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 속성관련 선택자  (0) 2017.05.27
HTML5/CSS3 인접 형제 선택자, 형제 선택자  (0) 2017.05.26
HTML5/CSS3 색조,채도,명도 입력법  (0) 2017.05.24
HTML5/CSS3 colspan, rowspan : 테이블의 가로, 세로셀 합치기  (0) 2017.05.23
HTML5/CSS3 <figure><figcaption> : 요소의 내용 요약  (0) 2017.05.22

색조,채도,명도 입력법

hsl(색조, 채도, 명도)

hsla(색조, 채도, 명도, 투명도)



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    body {
        background : url(images/testimage.jpg);
    }
    p {
        width : 100%;
        font-size : 2em;
        /**
            hsl(색조, 채도, 명도)
            hsla(색조, 채도, 명도, 투명도)
        */
        background-color : hsla(0, 0%, 80%, 0.5);
    }
    
    p span {
        font-weight : bold;
        font-size : 1.2em;
        color : hsla(0, 100%, 50%, 0.3);
    }
    </style>
</head>
 
<body>
    <p>가나다라마바사아자차카타파하아야어여오요우유으이<br/>
        <span>1234567890</span>
    </p>
</body>
</html>
cs



결과)

투명도를 줘서 뒤의 배경이 보인다




저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 인접 형제 선택자, 형제 선택자  (0) 2017.05.26
HTML5/CSS3 :root 선택자 : body태그 보다 위의 최상위 선택자  (0) 2017.05.25
HTML5/CSS3 colspan, rowspan : 테이블의 가로, 세로셀 합치기  (0) 2017.05.23
HTML5/CSS3 <figure><figcaption> : 요소의 내용 요약  (0) 2017.05.22
HTML5/CSS3 <pre>태그 : 있는 그대로 보여준다  (0) 2017.05.21

colspan : 가로셀 합치기

rowspan : 세로셀 합치기



html)

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
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
<figure>
    <figcaption>
        <strong>figcaption</strong>
        <p>테이블의 설명을 작성할 수 있습니다.</p>
    </figcaption>
    <table border="1">    
        <colgroup>
            <col width="20%">
            <col width="40%">
            <col width="*">
        </colgroup>    
        <thead>
            <tr>
                <th scope="col"></th>
                <!-- 
                    colspan : 가로셀 합치기
                    rowspan : 세로셀 합치기
                 -->
                <th scope="col" colspan="2">header1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">row 1</th>
                <td rowspan="2">data 1-1</td>
                <td>data 1-2</td>
            </tr>
            <tr>
                <th scope="row">row 2</th>
                <td>data 2-2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th scope="row" id="re">결과</th>
                <td>result 1</td>
                <td>result 2</td>
            </tr>
        </tfoot>
    </table>
</figure>
</body>
</html>
cs



결과)




저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 :root 선택자 : body태그 보다 위의 최상위 선택자  (0) 2017.05.25
HTML5/CSS3 색조,채도,명도 입력법  (0) 2017.05.24
HTML5/CSS3 <figure><figcaption> : 요소의 내용 요약  (0) 2017.05.22
HTML5/CSS3 <pre>태그 : 있는 그대로 보여준다  (0) 2017.05.21
HTML5/CSS3 특수문자 삽입  (0) 2017.05.20

<figure> : <table>요소 바깥을 감싼다

<figcaption> : 요소의 내용 요약



html)

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
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
<!--<figure><figcaption> : 테이블의 내용 요약 -->
<figure>
    <figcaption>
        <strong>figcaption</strong>
        <p>테이블의 설명을 작성할 수 있습니다.</p>
    </figcaption>
    <table border="1">    
        <colgroup>
            <col width="20%">
            <col width="40%">
            <col width="*">
        </colgroup>    
        <thead>
            <tr>
                <th scope="col" id="a1"></th>
                <th scope="col" id="a2">header1</th>
                <th scope="col" id="a3">header2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row" id="b1">row 1</th>
                <td headers="a2 b1">data 1-1</td>
                <td headers="a3 b1">data 1-2</td>
            </tr>
            <tr>
                <th scope="row" id="b2">row 2</th>
                <td headers="a2 b2">data 2-1</td>
                <td headers="a3 b2">data 2-2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th scope="row" id="re">결과</th>
                <td headers="a2 re">result 1</td>
                <td headers="a3 re">result 2</td>
            </tr>
        </tfoot>
    </table>
</figure>
</body>
</html>
cs



결과)




저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 색조,채도,명도 입력법  (0) 2017.05.24
HTML5/CSS3 colspan, rowspan : 테이블의 가로, 세로셀 합치기  (0) 2017.05.23
HTML5/CSS3 <pre>태그 : 있는 그대로 보여준다  (0) 2017.05.21
HTML5/CSS3 특수문자 삽입  (0) 2017.05.20
HTML5/CSS3 모바일 기기에 맞춰서 페이지 보여주기  (0) 2017.05.19

+ Recent posts

티스토리툴바