생활코딩을 듣고 공부한 내용을 기록한 글입니다.
span 태그
특정 부분을 지정해서 디자인 속성만을 주고 싶은데, 실제 그 기능은 필요도 없는데 h1 이나 a 등 기능 태그를 쓴다면 많은 혼란이 생길 것입니다.
이럴 때 쓰는 무색무취와 같은 태그가 span이라는 HTML 태그입니다.
span은 그 자체로는 어떠한 기능도 포함하지 않고, 주로 style 선언과 함께 쓰입니다. inline-level element라는 특징을 지닙니다.
(코드 예시)
<p>My mother has <span style="color:blue">blue</span> eyes.</p>(코드 결과)
My mother has blue eyes.
div 태그
span과 같은 목적이나 block-level element입니다. 따라서 division으로 지정된 구역은 그 앞 뒤와 한 칸씩 떨어져 구분됩니다.
span 보다 더 큰 덩어리로 묶어서 스타일을 선언할 때 쓰는 태그입니다.
웹페이지의 섹션을 나눠서 스타일을 적용할 때는 div, 어떠한 문단에서 특정 내용을 강조하고 싶을 때는 span을 쓰는 식입니다.
(코드 예시)
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body>
</html>
(코드 결과)
넓이에 깊이 더하기