본문 바로가기
Front-End/HTML | CSS

HTML - 기본 구조와 태그

by 코젼 2022. 7. 7.
728x90
반응형

2022-07-07(14일차)

💡 HTML 기본 구조

<html> 
	<head>
		<title></title>
	</head>
<body> </body>	
</html>

💡 <head> 태그

◾ <title>
홈페이지를 대표할 수 있는 문서 제목을 지정한다.
◾ <meta>
다양한 속성을 가지고 있어 다양한 역할을 한다.
◾ <script>
홈페이지를 역동적으로 변화시킨다.
◾ <style>
문서 전체의 레이아웃을 결정하여 문서에 통일감을 준다.

💡 태그 사용 규칙

◾ <태그명></태그명>과 같이 여는 태그와 닫는 태그가 쌍으로 사용된다.
◾ 닫을 때는 태그명으로만 닫는다.
◾ 태그명과 속성명, 속성명과 속성명 사이는 한 칸씩 띄운다. 그 외 공백을
두어서는 안 된다.
◾ 속성명과 값은 = 부호를 사용하여 표시한다.
◾ 값이 두 단어 이상일 경우는 ""로 묶어서 표시한다.
◾ 속성이 있는 태그가 있고 없는 태그가 있다.
◾ 속성을 반드시 하나 이상 사용해야 하는 태그도 있고 생략해도 되는 태그가
있다.
◾ 여는 태그만 독립적으로 존재하는 태그도 있다.
◾ 태그를 중첩해서 사용할 경우 먼저 열어준 태그를 나중에 닫아준다.

💡 문단 관련 태그

◾ <br>
◾ <p>
◾ <div>
◾ <h1> ~ <h6>
◾ <center>
◾ <p> 태그와 <br> 태그 비교
내용1<p>내용2 = <p>내용1</p>내용2 = 내용1<br><br>내용2
 
💬 내용을 가운데 정렬하는 법
◾ <center>내용</center>
◾ <p align=center>내용</p>
◾ <div align=center>내용<div>
◾ <h4 align=center>내용</h4>
 
💬 자주 사용하는 특수문자
 
💬 <pre> 태그와 <xmp> 태그

💡 <body> 태그

◾ bgcolor
◾ background
◾ text
◾ link
◾ vlink
◾ alink
◾ leftmargin
◾ topmargin
◾ oncontextmenu
◾ onselectstart
◾ bgproperties
◾ scroll

💡 글꼴 관련 태그

◾ color
◾ face
◾ size
◾ <basefont> 태그와 비교  
💬 글자크기를 지정하는 태그
◾ <h숫자>
◾ <font size=숫자>
◾ <big>
◾ <small>
◾ <basefont>
💬 목록 관련 태그

💡 <img> 태그

◾ src

◾ alt

◾ width

◾ height

◾ align

◾ border

◾ hspace

◾ vspace


💬 이미지 사이트
◾ 홈페이지 제작과 관련된 이미지 제공
http://supericon.superboard.com
http://koreacartoon.hihome.com
http://cherrynara.dreamwiz.com
◾ 검색엔진을 이용한 이미지 검색 사이트
http://imagebingo.naver.com
http://imagesearch.yahoo.co.kr
http://imagesearch.nate.com

💡 정렬

💬 수평정렬
◾ left
◾ right
 
💬 수직정렬
◾ top, middle, bottom
◾ texttop
◾ absmiddle, absbottom
◾ baseline 

💡 <a> 태그

◼ 하이퍼링크
◾ href
◾ target
◾ name
◾ title

💡 경로

💬 절대경로
<a href="http://www.hanbitbook.co.kr/book_search.htm">한빛 미디어 도서검색</a>

💬 상대경로
작업 폴더 : <a href="samp.htm">예제</a>
상위 폴더 : <a href="../../samp.htm">예제</a>
하위 폴더 : <a href="sample/chap1/samp.htm">예제</a>

💡 <table> 태그

💬 기본 구조
 
<table>
	<caption>제목</caption>
	<tr>
		<td>셀 내용 </td>
      </tr>
</tabel>

💬 기본 태그

◼ <table> <tr> <td> <th> 태그 모두에 적용할 수 있는 속성들

◾ width

◾ height

◾ bgcolor

◾ background

◾ align

 

◼ <table> 태그에서만 사용하는 속성들

◾ border

◾ cellspacing

◾ cellpadding

◾ bordercolorlight

◾ bordercolordark

◾ frame

◾ rules

◼ <tr> <td> 태그에서 사용되는 속성들

◾ colspan

◾ rowspan

◾ Valign

◼ <caption> 태그에서 사용하는 속성

◾ Align

◾ 가운데 정렬 비교

◾ <table align=center>

◾ <tr align=center>

◾ <td align=center>

◾ <center>테이블소스 </center>

◾ <center>테이블제목 </center>

 

💬 셀 합치기
◾ colspan
◾ rowspan

💡 프레임

💬 기본 형식
 
<frameset cols="왼쪽 창의 크기, 오른쪽 창의 크기">

<frame src="왼쪽 창에 표시할 문서의 전체 경로">

<frame src="오른쪽 창에 표시할 문서의 전체 경로">

</frameset>

💬 사용 예

<frameset cols="200, *">

<frame src="left.htm">

<frame src="right.htm">

</frameset>

◼ <frameset> 태그의 속성

◾ cols

◾ rows

◾ border

◼ <frame> 태그의 속성

◾ src

◾ name

◾ scrolling

◾ marginwidth

◾ marginheight

◾ noresize

📃 간단한 태그 연습하기

💾 소스코드

frame.html
0.00MB
tag.html
0.00MB

💬 색상, 위치

<!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>태그 연습</title>
</head>

<body>
    <center>
        <font size=5 color=blue>환영합니다</font>
    </center>
    <p>
        <b>
            <p>우리 집 너무</p><u>하얗고</u> 깨끗하죠^_^;;
        </b><br>
    <p align=center>조금씩 알찬<br>
    <div>내용들로</div> 채워가겠습니다.^_^</p>

    <center>내용</center>
    <p aling="center">내용</p>
    <div div align=center">내용</div>
    <h4 align=center>내용</h4>

📃 이미지 태그 <img>

    <font size="5">홍 길&nbsp;&nbsp;&nbsp;동</font>
    <p>안녕&lt;하십니까&gt; 기호 : &amp;와 큰따옴표 &quot; 저작권을 표시할 때는 &copy; 상표를 표시할 때는 &trade;</p>

    <img src="C:\Users\moble\Pictures\지도.png" align="left" width="400" height="300" border="1">

    <a href="https://cojyeon.tistory.com/">코딩하는 젼이<img src="C:\Users\moble\Downloads\jiyeon.png" width="100"
            height="100" border="1"></a>

📃 항상 브라우저의 중앙에 보이도록 하기

<!-- 항상 브라우저의 중앙에 보이도록 하는 소스 -->
    <table align="center" border="0" width="100%" height="100%">
        <tr>
            <td align="center">
                <img src="C:\Users\moble\Downloads\smile.png" width="300" height="300">
                <br><br>
                <font size="1" color="#CCCCCC">
                    언제나 브라우저 중앙에 놓여집니다.
                </font>
            </td>
        </tr>

    </table>

    <!-- 사각 실선 테두리가 생성되는 코드 -->
    <table width="300" height="50" align="center" bgcolor="skyblue" cellspacing="1" cellpadding="0">
        <tr>
            <td align="center">
                <table width="300" height="50" bgcolor="white">
                    <tr>
                        <td align="center">
                            WWW.XML-JAVA.COM
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>

    <hr>

📃 선, <hr> 태그

<h3>HTML</h3>
    <p>HTML은 웹페이지를 만들기 위한 지배적인 마크업 언어이다.</p>
    <!-- width: 선의 너비 -->
    <!-- height: 선의 높이 -->
    <hr style="width:50%; height:5px; border:non; background-color:skyblue;">
    <h3>CSS</h3>
    <p>CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 언어이다.</p>

    <!-- 1 -->
    <hr width="500px">
    <!-- 2 -->
    <!-- key:value(json) -->
    <hr style="width:200px;">
    <br>
    <!-- 3 -->
    <hr width="100px" align="right">
    <!-- 4 -->
    <hr style="width:500px;" align="right">
    <br>
    <!-- 5 -->
    <hr width="20%">
    <!-- 6 -->
    <hr style="width:50%" ;>
    <br>

 

    <!-- 7 -->
    <hr style="border-width:10px 0 0 0; border-color:#ff77">
    <br>
    <!-- 8 -->
    <hr style="border-width:15px 0 0 0; border-color:#000">
    <br>
    <!-- 9 -->
    <hr style="border:0; height:2px; background: #bbb;">
    <br>
    <!-- 10 -->
    <hr style="border:0; height:2px; background: darkorange;">
    <br>

<!-- 11 -->
    <hr style="border-width:10px 0 0 0; border-style:dotted; border-color:#bbb;">
    <!-- 12 -->
    <hr style="border-width:5px 0 0 0; border-style:dashed; border-color:rebeccapurple">
    <!-- 13 -->
    <!-- height를 주면 사각형이 만들어진다. -->
    <hr style="border:10px outset green; height:20px;">
    <!-- 14 -->
    <hr style="border:10px outset rgb(163, 106, 255) ; height:20px; background: rgb(180, 155, 204);">
    <!-- 15 -->
    <!-- border 값을 지정하지 않고 백그라운드를 넣게 되면 border색상은 회색 음영 -->
    <hr style="border:0; height:10px; background:pink;">
</body>


</html>

📃 테이블(표) 만들기 예제

💾 소스코드

colorTable.html
0.00MB

<!DOCTYPE html>
<html lang="ko">

<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>colorTable</title>
</head>

<body>
    <table border="2" width="300" height="150">
        <tr>
            <td style=vertical-align:top rowspan="3" bgcolor="skyblue">일</td>
            <td colspan="3" bgcolor="pink">이</td>
        </tr>

        <tr>
            <!-- 'vertical-align'을 사용하려면 'style='을 적어야 한다. -->
            <td colspan="2" bgcolor="pink">삼</td>
            <td style=vertical-align:bottom rowspan="3" bgcolor="skyblue">사</td>
        </tr>

        <tr>
            <td>오</td>
            <td>육</td>
        </tr>

        <tr>
            <td colspan="3" bgcolor="pink">칠</td>
        </tr>
    </table>
</body>

</html>

📃 <Frameset>, <Frame> 창 태그

<!-- <frameset cols="왼쪽 창의 크기, 오른쪽 창의 크기">
   <frame src="왼쪽 창에 표시할 문서의 전체 경로">
   <frame src="오른쪽 창에 표시할 문서의 전체 경로"> -->
<frameset rows="100,*,100">
    <frame src="left.htm"></frame>
    <frame src="center.htm"></frame>
    <frame src="right.htm"></frame>
</frameset>
728x90
반응형

'Front-End > HTML | CSS' 카테고리의 다른 글

HTML - 입력 양식 작성하기, <form> 태그  (0) 2022.07.08
HTML - 실습문제 03  (0) 2022.07.07
HTML - 실습문제 02  (0) 2022.07.07
HTML - 실습문제 01  (0) 2022.07.06
HTML - 텍스트 태그, 목록, 표 만들기  (0) 2022.07.06

관련글

댓글

티스토리툴바