HTML(CSS연습문제)

728x90

연습문제1.html

1.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>연습문제1</title>
<style>
  div{
    border: 1px solid black;
    width: 600px;
    height: 340px;
  }

  h1{
    padding: 10px;
  }

  .name{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: bolder;
    padding: 10px;
    color:red
  }
</style>
</head>
<body>
  <div>
  <h1>최신 웹 디자인 트렌드</h1>
  <ol>
  <p><span class="name">반응형 웹 디자인</span> -다양한 화면 크기에 최적화하다.</p>
  <p><span class="name">플랫 디자인</span> -입체에서 평면으로</p>
  <p><span class="name">풀 스크린 배경</span> -콘텐츠에 집중</p>
  <p><span class="name">원 페이지 사이트</span> -한 페이지에 모든 내용을 담다</p>
  <p><span class="name">패럴랙스 스크롤링</span> -동적인 효과로 강한 인상을!</p>
  <p><span class="name">웹 폰트</span> -웹 타이포그래피를 받쳐 주는 기술</p>
  </ol>
</div>
</body>
</html>

연습문제2.html

2.
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>연습문제2</title>
  <style>
    h1 {
      font-size: 60px;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    .heading {
      text-shadow: 3px 2px 5px black;
      width: 30%;
      height: 100px;
      background: gray;
      color: white;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>

<body>
  <h1 class="heading">웹 개발 기초</h1>
</body>

</html>

연습문제3.html

3.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>연습문제3</title>
</head>
<style>
  table {
    caption-side: bottom;
    border: 2px solid black;
    border-collapse: collapse;
  }

  td,
  th {
    border: 2px solid black;
    padding: 10px;
    text-align: center;
  }

  .name1{
    background: rgb(238,238,238);
  }

  caption {
    color: black
  }
</style>
<body>
  <table>
    <caption>2019 국민 독서실태</caption>
    <thead>
      <tr>
        <th class="name1">구분</th>
        <th class="name1">성인</th>
        <th class="name1">독서자</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="name1">종이책</td>
        <td>6.1권</td>
        <td>11.8권</td>
      </tr>
      <tr>
        <td class="name1">전자책</td>
        <td>1.2권</td>
        <td>7.1권</td>
      </tr>
      <tr>
        <td class="name1">오디오북</td>
        <td>0.2권</td>
        <td>5.5권</td>
      </tr>
</body>
</html>

연습문제4.html

4.
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>연습문제4</title>
  <style>
    #container {
      width: 650;
      margin: 0 auto;
      padding: 5px;
    }

    #check {
      width: 640px;
      border: 1px solid #ccc;
    }

    h1 {
      color: white;
      font-size: 1em;
      background-color: #222;
      margin: 0;
      padding: 10px;
    }

    h2 {
      color: #ff0000;
      font-size: 1.5em;
      text-align: center;
    }

    p {
      font-size: 1.2em;
      line-height: 2em;
      text-align: center;
      font-weight: bolder;
    }

    .accent {
      color: #0000ff;
    }

    .smalltext {
      font-size: 0.7em;
    }
  </style>
</head>
<div id="container"></div>
<img src="apple.jpg" alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 영양은 그대로 입니다. 질좋은 사과를 저렴하게 즐겨보세요" />
<div id="check">
  <h1>확인하세요</h1>
  <h2>주문 및 배송</h2>
  <p><span class="accent">오후 2시 이전</span> 주문건은 당일 발송합니다.<br>
    2시 이후 주문건 다음날 발송합니다(주말제외).</p>
  <hr>
  <h2>교환 및 환불</h2>
  <p>불만족시 <span class="accent">100% 환불</span>해 드립니다.<br>
    고객센터로 전화주세요.</p>
  <hr>
  <h2>고객센터</h2>
  <p>0000-0000<br>
    <span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시(토/일, 공휴일휴무)</span>
  </p>
</div>
</div>
</body>

</html>

연습문제5.html

5.
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <title>요소의 바깥 여백</title>
    <style>
        p {
            display: block;
            list-style: none;
            background-color: skyblue;
            border: 2px solid skyblue;
            padding: 10px;
            margin: 10px;
            width: 50%;
            height: 100%;
            text-align: left;
            line-height: 30px;
            font-weight: bold;
        }

        .art2 {
            display: block;
            list-style: none;
            background-color: skyblue;
            border: 2px solid skyblue;
            padding: 10px;
            margin-inline: 440px;
            width: 50%;
            height: 100%;
            text-align: left;
            line-height: 30px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <p>유래없이 뜨거운 날씨이다. 섭씨 38도를 웃도는 온도에서 에어콘은 이제 살기 위한 도구가 되었다.</p>
    <p class="art2">달걀을 사다 놓기만 해도 병아리로 부화된다는 농담같은 이야기가 현재 대한민국의 실화다.</p>
    <p>드디어 섭씨 40도가 넘었다. 엄마 뱃속보다 뜨거운 날씨, 감사해야 할까? 해가 뜨거울 뿐인데 오존층이 파괴되어 오존주의보가 발령되었다.</p>
</body>

</html>

연습문제6.html

6.
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <title>둥근 테두리</title>
    <style type="text/css">
        .radius {
            display: inline-block;
            text-align: center;
            line-height: 100px;
        }

        .radius1 {
            width: 100px;
            height: 100px;
            border-radius: 100px;
            background-color: #C60;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
            border-bottom-left-radius: 50%;

        }

        .radius2 {
            background-color: #090;
            border-radius: 100px 100px 0 0;
            width: 200px;
        }

        .radius3 {
            background-color: #06C;
            width: 100px;
            border-top-left-radius: 2000%;
            border-top-right-radius: 100%;
        }

        .radius4 {

            border: 4px dotted #808;
            background-color: #99a;
            width: 200px;
            border-top-left-radius: 20%;
            border-top-right-radius: 10%;
            border-bottom-right-radius: 20%;
            border-bottom-left-radius: 10%;
        }
    </style>
</head>

<body>
    <span class="radius radius1">radius1</span>
    <span class="radius radius2">radius2</span>
    <span class="radius radius3">radius3</span>
    <span class="radius radius4">radius4</span>
</body>

</html>

728x90

'HTML' 카테고리의 다른 글

HTML(Background)_2024-07-08 (0)	2024.07.09
HTML(float)_2024-07-08 (0)	2024.07.08
HTML(link_태그의 rel 속성)_2024-07-04 (0)	2024.07.04
HTML(iframe)_2024-07-03 (2)	2024.07.03
HTML(블록과 인라인)_2024-07-03 (2)	2024.07.03

앵보

HTML(CSS연습문제)_2024-07-05

연습문제1.html

연습문제2.html

연습문제3.html

연습문제4.html

연습문제5.html

연습문제6.html

'HTML' 카테고리의 다른 글

티스토리툴바

HTML(CSS연습문제)_2024-07-05

연습문제1.html

연습문제2.html

연습문제3.html

연습문제4.html

연습문제5.html

연습문제6.html

'HTML' 카테고리의 다른 글

관련글

티스토리툴바