티스토리 블로그 스킨 꾸미기 [span태그]

<span> 태그

(1) 정의

레이아웃을 설정할때 사용하는 태그로 <div>태그와 유사하지만 사용방법은 다르다.

<span>태그의 display속성은 inline요소이며, <br>를 이용한 줄바꿈이 되지 않는다. 왜냐하면 일직선으로 사용시에 쓰는 태그이기 때문이다. 반면, <div>태그는 줄바꿈이 되는 block요소라고 한다.

(2) 사용법

<span>태그는 혼자 사용하지 않으며 주로 CSS속성들과 함께 사용한다.

<span> : 시작, 오픈 태그

</span> : 종료, 클로즈 태그

현재 작성 중인 이러한 문장들을 꾸밀때 많이 사용되어 진다.

예시)

<span style="font-family: &quot;Arial Black&quot;; font-size: 18px;">&lt;span&gt; : 시작, 오픈 태그</span>

<span style="font-family: &quot;Arial Black&quot;; font-size: 18px;">&lt;/span&gt; : 종료, 클로즈 태그</span>

(3) 실습

ATOM 으로 이용하여 span태그를 실습 해보자.

위와 같이 HTML에 직접 CSS를 적용할때 사용하는 style요소를 <span>태그에 함께 사용하여 글씨 뒤에 배경색을 입혀주고, 폰트 사이즈를 변경해 보자.

아래를 보시면

위와 같이 결과값을 확인할 수 있엇다.

오늘은 여기까지..,

이어보기

☞ 티스토리 블로그 스킨 꾸미기 [h1~h6태그]