문단
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
Info: 📢 이미지다운로드
01. text-align
Info: 👁️🗨️ 글자 정렬
ex2-28.html
<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>
ex2-28.html
<!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>
02. vertical-align
Info: 👁️🗨️ 🔗MDN : inline 또는 table-cell box에서의 수직 정렬을 지정
ex2-29.html
<p>
나는 자유다
<img src="img/imfree.png" width="150" alt="자유">
</p>
<p class="valign">
나는 자유다
<img src="img/imfree.png" width="150" alt="자유">
</p>
ex2-29.html
<!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>
03.text-indent
Info: 👁️🗨️ 들여쓰기
ex2-30.html
<p>
최저임금 인상이 을과 을의 전쟁으로 이어지고 있다.양대 노총은 자영업자 보호대책 마련을 건의했다. 임대료 상한제와 카드수수료, 가맹수수료가 문제가 되고 있는 가운데 최저임금만으로는 자영업자 문제도 임금노동자 문제도 완전히 해결할 수 없다는 목소리가 높아지고 있다.
</p>
<p class="paper">
최저임금 인상이 을과 을의 전쟁으로 이어지고 있다.양대 노총은 자영업자 보호대책 마련을 건의했다. 임대료 상한제와 카드수수료, 가맹수수료가 문제가 되고 있는 가운데 최저임금만으로는 자영업자 문제도 임금노동자 문제도 완전히 해결할 수 없다는 목소리가 높아지고 있다.
</p>
ex2-30.html
<!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>
04.word-wrap, word-break
Info: 👁️🗨️ 텍스트 줄바꿈
word-break 아시아, 비아시아 언어의 줄 바꿈을 모두 제어
- normal: 기본값 / CJK 문자는 글자 기준, 비 CJK 문자는 단어 기준으로 줄 바꿈
- break-all : 글자 기준으로 줄 바꿈
- keep-all : 단어 기준으로 줄 바꿈
- word-wrap: 비아시아 언어제어
ex2-31.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>
ex2-31.html
<!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>
05. white-space
Info: 👁️🗨️ 공백 처리
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
ex2-33html
<p class="white1">언니는 푸르른 산보다 민둥산을 좋아한다.
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
<p class="white2">언니는 푸르른 산보다 민둥산을 좋아한다.
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
<p class="white3">언니는 푸르른 산보다 민둥산을 좋아한다.
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
<p class="white4">언니는 푸르른 산보다 민둥산을 좋아한다.
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
<p class="white5">언니는 푸르른 산보다 민둥산을 좋아한다.
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.</p>
ex2-33html
<!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>
06. text-overflow
Info: 👁️🗨️ 말줄임표
- 블럭요소에 적용
- 아래의 속성 필요
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
ex2-34.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>
ex2-34.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>
07. display
Info: 👁️🗨️ 🔗MDN 디스플레이 속성지정
- 기타 속성
| 속성 | 설명 |
|---|---|
| inherit | 상속 |
| table | 블록 레벨의 표 |
| inline-table | 인라인 레벨의 표 |
| table-row | tr |
| table-row-group | tbody |
| table-header-group | thead |
| table-footer-group | tfoot |
| table-column | col |
| table-column-group | colgroup |
| table-cell | td, th |
| table-caption | caption |
| list-item | li 블록요소 안에 사용가능하며 불릿기호 생김 |
① block, inline, inline-block
ex2-35.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>
ex2-35.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>
② table-cell
ex2-36.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>
ex2-36.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>
③ hidden
ex2-37.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>
ex2-37.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>
08. overflow
Info: 👁️🗨️ 넘치는 콘텐츠의 처리
ex2-38.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>
ex2-38.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>
형성퀴즈1
완성이미지
리소스
영상과 인쇄의 공존
영상의 발달로 인해 인쇄는 곧 사라질 것처럼 생각했지만 예상을 뒤집고 인쇄물들은 점점 고급화를 향해 달리고 있다. e-book의 출현과 함께 서점에서 책을 사모으는 취미는 여전하고 FACEBOOK의 도전에도 불구하고 많은 사람들은 책장을 손으로 넘기고 있다.
좋은 인쇄물을 갖는 것은 큰 즐거움이며 스마트폰을 두드리는 손가락에 의해 흥미로운 책장도 계속 넘어간다.
ext2-2.html
<!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>