CSS 텍스트 색 지정 color 속성 과 텍스트 정렬 align 속성 줄 간격 line-height 속성 알아보기
HTML 텍스트에 컬러 입히기
CSS의 color 속성을 이용하면 텍스트의 색상을 변경할 수 있습니다. 사용되는 기본형은 아래와 같이 사용할 수 있습니다.
body {
color: red;
}
컬러를 지정하는 방법에는 컬러 명을 기입하는 것 외에 16진수로 표현하는 방법과 hsl과 hsla로 표현하는 방법이 있습니다.
hsl은 hue - 색상, saturation - 채도, lightness - 명도의 줄임말로 아래와 같이 표현할 수 있습니다.
body {
color: hsl(0, 0%, 50%);
}
hsla는 hsl의 표기에 불투명도가 포함된 색상 표기법으로 아래와 같은 기본형을 가집니다.
body {
color: hsla(0, 0%, 50%, 0.5);
}
마지막으로 rgb, rgba 표기법이 있는데, rgb 코드로 색상을 지정할 수 있습니다. rgba는 hsla와 마찬가지로 불투명도가 포함된 색상 표기법입니다.
h1 {
color : rgb(0, 128, 0);
}
h2 {
color : rgba(0, 128, 0, 0.5);
}
텍스트 정렬하는 CSS 속성 text-align
문서를 작성할 때, 정렬이 필요한 경우가 있습니다. 이때 사용하는 CSS 속성은 text-align 속성을 사용하며 text-align의 속성값으로는 아래와 같은 값들이 올 수 있습니다.
|
속성값 |
설명 |
|
start |
현재 문자 줄의 시작 위치에 맞추어 문단
정렬 |
|
End |
현재 문자 줄의 끝 위치에 맞추어 문단 정렬 |
|
left |
왼쪽 정렬 |
|
right |
우측 정렬 |
|
center |
가운데 정렬 |
|
justify |
양쪽 정렬 |
|
match-parent |
부모 요소에 맞추어 정렬 |
문단의 줄 간격을 조절하는 속성 line-height
HTML의 p 태그를 사용해서 문단을 구성할 때, 문단의 길이가 한줄을 넘어 줄바꿈이 일어날 때의 간격을 조절하는 CSS 속성은 line-height 속성을 사용하면 됩니다.
이때 주의해야 할 사항은 단순히 엔터키로 줄바꿈 하는 간격이 아닌 p 태그에서 문단의 길이로 인해 줄바꿈이 일어날 때 적용되는 줄 간격입니다.
p {
line-height : 1.5;
}
위와 같이 지정한 경우, 글자 크기의 1.5배에 해당하는 줄 간격을 지정할 수 있습니다.
HTML 텍스트 수직 정렬 팁
line-height 값을 height(높이) 값과 같이 할 경우 HTML 텍스트 수직 정렬을 가운데 정렬로 하는 효과로 사용할 수 있습니다.
HTML 텍스트 수직 정렬 예제
<style>
h2 {
width : 100%;
background-color: black;
color : white;
text-align : center;
height: 100px;
}
#h2_vertical_align {
line-height: 100px;
}
</style>
</head>
<body>
<!-- 본문 내용 -->
<h2 id="h2_first">
기본 스타일 미적용
</h2>
<h2 id="h2_vertical_align">
수직 가운데 정렬 적용
</h2>
</body>
HTML 텍스트 수직 정렬 HTML 예제 결과
 |
| CSS속성의 height 값과 line-height 값을 동일하게 설정하면 HTML 수직 정렬 효과를 볼 수 있다. |