Css 문단 관련 스타일 속성 정리, 쉽게 배우자
안녕하세요 엘빈입니다. 이전 포스팅에서는 텍스트 관련 스타일 속성들에 대해서 알아보았는데요. 웹문서에서 텍스트가 모여 하나의 문단을 이룹니다. 여러 개의 문단이 웹 문서 전체를 구성하는 것이죠. 이번 포스팅에서는 문단 스타일에 대해서 알아보겠습니다.
direction : 글 발향 지정
#direction {direction: ltr;}
글자 쓰기 방향을 지정하는 속성입니다. Ltr은 왼쪽에서 오른쪽으로 rtl은 오른쪽에서 왼쪽으로 텍스트를 표기합니다.
text-align : 텍스트 배치
#align {text-align: center;}
텍스트 정렬 방향을 결정할 수 있는 속성입니다. 자주 사용하는 속성 중 하나이죠. 문서 작업할때 정렬과 동일합니다. 속성 값에 따라서 왼쪽,오른쪽,가운데 정렬 등을 지정할 수 있습니다.
text-indent : 문단 들여쓰기
#indent{text-indent: 5%;}
문단 들여쓰기 기능을 가진 속성입니다. 속성값으로 크기와 백분율을 넣을 수 있으며 15px에 5%정도 됩니다. 긴 글을 작성할 때 들여쓰기 기능을 지정해 놓으면 효율적일 것 같습니다.
line-height : 줄 간격 조절
#height {line-height: 2.0;}
줄 간격을 조절할 수 있습니다. 숫자,크기,백분율으로 속성값을 넣을 수 있습니다. 좁게 넣으면 글자가 겹칠 수 있기 때문에 유의해야 합니다. 보통 줄간격을 늘릴때 사용합니다. 표준으로 설정된 줄간격도 어느정도 좁은 편이라 더 줄이면 글자가 겹칠 가능성이 큽니다.
text-overflow : 텍스트 표기
넘치는 텍스트를 표기하는 속성입니다. 줄바꿈을 지정하지 않을 때 텍스트 기준선을 넘기는 경우가 있는데 마우스 커버를 가져다 놓으면 감추어져 있던 내용이 표시됩니다. 자주 사용하지 않는 속성이기 때문에 알고만 넘어가시는 것을 추천드립니다.
background-color : 배경색
#backcolor {background-color: burlywood;}
문단의 배경색을 지정하는 속성입니다. 보통 강조할 부분이나 문단이 나뉘는 것을 표시할 때 사용합니다. 속성값으로는 rgb 16진수나 영어 색상 이름을 넣습니다.
위의 5가지 코드들을 종합하여 html 파일에 적용해봅시다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
<link href="style_portal.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="direction">(direction)동해물과 백두산이 마르고 닳도록</p>
<p id="align">(text-align)하느님이 보우하사 우리나라 만세</p>
<p id="indent">(text-indent)무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p>
<p id="height">(line-height)줄 간격쓰기란 어떤 것을 나타낼까요?<br>줄바꿈을 통해 알아봅시다.</p>
<p id="backcolor">background-color입니다</p>
<p id="decoration">text-decoration입니다</p>
</body>
</html>
사진과 같이 스타일이 적용된 모습을 보실 수 있습니다.
마무리
지금까지 문단 관련 속성들에 대해서 알아보았는데요. 사실 text-align 외에는 사용할 일이 적습니다. 이런게 있구나 이해만 하시고 넘어가도 상관없을듯 합니다.
포스팅 읽어주셔서 감사합니다.
'개발 > HTML_CSS' 카테고리의 다른 글
| a태그 범위 넓히는 방법 (0) | 2020.04.06 |
|---|---|
| 2개 select 태그 연동, 선택시 옵션이 다르게 표시되는 방법 (0) | 2020.04.05 |
| Css 텍스트 관련 스타일 정리, 쉽게 알아보자 (0) | 2020.01.19 |
| Css 속성 우선 순위 정리, 간단히 알아보자 (0) | 2020.01.19 |
| Css 기본 선택자 정리 및 사용법 정리, 자주 쓰이는 것 위주로 (0) | 2020.01.18 |
