3. 문단

이번 장에서는 CSS로 글자와 문단을 꾸미고 배치하는 방법 을 배웁니다.

01. text-align

설명

블록 요소 안의 인라인 콘텐츠(텍스트·이미지 등)를 가로 방향으로 정렬한다. 정렬 대상이 아니라 그것을 담고 있는 부모 블록에 선언한다.

값	설명
`left`	왼쪽 정렬(기본값)
`right`	오른쪽 정렬
`center`	가운데 정렬
`justify`	양쪽 끝 맞춤(단어 간격을 늘려 줄을 채움)

블록 자체를 가운데 두는 margin:0 auto와는 다른 속성이다.

1.00

시작 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

설명

인라인 요소나 table-cell 안에서 세로 방향 정렬을 지정한다. 한 줄 안에 글자와 이미지가 섞여 있을 때 기준선을 맞추는 데 주로 쓴다.

값	설명
`baseline`	글자 기준선에 맞춤(기본값)
`middle`	가운데 맞춤
`top` / `bottom`	줄의 위/아래에 맞춤
`text-top` / `text-bottom`	글자의 위/아래에 맞춤

블록 요소에는 적용되지 않으며, 세로 중앙 정렬이 필요하면 display:table-cell이나 flex를 쓴다. 자세한 내용은 🔗MDN 참고.

1.00

시작 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

설명

블록 요소의 첫 줄을 들여쓰거나 내어쓴다. 부모 블록에 선언하면 자식 인라인 텍스트에 적용된다.

값	설명
양수(`30px`,`2em`)	그만큼 안쪽으로 들여쓰기
음수(`-9999px`)	화면 밖으로 빼서 텍스트를 숨기는 기법(IR 기법, 배경 이미지 로고 등에 활용)

첫 줄에만 적용되며, %로 주면 부모 너비 기준으로 계산된다.

1.00

시작 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

설명

긴 단어나 URL처럼 컨테이너 너비를 넘는 문자열을 어떻게 줄바꿈할지 제어한다.

속성	설명
`word-break`	아시아(CJK)·비아시아 언어의 줄바꿈을 모두 제어
`word-wrap`(=`overflow-wrap`)	비아시아 언어에서 한 단어가 너무 길어 넘칠 때 단어 안에서 강제로 끊음

너비가 고정된 박스에서 영문 이메일·URL이 박스를 뚫고 나갈 때 주로 사용한다.

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

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

1.00

시작 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

설명

요소 안의 공백(스페이스·탭)과 줄바꿈을 어떻게 처리할지 지정한다.

값	설명
`normal`	연속 공백을 하나로 합치고 자동 줄바꿈(기본값)
`nowrap`	공백은 합치되 줄바꿈을 막아 한 줄로 표시
`pre`	공백·줄바꿈을 원본 그대로 유지(자동 줄바꿈 X)
`pre-wrap`	원본 공백 유지 + 넘치면 자동 줄바꿈
`pre-line`	연속 공백은 합치되 줄바꿈 문자는 유지

코드 표시나 입력값 그대로 보여주기, 줄바꿈 강제 방지 등에 사용한다.

🔗MDN

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

1.00

시작 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

설명

박스를 넘치는 텍스트를 어떻게 표시할지 지정한다. 보통 …(말줄임표)로 잘렸음을 알린다.

값	설명
`clip`	넘치는 부분을 그냥 잘라냄(기본값)
`ellipsis`	넘치는 부분을 `…`로 표시

단독으로는 동작하지 않고 아래 세 속성이 함께 필요하다. width(너비 고정) · overflow:hidden(넘침 숨김) · white-space:nowrap(한 줄 고정). 여러 줄 말줄임은 -webkit-line-clamp를 사용한다.

블럭요소에 적용
아래의 속성 필요

width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

1.00

시작 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

설명

요소가 화면에서 차지하는 박스 유형과 배치 방식을 결정하는 핵심 속성이다.

값	설명
`block`	너비·높이 지정 O, 줄 전체 차지(세로로 쌓임)
`inline`	너비·높이 지정 X, 콘텐츠 크기만큼 가로로 나열
`inline-block`	너비·높이 지정 O + 가로로 나열
`none`	박스 자체를 제거(공간도 사라짐)
`table-cell`	표의 셀처럼 동작(세로 가운데 정렬에 활용)

네비게이션 메뉴를 가로 배치하거나(inline/inline-block), 요소를 보이고 숨기는(none) 등 레이아웃 전반에 쓰인다. 전체 값은 🔗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

1.00

시작 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

1.00

시작 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

1.00

시작 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

설명

요소의 크기를 넘어서는 콘텐츠를 어떻게 처리할지 지정한다. 너비·높이가 고정된 박스에서 의미가 있다.

값	설명
`visible`	넘쳐도 그대로 보임(기본값)
`hidden`	넘치는 부분을 잘라 숨김
`scroll`	넘침과 상관없이 항상 스크롤바 생성
`auto`	넘치는 축에만 자동으로 스크롤바 생성

가로/세로를 따로 제어하려면 overflow-x, overflow-y를 사용한다. 약관 박스처럼 정해진 영역 안에서 스크롤로 내용을 보여줄 때 활용한다.

1.00

시작 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

완성이미지

1.00

리소스

영상과 인쇄의 공존
	영상의 발달로 인해 인쇄는 곧 사라질 것처럼 생각했지만 예상을 뒤집고 인쇄물들은 점점 고급화를 향해 달리고 있다. 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>

3. 문단

이미지 다운로드

이번 장에서는 CSS로 글자와 문단을 꾸미고 배치하는 방법 을 배웁니다.

01. text-align

설명

블록 요소 안의 인라인 콘텐츠(텍스트·이미지 등)를 가로 방향으로 정렬한다. 정렬 대상이 아니라 그것을 담고 있는 부모 블록에 선언한다.

값	설명
`left`	왼쪽 정렬(기본값)
`right`	오른쪽 정렬
`center`	가운데 정렬
`justify`	양쪽 끝 맞춤(단어 간격을 늘려 줄을 채움)

블록 자체를 가운데 두는 margin:0 auto와는 다른 속성이다.

1.00

시작 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

설명

인라인 요소나 table-cell 안에서 세로 방향 정렬을 지정한다. 한 줄 안에 글자와 이미지가 섞여 있을 때 기준선을 맞추는 데 주로 쓴다.

값	설명
`baseline`	글자 기준선에 맞춤(기본값)
`middle`	가운데 맞춤
`top` / `bottom`	줄의 위/아래에 맞춤
`text-top` / `text-bottom`	글자의 위/아래에 맞춤

블록 요소에는 적용되지 않으며, 세로 중앙 정렬이 필요하면 display:table-cell이나 flex를 쓴다. 자세한 내용은 🔗MDN 참고.

1.00

시작 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

설명

블록 요소의 첫 줄을 들여쓰거나 내어쓴다. 부모 블록에 선언하면 자식 인라인 텍스트에 적용된다.

값	설명
양수(`30px`,`2em`)	그만큼 안쪽으로 들여쓰기
음수(`-9999px`)	화면 밖으로 빼서 텍스트를 숨기는 기법(IR 기법, 배경 이미지 로고 등에 활용)

첫 줄에만 적용되며, %로 주면 부모 너비 기준으로 계산된다.

1.00

시작 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

설명

긴 단어나 URL처럼 컨테이너 너비를 넘는 문자열을 어떻게 줄바꿈할지 제어한다.

속성	설명
`word-break`	아시아(CJK)·비아시아 언어의 줄바꿈을 모두 제어
`word-wrap`(=`overflow-wrap`)	비아시아 언어에서 한 단어가 너무 길어 넘칠 때 단어 안에서 강제로 끊음

너비가 고정된 박스에서 영문 이메일·URL이 박스를 뚫고 나갈 때 주로 사용한다.

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

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

1.00

시작 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

설명

요소 안의 공백(스페이스·탭)과 줄바꿈을 어떻게 처리할지 지정한다.

값	설명
`normal`	연속 공백을 하나로 합치고 자동 줄바꿈(기본값)
`nowrap`	공백은 합치되 줄바꿈을 막아 한 줄로 표시
`pre`	공백·줄바꿈을 원본 그대로 유지(자동 줄바꿈 X)
`pre-wrap`	원본 공백 유지 + 넘치면 자동 줄바꿈
`pre-line`	연속 공백은 합치되 줄바꿈 문자는 유지

코드 표시나 입력값 그대로 보여주기, 줄바꿈 강제 방지 등에 사용한다.

🔗MDN

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

1.00

시작 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

설명

박스를 넘치는 텍스트를 어떻게 표시할지 지정한다. 보통 …(말줄임표)로 잘렸음을 알린다.

값	설명
`clip`	넘치는 부분을 그냥 잘라냄(기본값)
`ellipsis`	넘치는 부분을 `…`로 표시

단독으로는 동작하지 않고 아래 세 속성이 함께 필요하다. width(너비 고정) · overflow:hidden(넘침 숨김) · white-space:nowrap(한 줄 고정). 여러 줄 말줄임은 -webkit-line-clamp를 사용한다.

블럭요소에 적용
아래의 속성 필요

width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

1.00

시작 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

설명

요소가 화면에서 차지하는 박스 유형과 배치 방식을 결정하는 핵심 속성이다.

값	설명
`block`	너비·높이 지정 O, 줄 전체 차지(세로로 쌓임)
`inline`	너비·높이 지정 X, 콘텐츠 크기만큼 가로로 나열
`inline-block`	너비·높이 지정 O + 가로로 나열
`none`	박스 자체를 제거(공간도 사라짐)
`table-cell`	표의 셀처럼 동작(세로 가운데 정렬에 활용)

네비게이션 메뉴를 가로 배치하거나(inline/inline-block), 요소를 보이고 숨기는(none) 등 레이아웃 전반에 쓰인다. 전체 값은 🔗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

1.00

시작 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

1.00

시작 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

1.00

시작 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

설명

요소의 크기를 넘어서는 콘텐츠를 어떻게 처리할지 지정한다. 너비·높이가 고정된 박스에서 의미가 있다.

값	설명
`visible`	넘쳐도 그대로 보임(기본값)
`hidden`	넘치는 부분을 잘라 숨김
`scroll`	넘침과 상관없이 항상 스크롤바 생성
`auto`	넘치는 축에만 자동으로 스크롤바 생성

가로/세로를 따로 제어하려면 overflow-x, overflow-y를 사용한다. 약관 박스처럼 정해진 영역 안에서 스크롤로 내용을 보여줄 때 활용한다.

1.00

시작 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

완성이미지

1.00

리소스

영상과 인쇄의 공존
	영상의 발달로 인해 인쇄는 곧 사라질 것처럼 생각했지만 예상을 뒤집고 인쇄물들은 점점 고급화를 향해 달리고 있다. 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>