본문 바로가기
Example

[E-HTML&CSS] 연습문제 + 배경이미지 예시

by 송기동 2023. 8. 8.
728x90

연습문제8

문제

html 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/10_exam_box_8.css">
</head>
<body>
    <h3>이용요금</h3>
    <p>행복카드 소지자는 본인 확인 후 입장료 30% 할인</p>
    <ul>
        <li>만 5세 이하, 만 65세 이상 무료</li>
        <li>단체는 30인 이상 30% 할인</li>
        <li>단체 관림 시 인솔 교사는 무료</li>
    </ul>
</body>
</html>

css 코드

body {
  border: 1px solid red;
  width: 500px;
}

h3 {
  border: 1px solid blue;
}

p {
  border: 1px solid green;
}

ul {
  border: 1px solid red;
}

li {
  border: 1px solid blue;
}

연습문제9

문제

html 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/11_exam_box_9.css">
</head>
<body>
    <h3>이용요금</h3>
    <p>행복카드 소지자는 본인 확인 후 입장료 30% 할인</p>
    <ul>
        <li>만 5세 이하, 만 65세 이상 무료</li>
        <li>단체는 30인 이상 30% 할인</li>
        <li>단체 관림 시 인솔 교사는 무료</li>
    </ul>
</body>
</html>

css 코드

h3 {
  /* 외곽선 */
  border-left: 5px solid blue;
  /* 바깥여백 */
  margin: 10px;
  /* 안쪽여백 - 왼쪽 */
  padding-left: 10px;
}
p {
  /* 바깥여백 - 왼쪽 */
  margin-left: 20px;
  /* 바깥여백 - 아래쪽 */
  margin-bottom: 10px;
}
ul {
  /* 외곽선 - 위쪽 */
  border-top: 1px solid black;
  /* 외곽선 - 아래쪽 */
  border-bottom: 1px solid black;
  /* 바깥여백 - 왼쪽 */
  margin-left: 30px;
  padding-top: 10px;
  padding-bottom: 20px;
}
li {
  padding-top: 10px;
  margin-left: 10px;
}

연습문제10

문제

html 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/12_exam_box_10.css" />
  </head>
  <body>
    <h3>캠핑장 9월 예약</h3>
    <ul>
      <li>9월분 예약 2019년 8월 16일(수) 14:00부터~</li>
      <li>문의전화: 031-222-1234</li>
    </ul>
    <div id="button">
      <!-- &gt; : 특수태그(greater than) > -->
      자세히 보기 &gt;
    </div>
  </body>
</html>

css 코드

body {
  background-color: yellow;
}

#button {
  background-color: blue;
  color: white;
  width: 120px;
  height: 25px;
  text-align: center;
  padding: 10px;
}

연습문제11

html 코드

<!-- 13_exam_box_color_2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/13_exam_box_color_2.css">
</head>
<body>
    <div id="banner">
        <h3>산림욕장 안내</h3>
        <p>470여 종의 식물과 다람쥐, 산토끼, 족제비,
            너구리 및 35종의 새들이 살고 있는
            최적의 자연학습장입니다.
        </p>
        <div id="button">
            자세히보기 &gt;
        </div>
    </div>
</body>
</html>

css 코드

/* css 디자인 여백 초기화 */
/* 웹브라우저 (크롬,익스플로러,파이어폭스 등 */
* {
  padding: 0;
  margin: 0;
}

#banner {
  /* 외곽선 */
  border: 1px solid skyblue;
  /* 가로 */
  width: 320px;
  /* 세로 */
  height: 180px;
  /* 배경색 */
  background-color: lightpink;
  /* 안쪽여백 */
  padding: 20px;
  /* 바깥여백 - 위쪽 */
  margin-top: 20px;
  /* 바깥여백 - 왼쪽 */
  margin-left: 20px;
}

p {
  /* 바깥여백 - 위쪽 */
  margin-top: 20px;
}

#button {
  background-color: hotpink;
  font-size: 12px;
  color: white;
  width: 100px;
  /* 글자중앙정렬 */
  text-align: center;
  /* 둥근사각형(모서리) */
  border-radius: 5px;
  padding: 5px;
  margin-top: 20px;
}

배경 이미지

/* body : 웹브라우저 창크기를 의미 */
body {
  /* 배경이미지 : 기본, 모든 화면을 꽉 채움 */
  /* css 이미지 넣기 : url("이미지경로") */
  /* 사용법 : background-image: url("이미지경로") */
  background-image: url("https://picsum.photos/id/10/200/300");

  /* 배경이미지 반복 중지 속성 */
  background-repeat: no-repeat;

  /* 배경이미지를 위치(좌표) 이동 : 단위(%, px) */
  /* 사용법 : background-position: 왼쪽 위쪽; */
  background-position: 20% 20px;

  /* 배경이미지 크기 */
  /* 화면 단위 : %, px, vw(뷰포트가로크기), vh(뷰포트세로크기) : 반응형 디자인 단위 */
  /* 사용법 : background-size: 가로크키 세로크키 */
  background-size: 50vw 50vh;
}

연습문제1

문제

html 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/15_exam_back_img.css">
</head>
<body>
    <p>
        가족과 즐거운 크리스마스를 보내세요~~
    </p>
    <div>
        카드 보내기
    </div>
</body>
</html>

css 코드

body{
    /* 배경이미지 */
    background-image: url(../img/X-mas.jpg);
    /* 배경이미지 반복중지 */
    background-repeat: no-repeat;
}

p{
    font-size: 20px;
    /* 바깥여백 - 왼쪽 */
    margin-left: 130px;
    /* 바깥여백 - 위 */
    margin-top: 150px;
    width: 280px;
}

div{
    margin-top: 30px;
    margin-left: 210px;
    padding: 5px;
    width: 120px;
    text-align: center;
    background-color: blue;
    color: white;
}

연습문제2

문제

html 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/16_exam_back_img2.css" />
  </head>
  <body>
    <div id="shop">
      <img src="./img/sale.jpg" />
    </div>
    <div id="button">
      <img src="./img/detail.png" />
    </div>
  </body>
</html>

css 코드

/* 디자인 공식 */
/* 컨텐츠크기(순수한 이미지, 글자 등) */
/* 전체 가로 크기 - 컨텐츠 가로 크기 + 2*padding + 2*margin */
/* 전체 세로 크기 - 컨텐츠 세로 크기 + 2*padding + 2*margin */
/* 예) 전체 body 가로 크기 : 700px */
/* 700 = 컨텐츠 가로 크키 + 2*padding + 2*margin */

/* 여백 초기화 */
* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url(../img/flower.png);
}

#shop {
  margin-left: 30px;
  margin-top: 50px;
}

#button {
  margin-left: 180px;
  margin-top: 20px;
}

연습문제

html 코드

<!-- 17_exam_schedule.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/17_exam_schedule.css" />
  </head>
  <body>
    <h3>나의 일정</h3>
    <div>◀ 2020년 7월 ▶</div>
    <table>
      <tr>
        <td>일</td>
        <td>월</td>
        <td>화</td>
        <td>수</td>
        <td>목</td>
        <td>금</td>
        <td>토</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
      <tr>
        <td>13</td>
        <td>14<br />기말고사</td>
        <td>15<br />기말고사</td>
        <td>16<br />기말고사</td>
        <td>17<br />기말고사</td>
        <td>18<br /></td>
        <td>19</td>
      </tr>
      <tr>
        <td>20</td>
        <td>21<br />하계방학</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
      </tr>
      <tr>
        <td>27</td>
        <td>28</td>
        <td>29<br />연수</td>
        <td>30<br />연수</td>
        <td>31</td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

css 코드

body {
  color: black;
}

h3 {
  border-left: 5px solid green;
  padding-left: 10px;
}

div {
  width: 610px;
  text-align: right;
}

table,
td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 610px;
  font-size: 12px;
  margin-top: 10px;
}

tr {
  height: 60px;
}

td {
  width: 76px;
  padding: 5px;
}

 

728x90

'Example' 카테고리의 다른 글

[E-HTML&CSS] position, transform 예시 + 연습문제  (0) 2023.08.11
[E-HTML&CSS] 반응형, 웹폰트, 특수선택자, display 예시  (15) 2023.08.09
[E-HTML&CSS] 선택자 예시, 연습문제  (17) 2023.08.07
[E-HTML&CSS] 선택자 예시  (15) 2023.08.04
[E-HTML&CSS] 연습문제 + div, span, 시멘틱태그 예시, css 기본선택자  (16) 2023.08.03

관련글

티스토리툴바