div태그 좌우 반으로 나누기



html)

float 속성으로 좌우로 배치하고 box-sizing: 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
32
33
34
35
36
37
38
39
<!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>
    div {
        width: 100%;
        height: 300px;
        
        border: 1px solid #000;
    }
    div.left {
        width: 50%;
        float: left;
        box-sizing: border-box;
        
        background: #ff0;
    }
    div.right {
        width: 50%;
        float: right;
        box-sizing: border-box;
        
        background: #0ff;
    }
    </style>
</head>
 
<body>
    <div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
cs



결과

저작자표시

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

HTML5/CSS3 table-layout: fixed : table요소의 cell의 너비를 동일하게 고정  (0) 2017.06.12
HTML5/CSS3 div 블록 레이아웃 가운데 정렬하기  (0) 2017.06.11
HTML5/CSS3 background-origin: content-box, background-origin: border-box  (0) 2017.06.09
HTML5/CSS3 background-clip: content-box 배경을 content영역에만 보이도록 한다  (0) 2017.06.08
HTML5/CSS3 background-position : 배경이미지 위치 지정하기  (0) 2017.06.07

background-origin: content-box - 배경이 시작되는 위치를 content-box 영역부터 시작한다

background-origin: border-box - 배경이 시작되는 위치를 테두리 영역부터 시작한다



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>
    div {
        background: url(images/tile.png);
        background-color: #FFA7A7;
        
        /* background-origin: content-box 배경이 시작되는 위치를 content-box에 맞춘다 */
        background-origin: content-box;
        background-clip: content-box;
        
        padding: 30px;
        height: 300px;
        border: 1px solid #000;
    }
    </style>
</head>
 
<body>
    <div></div>
</body>
</html>
cs



결과

배경이미지가 잘려서 보였는데 배경이미지를 content-box에 맞춰서 보여주므로 배경이미지가 정확히 보인다


저작자표시

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

HTML5/CSS3 div 블록 레이아웃 가운데 정렬하기  (0) 2017.06.11
HTML5/CSS3 div태그 좌우 반으로 나누기  (0) 2017.06.10
HTML5/CSS3 background-clip: content-box 배경을 content영역에만 보이도록 한다  (0) 2017.06.08
HTML5/CSS3 background-position : 배경이미지 위치 지정하기  (0) 2017.06.07
HTML5/CSS3 background-repeat 배경이미지 반복여부 설정  (1) 2017.06.06

background-clip: content-box 배경을 content영역에만 보이도록 한다 



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
<!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>
    div {
        background: url(images/tile.png);
        background-color: #FFA7A7;
        /* background-clip: content-box 배경을 content영역에만 보이도록 한다 padding 영역에는 배경이 보이지 않는다 */
        background-clip: content-box;
        
        padding: 30px;
        height: 300px;
        border: 1px solid #000;
    }
    </style>
</head>
 
<body>
    <div></div>
</body>
</html>
cs



결과

저작자표시

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

HTML5/CSS3 div태그 좌우 반으로 나누기  (0) 2017.06.10
HTML5/CSS3 background-origin: content-box, background-origin: border-box  (0) 2017.06.09
HTML5/CSS3 background-position : 배경이미지 위치 지정하기  (0) 2017.06.07
HTML5/CSS3 background-repeat 배경이미지 반복여부 설정  (1) 2017.06.06
HTML5/CSS table 태그 쓰지 않고 테이블 표현하기  (0) 2017.06.05

background-position : 배경이미지 위치 지정하기



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
<!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>
    /*
    background-position: 가로기준 세로기준
    1) 값을 하나만 지정하는 경우
    left, right, 숫자 : 가로기준으로 적용, 세로기준은 center가 된다
    top, bottom : 세로기준으로 적용, 가로기준은 center가 된다
    2) %로 지정하는 경우
    해당영역의 %위치에 배경이미지의 %가 위치한다
    */
    div {
        background-position: 50% 50%;    /* 이미지가 div 태그 가운데에 오게 된다 */
    
        width: 100%;
        height: 300px;
        background-image: url(images/tile.png);
        background-repeat: no-repeat;
        border: 1px solid #000;
    }
    </style>
</head>
 
<body>
    <div></div>
</body>
</html>
cs



결과

%로 지정했으므로 이미지의 가운데(50% 50%)가 div 태그의 가운데(50% 50%)에 위치한다


저작자표시

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

HTML5/CSS3 background-origin: content-box, background-origin: border-box  (0) 2017.06.09
HTML5/CSS3 background-clip: content-box 배경을 content영역에만 보이도록 한다  (0) 2017.06.08
HTML5/CSS3 background-repeat 배경이미지 반복여부 설정  (1) 2017.06.06
HTML5/CSS table 태그 쓰지 않고 테이블 표현하기  (0) 2017.06.05
HTML5/CSS3 페이징 구성하기  (0) 2017.06.04

background-repeat 배경이미지 반복여부 설정



background-image: url(경로) 배경이미지 파일경로 지정


background-repeat: 반복여부

repeat 반복

no-repeat 반복안함

repeat-x 가로방향 반복

repeat-y 세로방향 반복



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
<!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>
    div {
        height: 130px;
        border: 1px solid #000;
        margin-bottom: 5px;
    }
    
    /*
    background-image: url(경로) 배경이미지 파일경로 지정
    background-repeat: 반복여부
    repeat 반복
    no-repeat 반복안함
    repeat-x 가로방향 반복
    repeat-y 세로방향 반복
    */
    .repeat {
        background-image: url(images/tile.png);
        background-repeat: repeat;
    }
    .no-repeat {
        background-image: url(images/tile.png);
        background-repeat: no-repeat;
    }
    .repeat-x {
        background-image: url(images/tile.png);
        background-repeat: repeat-x;
    }
    .repeat-y {
        background-image: url(images/tile.png);
        background-repeat: repeat-y;
    }
    </style>
</head>
 
<body>
    <div class="repeat"></div>
    <div class="no-repeat"></div>
    <div class="repeat-x"></div>
    <div class="repeat-y"></div>
</body>
</html>
cs



결과

저작자표시

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

HTML5/CSS3 background-clip: content-box 배경을 content영역에만 보이도록 한다  (0) 2017.06.08
HTML5/CSS3 background-position : 배경이미지 위치 지정하기  (0) 2017.06.07
HTML5/CSS table 태그 쓰지 않고 테이블 표현하기  (0) 2017.06.05
HTML5/CSS3 페이징 구성하기  (0) 2017.06.04
HTML5/CSS3 word-break, white-space : 줄바꿈 속성  (0) 2017.06.03

table 태그 쓰지 않고 테이블 표현하기



display 속성 중 table 관련 속성

table -> table

table-caption -> caption

table-cell -> td

table-column -> col

table-column-group -> colgroup

table-footer-group -> tfoot

table-header-group -> thead

table-row -> tr

table-row-group -> tbody



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
55
56
57
58
59
60
61
62
<!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>
    /*
    display 속성 중 table 관련 속성
    table -> table
    table-caption -> caption
    table-cell -> td
    table-column -> col
    table-column-group -> colgroup
    table-footer-group -> tfoot
    table-header-group -> thead
    table-row -> tr
    table-row-group -> tbody
    */
    .table {
        display: table;
        width: 100%;
        background: #DAD9FF;
    }
    .table-row-group {
        display: table-row-group;
    }
    .table-row {
        display: table-row;
        height: 40px;
    }
    .table-cell {
        display: table-cell;
        border-bottom : 1px solid #000;
        text-align: center;
        vertical-align: middle;
    }
    .content {
        font-weight: bold;
    }
    </style>
</head>
 
<body>
<div class="table">
    <div class="table-row-group">
        <div class="table-row">
            <div class="table-cell content">01</div>
            <div class="table-cell">제목을 입력하세요</div>
            <div class="table-cell">2017-04-10</div>
        </div>
        <div class="table-row">
            <div class="table-cell content">02</div>
            <div class="table-cell ">제목을 입력하세요2</div>
            <div class="table-cell">2017-04-11</div>
        </div>
    </div>
</div>
</body>
</html>
cs



결과


저작자표시

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

HTML5/CSS3 background-position : 배경이미지 위치 지정하기  (0) 2017.06.07
HTML5/CSS3 background-repeat 배경이미지 반복여부 설정  (1) 2017.06.06
HTML5/CSS3 페이징 구성하기  (0) 2017.06.04
HTML5/CSS3 word-break, white-space : 줄바꿈 속성  (0) 2017.06.03
HTML5/CSS3 이미지, 텍스트 수직으로 가운데 정렬하기  (0) 2017.06.02

페이징 구성하기



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
<!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>
    .paging {
        text-align: center;
    }
    .paging a {
        /*
        display: inline-block 인라인 요소의 특징과 블록 요소의 특징을 모두 갖는다
        크기를 가질 수 있으며 텍스트 정렬도 적용받는다
        */
        display: inline-block;
        
        font-weight: bold;
        text-decoration: none;
        padding: 5px 8px;
        border: 1px solid #ccc;
        color: #000;
        background-color: #F5F5DC;
    }
    /* 현재 페이징에 select 클래스를 적용한다*/
    .paging a.select {
        color: #fff;
        background-color: #FFA7A7;
    }
    </style>
</head>
 
<body>
    <div class="paging">
        <a class="select" href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
    </div>
</body>
</html>
cs



결과

저작자표시

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

HTML5/CSS3 background-repeat 배경이미지 반복여부 설정  (1) 2017.06.06
HTML5/CSS table 태그 쓰지 않고 테이블 표현하기  (0) 2017.06.05
HTML5/CSS3 word-break, white-space : 줄바꿈 속성  (0) 2017.06.03
HTML5/CSS3 이미지, 텍스트 수직으로 가운데 정렬하기  (0) 2017.06.02
HTML5/CSS3 text-index : 글자 들여쓰기  (0) 2017.06.01

word-break, white-space : 줄바꿈 속성



word-break : break-all  상위 블록의 width를 넘어서게 되면 단어를 깨뜨려 줄을 바꾸게 된다

white-space: nowrap    줄바꿈 금지

white-space: pre         작성한 그대로 (pre태그)

white-space: pre-wrap  pre효과와 비슷하지만 지정한 영역을 넘어가지 않음

white-space: pre-line    pre-wrap효과와 비슷하지만 띄어쓰기 공백은 한칸만 표현



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
<!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>
    div {
        width: 100%;
    }
    p {
        background: #CEFBC9;
    }
    
    /*
    word-break : break-all 상위 블록의 width를 넘어서게 되면 줄을 바꾸게 된다
    white-space: nowrap    줄바꿈 금지
    white-space: pre            작성한 그대로 (pre태그)
    white-space: pre-wrap  pre효과와 비슷하지만 지정한 영역을 넘어가지 않음
    white-space: pre-line  pre-wrap효과와 비슷하지만 띄어쓰기 공백은 한칸만 표현
    */
    p.word_break {
        word-break : break-all;
    }
    p.nowrap{
        white-space: nowrap;
    }
    p.pre {
        white-space: pre;
    }
    p.pre_wrap {
        white-space: pre-wrap;
    }
    p.pre_line {
        white-space: pre-line;
    }
    </style>
</head>
 
<body>
<div>
    <p class="word_break">이에 재판관 전원의 일치된 의견으로 주문을 선고합니다. 주문, 피청구인 대통령 박근혜를 파면한다.</p>
    <p class="nowrap">이에 재판관 전원의 일치된 의견으로 주문을 선고합니다. 주문, 피청구인 대통령 박근혜를 파면한다.</p>
    <p class="pre">이에 재판관 전원의 일치된 의견으로 주문을 선고합니다. 주문, 피청구인 대통령 박근혜를 파면한다.</p>
    <p class="pre_wrap">이에 재판관 전원의 일치된 의견으로 주문을 선고합니다. 주문, 피청구인 대통령 박근혜를 파면한다.</p>
    <p class="pre_line">이에 재판관 전원의 일치된 의견으로 주문을 선고합니다. 주문, 피청구인 대통령 박근혜를 파면한다.</p>
</div>
</body>
</html>
cs



결과

저작자표시

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

HTML5/CSS table 태그 쓰지 않고 테이블 표현하기  (0) 2017.06.05
HTML5/CSS3 페이징 구성하기  (0) 2017.06.04
HTML5/CSS3 이미지, 텍스트 수직으로 가운데 정렬하기  (0) 2017.06.02
HTML5/CSS3 text-index : 글자 들여쓰기  (0) 2017.06.01
HTML5/CSS3 letter-spacing, word-spacing, line-height : 글자 간격  (0) 2017.05.31

이미지, 텍스트 수직으로 가운데 정렬하기



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
<!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>
    /*
    이미지, 텍스트를 담을 div에 line-height 속성을 준다
    이미지 텍스트에 vertical-align: middle 속성을 준다
    */
    div {
        height: 200px;
        line-height: 200px;
        border: 1px solid;
        background: #DAD9FF;
    }
    /*
    vertical-align: baseline : 글자의 baseline에 맞춤
    vertical-align: top      : 부모요소의 상단에 맞춤
    vertical-align: middle      : 부모요소의 가운데에 맞춤
    vertical-align: bottom      : 부모요소의 하단에 맞춤
    
    vertical-align: super      : 부모요소의 위첨자에 맞춤
    vertical-align: sub      : 부모요소의 아래첨자에 맞춤
    vertical-align: text-top : 부모요소의 글꼴 상단에 맞춤
    vertical-align: text-bottom : 부모요소의 글꼴 하단에 맞춤
    */
    img.align {
        vertical-align: middle;
    }
    p {
        vertical-align: middle;
    }
    </style>
</head>
 
<body>
    <div>
        <img class="align" src="images/testimage.jpg" height="150px" />
    </div>
    <div>
        <span>가나다라마바사아자차카타파하</span>
    </div>
</body>
</html>
cs



결과



저작자표시

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

HTML5/CSS3 페이징 구성하기  (0) 2017.06.04
HTML5/CSS3 word-break, white-space : 줄바꿈 속성  (0) 2017.06.03
HTML5/CSS3 text-index : 글자 들여쓰기  (0) 2017.06.01
HTML5/CSS3 letter-spacing, word-spacing, line-height : 글자 간격  (0) 2017.05.31
HTML5/CSS3 @font-face : 폰트파일 사용하기  (0) 2017.05.30

text-index : 글자 들여쓰기



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
<!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 {
        font-size: 1.3em;
        background: #CEFBC9;
    }
    
    /* 
    text-index : 글자 들여쓰기 ( - 이면 내어쓰기가 됨)
    */
    p.letter {
        text-indent : 1em;
    }
    p.number {
        text-indent : -1em;
    }
    </style>
</head>
 
<body>
    <p class="letter">가나다라마바사아자차카타파하 아야어여오요우유으이 0123456789</p>
    <p class="number">1234567890</p>
</body>
</html>
cs



결과


저작자표시

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

HTML5/CSS3 word-break, white-space : 줄바꿈 속성  (0) 2017.06.03
HTML5/CSS3 이미지, 텍스트 수직으로 가운데 정렬하기  (0) 2017.06.02
HTML5/CSS3 letter-spacing, word-spacing, line-height : 글자 간격  (0) 2017.05.31
HTML5/CSS3 @font-face : 폰트파일 사용하기  (0) 2017.05.30
HTML5/CSS3 :first-letter, :first-line 선택자  (0) 2017.05.29

+ Recent posts

티스토리툴바