같은 block element이지만 <div>와 <h#> 나열의 차이는 <h#>이 위아래 margin을 가지고 있다는 점이다. 좌우는 아니지만 위아래 margin은 큰 것이 겹쳐서 남는 특징이 있다. paragraph(단락)인 <p>도 위아래 margin을 가진다.
step04. inline element
<title>Step04_inlineElement.html</title>
<style>
#one{
color : red;
font-weight : bold;
font-style : italic;
}
</style>
</head>
<body>
<h1>inline element에 대해 알아보기</h1>
<span>하나</span>
<span>둘</span>
<span>셋</span>
<span>span element는 inline element입니다.</span>
<p>하나 둘 셋 span element는 inline element입니다.</p>
<p>하나 둘 셋 span element는 <span id="one">inline</span> element입니다.</p>
<h2>기본 style을 가지고 있는 inline element</h2>
<!-- b element는 단순히 굵은 글씨-->
<p>천리길도 <b>한걸음</b> 부터</p>
<!-- strong element는 굵은 글씨 + '강조'의 의미도 가지고 있다.
예를 들면 스크린 리더기로 읽어줄 때 좀 더 강하게 읽어준다.-->
<p>천리길도 <strong>한걸음</strong> 부터</p>
<!-- i element는 단순한 italic-->
<p>여러분 <i>즐거운</i> 코딩이 시작되었어요</p>
<!-- em element는 italic + '강조'의 의미가 있다.-->
<p>여러분 <em>즐거운</em> 코딩이 시작되었어요</p>
</body>
원래 엔터는 \r\n 이다.
span은 필요한 높이가 자동으로 결정된다. <p>와는 margin에서의 차이가 있다.
span을 사용하는 이유는 특정한 줄 내에서 특정 글자의 style을 바꿀 수 있기 때문이다.
댓글