3. HTML 태그

2024. 10. 25. 09:55ㆍ파이썬(python)의 HTML

-줄바꿈 필요시 사용법

word Wrap에서 on 으로 바꿈

 

1. HTML 태그

<!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>
    <!--절대 경로-->
    <!--파일경로는 사용하지 않음-->   
    <img src="C:\hong\Web\HTML\winter1.png" alt="겨울">
    <img src="https://www.tcpschool.com/img/logo.png" alt="TCP스쿨">

    <!--상대 경로-->
    <!-- <img src="./2.png" alt="겨울"> -->
    <!-- <img src="2.png" alt="겨울"> -->
    <img src="images/winter2.png" alt="겨울">
</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>
    <!--절대 경로-->
    <a href="http://www.koreaitacademy.com">코리아IT아카데미</a>

    <!--상대 경로-->
    <a href="./1_첫HTML파일.html">1_첫HTML파일</a>
    <a href="./sub/4_1_이미지태그.html">이미지 태그</a>
    <a href="./4.이미지 태그.html"><img src="./winter5.png" alt="겨울"></a>
    <p id="menu">메뉴</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?</p>
    <p><a href="#">위로</a></p>
    <p><a href="#menu">메뉴</a></p>
</body>
</html>

-->

결과화면

더보기

코리아IT아카데미 1_첫HTML파일 이미지 태그 

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quas officia error eligendi cum ipsum facere tempore illum vero excepturi fuga alias amet eaque unde eveniet reprehenderit nihil, blanditiis similique?

위로

메뉴

3. 테이블

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테이블</title>
    <style>
        table { border: 1px solid black; width: 300px;}
        td {border: 1px dotted red;}
        th {border: 1px dotted red;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td>첫번째 셀</td>
        </tr>
    </table>

    <hr>

    <table>
        <tr>
            <td>첫번째 셀</td>
            <td>두번째 셀</td>
        </tr>
        <tr>
            <td>세번째 셀</td>
            <td>네번째 셀 </td>
        </tr>
    </table>

    <hr>

    <table>
        <tr>
            <th>첫번째 셀</th>
            <th>두번째 셀</th>
        </tr>
        <tr>
            <th>세번째 셀</th>
            <th>네번째 셀 </th>
        </tr>
    </table>

    <hr>
        <!-- table>(tr>td*3)*3 -->
    <table>
     <tr>
        <tr>
            <td colspan="3">첫번째 셀</td>
        </tr>  
        <td>첫번째 셀</td>
        <td>두번째 셀</td>
        <td>세번쨰 셀</td>
    </tr> 
    <tr>  
        <td rowspan="2">네번째 셀</td>
        <td>다섯번째 셀</td>
        <td>여섯번쨰 셀</td>
    </tr>
    <tr>  
        <td>일곱번째 셀</td>
        <td>여덟번째 셀</td>
    </tr>  
    </table>
</body>
</html>

-->

결과 화면

4. 아이프레임

<!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>
    <p><a href="./4_이미지태그.html">이미지 태그</a></p>
    <p><a href="./4_이미지태그.html" target="_blank">이미지 태그(새탭)</a></p>
    <p><a href="./4_이미지태그.html" target="korea">이미지 태그(아이프레임)</a></p>
    <p><a href="http://www.koreaitacademy.com" target="korea">코리아IT아카데미(아이프레임)</a></p>
    <p><iframe src="http://www.koreaitacademy.com" style="width:100%; height:500px;" name="korea"></iframe></p>
</body>
</html>

 

-->

결과 화면

5. 폼 태그

<!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>
    <form action="./regist">
        <p>아이디 <input type="text" maxlength="20" placeholder="아이디를 입력하세요" name="userid"></p>
        <p>비밀번호 <input type="password" maxlength="20" placeholder="비밀번호를 입력하세요" name="userpw"></p>
        <p>성별 남자<input type="radio" name="gender" value="남"> 여자<input type="radio" name="gender" value="여"></p>
        <p>취미 운동<input type="checkbox" name="hobby" value="운동"> 게임<input type="checkbox" name="hobby" value="게임"> 영화감상<input type="checkbox" name="hobby" value="영화감상"> 낚시<input type="checkbox" name="hobby" value="낚시"></p>
        
        <select name="job">
            <option value="프로그래머">프로그래머</option>
            <option value="공무원">공무원</option>
            <option value="학생">학생</option>
            <option value="주부">주부</option>
            <option value="전문직">전문직</option>
        </select>

        <p><textarea name="content" cols="30" rows="10"></textarea></p>
        <p>사진업로드 <input type="file"></p>
        <p><button type="submit">회원가입</button></p>
        <p><button type="reset">다시 작성</button></p>
        <p><button type="button" onclick="alert('안녕하세요')">버튼</button></p>
    </form>
</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>
    <div style="width: 300px;height: 300px; background-color: gold;">div 태그영역</div>
    <span style="font-size: 25px; color: pink;">span 태그영역</span>입니다.
</body>
</html>

 

-->

결과 화면

728x90
LIST

'파이썬(python)의 HTML' 카테고리의 다른 글

6. HTML 방식  (2) 2024.10.29
5. HTML 위치 지정방식  (0) 2024.10.29
4. CSS 관련 모음집  (6) 2024.10.28
2. VS Code(Visual Studio Code) 설치  (16) 2024.10.24
1. HTML(HyperText Mark-up Language)  (3) 2024.10.24

관련글

티스토리툴바