[HTML] span 태그 사용하기

span 태그(Tag) 사용

 

"<span> 태그는 웹페이지에서 스타일을 적용시키기 위한 영역을 지정할 때 사용되는 태그"

 

사실 이 <span> 태그를 html만 소개한 지금 시점에서 설명을 해서 이해가 될 수 있는지 잘 모르겠지만, 간단하게 CSS나 JavaScript에 대해서 이런 형태로 사용 가능하다 라는 부분을 보여주면 좋을 것 같아 순서를 거르지 않고 포스팅을 하고 있습니다.

 

이런 고민을 한 이유 중 가장 큰 부분은 역시 <span> 태그를 잘 활용하기 위해서는 CSS, JavaScript에 대한 이해가 있을 때 조금 더 자유롭게 활용이 가능한 부분이기 때문입니다.

 

하지만 그런 부분 없이 <span> 태그 내의 속성만을 가지고 일단 어떻게 사용되는 태그인지 확인을 해보는게 좋습니다.

 

<span> 태그는 다양하게 사용되는 태그로 이전에 웹페이지에서 많이 사용되는 태그 중에서도 기본적인 구성을 위해 포함되는 태그를 제외한다면 꾀나 상단에 위치하고 있습니다.

 

<span> 태그는 기본적으로 문장 단위의 영역을 지정해서 스타일을 적용시킬 수 있기 때문입니다.

 

여기서 스타일은 배경색, 글자색 또는 글자의 형식이나 여백에 대한 설정들을 의미합니다.

 

<span> 태그의 기본 속성들은 다음과 같습니다.

 

• display : 디스플레이 요소 변경
• width : 가로 크기 지정
• height : 세로 크기 지정
• background-color : 배경색 지정
• color : 글자색 지정
• font-style : 글자 폰트 설정
• margin : 외부 공백 크기 설정
• padding 내부 공백 크기 설정
• border : 테두리 설정

과 같이 여러가지 스타일에 대해서 사용자가 지정해서 변경이 가능하도록 도와주는 태그입니다.

 

 

"<span> 태그 예시"

 

<span style="background-color: rgb(255,0,0);">hello world! </span>
<span style="background-color: rgb(0,255,0);">hello world! </span>
<span style="background-color: rgb(0,0,255);">hello world! </span>

 

 

예제에서는 간단하게 텍스트가 들어가는 공간에 대한 배경색 스타일을 변경하는 예제입니다.

 

보시면 다음과 같이 background-color 속성에서 설정된 RGB 값에 따라 배경 색깔이 변경되는 것을 확인할 수 있습니다.

 

서브라임 텍스트 툴을 사용하실 때는 일부 단어만 작성을 하고 나서 엔터를 치면 문장이 자동완성이 되는 기능이 있으니 잘 활용하시면 굉장히 빠르게 내용을 입력할 수 있습니다.

 

예제에서 보듯이 <span> 태그는 태그 자체보다 오히려 사용되는 속성들이 더 중요하고, 사용되는 속성들을 어떻게 설정하는지에 따라 굉장히 다양한 효과를 낼 수 있습니다.

 

나중에 CSS 카테고리로 포스팅을 진행할 때 전체적인 웹페이지에 대한 스타일을 모두 지정하고 <span> 태그로 더욱 간단하게 내가 원하는 스타일을 불러올 수 있는 방법들에 대해서 확인해보겠습니다.

 

이번에는 그냥 <span> 태그는 내가 지정한 영역 안에서 해당 영역이 가지는 스타일을 변경할 수 있다.

 

정도만 체감하시고 실제 안에 들어가 있는 "background-color: rgb(255,0,0);"와 같은 설정 부분은 이런게 있구나 정도만 유의하시고 넘어가셔도 무방합니다.

 

조금 더 쉽게 따라하실 수 있게 아래쪽에는 예제코드를 작성하는 과정을 동영상으로 준비했습니다.

 

영상을 보시면 아시겠지만 해당 코드를 작성하는데에 있어 1분 정도의 시간이면 충분합니다.