문단

유형

실습문서

주제

css기본문법

순번

태그

설명

📢

이미지다운로드

img.zip7036.1KB

01. text-align

👁️‍🗨️

글자 정렬

‣

ex2-28.html

‣

ex2-28.html

02. vertical-align

👁️‍🗨️

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

‣

ex2-29.html

‣

ex2-29.html

03.text-indent

👁️‍🗨️

들여쓰기

‣

ex2-30.html

‣

ex2-30.html

04.word-wrap, word-break

👁️‍🗨️

텍스트 줄바꿈

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

normal: 기본값 / CJK 문자는 글자 기준, 비 CJK 문자는 단어 기준으로 줄 바꿈
break-all : 글자 기준으로 줄 바꿈
keep-all : 단어 기준으로 줄 바꿈

word-wrap: 비아시아 언어제어

‣

ex2-31.html

‣

ex2-31.html

05. white-space

👁️‍🗨️

공백 처리

🔗MDN

	개행 문자	스페이스, 탭	자동 줄 바꿈	줄 끝의 공백
`normal`	병합	병합	예	제거
`nowrap`	병합	병합	아니오	제거
`pre`	유지	유지	아니오	유지
`pre-wrap`	유지	유지	예	넘침
`pre-line`	유지	병합	예	제거
`break-spaces`	유지	유지	예	줄 바꿈

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

‣

ex2-33html

‣

ex2-33html

06. text-overflow

👁️‍🗨️

말줄임표

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

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

‣

ex2-34.html

‣

ex2-34.html

‣

멀티라인적용버전

07. display

👁️‍🗨️

🔗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

‣

ex2-35.html

② table-cell

‣

ex2-36.html

‣

ex2-36.html

③ hidden

‣

ex2-37.html

‣

ex2-37.html

08. overflow

👁️‍🗨️

넘치는 콘텐츠의 처리

‣

ex2-38.html

‣

ex2-38.html

형성퀴즈1

완성이미지

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

‣

리소스

‣

ext2-2.html