3. 문단

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

01. text-align

설명

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

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

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

1.00

“`html

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

“`

“`html

Document

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

“`

02. vertical-align

설명

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

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

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

1.00

“`html

나는 자유다

“`

“`html

Document

나는 자유다

“`

03.text-indent

설명

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

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

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

1.00

“`html

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

“`

“`html

text-indent

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

최저임금

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

“`

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

“`html

이름 : 홍길동
이메일 : hongkildong20180101koreapublishing20181231@hanmail.net

이페이지는영어로부터커뮤니티에의하여번역되었습니다.MDNWebDocs에서한국커뮤니티에가입하여자세히알아보세요

이름 : 홍길동
이메일 : hongkildong20180101koreapublishing20181231@hanmail.net

이페이지는영어로부터커뮤니티에의하여번역되었습니다.MDNWebDocs에서한국커뮤니티에가입하여자세히알아보세요

“`

“`html

Document

이름 : 홍길동
이메일 : hongkildong20180101koreapublishing20181231@hanmail.net

이페이지는영어로부터커뮤니티에의하여번역되었습니다.MDNWebDocs에서한국커뮤니티에가입하여자세히알아보세요

이름 : 홍길동
이메일 : hongkildong20180101koreapublishing20181231@hanmail.net

이페이지는영어로부터커뮤니티에의하여번역되었습니다.MDNWebDocs에서한국커뮤니티에가입하여자세히알아보세요

“`

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

“`html

언니는 푸르른 산보다 민둥산을 좋아한다.
이마가 넓어서인지 모르겠지만 아무튼 산꼭대기는 비어 있어야 한다.

“`

“`html

Document

aaaaaaaaaaaaa bbbbbbbbbbbbccccccc cccdddddddddeeeeeeeeee fffffffffffghgggggggggggg.

언니는 푸르른 산보다 민둥산을 좋아한다. 이마가 넓어서인지 모르겠지만
아무튼 산꼭대기는 비어 있어야 한다.

언니는 푸르른
산보다 민둥산을 좋아한다.
이마가 넓어서인지 모르겠지만
아무튼 산꼭대기는 비어 있어야 한다.

언니는 푸르른 산보다 민둥산

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









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

“`

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

“`html

말줄임 기호

“`

“`html

말줄임 기호

“`

“`javascript

말줄임 기호

“`

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

“`html

블록과 인라인

“`

“`html

블록과 인라인

aaaa

“`

② table-cell

1.00

“`html

table-cell

잉여인간이 행복한 나라

정부는 아이를 많이 낳으라고 하지만 그 아이들을 다 살릴 수도 없는 게 지금의 현실이다. 돈을 주는 것 외에 행복한 삶을 살도록 해주는 것이 선진국으로 가는 길일 것이다.

“`

“`html

table-cell

잉여인간이 행복한 나라

정부는 아이를 많이 낳으라고 하지만 그 아이들을 다 살릴 수도 없는 게 지금의
현실이다. 돈을 주는 것 외에 행복한 삶을 살도록 해주는 것이 선진국으로 가는
길일 것이다.

“`

③ hidden

1.00

“`html

숨기기

이름 :홍길동

연락처 :서울 종로구 세검정

이름 :홍길동

연락처 :서울 종로구 세검정

이름 :홍길동

연락처 :서울 종로구 세검정

“`

“`html

숨기기

이름 :홍길동

연락처 :서울 종로구 세검정

이름 :홍길동

연락처 :서울 종로구 세검정

이름 :홍길동

연락처 :서울 종로구 세검정

“`

08. overflow

설명

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

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

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

1.00

“`html

overflow

서비스 이용약관

제17조 (서비스의 변경 및 내용수정)
① 회원은 회사가 제공하는 서비스를 이 약관 및 운영정책에 따라 이용할 수 있습니다.
② 회사는 서비스를 통하여 회원에게 제공하는 컨텐츠에 대하여 제작, 변경, 유지, 보수에 관한 포괄적인 권한을 가집니다.
③ 회사가 상당한 이유가 있는 경우에 운영상, 기술상의 필요에 따라 서비스를 수정할 수 있으며, 수정하는 경우에는 변경 후 서비스 초기화면이나 공지사항 게시판 등을 통하여 공지합니다.

“`

“`html

overflow

서비스 이용약관

제17조 (서비스의 변경 및 내용수정)
① 회원은 회사가 제공하는 서비스를 이 약관 및 운영정책에 따라 이용할 수
있습니다.
② 회사는 서비스를 통하여 회원에게 제공하는 컨텐츠에 대하여 제작, 변경,
유지, 보수에 관한 포괄적인 권한을 가집니다.
③ 회사가 상당한 이유가 있는 경우에 운영상, 기술상의 필요에 따라 서비스를
수정할 수 있으며, 수정하는 경우에는 변경 후 서비스 초기화면이나 공지사항
게시판 등을 통하여 공지합니다.

“`

형성퀴즈1

완성이미지

1.00

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

“`html

문단 관련 스타일

3. 문단

01. text-align

02. vertical-align

03.text-indent

04.word-wrap, word-break

05. white-space

06. text-overflow

시간 배분을 위하여 현명한 판단을 바랍니다.

욕심껏 내용을 채우는 것도 좋겠습니다.

결과물을 볼 수 있어야 하는 것이 우선입니다.

시간 배분을 위하여 현명한 판단을 바랍니다.

욕심껏 내용을 채우는 것도 좋겠습니다.

결과물을 볼 수 있어야 하는 것이 우선입니다.

시간 배분을 위하여 현명한 판단을 바랍니다.

욕심껏 내용을 채우는 것도 좋겠습니다.

결과물을 볼 수 있어야 하는 것이 우선입니다.결과물을 볼 수 있어야 하는 것이 우선입니다.결과물을 볼 수 있어야 하는 것이 우선입니다.결과물을 볼 수 있어야 하는 것이 우선입니다.

07. display

① block, inline, inline-block

② table-cell

③ hidden

08. overflow

서비스 이용약관

서비스 이용약관

형성퀴즈1