CSS선택자


말그대로 스타일을 입히기위해 선택을 하는 것입니다.

html태그나 속성으로 선택을 할 수 있습니다. 


연결 선택자 종류


종류 

설명 

 a > b

a에 포함되어 있는 요소중 b에 스타일을 적용합니다.

 a + b

a와 같은 위치에 있는 요소중 첫번째로 나온 b에 스타일을 적용합니다.

 a~b

a와 같은 위치에 있는 요소중 a다음으로 나온 모든 b에 스타일을 적용합니다.


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
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<style>
    #a>h1 {
        color: red;
    }
    #b+h1 {
        color: blue;
    }
    h1~h2 {
        color: orange;
    }
</style>
<body>
    <div id="a">
        <h1>aaa</h1>
        <h3>bbb</h3>
    </div>
    <div id="b">
    </div>
    <h1>aaa</h1>
    <h1>bbb</h1>
    <div>
        <div>
            <h1>aaa</h1>
            <h2>bbb</h2>
            <h2>ccc</h2>
        </div>
    </div>
</body>
</html>
cs



속성 선택자 종류


종류 

설명 

a[속성] 

a태그중 오른쪽 속성값을 가진요소에 스타일을 적용합니다.

a[속성=속성값]

a태그중 오른쪽 속성의 속성값을 가진요소에 스타일을 적용합니다.

a[속성~=속성값]

a태그중 오른쪽 속성의 속성값중 선택자에 있는 속성값이 들어있으면 스타일을 적용합니다.

a[속성|=속성값]

a태그중 선택자에서의 속성값이 들어있거나 속성값- 의값이 들어있으면 스타일을 적용합니다.

a[속성^=속성값]

a태그중 선택자에서의 속성값이 처음에 있으면 스타일을 적용합니다.

ex) color(O) background-color(X)

a[속성$=속성값]

a태그중 선택자에서의 속성값이 마지막에 있으면 스타일을 적용합니다.

위의 예와 비슷합니다.

a[속성*=속성값]

a태그중 오른쪽 속성값이 어디에 붙어있거나 있기만하면 스타일을 적용합니다.


소스코드↓

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
<!doctype>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>html문서</title>
</head>
<style>
  h1[style] {
    color: red;
  }
  input[type=button] {
    background-color: black;
  }
  div[id~="a"]{
    margin:200px;
    width:200px;
    height:200px;
    border:2px solid black;
  }
  div[display|="inline"]{
    margin:300px;
    width:300px;
    height:300px;
    border:2px solid black;
  }
  ol[start^="1"]{
    color:blue;
  }
  ol[start$=i]{
    color:red;
  }
  a[href*=naver]{
    color:green;
  }
</style>
<body>
  <h1 style="background-color:black>>aa</h1>  
  <label id="a">체크박스
    <input type="button" class="a">
  </label>  
  <div id="a"></div>  
  <div display="inline"></div>
  <div display="inline-block"></div>
  <ol start="1">
    <li>파랑</li>
  </ol>
  <ol start="i">
    <li>빨강</li>
  </ol>  
  <a href="https://naver.com">네이버</a>
</body>
</html>
cs


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

표 관련 스타일  (0) 2018.01.23
위치관련 속성  (0) 2018.01.16
마진과 패딩  (0) 2018.01.12
박스모델과 테두리 관련 스타일  (0) 2018.01.10
그라데이션 효과 만들기  (0) 2018.01.08

표 관련 스타일


  • caption-side
이것은 저번 표에서배운 caption태그에 관해 제목을 어디 위치할지 정하는 것입니다.
속성값으로는 bottom 과 top이 있습니다.

소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #caption_side{
            caption-side:bottom;
        }
   </style>
    <body>
        <table border="1" id="caption_side">
            <caption>html</caption>
            <tr>
                <th>1</th>
                <td>2</td>
            </tr>
        </table>
    </body>
</html>
cs


  • border
위에서 봤듯이 table옆에서 적으면 표의 굵기를 정하는 것이고 style안에 넣는다고 한다면 
border:(표의두께) (선의종류) (표의 색상)으로 표기할 수 있습니다.

소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #table_style{
            border:2px solid red;
        }
   </style>
    <body>
        <table id="table_style">
            <caption>html</caption>
            <tr>
                <th>1</th>
                <td>2</td>
            </tr>
        </table>
    </body>
</html>
cs


  • border-collapse
이것은 표의테두리를 보면 알 수 있습니다.
처음 표를 크게 만들어보면 중간에 두줄로 분리되어있는 것을 볼 수 있습니다.
그것을 분리할 것인지 아닌지 정하는 것입니다.
속성값으로는 collapse(분리안함)과 separate(기본값)이 있습니다.

소스코드↓
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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #border_collapse{
            border-collapse:collapse;
        }
   </style>
    <body>
        <table border="1" id="border_collapse">
            <caption>html</caption>
            <tr>
                <th>1</th>
                <td>2</td>
            </tr>
            <tr>
                <th>3</th>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>
cs

  • border-spacing
보면 알수있듯이 표 하나하나의 간격을 조정할 수 있도록 해줍니다.
border-spacing:(가로간격) (세로간격);처럼 사용할 수 있습니다.

소스코드↓
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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #border_spacing{
            border-spacing:10px 20px;
        }
   </style>
    <body>
        <table border="1" id="border_spacing">
            <caption>html</caption>
            <tr>
                <th>1</th>
                <td>2</td>
            </tr>
            <tr>
                <th>3</th>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>
cs

  • empty-cells
빈셀을 어떻게 표시할지 정하는것입니다.
속성값은 show와hide가 있고 show는 기본값입니다.

소스코드↓
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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #empty_cells{
            empty-cells:hide;
        }
   </style>
    <body>
        <table border="1" id="empty_cells">
            <caption>html</caption>
            <tr>
                <th>1</th>
                <td>2</td>
                <td></td>
            </tr>
            <tr>
                <th>3</th>
                <td>4</td>
                <td></td>
            </tr>
        </table>
    </body>
</html>
cs


  • text-align
이것은 셀안의 텍스트를 수평으로 정렬할 수 있도록 만들어줍니다.
속성값은 left right같은 것들이 있습니다.

소스코드↓
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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #text_align{
            text-align:right;
        }
   </style>
    <body>
        <table border="1" id="text_align">
            <caption>html</caption>
            <tr>
                <th style="width:200px">1</th>
                <td>2</td>
            </tr>
            <tr>
                <th>3</th>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>
cs


  • vertical-align
이것은 수직으로 정렬할 수 있도록 해줍니다.
속성값으로는 top bottom sup baseline등의 다양한 설정을 할 수 있습니다.

소스코드↓
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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #vertical_align{
            vertical-align:bottom;
        }
   </style>
    <body>
        <table border="1">
            <caption>html</caption>
            <tr>
                <th style="height:200px" id="vertical_align">1</th>
                <td>2</td>
            </tr>
            <tr>
                <th>3</th>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>
cs


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

CSS 선택자  (1) 2018.01.26
위치관련 속성  (0) 2018.01.16
마진과 패딩  (0) 2018.01.12
박스모델과 테두리 관련 스타일  (0) 2018.01.10
그라데이션 효과 만들기  (0) 2018.01.08

위치관련 속성


  • box-sizing

이속성은 박스의 너비를 정하는 데 그의 기준을 설정하는 것입니다.

content-box와 border-box속성값이 있는데 content-box속성은 패딩같은 것을 빼고 콘텐츠(내용)만을 박스의 너비로 지정합니다. 하지만 border-box는 패딩같은 것을 콘텐츠에 합쳐서 너비를 정합니다.


소스코드↓

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 lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #box_size1{
            box-sizing:content-box;
            width:200px;
            height:300px;
            display:inline-block;
            border:2px dotted red;
            margin:15px;
            padding:20px;
        }
        #box_size2{
            box-sizing:border-box;
            width:200px;
            height:300px;
            display:inline-block;
            border:2px solid blue;
            margin:15px;
            padding:20px;
        }
   </style>
    <body>
        <div id="box_size1"></div>
        <div id="box_size2"></div>
    </body>
</html>
cs

결과↓

content-box         border-box


위와같이 contect-box는 200px와 높이300px로 나오고 border-box는 너비 156+양쪽패딩(40)+양쪽border(4)=200이 되고 높이도 이와 마찬가지로 됩니다.


  • float

말그대로 어떤 요소를 다른 요소위에 떠있게 만듭니다.
right값과 left값과 none값이 있습니다.

소스코드↓
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 lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #float1{
            float:left;
            border:2px solid red;
            width:200px;
            height:300px;
            margin:15px;
            background-color:white;
        }
        #float2{
            float:right;
            border:2px dotted blue;
            width:200px;
            height:300px;
            margin:15px;
            background-color:gray;
        }
        #common{
            border:2px solid red;
            width:200px;
            height:300px;
            background-color:skyblue;
        }
   </style>
    <body>
        <div id="float1">box1</div>
        <div id="float2">box2</div>
        <div id="common">box3</div>
    </body>
</html>
cs


결과↓


  • clear

이것은 float를 해제하는 것입니다.

속성값은 left right both none이 있으며 

left는 왼쪽 right 오른쪽 both 양쪽 none은 그냥 none을 말합니다.


소스코드↓

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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #float1{
            float:left;
            border:2px dotted red;
            width:200px;
            height:300px;
            margin:20px;
        }
        #clear{
            clear:both;
            border:2px double black;
            width:200px;
            height:300px;
            margin:20px;
        }
   </style>
    <body>
        <div id="float1"></div>
        <div id="clear"></div>
    </body>
</html>
cs


결과 값↓


위와같이 소스코드에서는 float가 있는데도 불구하고 clear로 인해 해제되어 있습니다.


  • position
이것은 배치방법을 정하는것입니다.  예를들어 요소를 예전요소와 흐름에 맞게 배치하거나 그럴때에 사용합니다.

종류 

설명 

relative 

저번요소에 흐름에 맞게 배치할 수 있습니다.

absolute

원하는 위치에 배치할 수 있습니다. 

fixed 

브라우저 창에 위치를 맞춥니다. (예:스크롤을 내려도 같이 내려오게 할 때)


소스코드↓

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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="ko">
        <title>html문서</title>
    </head>
    <style>
        #float{
            float:right;
            border:2px solid gray;
            width:200px;
            height:300px;
        }
        #position1{
            float:right;
            position:relative;
            right:50px;
            top:40px;
            border:2px double black;
            width:200px;
            height:300px;
        }
        #position2{
            position:absolute;
            top:100px;
            right:50px;
            border:2px dashed red;
            width:200px;
            height:300px;
        }
        #position3{
            position:fixed;
            top:500px;
            right:200px;
            width:200px;
            height:200px;
            border:2px dotted blue;
        }
   </style>
    <body>
        <div id="float"></div>
        <div id="position1"></div>
        <div id="position2"></div>
        <div id="position3"></div>
        <!--br여러개를 써서 브라우저 창을 내려보시면 fixed속성의 값을 볼 수 있습니다.-->
    </body>
</html>
cs


결과 값↓


  • visibility
이것은 요소를 숨기거나 숨기지 않는 것을 지정하는 것입니다.
※숨겨도 위치는 남아있어 배치에 영향을 줍니다.
속성 값으로는 visible과 hidden값 등으로 visible은 기본값 hidden은 숨기기 입니다.

소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #visibility{
            visibility:hidden;
        }
        div{
            border:2px dotted red;
            width:200px;
            height:300px;
        }
   </style>
    <body>
        <div id="visibility"></div>
    </body>
</html>
cs


결과 값으로는 글이 사라져있는 것을 볼 수 있습니다.


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

CSS 선택자  (1) 2018.01.26
표 관련 스타일  (0) 2018.01.23
마진과 패딩  (0) 2018.01.12
박스모델과 테두리 관련 스타일  (0) 2018.01.10
그라데이션 효과 만들기  (0) 2018.01.08

마진

저번에 봤듯이 요소와 요소사이의 거리를 뜻합니다.


margin태그

종류 

설명 

margin 

보통 편하게 사용하는 margin태그이며 값의 개수에따라 

상하좌우의 설정 값이 달라집니다. 

margin-top 

요소위의 마진을 뜻합니다. 

margin-right

요소 오른쪽의 마진을 뜻합니다. 

margin-bottom 

요소 밑의 마진을 뜻합니다.

margin-left 

요소 왼쪽의 마진을 뜻합니다. 


※margin의 값의 개수:1개이면 상하좌우 모두 하나의 값이고 값이 2개라면 위아래가 첫번째 값이고 두번째 값이 좌우입니다.

값이 세개일경우 첫번째값-위마진 두번째값-좌우마진 세번째값-밑의마진을 뜻하고 네개라면 그냥 시계방향으로 

위->오른쪽->밑->왼쪽으로 차례로 사용하게 됩니다.


margin의 auto속성

margin의 위와 아래값을 설정하고 좌우 마진값을 auto로 하는 것입니다.

ex)margin:10 auto 20 auto;

이렇게 하시면 위-10 아래-20 좌우는 브라우저 전체에서 요소값을 빼고 /2한 값이 됩니다. 

그러면 중앙으로 자동으로 정렬되게 됩니다.


소스코드↓

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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #margin1{
            margin-top:5px;
            margin-right:10px;
            margin-left:15px;
            margin-bottom:20px;
            border-style:solid;
            width:200px;
            height:300px;
        }
        #margin2{
            border-style:solid;
            width:200px;
            height:300px;
            margin:auto 0 auto 0;
        }
   </style>
    <body>
        <div id="margin1" style="display:inline-block"></div>
        <div id="margin1" style="display:inline-block"></div>
        <br>
        <div id="margin1" style="display:inline-block"></div>
        <div id="margin1" style="display:inline-block"></div>
        <div id="margin2"></div>
    </body>
</html>
cs

패딩

요소와 요소의 테두리까지의 거리를 말합니다.


종류 

설명 

padding 

그냥 상하좌우 모든 패딩을 뜻합니다.

padding-top

위의 패딩을 뜻합니다. 

padding-right 

오른쪽의 패딩을 뜻합니다. 

padding-bottom 

밑의 패딩을 뜻합니다. 

padding-left 

왼쪽의 패딩을 뜻합니다. 

padding의 값의 개수에 따라 달라지는 것은 마진과 같습니다.


소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        .padding{
            padding-top:5px;
            padding-right:10px;
            padding-left:10px;
            padding-bottom:5px;
            /*padding:5px 10px, padding 5px 10px 5px와동일*/
            width:300px;
            height:auto;
            border-style:dashed;
            color:red;
        }
   </style>
    <body>
        <div class="padding">Hello World!</div>
    </body>
</html>
cs


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

표 관련 스타일  (0) 2018.01.23
위치관련 속성  (0) 2018.01.16
박스모델과 테두리 관련 스타일  (0) 2018.01.10
그라데이션 효과 만들기  (0) 2018.01.08
색상과 배경 스타일  (0) 2018.01.07

인라인

이것은 줄을 차지하지 않는 것으로써 <sup>이나 <sub>같은 태그가 인라인요소입니다.

블록

줄을 차지하는 요소로 하나의 태그가 한 줄을 차지한다면 블록요소라고 할 수 있습니다.

그리고 블록요소에는 너비나 높이같이 크기를 조정할 수 있습니다.

width, height, margin속성

말그대로 width는 너비(가로)를 뜻하고 height는 높이(세로)를 뜻합니다.

width:15px;와같이 지정할 수 있습니다.


margin은 요소와 요소사이의 거리를 뜻합니다.

이것도 margin:15px과 같이 지정할 수 있습니다.


display속성

요소를 블록이나 인라인으로 만들 때 사용합니다.

display:block;과 같이 쓰입니다.

종류는 inline, block, inline-block, none이 있습니다.

※none과 visiblility:hidden;의 다른점: none은 공간도 없지만 visibillity:hidden;은 공간은 차지합니다.


소스코드↓

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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        div{
            width:300px;
            height:200px;
            background-color:black;
            margin:15px;
            display:inline;
            /*block, inline-block, none*/
        }
        #div2{
            
        }
        #display{
            display:inline;
        }
        #display2{
            display:block;
        }
        #display3{
            display:inline-block;
        }
   </style>
    <body>
        <div style="color:white">1</div>
        <div style="color:white">2</div>
        <div style="color:white">3</div>
    </body>
</html>
cs



테두리 관련


  • border-style

말그대로 테두리의 스타일을 어떻게 할지 정하는 속성입니다.

ex)점선이나 실선같은 것으로 할 수 있습니다.

종류↓

 속성 값

설명 

none 

기본값으로 테두리가 없습니다. 

hidden 

테두리가 표시되지 않습니다. 

dashed

점선의 길이가긴 점선으로 테두리가 생깁니다.

dotted 

점으로된 테두리가 생깁니다.

double 

두겹의 테두리가 생깁니다.

solid

실선의 테두리가 생깁니다.


  • border-width
테두리의 굵기를 정하는 속성입니다.
border-width:15px;와 같이 사용할 수 있습니다.

  • border-color

테두리의 색깔을 정하는 속성입니다.

border-color:black;과같이 사용할 수 있습니다.


  • border
위에서 나온 3개의 태그를 한번에 사용할 수 있게 해줍니다.
border:15px solid red;와같이 사용할 수 있습니다.

  • border-radius
테두리의 각을 원모양으로 둥글게 만들 수 있도록 해줍니다.
border-top-right-radius:10px;처럼 사용할 수 있으며 값만큼의 반지름인 원의 90도 부채꼴의 호만큼 둥글게 만들어줍니다.
만약 값을 두개 적는다면 첫번째가 가로값이 되고 두번째가 세로값이 되는 타원형모양으로 둥글게 만들어줍니다.

종류↓

종류 

설명 

border-top-right-radius 

위쪽에 오른쪽각을 설정합니다.

border-top-left-radius

위쪽에 왼쪽각을 설정합니다. 

border-bottom-left-radius 

밑쪽의 왼쪽각을 설정합니다. 

border-bottom-right-radius 

밑쪽의 오른쪽각을 설정합니다. 


  • box-shadow
요소에 그림자를 만들어주는 속성입니다.
사용법은 box-shadow:가로값 세로값 흐림 번짐 색깔 (inset);과 같이 사용가능합니다.
  1. 가로값: 양수면 오른쪽으로 음수면 왼쪽으로 그림자가 생깁니다.
  2. 세로값: 양수면 아랫쪽으로 음수면 위쪽으로 그림자가 생깁니다.
  3. 흐림: 0부터 선택가능하며 숫자가 높을수록 연한 색깔이 나옵니다.
  4. 번짐: 값만큼 그림자가 번지도록 할 수 있습니다.
  5. 색깔: 말그대로 0x 나 # 아니면black같이 지정할 수 있습니다.
  6. inset 안쪽으로 그림자가 생기게 하고 싶을 때 사용합니다.
소스코드↓
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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        div{
            width:200px;
            height:300px;
            margin:15px;
        }
        #border1{
            border-style:double;
            border-width:15px;
            border-color:blue;
        }
        #border2{
            border:15px dotted red;
        }
        #border3{
            border-style:solid;
            border-bottom-right-radius:30px;
            border-bottom-left-radius:30px;
            border-top-right-radius:30px;
            border-top-left-radius:30px;
        }
        #border4{
            border-style:solid;
            border-bottom-right-radius:30px 50px;
            border-bottom-left-radius:30px 50px;
            border-top-right-radius:30px 50px;
            border-top-left-radius:30px 50px;
        }
        #border5{
            border-style:solid;
            border-color:gray;
            box-shadow:-3px -3px 50px 5px black;
        }
   </style>
    <body>
        <div id="border1"></div>
        <div id="border2"></div>
        <div id="border3"></div>
        <div id="border4"></div>
        <div id="border5"></div>
    </body>
</html>
cs



여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

위치관련 속성  (0) 2018.01.16
마진과 패딩  (0) 2018.01.12
그라데이션 효과 만들기  (0) 2018.01.08
색상과 배경 스타일  (0) 2018.01.07
목록 관련 스타일  (0) 2018.01.05

선형 그라데이션


  • linear-gradient
선형 그라데이션을 나타내는 구문입니다.
사용법은 linear-gradient(각도나 방향, 그라데이션으로 쓸 색상, ~~색상2);
이렇게 사용가능합니다. 그리고 이해하실 때는 각도나 방향 쪽으로 첫번째색상부터 두번째 색상이 나온다고 보시면 됩니다.

방향표현

방향종류 

설명 

to top

위쪽

to right

오른쪽

to left

왼쪽

to bottom

밑쪽


코드예시↓
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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <body>
        <style>
            div{
                height:300px;
                width:400px;
            }
            #linear1{
                background:linear-gradient(to top, black, white);
            }
            #linear2{
                background:linear-gradient(to left top, black, white);
                //위와같이 했을 경우 왼쪽 위인 대각선이 됩니다.
            }
            #linear3{
                background:linear-gradient(to right, black, white);
            }
            #linear4{
                background:linear-gradient(to bottom right, black, white);
            }
       </style>
        <div id="linear1">to top</div>
        <div id="linear2">to left top</div>
        <div id="linear3" style="color:white">to right</div>
        <div id="linear4" style="color:white">to bottom right</div>
    </body>
</html>
cs



각도 표현

deg로 나타내며 정확하게 표현할 수 있습니다.


소스코드↓

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 lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <body>
        <style>
            div{
                height:300px;
                width:400px;
            }
            #linear1{
                background:linear-gradient(0deg, black, white);
            }
            #linear2{
                background:linear-gradient(315deg, black, white);
            }
            #linear3{
                background:linear-gradient(90deg, black, white);
            }
            #linear4{
                background:linear-gradient(135deg, black, white);
            }
       </style>
        <div id="linear1">0deg</div>
        <div id="linear2">315deg</div>
        <div id="linear3" style="color:white">90deg</div>
        <div id="linear4" style="color:white">135deg</div>
    </body>
</html>
cs


정해진 위치에 색상추가하기

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <body>
        <style>
            div{
                height:300px;
                width:400px;
            }
            #linear1{
                background:linear-gradient(to top, black, gray 100px, white);
                //위에서보면 black과 white사이 gray를 방향을 기준으로 100px에 나타내도록 할 수 있습니다.
            }
       </style>
        <div id="linear1"></div>
    </body>
</html>
cs


원형 그라데이션

  • radial-gradient

원형 그라데이션을 나타내며 사용법은 radial-gradient(색상, 색상, .........);이렇게 사용하시면 원 안쪽부터 첫번째 색깔부터 나오게됩니다.


모양 지정

원래 기본값은 eclipse로 타원형입니다. 하지만 radial-gradient(circle이나eclipse, 색상...);이렇게 하시면 모양을 지정할 수 있습니다.


위치 지정

위치의 기본값은 원래 center center로 그냥 중간입니다.

하지만 radial-gradient(at 가로위치 세로위치, 색상...);이렇게 설정하시면 그렇게 나타납니다.


크기 지정

옵션 

설명 

closest-side 

그라데이션의 중심을 축으로 가장 가까운 모서리에 닿을 때까지 원을 그립니다. 

closest-corner

그라데이션의 중심을 축으로 가장 가까운 각에 닿을 때까지 원을 그립니다.

farthest-side

그라데이션의 중심을 축으로 가장 먼 모서리에 닿을 때까지 원을 그립니다.

farthest-corner

그라데이션의 중심을 축으로 가장 먼 각에 닿을 때까지 원을 그립니다.


그라데이션의 반복

  • repeating-radial-gradient
원형 그라데이션을 반복할 수 있도록 만들어 줍니다.
  • repeating-linear-gradient
선형 그라데이션을 반복할 수 있도록 만들어 줍니다.

코드예시↓
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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <body>
        <style>
            div{
                height:300px;
                width:400px;
            }
            #radial1{
                background:radial-gradient(black, gray, white);
            }
            #radial2{
                background:radial-gradient(circle at 50% 20%, black, gray, white);
            }
            #radial3{
                background:radial-gradient(circle closest-side at 80% 40%, white, gray, black)
            }
            #radial4{
                background:radial-gradient(circle closest-corner at 20% 30%, white, gray, black);
            }
            #radial5{
                background:radial-gradient(circle farthest-side at 10% 20%, white, gray, black);
            }
            #radial6{
                background:radial-gradient(circle farthest-corner at 10% 80%, white, gray, black);
            }
            #radial7{
                background:repeating-radial-gradient(circle, black, black 30px, gray 30px, gray 60px, white 60px, white 90px);
            }
            #radial8{
                background:repeating-linear-gradient(black, black 10px, gray 10px, gray 20px, white 20px, white 30px);
            }//위를 설명하면 검정색이 0-10px만큼 회색이 10px-20px만큼 흰색이 20px-30px만큼을 반복하는 것입니다.
       </style>
        <div id="radial1"></div>
        <div id="radial2"></div>
        <div id="radial3"></div>
        <div id="radial4"></div>
        <div id="radial5"></div>
        <div id="radial6"></div>
        <div id="radial7"></div>
        <div id="radial8"></div>
    </body>
</html>
cs


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

마진과 패딩  (0) 2018.01.12
박스모델과 테두리 관련 스타일  (0) 2018.01.10
색상과 배경 스타일  (0) 2018.01.07
목록 관련 스타일  (0) 2018.01.05
문단 스타일  (0) 2018.01.04

색상 표현법


종류

설명 

16진수 표기법 #색상값

16진수에 해당하는 색상값으로 색상을 표현합니다.   

16진수 표기법 0x색상값

설명은 위와같지만 0x로 표기합니다. 

rgb

(R)ed(G)reen(B)lue의 약어로 말그대로 red값, green값, blue값을 입력하면 됩니다.

rgba

위와같지만 뒤에 불투명도값을 0~1까지 쓰시면 됩니다. 

hsl

(H)ue(색조)(S)aturation(채도)(L)ightness(밝기)를 나타낸것으로 순서대로 입력하시면 됩니다.

hsla

위와설명이 같지만 불투명도값을 오른쪽 추가로 입력하시면 됩니다. 


소스코드↓

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 lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html 문서</title>
    </head>
    <body>
        <style>
            #color1{
                color:rgb(146, 255, 218);
            }
            #color2{
                color:rgba(0, 0, 0, 0.5);
            }
            #color3{
                color:hsl(115, 100%, 84%);
            }
            #color4{
                color:hsla(268, 100%, 77%, 0.5);
            }
            #color5{
                color:#459a25;<!--0x로도 16진수 표현가능-->
            }
       </style>
        <h1 id="color1">rgb를 이용한 색깔지정</h1>
        <h1 id="color2">rgba를 이용한 색깔지정</h1>
        <h1 id="color3">hsl을 이용한 색깔지정</h1>
        <h1 id="color4">hsla를 이용한 색깔지정</h1>
        <h1 id="color5">16진수를 이용한 색깔지정</h1>
    </body>
</html>
cs



배경 스타일


  • background-color
배경의 색깔을 지정하는 것 입니다. background-color:색상값;과 같이 입력할 수 있습니다.

  • backgorund-clip

배경의 범위를 조절하는 것 입니다.

예를 들어 padding-box라는 속성으로 태두리를 뺀 범위까지 적용시킬 수 있습니다.


  • background-image

배경화면을 주소값으로 이미지를 넣을 수 있도록 해줍니다.

background-image:url('주소 값 아니면 경로');


  • background-repeat

배경화면에서 반복하는 것을 조절할 수 있습니다.(body태그에 이미지 배경화면을 적용해서 background-repeat:no-repeat;값을 넣어보시면 알 수 있습니다.)


속성의 종류

 값(기본값 repeat 반복한다는 것입니다.)

설명 

 no-repeat

반복을 없앱니다. 

 x-repeat

가로반복을 말합니다.

 y-repeat

세로반복을 말합니다.


  • background-size
딱보면 알 수 있듯이 배경화면의 크기를 조절하는 것 입니다.
사용방법은 background-size:가로너비 세로너비 이렇게 입력해야합니다.(값을 사용할때)

속성의 종류

값

설명 

auto 

기본값으로 원래 이미지 크기만큼만 표시합니다. 

contain

사용하는 요소안에 들어가게끔 크기를 조절합니다. 

cover 

사용하는 요소를 덮을 크기만큼 조절합니다. 



  • background-position
배경화면의 위치를 조절하는 것 입니다.
값을 넣으면 background-position:수평길이 수직길이 로 설정가능하며 속성 값으로는

수평위치: left, center, right
수직위치: top, center, bottom
이 있습니다.


  • backgroundj-origin
배경이미지를 배치할 기준을 정합니다.
예로 border이라는 속성값으로 테두리(외곽)를 기준으로 만들 수 있습니다.

  • background-attachment
배경이미지를 스크롤할 때 사진이 같이 내려가게 하거나 할 때 사용할 수 있습니다.
scroll: 기본값
fixed: 스크롤할 때 사진이 같이 내려갑니다.

소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <body id="bg_image">
        <style>
            h1{
                background-color:#83e7ff;
            }
            #bg_image{
                background-image:url('캡처.PNG');
                background-repeat:no-repeat;
                background-size:300px 300px;
                background-position:center center;
                background-origin:content-box;
                background-attachment:fixed;
            }
       </style>
        <h1>배경스타일 설정</h1>
    </body>
</html>
cs


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

박스모델과 테두리 관련 스타일  (0) 2018.01.10
그라데이션 효과 만들기  (0) 2018.01.08
목록 관련 스타일  (0) 2018.01.05
문단 스타일  (0) 2018.01.04
글 관련 스타일  (0) 2018.01.03

목록 관련 스타일


  • list-style-type

리스트앞에 불릿모양을 변경하거나 숫자모양을 지정하게 해줍니다.(그냥 <ol type="종류">이렇게 하는게 스타일에서 하는 것보다 편할거 같습니다...)

불릿종류↓

종류 

설명 

disc 

 ●불릿을 의미합니다.

square

 ■불릿을 의미합니다.

circle 

 ○불릿을 의미합니다.

none 

 불릿이 없게 만듭니다.


숫자종류↓

 종류

설명 

decimal 

평소쓰는 10진수(1, 2, 3순서)를 말합니다.

decimal-leading-zero

10진수이지만 01, 02같이 보여집니다. 

lower-roman 

말그대로 로마문자 소문자입니다. 

upper-roman 

로마문자 대문자입니다. 

lower-alpha, lower-latin

alpha는 알파벳이고 latin은 라틴어지만 보여지는 것은 같습니다.(소문자)

upper-alpha, upper-latin

위와 설명이 같고 대문자입니다.

위와같은 것들이 있습니다.(몇가지 더있지만 생략하겠습니다.)


소스코드↓(← = &larr입니다.)

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
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #list_square{
            list-style-type:square;
        }
        #list_roman {
            list-style-type: upper-roman;
        }
 </style>
    <ol id="list_square">
        <li>←네모</li>
    </ol>
    <ul id="list_square"><!--ol에 목록 스타일을 지정하면 li에 적용되지만 ul은 아니다.-->
        <li>←네모가 아님</li>
    </ul>
    <ul id="list_roman">
        <li>←대문자 로마문자</li>
    </ul>
</body>
</html>
cs
  • list-style-image
불릿을 그냥 설정하지않고 사진으로 대체하는 속성입니다.
사용방법은 list-style-image:url('사진의 경로');이렇게 사용하시면 됩니다. (하지만 이미지를 구해야한다는 귀찮음이 있습니다.)
소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #list_image{
            list-style-image:url('image/image3.png');
        }
</style>
    <ul id="list_image">
        <li>←사진이 출력됨</li>
    </ul>
</body>
</html>
cs


  • list-style-position

목록을 들여쓸 때 사용하는 속성입니다.(inside, outside속성등이 있고 말그대로 안쪽 바깥쪽으로 들여쓰는 의미입니다.)

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #list_position{
            list-style-position:outside;
        }
  </style>
    <ol id="list_position">
        1
        <li>들여써짐</li>
    </ol>
</body>
</html>
cs


  • list-style
이전에 배운 type속성과 position속성을 같이 한번에 적용할 때 사용합니다.
list-style:type속성,position속성;이렇게 사용할 수 있고 하나의 속성 값만 사용할 수도 있습니다.


저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

그라데이션 효과 만들기  (0) 2018.01.08
색상과 배경 스타일  (0) 2018.01.07
문단 스타일  (0) 2018.01.04
글 관련 스타일  (0) 2018.01.03
CSS기초  (0) 2018.01.03

문단 스타일


  1. direction
글자쓰기 방향을 지정할 수 있게 해줍니다.rtl, ltr과같은 속성 값이 있습니다.
소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #left{
            direction:rtl;
        }
  </style>
    <h1 id="left">오른쪽으로 글이 써짐</h1>
</body>
</html>
 
cs



 B. text-align


글을 정렬시켜줍니다. 속성 값으로 center, left, right등이 있습니다.

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #cent{
            text-align:center;
        }
</style>
    <h1 id="cent">중앙정렬</h1>
</body>
</html>
cs


 C. text-justify


정렬시에 공백을 조절하는 역할을 해줍니다. 속성 값으로 auto, inter-word, distribute등이 있습니다.

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #interval{
            text-justify:distribute;
        }
   </style>
    <h1 id="interval">정렬할 때 공백조절</h1>
</body>
</html>
cs


D. line-height


여러줄 글을 쓰다보면 간격이 생기는 데 그 간격을 조정할 수 있습니다.(단위나 백분율같은 것으로 조정할 수 있습니다.)

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #height{
            line-height:10px;
        }
</style>
    <h1 id="height">줄간격</h1>
</body>
</html>
 
cs

E. text-indent

글을 쓰다보면 들여쓸 일이 생기는 데 그 때 사용합니다.(위와같이 단위같은 것으로 조정가능합니다.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #indent{
            text-indent:10px;
        }
</style>
    <h1 id="indent">들여쓰기</h1>
<\body>
</html>
 
cs


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

색상과 배경 스타일  (0) 2018.01.07
목록 관련 스타일  (0) 2018.01.05
글 관련 스타일  (0) 2018.01.03
CSS기초  (0) 2018.01.03
기타 폼 관련태그  (0) 2018.01.03

글꼴 관련 스타일


  • font-family속성

font-family:폰트이름;이렇게 사용할 수 있으며 뒤에 ','을 이용해 폰트가 없으면 대체용으로 사용되게할 수 있습니다.Ex)font-family:Consolas, sans-serif;

코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #font{
            font-family:Consolas, sans-serif
        }
   </style>
    <p id="font">font</p>
    <p>font</p>
</body>
</html>
cs

  • font-size속성

절대크기, 상대크기, 단위를이용, 백분율 이렇게 4가지가 있습니다.

(단위는 px, em등이 있습니다.)

코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
           #weight{
                font-weight:900;
          }
   </style>
    <p id="size">size</p>
     <p>size</p>
</body>
</html>
cs


  • font-weight속성

normal, bold, lighter, 300, 500등 다양하게 지정할 수 있으며 글자의 굵기를 지정합니다.

코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
         #weight{
                font-weight:900;
            }
 </style>
    <p id="weight">bold</p>
    <p>bold</p>
</body>
</html>
cs
  • font-varient속성
글자를 작은 대문자로 표기할 때 사용합니다.(small-caps라는 것으로 조절할 수 있습니다.)
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>         
        #uppercase_s{
            font-variant:small-caps;
        }
   </style>
    <p id="uppercase_s">aaa</p>
     <p>AAA</p>
</body>
</html>
cs


  • font-style속성
글자를 이탤릭체로 표시할 때 사용합니다. italic과 oblique가 있지만 italic을 보통 씁니다.
코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>         
    #italic{
            font-style:italic;
        }
   </style>
    <p id="italic">기울어짐</p>
    <p>안기울어짐</p>
</body>
</html>
cs


  • font속성
이것은 방금까지 본속성들을 모아서 쓸 수 있습니다.

font:(style) (varient) (weight) (size)/(줄높이) (글꼴)

속성값:caption, icon, menu등으로 자동으로 그에맞는 텍스트양식으로 만들어 줍니다.(font:icon이렇게 사용가능 합니다.)

코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>         
     #f{
            font:italic small-caps 900 32px/10px Consolas, sansserif;
        }
   </style>
     <p id="f">all</p>
    <p style="font:icon">font에서icon</h1>
</body>
</html>

cs



텍스트 관련 스타일


  • color속성
color:색깔 이렇게 지정가능하며 텍스트의 색깔을 바꿔줍니다.
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #red_color{
            color:red;
        }
   </style>
    <h1 id="red_color">글자</h1> 
    <h1>글자</h1>
</body>
</html>
cs


  • text-decoration속성

underline과같은 밑줄 취소선같은 것들을 표시할 수 있습니다.

코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #emphasize{
            text-decoration:underline;
        }
</style>
    <h1 id="emphasize">밑줄</h1>
</body>
</html>
cs


  • text-trasform속성
텍스트의 대소문자에 대한 태그입니다. 첫 글자 대문자, 대문자변환, 소문자변환같은 것들을 할 수 있습니다.
(속성값:uppercase, capitalize등)
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #uppercase{
            text-transform:uppercase;
        }
</style>
    <h1 id="uppercase">abc</h1>
</body>
</html>
cs


  • text-shadow속성
말그대로 그림자같이 글자를 표시할 때 사용합니다.
가로, 세로, 번짐, 색상순으로 코드에 표기해야합니다.(','로 한 글자 한 글자 지정할 수 있습니다.)
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #shadow{
            text-shadow:4px 3px 3px #ff0000;//,로 한 글자 한 글자 shadow효과를 지정할 수 있다.
        }
</style>
    <h1 id="shadow">HTML5</h1>
</body>
</html>
cs


  • white-space속성

글자의 공백을 하나로 표기할지 여러개 표시 가능하게 할지 줄넘김을 사용할지등을 조정하는 태그입니다.(예로 pre-wrap은 공백을 여러개 표시 가능하게 하고 줄넘김또한 가능하게 합니다.) 

(속성값:pre , pre-wrap등)

코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #white_space{
            white-space:pre-wrap;
        }
</style>
    <h1 id="white_space">
    공    백
    줄 
    넘
    김
    </h1>
</body>
</html>
cs


  • word|letter-spacing
단어와 단어사이의 거리와 낱개의 단어사이의 거리를 조정합니다.(보통 em단위를 사용합니다.)
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #l_space{
            letter-spacing:3em;
        }
</style>
    <h1 id="l_space">글자</h1>
</body>
</html>
cs



여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

목록 관련 스타일  (0) 2018.01.05
문단 스타일  (0) 2018.01.04
CSS기초  (0) 2018.01.03
기타 폼 관련태그  (0) 2018.01.03
input 태그관련  (0) 2018.01.03

+ Recent posts

티스토리툴바