span은 인라인 요소이다.
div와 span의 다른점은 div는 줄 바꿈이 되지만 span은 줄 바꿈이 되지 않는다.
span은 span 요소 하나하나에 style을 지정할 수 있다.
Step04_inlineElement.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step04_inlineElement.html</title>
</head>
<body>
<h1>인라인(inline) 요소에 대해 알아보기</h1>
<p>
<span>하나</span>
<span style="color:red;">두울</span>
<span style="font-weight: bold;">세엣</span>
<span>span 요소는 인라인 요소 입니다.</span>
</p>
<p>
하나 두울 세엣 span 요소는 인라인 요소 입니다.
</p>
</body>
</html>
Step04_inlineElement2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step04_inlineElement.html</title>
<style>
#one{
color: red;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h1>인라인(inline) 요소에 대해 알아보기</h1>
<span>하나</span>
<span>두울</span>
<span>세엣</span>
<span>span 요소는 인라인 요소 입니다.</span>
<p>하나 두울 세엣 span 요소는 인라인 요소 입니다.</p>
<p>하나 두울 세엣 span 요소는 <span id="one">인라인</span> 요소 입니다.</p>
<h2>기본 스타일을 가지고 있는 인라인 요소</h2>
<!-- b 요소는 단순히 굵은 글씨 -->
<p> 천리길도 <b>한걸음</b> 부터</p>
<!-- strong 요소는 굵은 글씨 + 강조 의 의미도 가지고 있다. -->
<p> 천리길도 <strong>한걸음</strong> 부터</p>
<!-- i 요소는 단순히 이텔릭체 -->
<p> 여러분 <i>즐거운</i> 코딩이 시작 되었어요</p>
<!-- em 요소는 이텍릭체 + 강조 의 의미도 가지고 있다. -->
<p> 여러분 <em>즐거운</em> 코딩이 시작 되었어요</p>
</body>
</html>
'WEB' 카테고리의 다른 글
| [HTML] table의 모든 것 - <tr>,<th>,<td>,<thead> , <tbody>,<tfoot>,<caption>,<colgroup>,colspan, rowspan (0) | 2021.10.06 |
|---|---|
| [HTML] 목록 만들기 / ul, ol, dl (0) | 2021.10.06 |
| [HTML] div / p / h1~h6 (0) | 2021.10.06 |
| [HTML] <img src="" alt=""> 사용하여 이미지 삽입하기 (0) | 2021.10.06 |
| [HTML/CSS/JavaScript] 주석 (0) | 2021.10.06 |
