VScode/HTML
[HTML] div, span, 특수기호
hvoon
2022. 9. 8. 13:43
div 태그
. block 형식으로 공간을 분할. 차곡차곡 쌓아 내려가는 형식.
. css를 사용해 원하는 레이아웃을 구성할 수 있기 때문에 많이 사용됩니다
- block 형식
1) div 태그
2) h1~h6 태그
3) p 태그
4) 목록태그(ol, ul, li)
5) 테이블 태그
6) form 태그
*block 형식의 태그는 별도의 <br /> 이 없어도 줄바꿈 형식이 포함되어져 사용됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>22_DIV.html</title>
</head>
<body>
<div style="background-color:yellow">yellow</div>
<div style="background-color:pink"><b>pink</b></div>
<!-- 가로크기: 지정하지 않으면 왼쪽 끝부터 오른쪽 끝까지.
세로크기: 지정하지 않으면 내용이 들어있는 만큼 내용이 없으면
세로크기는 거의 위쪽경계와 아래쪽 경계가 붙어서 일직선처럼 보이기도 함 -->
</body>
</html>
span 태그
-span : inline 형식으로 공간을 분할. 한 줄 안에 차례차례 위치하는 형식.
-inline 형식으로 사용되어지는 태그: span태그 / a 태그 / input 태그 / 글자형식태그.
-inline 형식의 의미s: 줄바꿈 속성이 없어서 한줄어 이어서 나열되는 태그들
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>23_Span.html</title>
</head>
<body>
<div style="background-color:yellow">yellow</div>
<div style="background-color:skyblue">skyblue</div>
<hr />
<span style="background-color:yellow">yellow</span>
<span style="background-color:skyblue">skyblue</span>
<!-- 가로 세로 크기 모두 따로 지정하지 않으면, 내용이 있는 만큼의 크기로 표시됨 -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Color.html</title>
</head>
<body>
<h1 style="background-color: rgb(255, 0, 255);">Header-1</h1>
<h2 style="background-color: rgba(241, 14, 33, 0.5);">Header-2</h2>
<h3 style="background-color: #F0F641; opacity:0.5;">Header-3</h3>
<h4 style="background-color: hsl(111, 91%, 38%);">Header-4</h4>
<h5 style="background-color: hsla(111, 91%, 38%, 0.5);">Header-5</h5>
<h5 style="background-color: orange">Header-5</h5>
</body>
</html>
특수기호
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>특수기호.html</title>
</head>
<body>
가나다라 마바사<br />
<center>HTML 상에서 특수문자는 태그 기호나 다른 기능의 기호와 중첩되어<br />
제대로 나타나지 않을 수 있기 때문에 아래 문자들를 사용합니다</center>
<table width="600" align="center" cellsapceing="1" bgcolor="black">
<tr height="50" bgcolor="white" align="center">
<th width="200">기호</th><th width="200">HTML 표기</th><th>의미</th>
</tr>
<tr height="50" bgcolor="white" align="center">
<td><b>&</b></td><td>&amp;</td><td>Ampersand</td>
</tr>
<tr height="50" bgcolor="white" align="center">
<td><b><</b></td><td>&lt;</th><td>시작 꺽쇠괄호</td>
</tr>
<tr height="50" bgcolor="white" align="center">
<td><b>></b></td><td>&gt;</th><td>끝 꺽쇠괄호</td>
</tr>
<tr height="50" bgcolor="white" align="center">
<td><b> </b></td><td>&nbsp;</th><td>Space</td>
</tr>
<tr height="50" bgcolor="white" align="center">
<td><b>"</b></td><td>&quot;</th><td>큰따옴표</td>
</tr>
<tr height="50" bgcolor="white" align="center">
<td><b>©</b></td><td>&copy;</th><td>저작권 CopyRight</td>
</tr>
<tr height="50" bgcolor="white" align="center">
<td><b>«</b></td><td>&laquo;</th><td>이중꺽쇠 괄호 - 시작</td>
</tr>
<tr height="50" bgcolor="white" align="center">
<td><b>»</b></td><td>&raquo;</th><td>이중꺽쇠 괄호 - 끝</td>
</tr>
<tr height="50" bgcolor="white" align="center">
<td><b>¢</b></td><td>&cent;</th><td>센트 기호</td> </tr>
<tr height="50" bgcolor="white" align="center">
<td><b>£</b></td><td>&pound;</th><td>파운드 기호</td> </tr>
<tr height="50" bgcolor="white" align="center">
<td><b>¥</b></td><td>&yen;</th><td>엔화 기호</td> </tr>
<tr height="50" bgcolor="white" align="center">
<td><b>\</b></td><td>&#92;</th><td>원화 기호</td> </tr>
</tr>
</table>
<br /><br /><br />
</body>
</html>