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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    /* 
    
        수평 정렬 
        1. 인라인 태그
            - 본인 자신 스스로 정렬 불가능
            - 내용물의 정렬도 불가능
            - 부모를 통해서 정렬 가능
        2. 블럭 태그
            - 본인 자신 스스로 정렬 불가능
            - 내용물의 정렬의 가능
            
        
    */
    
    
    /* 인라인 태그 */
    body {
        /* text-aglin: center; */
    }
    span {
        background-color: yellow;
    }
    /* 블럭 태그*/
    /* div {
        background-color: red;
        width: 100px;
        text-align: center;
    } */
        
    #pBox {
        background-color: yellow;
        text-align: center; /* 블럭태그 정렬 x */
    }
    
    #cBox {
        background-color: red;
        width: 100px;
        /* margin-left: 150px; 상대적인 사이즈로 정렬됨..nono */
        /* margin-left: auto;
        margin-right: auto; 자주 쓰임 */ 
        
        margin: 0px auto;
    }
        
</style>
 
</head>
<body>
 
    <!-- ex13.htm -->
 
    
    안녕하세요 <span>홍길동</span>입니다.
 
    <div id="pBox">
        상자
        <div id="cBox">상자</div>
        상자
    </div>
    
    
</body>
</html>
cs


'WEB > CSS' 카테고리의 다른 글

블럭태그, 인라인태그 예제  (0) 2016.01.22
박스모델 이용한 게시판 예제  (0) 2016.01.22
박스 모델  (0) 2016.01.22
의사 클래스  (0) 2016.01.22
텍스트 관련 속성 - 글자색, 정렬, 꾸밈, 들여쓰기, 크기, 두께, 서체, 수치표현  (0) 2016.01.22

+ Recent posts

티스토리툴바