728x90
반응형

문제 1

이미지를 편집하지 않고 CSS만 사용해서 해답 이미지처럼 표시하시오.

 

 

▶ 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ul1 {
            list-style-type: none;
        }
        .li1 {
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
            width: 200px;
        }
    </style>
</head>
<body>
    <h1>HTML 잼잼</h1>
    <ul class="ul1">
        <li class="li1"><a href="http://www.naver.com" target="_blank">네이버</a></li>
        <li class="li1"><a href="http://www.daum.net/" target="_blank">다음</a></li>
        <li class="li1"><a href="../ch4/practice.html" target="_blank">첫 번째 실습 파일</a></li>
        <li class="li1"><a href="../ch4/practice2.html" target="_blank">두 번째 실습 파일</a></li>
    </ul>
</body>
</html>

 

 

 

 

문제 2

이미지를 편집하지 않고 CSS만 사용해서 해답 이미지처럼 표시하시오.

<body>
    <table>
        <caption>선물용과 가정용 상품 구성</caption>
        <thead>
            <tr>
                <th>용도</th>
                <th>중량</th>
                <th>갯수</t>
                <th>가격</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">선물용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>35,000원</td>
            </tr>
            <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>52,000원</td>
            </tr>
            <tr>
                <td rowspan="2">가정용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>30,000원</td>
            </tr>   
            <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>47,000원</td>
            </tr>
        </tbody>        
    </table>
</body>

 

 

 

▶ 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border: 1px solid black;
        }
        th, td {
            border: 1px dotted black;
            padding: 10px;
            text-align: center;
        }
        thead {
            color: red;
        }
        .col1 {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <table>
        <caption>선물용과 가정용 상품 구성</caption>
        <colgroup>
            <col class="col1">
        </colgroup>
        <thead>
            <tr>
                <th>용도</th>
                <th>중량</th>
                <th>갯수</th>
                <th>가격</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">선물용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>35,000원</td>
            </tr>
            <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>52,000원</td>
            </tr>
            <tr>
                <td rowspan="2">가정용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>30,000원</td>
            </tr>   
            <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>47,000원</td>
            </tr>
        </tbody>        
    </table>
</body>
</html>
728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'HRD_훈련 > 실습' 카테고리의 다른 글

[CSS] Box , Margin, display 실습 (27일차)  (0) 2023.06.22
[CSS] CSS 실습 3 (26일차)  (0) 2023.06.21
[CSS] CSS 실습 1 (26일차)  (0) 2023.06.21
[HTML] HTML 실습 3 (26일차)  (0) 2023.06.21
[HTML] HTML 실습 2 (25일차)  (0) 2023.06.20

+ Recent posts

티스토리툴바