λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
HTML5 & CSS3

HTML μˆ™μ œ

by μ½”λ”©ν•˜λŠ” λΆ•μ–΄ 2021. 1. 25.
λ°˜μ‘ν˜•

μˆ™μ œ) λ°‘ 사진과 같은 ν˜•μ‹μ˜ λ¬Έμ„œ λ§Œλ“€κΈ°

 

 

<κ³Όμ •>

μ²˜μŒμ—” μ΄λ ‡κ²Œ μ΄μƒν•˜κ²Œ λ‚˜μ˜΄

 

 

ν‹€ μž‘λŠ”μ€‘

 

<μ™„μ„±λ³Έ>

-λ§Œλ“œλŠλΌ μ£½λŠ”μ€„ μ•Œμ•˜λ‹€γ… 

-ν•™μ›μ—μ„œ μ•ˆκ°€λ₯΄μ³μ€€ λ‚΄μš©λ„ μ¨μ•Όν–ˆκ³  CSS도 μ¨μ•Όν–ˆλ‹€...

-집컴퓨터에선 적용되던게 학원컴퓨터에선 적용이 μ•ˆλ˜λŠ”κ²Œ μžˆλ‹€(ν…Œλ‘λ¦¬ μ„  νšŒμƒ‰ λ“±λ“±)

 

 

<μ†ŒμŠ€>

<html lang="ko">
<head>
<meta charset="UTF-8">
<title>홍길동</title>
<style type="text/css">
    .line{border-top:3px solid #A0D1F7;}
</style>
</head>
<body>
<table border="1" width="70%" height="150"  frame="hsides" bordercolor="dcdcdc" style="border-collapse:collapse;">
<p class="tit">
<img src="play.jpg"><b>학생/κ³Όμ • 정보</b>
    <tr>
        <th bgcolor="E0EBFF" class="line">이름</th>
            <td class="line">홍길동</td>
        <th bgcolor="E0EBFF" class="line">μ „ν™”λ²ˆν˜Έ</th>
            <td class="line">010-1234-5678</td>
        <th rowspan="6" width="50" frame="hsides" colspan="4" class="line"<th><img src="cat.jpg">
        </th>
    </tr>    

    <tr>
        <th bgcolor="E0EBFF">λͺ¨μ§‘ꡬ뢄</th>
            <td colspan="3">개발자</td>
    </tr>

    <tr>
        <th bgcolor="E0EBFF">κ³Όμ •λͺ…</th>
            <td colspan="3">JAVA</td>
    </tr>

    <tr>
        <th bgcolor="E0EBFF" frame="hsides">κ΅μœ‘μΌμ •</th>
        <td colspan="3">2020-00-00~2020-00-00</td>
    </tr>
</table>

<table border="1" width="70%" height="150" frame="hsides" bordercolor="dcdcdc" style="border-collapse:collapse;">
<p class="tit">
<img src="play.jpg"><b>기본정보</b>
    <tr>
        <th bgcolor="E0EBFF" class="line">이름</th>
            <td class="line">
                <input type="text" value="홍길동">
            </td>
        <th bgcolor="E0EBFF" class="line">성별</th>
            <td class="line">
                <form action="/cgi-bin/formmail.cgi" method="post"><p>
                <input type="radio" name="sex" value="남">남
                <input type="radio" name="sex" value="μ—¬" checked>μ—¬
            </td>
    </tr>  

    <tr>
        <th bgcolor="E0EBFF">생년월일</th>
            <td>
                <input type="text" value="XXXXXX">
            </td>
        <th bgcolor="E0EBFF">이메일</th>
            <td>
                <input type="text" value="cool@nate.com">
            </td>
    </tr> 

    <tr>
        <th bgcolor="E0EBFF">μ „ν™”λ²ˆν˜Έ</th>
            <td>
                <form action="cgi-bin/formmail.cgi" method=post">
                <select name="user_num">
                <option> 053 </option>
                </select>
                -
                <input type="text" size="2" value="숫자만">
                -
                <input type="text" size="2" value="숫자만">
            </td>
        <th bgcolor="E0EBFF">νœ΄λŒ€μ „ν™”</th>
            <td>
                <form action="cgi-bin/formmail.cgi" method=post">
                <select name="user_num">
                <option> 010 </option>
                </select>
                -
                <input type="text" size="2" value="1234">
                -
                <input type="text" size="2" value="5678">
                </select>
            </td>
    </tr>

    <tr>
        <th bgcolor="E0EBFF">사진등둝</th>
            <td colspan="3">
                <form action="/cgi-bin/formmail.cgi"
                enctype="multipart/form-data" method="post">
                <input type="text">
                <input type="button" value="찾아보기" accept="image/jpeg.image/gif">
                </form>
            </td>
    </tr>
   
    <tr>
        <th bgcolor="E0EBFF">μ£Όμ†Œ</th>
            <td colspan="3">
                <input type="text" value="704-926"><img src="post.jpg">
                <font size="1" color="EF904C">
                *μƒˆ μš°νŽΈλ²ˆν˜Έκ°€ μ μš©λ©λ‹ˆλ‹€.</p>
                <input type="text" size="50" value="μ„œμšΈμ‹œ 강남ꡬ"><p>
                <input type="text" size="50" value="xxx동 xxxx호">
            </td>
    </tr>

    <tr>
        <th bgcolor="E0EBFF">등둝일</th>
            <td>
                <input type="text" value="2020-05-19(15:03)">
            </td>
        <th bgcolor="E0EBFF">μˆ˜μ •μΌ</th>
            <td>
                <input type="text" value="2020-05-19(22:03)">
            </td>
    </tr>
</table>
</body>
</html>
λ°˜μ‘ν˜•

λŒ“κΈ€