2018. 2. 1. 11:31ㆍ웹 표준 퍼블리싱 바이블
1. 수직 정렬(Vertical Align) 속성
"vertical-align" 속성은 인라인 요소끼리의 위, 아래 간격을 맞출 수 있습니다. 값으로 baseline, sub, super, top, text-top, middle, bottom, text-bottom 등의 다양한 값을 가지고 있으며, 백분율(%)을 지정할 수도 있고, 정밀하게 작업할 경우 길이값을 적용할 수도 있습니다.
<style type="text/css"> .area p{ vertical-align: baseline;//글자의 baseline 위치에 맞춥니다. vertical-align: sub;//부모요소의 아래 첨자 위치로 맞춤니다. vertical-align: super;//부모요소의 위 첨자 위치로 맞춥니다. vertical-align: top;//부모요소의 상단에 맞춥니다. vertical-align: text-top;//부모요소의 글꼴 요소의 상단에 맞춥니다. vertical-align: middle;//부모요소의 소문자를 기준으로 중간에 맞춥니다. vertical-align: bottom;//부모요소의 아래쪽에 맞춥니다. vertical-align: text-bottom;//부모요소의 글꼴의 아래쪽에 맞춥니다. } </style>
|
2. 글의 줄바꿈 처리하기
인라인 요소인 "글(text)"은 자신을 감싸고 있는 상위 블록 요소의 "width(가로)"를 넘어서게 되면 자연스럽게 줄을 바꾸게 됩니다. 이렇게 줄이 바뀌는 것에 대해서 다음의 두 가지 속성을 살펴봅니다.
2-1. 단어를 깨뜨려 줄바꿈을 지정하는 "word-break" 속성
"width"를 지정한 영역이라면, 그보다 긴 텍스트는 자동으로 줄바꿈이 됩니다. 하지만 이 줄바꿈은 띄어쓰기가 된 단어를 기준으로 이뤄지게 되므로, 길이가 긴 단어가 끼어 있으면 무척 부자연스러운 정렬이 됩니다. 이때 "word-break" 속성은 좋은 해결책이 될 수 있습니다. 꼬, "text-align: jstify"와 같이 "좌우 정렬"을 함께 지정하면 보다 좋은 정렬 상태로 작성할 수 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> body{width: 400px;font-family: "돋움", dotum, helvetica, sans-serif;font-size: 12px; text-align: justify;} .area{background-color: orange;word-break: break-all;} </style> </head> <body> <div class="area"> <p class="area"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies mi nec elit pretium porta. Ut pellentesque mollis magna et molestie. In elementum nulla vel augue tempor non ultrices mauris semper. Vestibulum nulla augue, volutpat at bibendum id, interdum ut ante. </p> </div> </body> </html>
|
※ 참고로, "word-break"속성의 값은 제시된 "break-all"외에 "기본값(nomal)"과 "단어단위(keep-all)"가 있습니다만, "단어 단위 줄바꿈"옵션의 경우엔 "2바이트 문자"들인 한국어, 중국어, 일본어에만 적용되며 그나마 일부 브라우저에서만 확인되므로 실무에선 큰 의미가 없습니다.
1-2. 줄바꿈을 금지하거나 <pre>요소의 특성을 부여하는 "white-space"속성
"white-space" 속성은 줄바꿈을 금지하거나 마크업 요소 중 하나인 <pre>요소의 특성을 부여하여, 작성한 그대로 줄바꿈을 보이게 만들 수도 있습니다 그 값으로는 "nowrap, pre, pre-wrap, pre-line" 등을 지정할 수 있으며, 각 속성값의 효과는 다음과 같습니다.
속성값 |
효과 |
nowrap |
줄 바꿈을 금지합니다. |
pre |
<pre>요소를 지정한 것처럼 띄어쓰기나 줄바꿈 등이 "작성한 그대로"표현됩니다. |
pre-wrap |
앞의 "pre"의 효과와 비슷하지만, 지정한 영역을 넘어가지 않습니다. |
pre-line |
"pre-wrap"과 비슷하지만, 띄어쓰기 한 공백은 한 칸만 표현됩니다. |
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 4-5. 목록(List) 스타일 - 2 (0) | 2018.02.05 |
|---|---|
| 4-5. 목록(List) 스타일 - 1 (0) | 2018.02.02 |
| 4-4. 서체(font)와 글(text) 스타일 - 7 (0) | 2018.01.31 |
| 4-4. 서체(font)와 글(text) 스타일 - 6 (0) | 2018.01.30 |
| 4-4. 서체(font)와 글(text) 스타일 - 5 (0) | 2018.01.29 |