본문 바로가기
2024 웹/HTML, CSS, JavaScript

HTML 기본 2

by concho 2024. 1. 19.

 

 

<!-- 
    hr 태그 
    => 선 그리기(수평) 태그 : 단독태그
        - 문단의 분리를 위해서 사용되는 태그
        - 기본적으로 가운데 정렬이 됨(Align="center")
 -->

 <h1> H1 태그입니다. </h1>
 <hr Align="Left" width="50%">
 <h2> H2 태그입니다. </h2>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CSS만드는 태그 -->
    <style>
        th {
            border: 2px solid black;
            border-collapse: collapse;
            font-size: 17px;
            background-color: rgb(172, 165, 165);
        }
        td{
            border: 2px solid black;
            border-collapse: collapse;
            text-align: left;
        }
        table {
            border: 2px solid black;
            border-collapse: collapse;
            width: 80%;
            table-layout: fixed;
        }
        caption{
            font-style:initial;
            font-size: 200%;
        }
    </style>
</head>
<body>
    <!-- 
        table태그에서 행 또는 열 병합
        rowspan : row(위아래 병합)
        colspan : col(좌우 병합)
     -->
    <br><br>
     <table>
        <caption><b>자동차 재원표</b><br><br></caption>
        
        <thead>
            <tr>
                <th width="150px" >차종</th>
                <th colspan="2">이미지</th>
                <th width="60">배기량</th>
                <th width="60">연료</th>
                <th width="50">연식</th>
                <th>제조사</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td calss="my">제네시스(쿠페)</td>
                <td colspan="2"><img src="./images/car1.gif" alt="복분자" width="100%"></td>
                <td rowspan="2">2,000</td>
                <td rowspan="2">가솔린</td>
                <td>2015</td>
                <td rowspan="5">현대자동차</td>
            </tr>
            <tr>
                <td>소나타</td>
                <td colspan="2"><img src="./images/car2.gif" alt="복분자" width="100%"></td>
                
                <td>2014</td>
            </tr>
            <tr>
                <td>그랜저(HG)</td>
                <td colspan="2"><img src="./images/car3.gif" alt="복분자" width="100%"></td>
                <td>3,000</td>
                <td>디젤</td>
                <td>2015</td>
            </tr>
            <tr>
                <td>아반떼</td>
                <td colspan="2"><img src="./images/car4.gif" alt="복분자" width="100%"></td>
                <td>1,800</td>
                <td rowspan="2">가솔린</td>
                <td rowspan="2">2014</td>
            </tr>
            <tr>
                <td>i30</td>
                <td colspan="2"><img src="./images/car5.gif" alt="복분자" width="100%"></td>
                <td>1,500</td>
            </tr>
        </tbody>
</body>
</html>
<!-- 
    font 태그 : 글자와 관련된 태그.
    속성
    - size 속성(필수)
 -->
 <font size="1"> Font tag 1</font><br>
 <font size="2"> Font tag 2</font><br>
 <font size="3"> Font tag 3</font><br>
 <font size="4"> Font tag 4</font><br>

 

    <!-- 
        text 서식과 관련된 태그
        - b 태그 : 텍스트 글자를 굵은 글자로 만들어 주는 태그
        - i 태그 : 텍스트 글자를 기울어진 글자로 만들어 주는 태그
        - small 태그 : 텍스트 글자를 작은 글자로 만들어줌
        - sub 태그: 아랫첨자
        - sup 태그 : 윗첨자
        - ins 태그 : 밑줄 글자
        - del 태그 : 취소선 글자
     -->
     <p>A<b> b </b></p> <br>
     <p>A<i> i </i></p><br>
     <p>A<small> small </small></p><br>
     <p>A<sub>2</sub></p><br>
     <p>A<sup>2</sup></p><br>
     <p>A<ins> ins </ins></p><br>
     <p>A<del> del </del></p><br>

 

    <!-- 
        목록 태그
        - ul(unordered list) 태그
        ==> 순서가 없는(정렬이 되지 않은) 태그
            순서가 바뀌어도 상관없는 목록에 사용
            실무에서 많이 사용
        
        - ol(ordered list) 태그
        ==> 순서가 있는 태그

        - li(list item) 태그
        ==> 리스트 목록
     -->

     <h2>음료 메뉴</h2>
     <ul>
        <li>포카리1</li>
        <li>포카리2</li>
        <li>포카리3</li>
        <li>포카리4</li>
     </ul>
     <h2>음료 메뉴2</h2>
     <ol>
        <li>포카리1</li>
        <li>포카리2</li>
        <li>포카리3</li>
        <li>포카리4</li>
     </ol>

 

    <!-- 
        목록 태그
        - ul(unordered list) 태그
        ==> 순서가 없는(정렬이 되지 않은) 태그
            순서가 바뀌어도 상관없는 목록에 사용
            실무에서 많이 사용
        
        - ol(ordered list) 태그
        ==> 순서가 있는 태그

        - li(list item) 태그
        ==> 리스트 목록
     -->

     <h2>음료 메뉴</h2>
     <ul>
        <li>포카리1</li>
        <li>포카리2</li>
        <li>포카리3</li>
        <li>포카리4</li>
     </ul>
     <hr width="20%" Align="left">
     <h2>음료 메뉴2</h2>
     <ol type="i">
        <li>포카리1</li>
        <li>포카리2</li>
        <li>포카리3</li>
        <li>포카리4</li>
     </ol>
     <hr width="20%" Align="left">
     <h2>음료 메뉴2</h2>
     <ul type="square">
        <li>포카리1</li>
        <li>포카리2</li>
        <li>포카리3</li>
        <li>포카리4</li>
     </ul>

 

    <!-- 
        정의형 목록 : 용어를 정의라고 용어를 설명하는 태그.
        - dl 태그 : 정의 목록
        - dt 태그 : 제목
        - dd 태그 : 내용(들여쓰기)
     -->
     <dl>
        <dt>키보드</dt>
        <dd>컴퓨터에 문자를 입력하는 장치이다</dd>
        <dt>마우스</dt>
        <dd>
            <ul>
                <li>컴퓨터에 위치를 입력하는 장치이다</li> 
                <li>가볍다.</li>              
            </ul>
        </dd>
     </dl>

 

<body>
    <!-- 
        img 태그
        - src, alt 속성과 같이 들어가야 함
        - src는 이미지 경로, alt는 이미지 설명
     -->
     <img src="./images/r.png" alt="토끼" title="토끼" width="30%"><br>
</body>

 

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        table 태그
        ==> 데이터를 표로 만들어 주는 태그.
        tr(row) 태그
        th(head) 태그
        td(data) 태그
     -->
     <table
     border="1"
     width="50%"
     height="200"
     cellspacing="5">
     <caption>표 제목</caption>
     <thead>
         <tr align="center" bgcolor="white">
             <td></td>
             <th>김씨</th>
             <th>이씨</th>
             <th>박씨</th>
         </tr>
     </thead>

     <tbody>
         <tr align="center" bgcolor="white">
             <th>월급</th>
             <td>100원</td>
             <td>200원</td>
             <td>400원</td>
         </tr>
         <tr align="center" bgcolor="white">
           <td>월급</td>
           <td>100원</td>
           <td>200원</td>
           <td>400원</td>
         </tr>
     </tbody>
 </table>

</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CSS만드는 태그 -->
    <style>
        th {
            text-align: center;
            font-size: 17px;
            background-color: rgb(172, 165, 165);
        }
        td{
            font-size: 17px;
            text-align: center;
        }
        table {
            width: 40%;
            table-layout: fixed;
        }
    </style>
</head>
<body>
    <!-- 
        [문제] 4개의 과일 목록을 테이블을 이용하여 화면에 보이기
            과일이름, 과일이미지, 과일원산지
     -->
     <table border ="1" cellspacing="1">
        <caption>과일 테이블</caption>
        
        <thead>
            <tr>
                <th>과일이름</th>
                <th>과일 이미지</th>
                <th>과일 원산지</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>복분자</td>
                <td><img src="./images/복분자.png" alt="복분자" width="100%"></td>
                <td>한국</td>
            </tr>
            <tr>
                <td>수박</td>
                <td><img src="./images/수박.png" alt="수박" width="100%"></td>
                <td>한국</td>
            </tr>
            <tr>
                <td>자두</td>
                <td><img src="./images/자두.png" alt="자두" width="100%"></td>
                <td>한국</td>
            </tr>
        </tbody>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CSS만드는 태그 -->
    <style>
        th {
            font-size: 17px;
            background-color: rgb(172, 165, 165);
        }
        td{
            text-align: left;
        }
        table {
            width: 80%;
            table-layout: fixed;
        }
        caption{
            font-style:initial;
            font-size: 200%;
        }
    </style>
</head>
<body>
    <!-- 
        table태그에서 행 또는 열 병합
        rowspan : row(위아래 병합)
        colspan : col(좌우 병합)
     -->
    <br><br>
     <table border ="1" cellspacing="0">
        <caption><b>자동차 재원표</b><br><br></caption>
        
        <thead>
            <tr>
                <th width="150px" >차종</th>
                <th colspan="2">이미지</th>
                <th width="60">배기량</th>
                <th width="60">연료</th>
                <th width="50">연식</th>
                <th>제조사</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td calss="my">제네시스(쿠페)</td>
                <td colspan="2"><img src="./images/car1.gif" alt="복분자" width="100%"></td>
                <td rowspan="2">2,000</td>
                <td rowspan="2">가솔린</td>
                <td>2015</td>
                <td rowspan="5">현대자동차</td>
            </tr>
            <tr>
                <td>소나타</td>
                <td colspan="2"><img src="./images/car2.gif" alt="복분자" width="100%"></td>
                
                <td>2014</td>
            </tr>
            <tr>
                <td>그랜저(HG)</td>
                <td colspan="2"><img src="./images/car3.gif" alt="복분자" width="100%"></td>
                <td>3,000</td>
                <td>디젤</td>
                <td>2015</td>
            </tr>
            <tr>
                <td>아반떼</td>
                <td colspan="2"><img src="./images/car4.gif" alt="복분자" width="100%"></td>
                <td>1,800</td>
                <td rowspan="2">가솔린</td>
                <td rowspan="2">2014</td>
            </tr>
            <tr>
                <td>i30</td>
                <td colspan="2"><img src="./images/car5.gif" alt="복분자" width="100%"></td>
                <td>1,500</td>
            </tr>
        </tbody>
</body>
</html>

'2024 웹 > HTML, CSS, JavaScript' 카테고리의 다른 글

로그인 유효성 검사 js 이용방법  (0) 2024.03.14
Https -> Http 포워딩 오류 해결법  (0) 2024.03.04
HTML 기본 3  (1) 2024.01.22
HTML 기본 1  (0) 2024.01.18

관련글

댓글

티스토리툴바