03. 문단

<p class="txt1">한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어 있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과 동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수 있게 되는 것이다</p>
    <p class="txt2">한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어 있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과 동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수 있게 되는 것이다</p>
    <p class="txt3">한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어 있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과 동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수 있게 되는 것이다</p>
    <p class="txt4">한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어 있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과 동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수 있게 되는 것이다</p>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        /* 위 아래 */
        margin: 10px 110px;
        /* 사방 */
        padding: 10px;
        border: 1px solid crimson;
      }
      .txt1 {
        margin-bottom: 41px;
        border-style: dotted;
        border-color: rgb(20, 85, 220);
        border-width: 14px;
        text-align: left;
      }
      .txt2{
        text-align: right;
      }
      .txt3{
        text-align: center;
      }
      .txt4{
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <p class="txt1">
      한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어
      있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과
      동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수
      있게 되는 것이다
    </p>
    <p class="txt2">
      한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어
      있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과
      동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수
      있게 되는 것이다
    </p>
    <p class="txt3">
      한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어
      있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과
      동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수
      있게 되는 것이다
    </p>
    <p class="txt4">
      한국형 웹콘텐츠 접근성 지침 2.0은 원칙, 지침, 검사 항목의 3단계로 구성되어
      있다. 본 지침을 준수할 경우 비장애인, 노인 등이 장애인, 젊은이 등과
      동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고 이를 운영하고 이해할 수
      있게 되는 것이다
    </p>
  </body>
</html>

<p>
        나는 자유다
        <img src="img/imfree.png" width="150" alt="자유">
    </p>
    <p class="valign">
        나는 자유다
        <img src="img/imfree.png" width="150" alt="자유">
    </p>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p{border:1px solid #000;}
      .valign img{vertical-align: middle;}
    </style>
  </head>
  <body>
    <p>
      나는 자유다
      <img src="img/imfree.png" width="150" alt="자유" />
    </p>
    <p class="valign">
      나는 자유다
      <img src="img/imfree.png" width="150" alt="자유" />
    </p>
  </body>
</html>

<p>
        최저임금 인상이 을과 을의 전쟁으로 이어지고 있다.양대 노총은 자영업자 보호대책 마련을 건의했다. 임대료 상한제와 카드수수료, 가맹수수료가 문제가 되고 있는 가운데 최저임금만으로는 자영업자 문제도 임금노동자 문제도 완전히 해결할 수 없다는 목소리가 높아지고 있다.
    </p>
    <p class="paper">
        최저임금 인상이 을과 을의 전쟁으로 이어지고 있다.양대 노총은 자영업자 보호대책 마련을 건의했다. 임대료 상한제와 카드수수료, 가맹수수료가 문제가 되고 있는 가운데 최저임금만으로는 자영업자 문제도 임금노동자 문제도 완전히 해결할 수 없다는 목소리가 높아지고 있다.
    </p>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text-indent</title>
    <style>
      p{
        padding:10px 50px;
      }
      /* 부모 블럭에 선언하면 자식 인라인에 적용 */
      .paper{
        text-indent: -999999999999px;
      }
    </style>
  </head>
  <body>
    <p>
      최저임금 인상이 을과 을의 전쟁으로 이어지고 있다.양대 노총은 자영업자
      보호대책 마련을 건의했다. 임대료 상한제와 카드수수료, 가맹수수료가 문제가
      되고 있는 가운데 최저임금만으로는 자영업자 문제도 임금노동자 문제도 완전히
      해결할 수 없다는 목소리가 높아지고 있다.
    </p>
    <p class="paper">
      <span>최저임금</span>
      <div>
         인상이 을과 을의 전쟁으로 이어지고 있다.양대 노총은 자영업자
        보호대책 마련을 건의했다. 임대료 상한제와 카드수수료, 가맹수수료가 문제가
        되고 있는 가운데 최저임금만으로는 자영업자 문제도 임금노동자 문제도 완전히
        해결할 수 없다는 목소리가 높아지고 있다.
      </div>
    </p>
  </body>
</html>

<ul class="eng">
			<li>
				<p>이름 : 홍길동</p>
			</li>
			<li>
				<p>이메일 : hongkildong20180101koreapublishing20181231@hanmail.net</p>
				<p>이페이지는영어로부터커뮤니티에의하여번역되었습니다.MDNWebDocs에서한국커뮤니티에가입하여자세히알아보세요</p>
			</li>
		</ul>
		<ul class="wrapping">
			<li>
				<p>이름 : 홍길동</p>
			</li>
			<li>
				<p>이메일 : hongkildong20180101koreapublishing20181231@hanmail.net</p>
				<p>이페이지는영어로부터커뮤니티에의하여번역되었습니다.MDNWebDocs에서한국커뮤니티에가입하여자세히알아보세요</p>
			</li>
		</ul>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul{
        width:200px;
        border:1px solid #000;
      }
      .eng li{
        word-wrap: break-word;
      }
      .wrapping li{
        word-break: break-all;
      }
    </style>
  </head>
  <body>
    <ul class="eng">
      <li>
        <p>이름 : 홍길동</p>
      </li>
      <li>
        <p>이메일 : hongkildong20180101koreapublishing20181231@hanmail.net</p>
        <p>
          이페이지는영어로부터커뮤니티에의하여번역되었습니다.MDNWebDocs에서한국커뮤니티에가입하여자세히알아보세요
        </p>
      </li>
    </ul>
    <ul class="wrapping">
      <li>
        <p>이름 : 홍길동</p>
      </li>
      <li>
        <p>이메일 : hongkildong20180101koreapublishing20181231@hanmail.net</p>
        <p>
          이페이지는영어로부터커뮤니티에의하여번역되었습니다.MDNWebDocs에서한국커뮤니티에가입하여자세히알아보세요
        </p>
      </li>
    </ul>
  </body>
</html>

<p class="white1">언니는 푸르른 산보다 민둥산을 좋아한다.
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
<p class="white2">언니는 푸르른 산보다 민둥산을 좋아한다.
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
<p class="white3">언니는 푸르른 산보다 민둥산을 좋아한다.
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
<p class="white4">언니는 푸르른 산보다 민둥산을 좋아한다.
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
<p class="white5">언니는 푸르른 산보다 민둥산을 좋아한다.
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p{
        width:400px;
        border:1px solid;
      }
      .white1{
        white-space: normal;
      }
      .white2{
        white-space: nowrap;
      }
      .white3{
        white-space: pre;
      }
      .white4{
        white-space: pre-wrap;
      }
      .white5{
        white-space: pre-line;
      }
    </style>
  </head>
  <body>
    <p class="white1">
      aaaaaaaaaaaaa bbbbbbbbbbbbccccccc cccdddddddddeeeeeeeeee fffffffffffghgggggggggggg.
    </p>
    <p class="white2">
      언니는 푸르른 산보다 민둥산을 좋아한다. 이마가 넓어서인지 모르겠지만
      아무튼 산꼭대기는 비어 있어야 한다.
    </p>
    <p class="white3">
      언니는 푸르른
      산보다 민둥산을 좋아한다.
      이마가 넓어서인지 모르겠지만
      아무튼 산꼭대기는 비어 있어야 한다.
    </p>
    <p class="white4">
      언니는 푸르른                  산보다 민둥산
      을 좋아한다. 이마가 넓어서인지 모르겠지만아무튼 산꼭대기는 비어 있어야 한다.
    </p>
    <p class="white5">
      언니는
      푸르른 산보다 민둥산을 좋아한다. 이마가 넓어서인지 모르겠지만
      아무튼 산꼭대기는 비어 있어야 한다.
    </p>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>말줄임 기호</title>
<style type="text/css">
</style>
</head>
<body>
   <ul class="notice">
       <li><a href="#">
            <h3>시간 배분을 위하여 현명한 판단을 바랍니다. </h3></a></li>
       <li><a href="#">
            <h3>욕심껏 내용을 채우는 것도 좋겠습니다. </h3></a></li>
       <li><a href="#">
            <h3>결과물을 볼 수 있어야 하는 것이 우선입니다.</h3></a></li>
   </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>말줄임 기호</title>
    <style>
      ul,
      li,
      h3 {
        margin: 0;
        padding: 0;
      }
      a{
        display: block;
        margin:10px;
        text-decoration: none;
        color:darkblue;
      }
      .notice a h3{
        width:200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <ul class="notice">
      <li>
        <a href="#"> <h3>시간 배분을 위하여 현명한 판단을 바랍니다.</h3></a>
      </li>
      <li>
        <a href="#"> <h3>욕심껏 내용을 채우는 것도 좋겠습니다.</h3></a>
      </li>
      <li>
        <a href="#"> <h3>결과물을 볼 수 있어야 하는 것이 우선입니다.</h3></a>
      </li>
    </ul>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>말줄임 기호</title>
  <style>
{
      margin: 0;
      padding: 0
    }
    ul {
      list-style-type: none;
    }
    a {
      text-decoration: none;
      color: darkblue;
      display: block;
      margin: 10px;
    }
    /* 너비, 줄바꿈X, 넘치면숨김, 말줄임표 */
    .notice a .h3 {
      width: 200px;
      border: 1px solid;
      white-space: nowrap;
      /* 넘치는거 어떻게해 */
      overflow: scroll;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .notice a .multi {
      width: 200px;
      border: 1px solid;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <ul class="notice">
    <li><a href="#">
        <h3 class="h3">시간 배분을 위하여 현명한 판단을 바랍니다. </h3>
      </a></li>
    <li><a href="#">
        <h3>욕심껏 내용을 채우는 것도 좋겠습니다. </h3>
      </a></li>
    <li><a href="#">
        <h3 class="multi">결과물을 볼 수 있어야 하는 것이 우선입니다.결과물을 볼 수 있어야 하는 것이 우선입니다.결과물을 볼 수 있어야 하는 것이 우선입니다.결과물을 볼 수 있어야 하는 것이 우선입니다.</h3>
      </a></li>
  </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>블록과 인라인</title>
<style type="text/css">
</style>
</head>
<body>
	<ul class="gnb">
		<li><a href="#">Company</a></li>
		<li><a href="#">Product</a></li>
		<li><a href="#">Service</a></li>
		<li><a href="#">Community</a></li>
	</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>블록과 인라인</title>
    <style type="text/css">
      ul,
      li,
      h3 {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      /*
        display:inline -> 크기x , 옆으로
        display:inline-block -> 크기o ,옆으로
        display:block -> 크기o, 옆으로x
     */
      .gnb li {
        display: inline;
      }
      .gnb li a{
        display: inline-block;
        width:100px;
        background-color: brown;
        color:white;
        text-decoration: none;
        height: 35px;
        text-align: center;
        line-height: 35px;
      }
      .gnb li a:hover{
       background: blue;
       text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <span>
      <div>aaaa</div>
    </span>
    <ul class="gnb">
      <li><a href="#">Company</a></li>
      <li><a href="#">Product</a></li>
      <li><a href="#">Service</a></li>
      <li><a href="#">Community</a></li>
    </ul>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>table-cell</title>
<style type="text/css">
    p {
        padding: 10px;
        background-color: antiquewhite;
    }
</style>
</head>
<body>
    <p class="valign1">잉여인간이 행복한 나라</p>
    <p class="valign2">정부는 아이를 많이 낳으라고 하지만 그 아이들을 다 살릴 수도 없는 게 지금의 현실이다. 돈을 주는 것 외에 행복한 삶을 살도록 해주는 것이 선진국으로 가는 길일 것이다.</p>
    <p class="valign3">정부는 아이를 많이 낳으라고 하지만 그 아이들을 다 살릴 수도 없는 게 지금의 현실이다. 돈을 주는 것 외에 행복한 삶을 살도록 해주는 것이 선진국으로 가는 길일 것이다.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>table-cell</title>
    <style type="text/css">
      p {
        padding: 10px;
        background-color: antiquewhite;
      }
      .valign1 {
        height: 100px;
        line-height: 100px;
      }
      .valign2 {
        padding-top: 50px;
        padding-bottom: 50px;
      }
      .valign3 {
        height: 100px;
        display:table-cell;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <p class="valign1">잉여인간이 행복한 나라</p>
    <p class="valign2">
      정부는 아이를 많이 낳으라고 하지만 그 아이들을 다 살릴 수도 없는 게 지금의
      현실이다. 돈을 주는 것 외에 행복한 삶을 살도록 해주는 것이 선진국으로 가는
      길일 것이다.
    </p>
    <p class="valign3">
      정부는 아이를 많이 낳으라고 하지만 그 아이들을 다 살릴 수도 없는 게 지금의
      현실이다. 돈을 주는 것 외에 행복한 삶을 살도록 해주는 것이 선진국으로 가는
      길일 것이다.
    </p>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>숨기기</title>
<style>
</style>
</head>
<body>
   <div class="box">
        <p><strong>이름 :</strong>홍길동</p>
        <p><strong>연락처 :</strong>서울 종로구 세검정 </p>
    </div>
   <div class="box">
        <p><strong class="hdd">이름 :</strong>홍길동</p>
        <p><strong class="hdd">연락처 :</strong>서울 종로구 세검정 </p>
    </div>
   <div class="box">
        <p><strong class="hdd2">이름 :</strong>홍길동</p>
        <p><strong class="hdd2">연락처 :</strong>서울 종로구 세검정 </p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>숨기기</title>
    <style type="text/css">
      .box {
        margin: 10px;
      }
      .hdd {
        color: red;
        display: none;
      }
      .box:nth-child(2):hover .hdd{
        display: inline;
      }
      .hdd2 {
        color: rgba(255,0,0,0);
        /* visibility: hidden; */
        /* opacity: 0; */
      }
      .box:nth-child(3):hover .hdd2 {
        color: rgba(255,0,0,1);
        /* visibility: visible; */
        /* opacity: 1; */
      }
      /* 화면의 가시성
        display => 공간도 삭제
        color 속성값으로 불투명도 조정=>상속됨,
        opacity =>상속안됨
      */
    </style>
  </head>
  <body>
    <div class="box">
      <p><strong>이름 :</strong>홍길동</p>
      <p><strong>연락처 :</strong>서울 종로구 세검정</p>
    </div>
    <div class="box">
      <p><strong class="hdd">이름 :</strong>홍길동</p>
      <p><strong class="hdd">연락처 :</strong>서울 종로구 세검정</p>
    </div>
    <div class="box">
      <p><strong class="hdd2">이름 :</strong>홍길동</p>
      <p><strong class="hdd2">연락처 :</strong>서울 종로구 세검정</p>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>overflow</title>
<style type="text/css">
</style>
</head>
<body>
   <h3>서비스 이용약관</h3>
    <p class="agree">
        제17조 (서비스의 변경 및 내용수정)<br>
        ① 회원은 회사가 제공하는 서비스를 이 약관 및 운영정책에 따라 이용할 수 있습니다.<br>
        ② 회사는 서비스를 통하여 회원에게 제공하는 컨텐츠에 대하여 제작, 변경, 유지, 보수에 관한 포괄적인 권한을 가집니다.<br>
        ③ 회사가 상당한 이유가 있는 경우에 운영상, 기술상의 필요에 따라 서비스를 수정할 수 있으며, 수정하는 경우에는 변경 후 서비스 초기화면이나 공지사항 게시판 등을 통하여 공지합니다.
    </p>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>overflow</title>
    <style type="text/css">
      html {
        overflow-y: scroll;
      }
      .agree {
        width: 500px;
        height: 80px;
        border: 1px solid;
        /* x,y 중 넘치는 쪽 자동 스크롤생성 */
        overflow: auto;
        /* 강제 스크롤생성 */
        overflow: scroll;
        /* 넘쳐도 보임*/
        overflow: visible;
        /* 넘치면 자름*/
        overflow: hidden;
        overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <h3>서비스 이용약관</h3>
    <a class="agree">
      제17조 (서비스의 변경 및 내용수정)<br />
      ① 회원은 회사가 제공하는 서비스를 이 약관 및 운영정책에 따라 이용할 수
      있습니다.<br />
      ② 회사는 서비스를 통하여 회원에게 제공하는 컨텐츠에 대하여 제작, 변경,
      유지, 보수에 관한 포괄적인 권한을 가집니다.<br />
      ③ 회사가 상당한 이유가 있는 경우에 운영상, 기술상의 필요에 따라 서비스를
      수정할 수 있으며, 수정하는 경우에는 변경 후 서비스 초기화면이나 공지사항
      게시판 등을 통하여 공지합니다.
    </a>
  </body>
</html>

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

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