HTML CSS 텍스트 문자열 작성 방법 예제

HTML에서 문자를 입력하는 방법을 알아보겠습니다.

그리고 입력한 문자를 CSS 사용해 디자인 하는 방법도 알아보겠습니다.

 

텍스트에 관한 HTML과 CSS

텍스트에 대해 HTML과 CSS를 조금 더 파고들어 가보겠습니다.

저번에 작성한 HTML의 body 안을 일부 삭제해 다음과 같이 준비합니다.

<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8">
    <title>테스트</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>웹 사이트</h1>
    <p>이 웹 사이트는 테스트를 위한 사이트입니다. <br>
      테스트 내용을 작성해주세요.
      다음과 같이 작성 했습니다.
    </p>
  </body>
</html>

 

텍스트 안에 <br>이라는 태그를 넣었습니다.

이것은 개행을 의미합니다.

종료 태그는 필요 없습니다.

<p> ~ </p>로 감싸서 갬행 하는 것처럼 보이지만 <p> 태그가 의미하는 것은 개행이 아닌 [단락]입니다.

 

표시 예

 

단락 안에서 개행하기 위해서는 <br> 태그를 사용합니다.

 

텍스트를 꾸미기 위한 CSS

 h1과 p 요소에 여러 가지 스타일을 적용해 보도록 하겠습니다.

@charset "UTF-8"; 
/* 텍스트 CSS */ 
h1 {
  color : #cc0033;
  font-size : 24px;
  text-align : center;
}
p {
  color: #666; 
  font-size : 18px; 
  line-height : 26px; 
  text-align : center; 
}

 

text-align은 왼쪽 정렬(left), 중앙 정렬(center), 오른쪽 정렬(right)을 지정할 수 있습니다.

line-height는 행의 높이입니다.

좀 전보다 행의 간격이 높이진 것을 알 수 있습니다.

 

표시 예

 

그러면 다음은 폰트를 변경해 보도록 하겠습니다.

@charset "UTF-8";
/* 텍스트 CSS */ 
body { 	
  font-family : 바탕체, "Times New Roman", Serif; 
} 
h1 { 
  color : #cc0033; 	
  font-size : 24px; 
  text-align : center; 
} 
p {
  color: #666; 
  font-size : 18px; 
  line-height : 26px; 	
  text-align : center; 
}

 

font-family로 폰트를 지정할 수 있습니다.

기본적으로 폰트는 body에 설정합니다.

body에 설정하는 것으로 페이지 안의 모든 텍스트에 폰트가 적용됩니다.

페이지 전체에 폰트가 들쑥날쑥하다면 보기에 어수선할 수도 있기 때문에, 기본은 같은 폰트로 통일감을 내어줍니다.

폰트는 OS나 브라우저 환경에 따라 적용 안 되는 경우가 있기 때문에 여러 개의 폰트를 적어 둡니다.

왼쪽부터 순서대로 지정한 폰트가 우선 적용됩니다.

 

표시 예

댓글