-
[HTML] div, span, 특수기호VScode/HTML 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>
컬러 사이트: online color picker <!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>
'VScode > HTML' 카테고리의 다른 글
[HTML] Semantec (0) 2022.09.08 [HTML] Table (0) 2022.09.08 [HTML] List (0) 2022.09.08 [HTML] Marquee (0) 2022.09.08 [HTML] Anchor (0) 2022.09.08