span태그로 간단하게 글자 꾸미기 - html 기초 배우기

이미지처럼 긴 글 속에서 "layout"글씨 하나에 스타일을 주고 싶을 때 어떤 방법으로 처리할 수 있을까요? <span> 태그로 정말 간단하게 포인트를 줄 수 있습니다.

 

<span> 태그로 스타일 주는 방법

1. html에서 영역을 지정해줍니다. 변경 원하는 텍스트를 <span> 태그로 감싸줍니다.

<p> it is a long established fact that a reader will be distracted by the readable content of a page when looking at its <span> layout </span>. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. </p>

 

2. style을 추가하여 글자를 꾸며줍니다. 파란 배경으로 강조하기 위해 스타일을 추가했습니다.

<style>
   span {background: #0000ff; color:#fff}
</style>

 

이처럼 html에 <span> 태그를 추가하여 간단하게 텍스트를 강조할 수 있습니다.