반응형
안녕하세요. 플입니다.
오늘은 <span> 태그에 대해 알아보겠습니다.
1. <span> 태그
span은 '기간, 폭'을 뜻하는 영어단어입니다.
태그로서 가지는 의미는 가상의 폭.
즉, 가상의 공간을 가지게 됩니다.
사실 영어 의미는 이해 못하셔도 괜찮습니다.
'아 <span> 태그는 공간'정도만 알고 계시면 됩니다.
<span> 태그는 <div>와 같이 공간을 지정해주는 태그입니다.
<div>와 다른 점은 inline요소라는 점입니다.
2. <span> 태그의 활용
스팬 태그는 보통 큰 의미가 있는 곳에 사용하는 태그는 아니고
디자인적으로 구분이 필요할 때 주로 사용합니다.
예를 들어 의미가 있는 태그는
<a> 태그나 <img> 태그 등이 있습니다.
<a> 태그는 링크를
<img> 태그는 이미지를 의미하죠.
표시된 부분은 <a> 태그로 할 예정입니다.
그런데 문제가 있습니다. 아시겠나요?
배경에도 색이 들어가고, 텍스트 부분에도 다른 색과 디자인이 들어갑니다.
<a> 태그 한 개에 두 가지 스타일을 넣기는 힘들죠.
이럴 때 <a> 태그 안에 <span> 태그를 넣고
<span> 태그에 텍스트를 적으면 두 가지 디자인을 모두 적용할 수 있게 됩니다.
<a href="링크">
<span>사이트 바로가기</span>
</a>코드로 표현하면 이렇게 되겠죠.
<html>에서는 이렇게 해주시고
<a> 태그에는 배경을
<span> 태그에는 텍스트 디자인을 해주시면 됩니다.
그럼 이만.
총총.
반응형
'coding > html + css' 카테고리의 다른 글
| [css] position을 이용해 반투명 배경 올리기 (0) | 2019.09.26 |
|---|---|
| [sass/scss] 자동 컴파일하기 (0) | 2019.09.25 |
| [html] <img>태그 alt 속성 (0) | 2019.09.18 |
| [css] hover로 색 바꾸기 (0) | 2019.09.06 |
| [html] nav태그 (0) | 2019.08.28 |
