728x90
반응형

문제 1

다음 화면을 보고 코드를 작성하시오.

  • box의 개념을 이해하여 코드를 작성하시오.
  • div 태그를 id="container" 로 묶어 출력하시오.

 

 

▶ 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스5개</title>
    <style>
        #container {
            width: 1000px;
            margin: 10px auto;
        }
        .in {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin-bottom: 10px; 
            /* margin: 10px 5px 30px 50px;  위 오른쪽 아래 왼쪽 순.(시계방향) */
            display: inline-block;
        }
        .out {
            display: block;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="in"></div>
        <div class="in"></div>
        <div class="in"></div>
        <div class="in out"></div>
        <div class="in out"></div>
        <!-- 클래스를 2개 이상 설정하는 것이 가능하다. -->
    </div>
</body>
</html>

 

 

 

 

문제 2

다음 화면을 보고 코드를 작성하시오.

  • box의 개념을 이해하여 코드를 작성하시오.
  • div 태그를 id="container" 로 묶어 출력하시오.
  • br 태그를 사용하지 않고 작성하시오.

 

 

▶ 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스10개</title>
    <style>
        #container {
            width: 1000px;
            margin: 50px auto;
        }
        .in {
            width: 100px;
            height: 100px;
            border: 2px solid black;
            margin: 10px; 
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="container">
        <div>
            <div class="in"></div>
            <div class="in"></div>
        </div>
        <div>
            <div class="in"></div>
            <div class="in"></div>
            <div class="in"></div>
        </div>
        <div class="in"></div>
        <div>
            <div class="in"></div>
            <div class="in"></div>
            <div class="in"></div>
            <div class="in"></div>
        </div>
    </div>
</body>
</html>

 

 

 

 

문제 3

다음 화면과 코드를 이용해 style 코드를 작성하시오.

<body>
    <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
        <li>menu 4</li>
    </ul>
</body>

 

 

▶ 코드

    <style>
        ul {
            list-style-type: none;
        }
        li {
            width: 100px;
            height: 50px;
            line-height: 50px;
            display: inline-block;
            border: 1px solid black;
            margin: 10px;
            text-align: center;
            font-size: 18px;  
        }
    </style>

 

▶ 출력 결과

 

 

 

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

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

[CSS] Postion 실습 (27일)  (0) 2023.06.22
[CSS] Float 실습 (27일차)  (0) 2023.06.22
[CSS] CSS 실습 3 (26일차)  (0) 2023.06.21
[CSS] CSS 실습 2 (26일차)  (0) 2023.06.21
[CSS] CSS 실습 1 (26일차)  (0) 2023.06.21
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>
        div {
            color: white;
            background-color: rgb(56, 56, 56);
            font-size: 25px;
            font-weight: bold;
            text-shadow: 2px 2px 4px white;
            text-align: center;
            width: 220px;
            padding: 15px;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <div>웹 개발 기초</div>
</body>
</html>

 

 

▶ 출력 결과

 

 

 

 

 

 

문제 2

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

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>연습문제 4</title>
	<style>
		
			
		h1 {
			color: white; 
			font-size: 1em; 
			background: #222; 
			margin: 0; 
			padding: 10px; 
		}		
	</style>
</head>

<body>
	<div id="container">
		
		<div id="check">
			<h1>확인하세요</h1>
			<h2>주문 및 배송</h2>
			<p><span>오후 2시 이전</span> 주문건은 당일 발송합니다<br>
			2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
			<hr>
			<h2>교환 및 환불</h2>
			<p>불만족시 <span>100% 환불</span>해 드립니다<br>
			고객센터로 전화주세요</p>
			<hr>
			<h2>고객센터 </h2>
			<p>0000-0000<br>
			<span>상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
		</div>
	</div>
</body>
</html>

 

 

 

▶ 코드

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>연습문제 4</title>
	<style>
        #container {
            text-align: center;
            border: 1px solid black;
            width: 600px;
            padding: 1px;
            margin: 10px auto;
        }
		img {
            background-origin: border-box;
            width: 100%;
            margin: 0 auto;
        }
		h1 {
			color: white; 
			font-size: 1em; 
			background: #222; 
			margin: 0; 
			padding: 10px; 
		}		
        h2, h3 {color: red;}
        p, span {line-height: 30px;}
        .h {text-align: left;}
        .sp1 {color: blue;}
        .sp2 {font-size: 12px;}

	</style>
</head>

<body>
	<div id="container">
		<img src="../img/top.jpg" alt="꿀사과팝니다">
		<div id="check">
			<h1 class="h">확인하세요</h1>
			<h2>주문 및 배송</h2>
			<p><span class="sp1">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
			2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
			<hr>
			<h2>교환 및 환불</h2>
			<p>불만족시 <span class="sp1">100% 환불</span>해 드립니다<br>
			고객센터로 전화주세요</p>
			<hr>
			<h2>고객센터 </h2>
			<p>0000-0000<br>
			<span class="sp2">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
		</div>
	</div>
</body>
</html>

 

 

 

▶ 출력 결과

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

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

[CSS] Float 실습 (27일차)  (0) 2023.06.22
[CSS] Box , Margin, display 실습 (27일차)  (0) 2023.06.22
[CSS] CSS 실습 2 (26일차)  (0) 2023.06.21
[CSS] CSS 실습 1 (26일차)  (0) 2023.06.21
[HTML] HTML 실습 3 (26일차)  (0) 2023.06.21
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
728x90
반응형

문제 

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

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>탐라국 입춘굿</title>
  <style>
    
    
    
  </style>
</head>
<body>
  <div id="container">
    <h1>탐라국 입춘굿</h1>    
    <p>제주도의 문화축제 중에서 유일하게 <span class="accent">전통시대부터 존재했던 축제</span>이다.</p>
    <p>제주에서 입춘은 새철<sup>(제주어, 샛절)</sup> 드는 날. <br>
      하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다.
    </p>
  </div>
</body>
</html>

 

 

 

코드

  <style>
    #container {
      width: 500px;
      margin : 20px auto;
    }
    h1 {
      padding: 10px;
      background-color: blue;
      color: #fff;
    }    
    .accent {
      color : red;
      font-weight: bold;
    }
  </style>

 

 

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

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

[CSS] CSS 실습 3 (26일차)  (0) 2023.06.21
[CSS] CSS 실습 2 (26일차)  (0) 2023.06.21
[HTML] HTML 실습 3 (26일차)  (0) 2023.06.21
[HTML] HTML 실습 2 (25일차)  (0) 2023.06.20
[HTML] HTML 실습 1 (25일차)  (0) 2023.06.20

+ Recent posts

티스토리툴바