[CSS 기초] 텍스트 스타일

 

 

안녕하세요 PNcoding입니다 :)

 

이제 요소들을 배치할 수 있으니, 글자를 넣어 같이 배치해 보아야겠죠?

그럼 글자 관련 스타일에 대하여 알아보도록 하겠습니다.

 

 

---

 

 

 

글자는 웹사이트, 어플, 제품패키지, 책, 잡지 등등 모든 곳에서 많이 사용되고 있어요.

각 목적에 맞춰서 어떤 식으로 사용하는가에 따라 모든 디자인은 세련되게 표현될 수도, 어색하게 표현될 수도, 못생기게 표현이 될 수 도 있습니다.

글자를 얼마나 잘 사용하는가에 따라 얼마나 매력적인 디자인이 완성이 된다고 볼 수 있어요.

 

하지만 디자인을 말하기 전에 우리는 글자 관련 스타일을 배워서 글자를 꾸미는 방법부터 알아보아야겠죠??

 

 

 

글꼴 관련 스타일

 

1) font-size : 글자 크기 조절

글자의 크기를 조절해 줄 수 있습니다.

16px의 크기는 기본적으로 브라우저에 표현되는 글자크기입니다.

 

<p>16px 크기</p>
<p>24px 크기</p>
<p>36px 크기</p>

 

p:nth-child(1) {
    font-size: 16px;
}

p:nth-child(2) {
    font-size: 24px;
}

p:nth-child(3) {
    font-size: 36px;
}

 

글자 크기 적용

 

 

2) font-weight : 글자 굵기 조절

수치는 100부터 100 씩 증가하여 900까지 넣어줄 수 있으며, 500 이 기본 굵기입니다.

수치가 클수록 두꺼워지며, 수치가 작아질수록 얇아집니다.

글씨체에 따라 100부터 900까지 다 적용되는 글씨체가 있고,

100, 500, 900 같이 세 개의 값만 적용되는 경우가 있습니다.

 

<p>100 굵기</p>
<p>500 굵기</p>
<p>900 굵기</p>

 

p:nth-child(1) {
    font-weight: 100;
}

p:nth-child(2) {
    font-weight: 500;
}

p:nth-child(3) {
    font-weight: 900;
}

 

글자 굵기 적용

 

 

3) font-family : 글씨체 지정

font-family : "맑은 고딕, san-serif";

 

기본적으로 컴퓨터에 설치된 글씨체를 적용시켜 줄 수 있습니다.

폰트가 없는 경우도 있기 때문에 한 가지의 글씨체를 지정하기보다는 여러 개를 지정해 주는 게 좋습니다.

 

 

4) font-style : 글자 기울임

font-style: italic;

 

기본값은 normal입니다. 글씨를 기울이고 싶을 때 italic 값을 넣어주면 됩니다.

 

 

 

 

---

 

 

 

반응형

 

 

 

 

 

텍스트 관련 스타일

 

1) color : 텍스트 색상

색상을 조절해 줄 수 있는 속성입니다.

color 속성에는 여러 가지 속성값을 적용시켜 줄 수 있습니다.

예를 들어 black(영문법), #000000(16진수 혹은 헥스코드), rgb(0,0,0) (rgb 색상모드) 등으로 색을 표현해 줄 수 있습니다.

 

<p>영문법 색상 표현</p>
<p>16진수 색상 표현</p>
<p>rgb 색상 표현</p>

 

p:nth-child(1) {
    color: blue;
}

p:nth-child(2) {
    color: #eb0000;
}

p:nth-child(3) {
    color: rgb(18, 176, 0);
}

 

color 적용 결과

 

 

2) text-align : 텍스트 좌우가운데 정렬

부모 크기에 맞춰서 글자를 왼쪽, 가운데, 오른쪽 정렬 시켜줄 수 있습니다.

속성값은 left, right, center를 넣어줄 수 있습니다.

 

<div class="box">글자정렬</div>

 

.box {
    width: 300px;
    height: 300px;
    background-color: lightblue;
    text-align: center;
    font-size: 50px;
}

 

박스 안의 글이 가운데 정렬 되었다

 

 

 

3) line-height : 텍스트 위아래 가운데정렬, 행간 조절

박스 안에 텍스트가 한 줄만 지정되어 있을 경우, 박스의 높이값만 넣어주면 텍스트를 박스 안의 위아래 가운데 정렬시켜 줄 수 있습니다.

 

<div class="box">글자정렬</div>

 

.box {
    width: 300px;
    height: 300px;
    background-color: lightblue;
    text-align: center;
    font-size: 50px;
    line-height: 300px;
}

 

 

 

하지만 실제 line-height 속성은 행간을 조절해 줄 때 사용하며, 텍스트가 여러 줄일 때 행간값으로 적용시켜 줍니다.

 

행간조절을 하지 않았을 때

.box {
    width: 300px;
    height: 300px;
    background-color: lightblue;
    font-size: 20px;
    padding: 15px;
    box-sizing: border-box;
}

 

행간조절을 하지 않았을때 결과

 

 

행간조절을 했을 때

.box {
    width: 300px;
    height: 300px;
    background-color: lightblue;
    font-size: 20px;
    padding: 15px;
    box-sizing: border-box;
    line-height: 34px;
}

 

행간 조절을 했을때 결과

 

 

 

4) text-decoration : 밑줄, 윗줄, 취소선

속성값으로 none(기본값), underline(밑줄), overline(윗줄), line-through(취소선)을 지정해 줄 수 있습니다.

 

<p>밑줄</p>
<p>윗줄</p>
<p>취소선</p>

 

p:nth-child(1) {
    text-decoration: underline;
}

p:nth-child(2) {
    text-decoration: overline;
}

p:nth-child(3) {
    text-decoration: line-through;
}

 

 

 

5) letter-spacing : 글자 간격 조절(자간)

음수 ~ 양수 수치값을 넣어 글자 사이의 간격을 조절해 줄 수 있습니다.

 

<p>글자 간격 기본값</p>
<p>글자 간격 음수값</p>
<p>글자 간격 양수값</p>

 

p:nth-child(1) {
    letter-spacing: 0;
}

p:nth-child(2) {
    letter-spacing: -5px;
}

p:nth-child(3) {
    letter-spacing: 10px;
}

 

 

 

 

---

 

 

여기까지 해서 텍스트의 기본 스타일에 대하여 알아보았습니다.

글자를 어떻게 사용하느냐에 따라 디자인이 달라지므로, 많이 사용해 보시는 게 글자를 다루는 데 있어서 실력향상에 도움이 될 것입니다 :)

 

다음 포스팅에서는 hover, overflow 속성에 대하여 알아보도록 하겠습니다.