인라인

이것은 줄을 차지하지 않는 것으로써 <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

+ Recent posts

티스토리툴바