본문 바로가기
웹 개발

4. 웹 개발을 위한 기본 HTML 태그 모음 & 요약 정리2

by 곽정우 2024. 4. 4.

1. 하이퍼링크 태그

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이퍼링크</title>
</head>
<body>
    <h2>하이퍼링크</h2>
    <!-- 절대 경로-->
    <a href="https://koreaisacademy.com/">코리아IT아카데미</a>
    <a href="https://tcpschool.com/"><img src="https://tcpschool.com/img/logo.png"
    alt="TCP스쿨 로고"></a>

    <!-- 상대 경로-->    
    <a href="./1_mywebsite.html">내 첫 웹페이지</a>
    <a href="./sub/subpage.html">서브페이지</a>

</body>
</html>

2. 책갈피

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>책갈피</title>
</head>
<body>
    <h1 id ="menu">책갈피</h1>
    <p><a href="#book">목적지로 이동</a></p>
    <p><a href="#center">이미지1 으로 이동</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p><img src="pic4.png" alt="png" id="center"> </p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas temporibus ullam cumque illum eligendi iusto molestias repellat similique at, esse dicta, et totam fugit ea sequi recusandae est iure sapiente.</p>
    <p><a name="book">도착지</a></p>
    <p><a href="#menu">위로 이동</a></p>

</body>
</html>

3. 테이블1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테이블</title>
</head>
<body>
    <h2>테이블 1</h2>
    <table>
        <tr>
            <td>첫번재 셀</td>
        </tr>
    </table>

    <hr>

    <table border="1" width="300">
        <tr>
            <td>두번째 셀</td>
        </tr>
    </table>

    <hr>

    <table border="1" width="300">
        <tr>
            <th>1 셀</th>
            <th>2 셀</th>
        </tr>
        <tr>
            <td>3 셀</td>
            <td>4 셀</td>
        </tr>
        <tr>
            <td>5 셀</td>
            <td>6 셀</td>
        </tr>
    </table>

    <hr>

    <table border="1" width="300">
        <tr>
            <th colspan="2">1 셀</th>
        </tr>
        <tr>
            <td>2 셀</td>
            <td>3 셀</td>
        </tr>
        <tr>
            <td>4 셀</td>
            <td>5 셀</td>
        </tr>
    </table>

    <hr>

    <table border="1" width="300">
        <tr>
            <th colspan="2">1 셀</th>
        </tr>
        <tr>
            <td rowspan="2">2 셀</td>
            <td>3 셀</td>
        </tr>
        <tr>
            <td>4 셀</td>
        </tr>
    </table>
    

    <hr>

    <table border="1" width="300">
        <tr>
            <th colspan="3">1 셀</th>
        </tr>
        <tr>
            <td rowspan="3">2 셀</td>
        </tr>
        <tr>
            <td rowspan="3">3 셀</td>
        </tr>
        <tr>
            <td rowspan="3">4 셀</td>
        </tr>

    </table>

    <hr>

    <table border="1" width="300">
        <tr>
            <th colspan="3">1 셀</th>
        </tr>
        <tr>
            <td rowspan="3">2 셀</td>
            <td>3 셀</td>
            <td rowspan="3">4 셀</td>
        </tr>
        <tr>
            <td>5 셀</td>
        </tr>
        <tr>
            <td>6 셀</td>
        </tr>
    </table>
    
</body>
</html>

4. 테이블2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테이블2</title>
</head>
<body>
    <h2>테이블 2</h2>
    <table border="1" width="400">
        <tr>
            <th colspan="3">1 셀</th>
        </tr>
        <tr>
            <td rowspan="3">2 셀</td>
            <td>3 셀</td>
            <td rowspan="3">4 셀</td>
        </tr>
        <tr>
            <td>5 셀</td>
        </tr>
        <tr>
            <td>6 셀</td>
        </tr>
    </table>
</body>
</html>

5. 테이블2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테이블 3</title>
</head>
<body>
    <h2>테이블 3</h2>  
    <table>
    <caption><p><strong>KDT  수강생 리스트</strong></p></caption>
        <Colgroup>
            <col style="width: 100px;background-color: pink;">
            <col style="width: 200px;background-color: skyblue;">
            <col style="width: 300px;background-color: yellowgreen;">           
        </Colgroup>
        <tr>
            <th>이름</th>
            <th>연락처</th>
            <th>주소</th>
        </tr>
        <tr>
            <th>이메론</th>
            <th>010-1111-1111</th>
            <th>경기도</th>
        </tr>
        <tr>
            <th>김사과</th>
            <th>010-2222-2222</th>
            <th>서울시</th>
        </tr>
        <tr>
            <th>오렌지</th>
            <th>010-3333-3333</th>
            <th>부산시</th>
        </tr>
        <tr>
            <th>이메론</th>
            <th>010-4444-4444</th>
            <th>대전시</th>
        </tr>
    </table>
</body>
</html>

6. 아이프레임

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>아이플레임</title>
</head>
<body>
    <h2>아이프레임</h2>
    <P><a href="./2_책갈피.html">책갈피 예제(현재창)</a></P>
    <P><a href="./2_책갈피.html" target="=_blank">책갈피 예제(새탭)</a></P>
    <P><a href="./2_책갈피.html" target="=korea">책갈피 예제(아이프레임)</a></P>
    <p><a href="https://koreaisacademy.com/" target="korea">코리아IT아카데미</a></p>
    <P><iframe src="https://koreaisacademy.com/" style="width:100%; height:500px;" name="korea"></iframe></P>
</body>
</html>

7. 폼태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼태그</title>
</head>
<body>
    <h2>폼태그</h2>
    <form action="./regist" method="post">
        <p>아이디: <input type="text" maxlength="20" placeholder="아이디를 입력하세요" name="userid" id="userid"></p>
        <p>비밀번호: <input type="text" maxlength="20" placeholder="비밀번호를 입력하세요" name="userpw" id="userpw"></p>
        <p>성별: 
            <label for="male">남자</label>
            <input type="radio" name="gender" value="남자" id="male" checked> 
            <label for="female">여자</label>
            <input type="radio" name="gender" value="여자" id="female">
        </p>
        <p>취미: 
            <label for="hobby1">운동</label>
            <input type="checkbox" name="hobby" value="운동" id="hobby1" >
            <label for="hobby2">영화감상</label>
            <input type="checkbox" name="hobby" value="영화감상" id="hobby2">
            <label for="hobby3">노래감상</label>
            <input type="checkbox" name="hobby" value="노래감상" id="hobby3">
            <label for="hobby4">낚시</label>
            <input type="checkbox" name="hobby" value="낚시" id="hobby4">
            <label for="hobby5">게임</label>
            <input type="checkbox" name="hobby" value="게임" id="hobby5">
        </p>
        <p>첨부파일: <input type="file"></p>
        <p>직업: 
            <select name="job">
                <option value="프로그래머">프로그래머</option>
                <option value="공무원">공무원</option>
                <option value="전문직">전문직</option>
                <option value="취준생">취준생</option>
                <option value="학생">학생</option>
                <option value="주부">주부</option>
            </select>
        </p>
        <p>
        <p>자기소개</p>    
        <p></p><textarea name="content" cols="30" rows="10"></textarea></p>
        <p>이메일: <input type='email'></p>
        <p>웹사이트: <input type="url"></p>
        <p>전화번호: <input type="tel"></p>
        <p>생년월일: <input type="date"></p>   
        <p>좋아하는 숫자: <input type="number" min="1" max="100" step="1"></p>
        <p>프로그래밍 능력: <input type="range" min="0" max="10" step="3"></p>
        <p><input type="button" value="버튼" onclick="alert('안녕하세요!')">
        <input type="reset" value="리셋">
        <input type="submit" value="전송"></p>
        <p><button type="button">버튼</button></p>
    </form>
</body>
</html>

 

'웹 개발' 카테고리의 다른 글

5. HTML 요소 이해: 인라인, 블록, 시맨틱 태그  (0) 2024.04.05
과제- 뉴스기사,즐겨찾기,이력서 html 만들기  (0) 2024.04.04
3. HTML과 FTP 사용법 정리(닷홈 호스팅을 활용한 실습 가이드)  (0) 2024.04.04
2. 웹 개발을 위한 기본 HTML 태그 모음 & 요약 정리  (0) 2024.04.03
1. 웹 개발: HTML, 이미지, 그리고 웹 표준  (0) 2024.04.03

관련글

티스토리툴바