HTML P태그 안에서 SPAN 태그 사용 방법을 알아봅시다
지난 시간까지 우리는 <p> 태그에 대한 사용방법을 알아보았고, 또다시 P 태그에 스타일을 만들어서 색다르게 텍스트를 꾸미는 방법도 확인했습니다. 근데 P태그의 경우는 적용된 단락 전체를 가지고 활용하는 방법인데, 내부에 있는 특정 키워드에만 다른 스타일로 적용하는 방법은 없을까요? 이럴때 필요한것이 <span> 태그 입니다.
SPAN태그는 단독 사용이 불가하며 여느 태그와 마찬가지로 마무리를 </span> 으로 해주셔야 하며, 사이의 텍스트에 적용시키는 방법입니다. 말로 설명하는건 한계가 있으니 예시를 통해서 알아보도록 합니다.
지난 시간에 예시로 든 진달래꽃 텍스트를 그대로 활용하도록 하겠습니다. "나 보기가 역겨워 가실 때에는 말없이 고이 보내 드리오리다." 에서 "말없이" 에만 스타일을 적용시켜보도록 하겠습니다.
방법은 간단합니다. "말없이" 라는 텍스트 주위를 SPAN 태그로 감싸주면 됩니다. 그리고 SPAN에 STYLE 태그를 만들어 줍니다. 이 방법은 앞시간에 배웠던 P 태그에 스타일을 적용하는 방법과 똑같습니다. 그러므로 위처럼 컬러만 변경할수도, 또는 폰트 스타일을 바꾸기도, 크기를 변경하는것도 가능합니다. 예시에서는 글자색을 빨강으로 변경하는 SPAN Style을 적용시켰습니다. 어떻게 출력되는지 한번 확인해 볼까요?
보시는 것 처럼 "말없이" 라는 키워드만 빨갛게 변했습니다.
이번에는 글자색, 폰트 사이즈, 글꼴까지 모두 변경해 보도록 하겠습니다. 위처럼 태그를 구성해 보았습니다. 주의사항은 폰트는 한글이므로 작은 따옴표를 신경써서 넣으셔야 한다는 것 입니다. 그리고 콜론과 세미콜론을 주의해 주세요.
SPAN 스타일 태그대로 "사뿐히" 라는 키워드가 변경된 모습을 확인하실 수 있습니다. P 태그안에 SPAN 태그를 적용시켜 특정 단어만 변경이 가능하며, SPAN태그 또한 STYLE을 적용시켜서 수정이 가능하다는 점을 기억하시면 되겠습니다. 끝.
"친절한효자손 취미생활" 을 검색!
