CSS Text Styling : font-size, font-weight, text-align, text-decoration(폰트 사이즈, 굵기, 정렬 등)

 

오늘은 가장 기본적인 텍스트 스타일링을 정리해보려한다.

 

'놀면서 배우는 코딩 : 마이크로비트로 정글 탐험하기' 책 홍보 사이트를 만들면서 살펴보려한다.

책 보러 가기

 

 

책 홍보 사이트 메인 화면에 들어가는 <p>태그를 한 개 가져왔다. 

  <p class="information">유튜브에
  <a href="https://www.youtube.com/channel/UC8v6cgZGzs8Fqp9MvJsRoyw" target="_blank">
  '놀코'</a>를 검색해보세요!</p>

 

 

1. CSS로 스타일링을 해보자. 

.information{
    font-size: 20px;
    font-weight: bold;
}

information클래스에 있는 글자들을 스타일링 해주었다.

'유튜브에 를 검색해보세요!' 라는 글자들은 폰트 크기 20픽셀, 굵게로 설정되었다. 

 

이번에는

information클래스 중 a태그인 '놀코' 글자를 스타일링 해보자!

텍스트 데코레이션을 없애버렸다. 밑줄, 윗줄, 가운데줄을 없애버리고 아무 효과도 안 준 상태로 둔 것이다.

.information a{
    text-decoration: none;
}

 

 

 2. 텍스트를 스타일링하는 몇 가지 방법들

 

1) font-size

font-size는 20px(픽셀)로 정해준다. CSS는 꼭 뒤에 ;를 써야 적용이 된다!

 

2) font-wiehgt

font-weight는 폰트의 굵기이다.

100부터 900까지 설정할 수 있다. 

400이 기본 글씨이고 700이 <b>태그의 굵기를 뜻한다.

 

단, 100단위로만 설정할 수 있다.

또한, 폰트의 종류와 브라우저의 종류에 따라 사용 가능한 굵기가 정해져있다. 테스트를 해보며 적용해야한다.

 

3) text-align

text-align의 기본은 left이다. 설정을 안해주면 왼쪽 정렬이 된다.

 

text-align: left; right; center;

 

4) text-decoration

text-decoration: underline; 밑줄

text-decoration: overline; 글 위에 줄 긋기

text-decoration: line-through; 글 중간에 줄 긋기 

text-decoration: none; 아무 효과 안주기 ☞ 주로 링크를 걸어주는 <a>태그에 쓴다.  

 

CSS로 텍스트 스타일링을 하고 난 뒤의 '책 홍보 사이트' 모습이다.

앞으로 계속 이 사이트의 모습을 바꾸어 나가며 사용되는 개념들을 정리할 예정이다! 

 

nolco.netlify.app

놀면서 배우는 코딩