<tag>에 관하여
-요약설명
- span 요소: div태그와 마찬가지로 특별한 기능을 지니고 있진 않지만 CSS와 함께 레이아웃이나 태그들을 꾸밀때 주로 사용합니다.
- b 요소: font를 굵게 만드는 태그입니다.
- big 요소: font를 크게 만드는 태그입니다.
- address 요소: 주소를 나타낼때 사용하는 태그이며 font가 기울림이 됩니다.
- i 요소: font를 이텔릭체(기울림)으로 만들어 줍니다.
- hr 요소: 수평선을 그어주는 태그입니다.
- del 요소: 삭제되었다는 표시로 font가운데 줄을 그어주는 태그입니다.
-심화설명
· span 요소 / 사용법 <span></span>
div태그와의 차이점은 display의 속성이 width가 100%인 block 엘리먼트가 아닌 inline 엘리먼트라는 점입니다. inline 엘리먼트의 경우 margin과 width,height 값이 먹지 않기 때문에 display속성을 inline-block으로 변경후 주로 사용을 하는 편입니다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
span{
border: 1px solid red;
margin: 0px 15px;
}
</style>
</head>
<body>
안녕하세요! <span>좋은 아침</span>입니다.
</body>
</html>
결과
위의 예제에서 보면 margin을 가로로 15px씩 주었는데도 불구하고 inline 엘리먼트 특성상 margin이 들어가지 않는 부분을 확인할 수 있습니다. 그리하여 display:inline-block 성질을 주어 변화합니다.
예제
결과
두번째 예제에서 보면 display:inline-block 으로 변경 후 margin이 잘들어간 결과를 확인 할 수 있습니다.
'Rich Venveis의 연구노트 > HTML' 카테고리의 다른 글
| [HTM,L][tag] dl, dt, dd, sup, sub, s, u, blockquoto, q, cite, (0) | 2018.03.23 |
|---|---|
| HTML[tag] p, br, pre, mark (0) | 2018.03.22 |
| [HTML][tag] img (0) | 2018.03.19 |
| [HTML][tag] div (0) | 2018.03.15 |
| [HTML][tag] link (0) | 2018.03.11 |