Type something to search...
to navigateto selectESC to close

09 문단

정보

📢 이미지다운로드

01. text-align

정보

👁️‍🗨️ 글자 정렬

1
<p class="txt1">한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어 있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과 동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수 있게 되는 것이다</p>
2
    <p class="txt2">한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어 있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과 동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수 있게 되는 것이다</p>
3
    <p class="txt3">한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어 있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과 동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수 있게 되는 것이다</p>
4
    <p class="txt4">한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어 있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과 동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수 있게 되는 것이다</p>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>Document</title>
8
    <style>
9
      p {
10
        /* 위 아래 */
11
        margin: 10px 110px;
12
        /* 사방 */
13
        padding: 10px;
14
        border: 1px solid crimson;
15
      }
16
      .txt1 {
17
        margin-bottom: 41px;
18
        border-style: dotted;
19
        border-color: rgb(20, 85, 220);
20
        border-width: 14px;
21
        text-align: left;
22
      }
23
      .txt2{
24
        text-align: right;
25
      }
26
      .txt3{
27
        text-align: center;
28
      }
29
      .txt4{
30
        text-align: justify;
31
      }
32
    </style>
33
  </head>
34
  <body>
35
    <p class="txt1">
36
      한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어
37
      있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과
38
      동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수
39
      있게 되는 것이다
40
    </p>
41
    <p class="txt2">
42
      한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어
43
      있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과
44
      동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수
45
      있게 되는 것이다
46
    </p>
47
    <p class="txt3">
48
      한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어
49
      있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과
50
      동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수
51
      있게 되는 것이다
52
    </p>
53
    <p class="txt4">
54
      한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어
55
      있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과
56
      동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수
57
      있게 되는 것이다
58
    </p>
59
  </body>
60
</html>

02. vertical-align

정보

👁️‍🗨️ 🔗MDN : inline 또는 table-cell box에서의 수직 정렬을 지정

1
<p>
2
        나는 자유다
3
        <img src="img/imfree.png" width="150" alt="자유">
4
    </p>
5
    <p class="valign">
6
        나는 자유다
7
        <img src="img/imfree.png" width="150" alt="자유">
8
    </p>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>Document</title>
8
    <style>
9
      p{border:1px solid #000;}
10
      .valign img{vertical-align: middle;}
11
    </style>
12
  </head>
13
  <body>
14
    <p>
15
      나는 자유다
16
      <img src="img/imfree.png" width="150" alt="자유" />
17
    </p>
18
    <p class="valign">
19
      나는 자유다
20
      <img src="img/imfree.png" width="150" alt="자유" />
21
    </p>
22
  </body>
23
</html>

03.text-indent

정보

👁️‍🗨️ 들여쓰기

1
<p>
2
        최저임금 인상이 을과 을의 전쟁으로 이어지고 있다.양대 노총은 자영업자 보호대책 마련을 건의했다. 임대료 상한제와 카드수수료, 가맹수수료가 문제가 되고 있는 가운데 최저임금만으로는 자영업자 문제도 임금노동자 문제도 완전히 해결할 수 없다는 목소리가 높아지고 있다.
3
    </p>
4
    <p class="paper">
5
        최저임금 인상이 을과 을의 전쟁으로 이어지고 있다.양대 노총은 자영업자 보호대책 마련을 건의했다. 임대료 상한제와 카드수수료, 가맹수수료가 문제가 되고 있는 가운데 최저임금만으로는 자영업자 문제도 임금노동자 문제도 완전히 해결할 수 없다는 목소리가 높아지고 있다.
6
    </p>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>text-indent</title>
8
    <style>
9
      p{
10
        padding:10px 50px;
11
      }
12
      /* 부모 블럭에 선언하면 자식 인라인에 적용 */
13
      .paper{
14
        text-indent: -999999999999px;
15
      }
16
    </style>
17
  </head>
18
  <body>
19
    <p>
20
      최저임금 인상이 을과 을의 전쟁으로 이어지고 있다.양대 노총은 자영업자
21
      보호대책 마련을 건의했다. 임대료 상한제와 카드수수료, 가맹수수료가 문제가
22
      되고 있는 가운데 최저임금만으로는 자영업자 문제도 임금노동자 문제도 완전히
23
      해결할 수 없다는 목소리가 높아지고 있다.
24
    </p>
25
    <p class="paper">
26
      <span>최저임금</span>
27
      <div>
28
         인상이 을과 을의 전쟁으로 이어지고 있다.양대 노총은 자영업자
29
        보호대책 마련을 건의했다. 임대료 상한제와 카드수수료, 가맹수수료가 문제가
30
        되고 있는 가운데 최저임금만으로는 자영업자 문제도 임금노동자 문제도 완전히
31
        해결할 수 없다는 목소리가 높아지고 있다.
32
      </div>
33
    </p>
34
  </body>
35
</html>

04.word-wrap, word-break

정보

👁️‍🗨️ 텍스트 줄바꿈

word-break 아시아, 비아시아 언어의 줄 바꿈을 모두 제어

  • normal: 기본값 / CJK 문자는 글자 기준, 비 CJK 문자는 단어 기준으로 줄 바꿈
  • break-all : 글자 기준으로 줄 바꿈
  • keep-all : 단어 기준으로 줄 바꿈
  • word-wrap: 비아시아 언어제어

1
<ul class="eng">
2
      <li>
3
        <p>이름 : 홍길동</p>
4
      </li>
5
      <li>
6
        <p>이메일 : hongkildong20180101koreapublishing20181231@hanmail.net</p>
7
        <p>이페이지는영어로부터커뮤니티에의하여번역되었습니다.MDNWebDocs에서한국커뮤니티에가입하여자세히알아보세요</p>
8
      </li>
9
    </ul>
10
    <ul class="wrapping">
11
      <li>
12
        <p>이름 : 홍길동</p>
13
      </li>
14
      <li>
15
        <p>이메일 : hongkildong20180101koreapublishing20181231@hanmail.net</p>
16
        <p>이페이지는영어로부터커뮤니티에의하여번역되었습니다.MDNWebDocs에서한국커뮤니티에가입하여자세히알아보세요</p>
17
      </li>
18
    </ul>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>Document</title>
8
    <style>
9
      ul{
10
        width:200px;
11
        border:1px solid #000;
12
      }
13
      .eng li{
14
        word-wrap: break-word;
15
      }
16
      .wrapping li{
17
        word-break: break-all;
18
      }
19
    </style>
20
  </head>
21
  <body>
22
    <ul class="eng">
23
      <li>
24
        <p>이름 : 홍길동</p>
25
      </li>
26
      <li>
27
        <p>이메일 : hongkildong20180101koreapublishing20181231@hanmail.net</p>
28
        <p>
29
          이페이지는영어로부터커뮤니티에의하여번역되었습니다.MDNWebDocs에서한국커뮤니티에가입하여자세히알아보세요
30
        </p>
31
      </li>
32
    </ul>
33
    <ul class="wrapping">
34
      <li>
35
        <p>이름 : 홍길동</p>
36
      </li>
37
      <li>
38
        <p>이메일 : hongkildong20180101koreapublishing20181231@hanmail.net</p>
39
        <p>
40
          이페이지는영어로부터커뮤니티에의하여번역되었습니다.MDNWebDocs에서한국커뮤니티에가입하여자세히알아보세요
41
        </p>
42
      </li>
43
    </ul>
44
  </body>
45
</html>

05. white-space

정보

👁️‍🗨️ 공백 처리

🔗MDN

1
white-space: normal;
2
white-space: nowrap;
3
white-space: pre;
4
white-space: pre-wrap;
5
white-space: pre-line;
6
white-space: break-spaces;

1
<p class="white1">언니는 푸르른 산보다 민둥산을 좋아한다.
2
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
3
<p class="white2">언니는 푸르른 산보다 민둥산을 좋아한다.
4
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
5
<p class="white3">언니는 푸르른 산보다 민둥산을 좋아한다.
6
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
7
<p class="white4">언니는 푸르른 산보다 민둥산을 좋아한다.
8
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
9
<p class="white5">언니는 푸르른 산보다 민둥산을 좋아한다.
10
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>Document</title>
8
    <style>
9
      p{
10
        width:400px;
11
        border:1px solid;
12
      }
13
      .white1{
14
        white-space: normal;
15
      }
16
      .white2{
17
        white-space: nowrap;
18
      }
19
      .white3{
20
        white-space: pre;
21
      }
22
      .white4{
23
        white-space: pre-wrap;
24
      }
25
      .white5{
26
        white-space: pre-line;
27
      }
28
    </style>
29
  </head>
30
  <body>
31
    <p class="white1">
32
      aaaaaaaaaaaaa bbbbbbbbbbbbccccccc cccdddddddddeeeeeeeeee fffffffffffghgggggggggggg.
33
    </p>
34
    <p class="white2">
35
      언니는 푸르른 산보다 민둥산을 좋아한다. 이마가 넓어서인지 모르겠지만
36
      아무튼 산꼭대기는 비어 있어야 한다.
37
    </p>
38
    <p class="white3">
39
      언니는 푸르른
40
      산보다 민둥산을 좋아한다.
41
      이마가 넓어서인지 모르겠지만
42
      아무튼 산꼭대기는 비어 있어야 한다.
43
    </p>
44
    <p class="white4">
45
      언니는 푸르른                  산보다 민둥산
46


47


48


49


50


51


52


53
      을 좋아한다. 이마가 넓어서인지 모르겠지만아무튼 산꼭대기는 비어 있어야 한다.
54
    </p>
55
    <p class="white5">
56
      언니는
57


58


59


60


61


62


63


64


65


66
      푸르른 산보다 민둥산을 좋아한다. 이마가 넓어서인지 모르겠지만
67
      아무튼 산꼭대기는 비어 있어야 한다.
68
    </p>
69
  </body>
70
</html>

06. text-overflow

정보

👁️‍🗨️ 말줄임표

  • 블럭요소에 적용
  • 아래의 속성 필요
1
width: 200px;
2
overflow: hidden;
3
white-space: nowrap;
4
text-overflow: ellipsis;

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>말줄임 기호</title>
6
<style type="text/css">
7


8
</style>
9
</head>
10
<body>
11
   <ul class="notice">
12
       <li><a href="#">
13
            <h3>시간 배분을 위하여 현명한 판단을 바랍니다. </h3></a></li>
14
       <li><a href="#">
15
            <h3>욕심껏 내용을 채우는 것도 좋겠습니다. </h3></a></li>
16
       <li><a href="#">
17
            <h3>결과물을 볼 수 있어야 하는 것이 우선입니다.</h3></a></li>
18
   </ul>
19
</body>
20
</html>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>말줄임 기호</title>
6
    <style>
7
      ul,
8
      li,
9
      h3 {
10
        margin: 0;
11
        padding: 0;
12
      }
13
      a{
14
        display: block;
15
        margin:10px;
16
        text-decoration: none;
17
        color:darkblue;
18
      }
19
      .notice a h3{
20
        width:200px;
21
        overflow: hidden;
22
        white-space: nowrap;
23
        text-overflow: ellipsis;
24
        border: 1px solid;
25
      }
26
    </style>
27
  </head>
28
  <body>
29
    <ul class="notice">
30
      <li>
31
        <a href="#"> <h3>시간 배분을 위하여 현명한 판단을 바랍니다.</h3></a>
32
      </li>
33
      <li>
34
        <a href="#"> <h3>욕심껏 내용을 채우는 것도 좋겠습니다.</h3></a>
35
      </li>
36
      <li>
37
        <a href="#"> <h3>결과물을 볼 수 있어야 하는 것이 우선입니다.</h3></a>
38
      </li>
39
    </ul>
40
  </body>
41
</html>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3


4
<head>
5
  <meta charset="utf-8">
6
  <title>말줄임 기호</title>
7
  <style>
8
    * {
9
      margin: 0;
10
      padding: 0
11
    }
12


13
    ul {
14
      list-style-type: none;
15
    }
16


17
    a {
18
      text-decoration: none;
19
      color: darkblue;
20
      display: block;
21
      margin: 10px;
22
    }
23


24
    /* 너비, 줄바꿈X, 넘치면숨김, 말줄임표 */
25
    .notice a .h3 {
26
      width: 200px;
27
      border: 1px solid;
28
      white-space: nowrap;
29
      /* 넘치는거 어떻게해 */
30
      overflow: scroll;
31
      overflow: hidden;
32
      text-overflow: ellipsis;
33
    }
34


35
    .notice a .multi {
36
      width: 200px;
37
      border: 1px solid;
38
      display: -webkit-box;
39
      -webkit-line-clamp: 2;
40
      -webkit-box-orient: vertical;
41
      overflow: hidden;
42
      text-overflow: ellipsis;
43
    }
44
  </style>
45
</head>
46


47
<body>
48
  <ul class="notice">
49
    <li><a href="#">
50
        <h3 class="h3">시간 배분을 위하여 현명한 판단을 바랍니다. </h3>
51
      </a></li>
52
    <li><a href="#">
53
        <h3>욕심껏 내용을 채우는 것도 좋겠습니다. </h3>
54
      </a></li>
55
    <li><a href="#">
56
        <h3 class="multi">결과물을 볼 수 있어야 하는 것이 우선입니다.결과물을 볼 수 있어야 하는 것이 우선입니다.결과물을 볼 수 있어야 하는 것이 우선입니다.결과물을 볼 수 있어야 하는 것이 우선입니다.</h3>
57
      </a></li>
58
  </ul>
59
</body>
60


61
</html>

07. display

정보

👁️‍🗨️ 🔗MDN 디스플레이 속성지정

  • 기타 속성
속성설명
inherit상속
table블록 레벨의 표
inline-table인라인 레벨의 표
table-rowtr
table-row-grouptbody
table-header-groupthead
table-footer-grouptfoot
table-columncol
table-column-groupcolgroup
table-celltd, th
table-captioncaption
list-itemli 블록요소 안에 사용가능하며 불릿기호 생김

① block, inline, inline-block

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>블록과 인라인</title>
6
<style type="text/css">
7


8
</style>
9
</head>
10
<body>
11
  <ul class="gnb">
12
    <li><a href="#">Company</a></li>
13
    <li><a href="#">Product</a></li>
14
    <li><a href="#">Service</a></li>
15
    <li><a href="#">Community</a></li>
16
  </ul>
17
</body>
18
</html>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>블록과 인라인</title>
6
    <style type="text/css">
7
      ul,
8
      li,
9
      h3 {
10
        margin: 0;
11
        padding: 0;
12
      }
13
      li {
14
        list-style: none;
15
      }
16
      /*
17
        display:inline -> 크기x , 옆으로
18
        display:inline-block -> 크기o ,옆으로
19
        display:block -> 크기o, 옆으로x
20
     */
21
      .gnb li {
22
        display: inline;
23
      }
24
      .gnb li a{
25
        display: inline-block;
26
        width:100px;
27
        background-color: brown;
28
        color:white;
29
        text-decoration: none;
30
        height: 35px;
31
        text-align: center;
32
        line-height: 35px;
33
      }
34
      .gnb li a:hover{
35
       background: blue;
36
       text-decoration: underline;
37
      }
38
    </style>
39
  </head>
40
  <body>
41
    <span>
42
      <div>aaaa</div>
43
    </span>
44
    <ul class="gnb">
45
      <li><a href="#">Company</a></li>
46
      <li><a href="#">Product</a></li>
47
      <li><a href="#">Service</a></li>
48
      <li><a href="#">Community</a></li>
49
    </ul>
50
  </body>
51
</html>

② table-cell

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>table-cell</title>
6
<style type="text/css">
7
    p {
8
        padding: 10px;
9
        background-color: antiquewhite;
10
    }
11


12
</style>
13
</head>
14
<body>
15
    <p class="valign1">잉여인간이 행복한 나라</p>
16
    <p class="valign2">정부는 아이를 많이 낳으라고 하지만 그 아이들을 다 살릴 수도 없는 게 지금의 현실이다. 돈을 주는 것 외에 행복한 삶을 살도록 해주는 것이 선진국으로 가는 길일 것이다.</p>
17
    <p class="valign3">정부는 아이를 많이 낳으라고 하지만 그 아이들을 다 살릴 수도 없는 게 지금의 현실이다. 돈을 주는 것 외에 행복한 삶을 살도록 해주는 것이 선진국으로 가는 길일 것이다.</p>
18
</body>
19
</html>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>table-cell</title>
6
    <style type="text/css">
7
      p {
8
        padding: 10px;
9
        background-color: antiquewhite;
10
      }
11
      .valign1 {
12
        height: 100px;
13
        line-height: 100px;
14
      }
15
      .valign2 {
16
        padding-top: 50px;
17
        padding-bottom: 50px;
18
      }
19
      .valign3 {
20
        height: 100px;
21
        display:table-cell;
22
        vertical-align: middle;
23
      }
24
    </style>
25
  </head>
26
  <body>
27
    <p class="valign1">잉여인간이 행복한 나라</p>
28
    <p class="valign2">
29
      정부는 아이를 많이 낳으라고 하지만 그 아이들을 다 살릴 수도 없는 게 지금의
30
      현실이다. 돈을 주는 것 외에 행복한 삶을 살도록 해주는 것이 선진국으로 가는
31
      길일 것이다.
32
    </p>
33
    <p class="valign3">
34
      정부는 아이를 많이 낳으라고 하지만 그 아이들을 다 살릴 수도 없는 게 지금의
35
      현실이다. 돈을 주는 것 외에 행복한 삶을 살도록 해주는 것이 선진국으로 가는
36
      길일 것이다.
37
    </p>
38
  </body>
39
</html>

③ hidden

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>숨기기</title>
6
<style>
7


8
</style>
9
</head>
10
<body>
11
   <div class="box">
12
        <p><strong>이름 :</strong>홍길동</p>
13
        <p><strong>연락처 :</strong>서울 종로구 세검정 </p>
14
    </div>
15
   <div class="box">
16
        <p><strong class="hdd">이름 :</strong>홍길동</p>
17
        <p><strong class="hdd">연락처 :</strong>서울 종로구 세검정 </p>
18
    </div>
19
   <div class="box">
20
        <p><strong class="hdd2">이름 :</strong>홍길동</p>
21
        <p><strong class="hdd2">연락처 :</strong>서울 종로구 세검정 </p>
22
    </div>
23
</body>
24
</html>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>숨기기</title>
6
    <style type="text/css">
7
      .box {
8
        margin: 10px;
9
      }
10
      .hdd {
11
        color: red;
12
        display: none;
13
      }
14
      .box:nth-child(2):hover .hdd{
15
        display: inline;
16
      }
17
      .hdd2 {
18
        color: rgba(255,0,0,0);
19
        /* visibility: hidden; */
20
        /* opacity: 0; */
21
      }
22
      .box:nth-child(3):hover .hdd2 {
23
        color: rgba(255,0,0,1);
24
        /* visibility: visible; */
25
        /* opacity: 1; */
26
      }
27
      /* 화면의 가시성
28
        display => 공간도 삭제
29
        color 속성값으로 불투명도 조정=>상속됨,
30
        opacity =>상속안됨
31
      */
32
    </style>
33
  </head>
34
  <body>
35
    <div class="box">
36
      <p><strong>이름 :</strong>홍길동</p>
37
      <p><strong>연락처 :</strong>서울 종로구 세검정</p>
38
    </div>
39
    <div class="box">
40
      <p><strong class="hdd">이름 :</strong>홍길동</p>
41
      <p><strong class="hdd">연락처 :</strong>서울 종로구 세검정</p>
42
    </div>
43
    <div class="box">
44
      <p><strong class="hdd2">이름 :</strong>홍길동</p>
45
      <p><strong class="hdd2">연락처 :</strong>서울 종로구 세검정</p>
46
    </div>
47
  </body>
48
</html>

08. overflow

정보

👁️‍🗨️ 넘치는 콘텐츠의 처리

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>overflow</title>
6
<style type="text/css">
7


8
</style>
9
</head>
10
<body>
11
   <h3>서비스 이용약관</h3>
12
    <p class="agree">
13
        제17조 (서비스의 변경 및 내용수정)<br>
14
        ① 회원은 회사가 제공하는 서비스를 이 약관 및 운영정책에 따라 이용할 수 있습니다.<br>
15
        ② 회사는 서비스를 통하여 회원에게 제공하는 컨텐츠에 대하여 제작, 변경, 유지, 보수에 관한 포괄적인 권한을 가집니다.<br>
16
        ③ 회사가 상당한 이유가 있는 경우에 운영상, 기술상의 필요에 따라 서비스를 수정할 수 있으며, 수정하는 경우에는 변경 후 서비스 초기화면이나 공지사항 게시판 등을 통하여 공지합니다.
17
    </p>
18
</body>
19
</html>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>overflow</title>
6
    <style type="text/css">
7
      html {
8
        overflow-y: scroll;
9
      }
10
      .agree {
11
        width: 500px;
12
        height: 80px;
13
        border: 1px solid;
14
        /* x,y 중 넘치는 쪽 자동 스크롤생성 */
15
        overflow: auto;
16
        /* 강제 스크롤생성 */
17
        overflow: scroll;
18
        /* 넘쳐도 보임*/
19
        overflow: visible;
20
        /* 넘치면 자름*/
21
        overflow: hidden;
22
        overflow-y: scroll;
23
      }
24
    </style>
25
  </head>
26
  <body>
27
    <h3>서비스 이용약관</h3>
28
    <a class="agree">
29
      제17조 (서비스의 변경 및 내용수정)<br />
30
      ① 회원은 회사가 제공하는 서비스를 이 약관 및 운영정책에 따라 이용할 수
31
      있습니다.<br />
32
      ② 회사는 서비스를 통하여 회원에게 제공하는 컨텐츠에 대하여 제작, 변경,
33
      유지, 보수에 관한 포괄적인 권한을 가집니다.<br />
34
      ③ 회사가 상당한 이유가 있는 경우에 운영상, 기술상의 필요에 따라 서비스를
35
      수정할 수 있으며, 수정하는 경우에는 변경 후 서비스 초기화면이나 공지사항
36
      게시판 등을 통하여 공지합니다.
37
    </a>
38
  </body>
39
</html>

형성퀴즈1

완성이미지

드래그시 화면 아이콘은 웹검색으로 적용할것

영상과 인쇄의 공존
  영상의 발달로 인해 인쇄는 곧 사라질 것처럼 생각했지만 예상을 뒤집고 인쇄물들은 점점 고급화를 향해 달리고 있다. e-book의 출현과 함께 서점에서 책을 사모으는 취미는 여전하고 FACEBOOK의 도전에도 불구하고 많은 사람들은 책장을 손으로 넘기고 있다.
      좋은 인쇄물을 갖는 것은 큰 즐거움이며 스마트폰을 두드리는 손가락에 의해 흥미로운 책장도 계속 넘어간다.
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>문단 관련 스타일</title>
6
    <style type="text/css">
7


8
    </style>
9
  </head>
10
  <body>
11


12
    <h1>영상과 인쇄의 공존</h1>
13


14
    <p>
15
      영상의 발달로 인해 인쇄는 곧 사라질 것처럼 생각했지만 예상을 뒤집고 인쇄물들은 점점 고급화를 향해 달리고 있다. e-book의 출현과 함께 서점에서 책을 사모으는 취미는 여전하고 FACEBOOK의 도전에도 불구하고 많은 사람들은 책장을 손으로 넘기고 있다.
16
      좋은 인쇄물을 갖는 것은 큰 즐거움이며 스마트폰을 두드리는 손가락에 의해 흥미로운 책장도 계속 넘어간다.
17
    </p>
18
  </body>
19
</html>