2024년 장애인기능경기대회 웹마스터 직종

웹마스터 문제 개요

문제지

1. 2024년 지방장애인기능경기대회 과제출제범위.hwp

사이트 맵(Site map) &와이어프레임(Wireframe)

2024. 장애인기능경기대회: 웹마스터

스크린샷 2024-06-13 오전 12.55.19.png

스크린샷 2024-06-13 오전 12.55.32.png

스크린샷 2024-06-13 오전 12.55.42.png

2024년 웹마스터: 결과화면 예시

스크린샷 2024-06-13 오전 12.47.05.png

스크린샷 2024-06-14 오전 1.13.47.png

2024년 웹마스터 HTML 예시

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>자연애 캠핑장</title>
    <link rel="stylesheet" href="./style/main.css" />
    <script defer src="./script/main.js"></script>
  </head>
  <body>
    <!-- .wrap>header.header+main.main>article.div class="slide"r+section.contents -->
    <div class="wrap">
      <header class="header">
        <!-- .logo>h1 -->
        <div class="logo">
          <h1><a href="index.html">자연애 캠핑장</a></h1>
        </div>
        <!-- nav.nav -->
        <nav class="nav">
          <!-- ul>li*5>a -->
          <ul>
            <li><a href="#">홈</a></li>
            <li><a href="./html/guide.html">캠핑장소개</a></li>
            <li><a href="#">예약하기</a></li>
            <li><a href="#">갤 러 리</a></li>
            <li>
              <a href="#">운영관리</a>
              <ul>
                <li><a href="#">주문관리</a></li>
                <li><a href="#">예약관리</a></li>
                <li><a href="#">고객센터</a></li>
              </ul>
            </li>
          </ul>
        </nav>
        <!-- .member>div*2>a -->
        <div class="member">
          <div><a href="#">로그인</a></div>
          <div><a href="#">회원가입</a></div>
        </div>
      </header>
      <main class="main">
        <article class="slider">
          <div class="slide_wrap">
            <div class="slide">
              <div>
                <h3>image1</h3>
                <a href="#">Lorem, ipsum dolor.</a>
              </div>
            </div>
            <div class="slide">
              <div>
                <h3>image2</h3>
                <a href="#">Lorem, ipsum dolor.</a>
              </div>
            </div>
            <div class="slide">
              <div>
                <h3>image3</h3>
                <a href="#">Lorem, ipsum dolor.</a>
              </div>
            </div>
            <div class="slide">
              <div>
                <h3>imaeg1</h3>
                <a href="#">Lorem, ipsum dolor.</a>
              </div>
            </div>
          </div>
        </article>
        <section class="contents">
          <!-- article.content$*3 -->
          <article class="notice">
            <h3>공지사항</h3>
            <ul>
              <li>
                <a href="#"
                  >Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Iure, laboriosam!</a
                ><span>2024-01-09</span>
              </li>
              <li>
                <a href="#"
                  >Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Iure, laboriosam!</a
                ><span>2024-01-09</span>
              </li>
              <li>
                <a href="#"
                  >Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Iure, laboriosam!</a
                ><span>2024-01-09</span>
              </li>
              <li>
                <a href="#"
                  >Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Iure, laboriosam!</a
                ><span>2024-01-09</span>
              </li>
              <li>
                <a href="#"
                  >Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Iure, laboriosam!</a
                ><span>2024-01-09</span>
              </li>
            </ul>
          </article>
          <article class="reserve">
            <h3>예약얀내</h3>
            <div>
              <span>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
                cum quis dolores libero impedit nesciunt molestiae, labore
                delectus odio iste est voluptatum eos, voluptatem expedita
                debitis exercitationem vero recusandae nam.
                <a href="#">예약하기</a>
              </span>
            </div>
          </article>
        </section>
        <article class="sights">
          <h3>주변명소</h3>
          <div class="sight_wrap">
            <div class="img"><a href="#">image1</a></div>
            <div class="img"><a href="#">image2</a></div>
            <div class="img"><a href="#">image3</a></div>
            <div class="img"><a href="#">image4</a></div>
            <div class="img"><a href="#">image5</a></div>
          </div>
        </article>
      </main>
    </div>
    <!-- footer.footer -->
    <footer class="footer">
      <!-- footer1+footers>footer2+footer3 -->
      <div class="footer1"><h1>자연애 캠핑장</h1></div>
      <div class="footers">
        <div class="footer2">
          <ul>
            <li><a href="#">홈</a></li>
            <li><a href="./html/guide.html">캠핑장 소개</a></li>
            <li><a href="#">예약하기</a></li>
            <li><a href="#">갤러리</a></li>
            <li><a href="#">운영관리</a></li>
          </ul>
        </div>
        <div class="footer3">COPYRIGHT ⓒ2023 KEAD RIGHT RESERVED.</div>
      </div>
    </footer>
  </body>
</html>

2024 웹마스터1 스타일시트

@charset "utf-8";
* {
  margin: 0; /* m0 */
  padding: 0; /* p0*/
  text-decoration: none; /* tdn */
  list-style-type: none; /* lstn*/
  color: #333; /* c#ccc*/
  box-sizing: border-box;
  font-size: 16px;
}
.wrap {
  width: 1280px; /* w1280 */
  margin: 0 auto; /* m0-auto*/
  display: flex;
  /* background-color: rgba(106, 142, 35, 0.3); */
}
.wrap .header {
  width: 200px; /* w200 */
  height: 100%; /* h200p*/
  /* background-color: rgba(106, 142, 35, 0.3); */
  padding: 20px;
}
.wrap .header .logo {
}
.wrap .header .logo h1 a {
  display: block;
  width: 160px;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  border-radius: 0 15px 0 15px;
  background-color: olivedrab;
}
.wrap .header .nav {
  position: relative;
}
.wrap .header .nav > ul {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.wrap .header .nav > ul > li {
}
.wrap .header .nav > ul > li > a {
  display: block;
  width: 160px;
  height: 40px;
  line-height: 40px;
  background-color: darkolivegreen;
  text-align: right;
  padding-right: 20px;
  color: #fff;
  font-weight: bold;
  border-top: 1px solid #fff;
  border-radius: 0 10px 0 10px;
  transition: 0.6s;
}
.wrap .header .nav > ul > li:hover > a {
  background-color: orange;
}
.wrap .header .nav > ul > li > ul {
}
.wrap .header .nav > ul > li > ul > li {
}
.wrap .header .nav > ul > li > ul > li > a {
  display: block;
  width: 160px;
  height: 0px;
  line-height: 40px;
  background-color: rgba(85, 107, 47, 0.7);
  text-align: center;
  color: #fff;
  border-top: 1px solid #fff;
  opacity: 0;
  overflow: hidden;
  transition: 0.6s;
}
.wrap .header .nav > ul > li:hover > ul > li > a {
  height: 40px;
  opacity: 1;
}
.wrap .header .nav > ul > li:hover > ul > li:hover > a {
  background-color: olivedrab;
  border-radius: 0 0 10px 10px;
}

/* 로그인 및 사용자 등록 */
.header {
  position: relative;
}
.wrap .header .member {
  position: absolute;
  top: 450px;
  display: flex;
}
.wrap .header .member div {
  width: 80px;
  height: 40px;
  line-height: 40px;
  background-color: olivedrab;
  text-align: center;
  border-radius: 5px;
  border-left: 1px solid #fff;
}
.wrap .header .member div a {
  color: #fff;
}

.wrap .main {
  width: 1080px;
  /* height: 100%; */
}
.wrap .main .slider {
  width: 100%;
  height: 350px;
}
.wrap .main {
}
.wrap .main .contents {
  width: 100%;
  height: 250px;
  display: flex;
}
.wrap .main .contents .notice {
  width: 50%;
  height: 100%;
  /* background-color: #ddd; */
}
.wrap .main .contents .reserve {
  width: 50%;
  height: 100%;
}
.wrap .main .sights {
  width: 100%;
  height: 250px;
}

.footer {
  width: 1280px; /* w1280 */
  height: 100px; /* h850*/
  margin: 0 auto; /* m0-auto*/
  background-color: rgba(106, 142, 35, 0.2);
  /* background-color: #3333; */

  border-radius: 0 0 10px 10px;
  display: flex;
}
.footer .footer1 {
  width: 200px;
  height: 100%;
  padding: 20px;
}

.footer .footer1 h1 {
  /* display: block; */
  width: 160px;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  border-radius: 0 15px 0 15px;
  background-color: rgba(85, 107, 47, 0.5);
}
.footer .footers {
  width: 1080px;
  height: 100%;
}

.footer .footers .footer2 {
  width: 100%;
  height: 50%;
}

.footer .footers .footer2 > ul {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.footer .footers .footer2 > ul > li:last-child > a {
  border-right: 1px solid darkolivegreen;
}
.footer .footers .footer2 > ul > li > a {
  display: block;
  width: 160px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-left: 1px solid darkolivegreen;
  font-weight: bold;
  color: darkolivegreen;
}
.footer .footers .footer2 > ul > li:hover > a {
  border-bottom: 1px solid rgba(85, 107, 47, 0.5);
}
.footer .footers .footer3 {
  width: 100%;
  height: 50%;
  text-align: center;
}

/* 이미지 슬라이더 */
.slider {
  overflow: hidden;
  border-radius: 0 20px 0 20px;
}
.slider .slide_wrap {
  width: 400%;
  height: 100%;
  display: flex;
  /* margin-left: -100%; */
}
.slider .slide_wrap .slide {
  width: 100%;
  height: 100%;
  position: relative;
}
.slider .slide_wrap .slide:nth-child(1) {
  background-image: url("../images/back1.jpg");
}
.slider .slide_wrap .slide:nth-child(2) {
  background-image: url("../images/back2.jpg");
}
.slider .slide_wrap .slide:nth-child(3) {
  background-image: url("../images/back3.jpg");
}
.slider .slide_wrap .slide:nth-child(4) {
  background-image: url("../images/back1.jpg");
}
.slider .slide_wrap .slide div {
  width: 100%;
  height: 150px;
  background-color: #3338;
  position: absolute;
  top: 200px;
}
.slider .slide_wrap .slide div h3 {
  padding: 0 20px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #fff;
}
.slider .slide_wrap .slide div a {
  width: 100%;
  height: 110px;
  padding: 20px;
  color: #fff;
}

/* 공지사항 */
.notice {
  padding: 10px 0;
}
.notice h3 {
  width: 120px;
  height: 40px;
  line-height: 40px;
  border-radius: 10px 10px 0 0;
  background-color: orange;
  color: #fff;
  text-align: center;
}
.notice ul {
}
.notice ul li {
  display: flex;
  height: 35px;
  line-height: 35px;
}
.notice ul li:hover {
  background-color: rgba(255, 166, 0, 0.3);
  border-radius: 5px;
}
.notice ul li a {
  width: 75%;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notice ul li span {
  width: 25%;
  text-align: center;
}

/* 예약안내 */
.reserve {
  padding: 10px 0;
}
.reserve h3 {
  width: 120px;
  height: 40px;
  line-height: 40px;
  border-radius: 10px 10px 0 0;
  background-color: darkolivegreen;
  color: #fff;
  text-align: center;
}

.reserve div {
  width: 100%;
  height: 170px;
  line-height: 30px;
  position: relative;
  background-image: url("../images/banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.reserve div span {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #3333;
  color: #fff;
}
.reserve div a {
  display: block;
  width: 150px;
  height: 40px;
  line-height: 40px;
  background-color: rgba(85, 107, 47, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 8px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.reserve div:hover span {
  background-color: #3338;
}

.reserve div:hover a {
  background-color: rgba(255, 166, 0, 0.8);
}

/* 주변명소 */
.sights {
  padding: 10px 0;
  width: 100%;
  height: 100%;
  /* background-color: orange; */
}
.sights h3 {
  width: 120px;
  height: 40px;
  line-height: 40px;
  border-radius: 10px 10px 0 0;
  background-color: #999;
  color: #fff;
  text-align: center;
}
.sights > .sight_wrap {
  height: 200px;
  /* background-color: orange; */
  display: flex;
  justify-content: space-between;
}
.sights > .sight_wrap .img {
  width: 170px;
  height: 170px;
  margin-top: 10px;
  border-radius: 0 10px 0 10px;
}
.sights > .sight_wrap .img:hover {
  opacity: 0.8;
  border: 3px solid darkolivegreen;
}
.sights > .sight_wrap .img a {
  display: block;
  width: 170px;
  height: 170px;
  line-height: 170px;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
.sights > .sight_wrap .img:nth-child(1) {
  background-image: url("../images/gallery1.jpg");
}
.sights > .sight_wrap .img:nth-child(2) {
  background-image: url("../images/gallery2.jpg");
}
.sights > .sight_wrap .img:nth-child(3) {
  background-image: url("../images/gallery3.jpg");
}
.sights > .sight_wrap .img:nth-child(4) {
  background-image: url("../images/gallery4.jpg");
}
.sights > .sight_wrap .img:nth-child(5) {
  background-image: url("../images/gallery1.jpg");
}

/* 안내 */
.guide {
  padding-top: 20px;
  width: 100%;
  height: 490px;
}
.guide h3 {
  width: 200px;
  height: 60px;
  line-height: 60px;
  border-radius: 10px 10px 0 0;
  background-color: darkolivegreen;
  color: #fff;
  padding-left: 20px;
}
.guide .img {
  width: 100%;
  height: 410px;
  background-image: url("../images/back4.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0 20px 0 20px;
  overflow: hidden;
}
.guide div h4 {
  padding: 10px 0 0 20px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
.guide div {
  width: 100%;
  height: 100%;
  background-color: #3337;
}
.guide div ul {
  width: 100%;
}
.guide div ul li {
  padding: 20px;
  color: #fff;
  height: 25px;
  line-height: 25px;
}
.guide div table {
  width: 700px;
  margin: 20px;
  background-color: rgba(85, 107, 47, 0.3);
  color: #fff;
}
.guide div table th {
  color: #fff;
  height: 30px;
  font-weight: bold;
}
.guide div table td {
  color: #fff;
  height: 30px;
  padding-left: 20px;
  border-top: 1px solid #fff7;
}

/* 캠핑장 이용수칙 */
.rules {
  display: block;
  width: 100%;
  /* height: 350px; */
  /* background-color: orange; */
  padding-top: 20px;
}

.rules h3 {
  width: 200px;
  height: 60px;
  line-height: 60px;
  border-radius: 10px 10px 0 0;
  background-color: orange;
  color: #fff;
  padding-left: 20px;
}
.rules div {
  width: 100%;
  height: 230px;
  border-radius: 0 20px 0 20px;
  overflow: hidden;
  display: flex;
}
.rules div ul {
  width: 60%;
  height: 100%;
  /* background-color: rgba(255, 166, 0, 0.2); */
}
.rules div ul li {
  padding: 20px;
  color: #333;
  height: 25px;
  line-height: 25px;
}
.rules div .img {
  width: 40%;
  background-image: url("../images/back2.jpg");
}

/* 시설배치도 */
.layout {
  display: block;
  width: 100%;
  height: 550px;
  padding-top: 20px;
}

.layout h3 {
  width: 200px;
  height: 60px;
  line-height: 60px;
  border-radius: 10px 10px 0 0;
  background-color: #3337;
  color: #fff;
  padding-left: 20px;
}
.layout div {
  width: 100%;
  height: 400px;
  border-radius: 0 20px 0 20px;
  overflow: hidden;
  display: flex;
}
.layout div ul {
  width: 40%;
  height: 100%;
  /* background-color: rgba(255, 166, 0, 0.2); */
}
.layout div ul li {
  padding: 20px;
  color: #333;
  height: 25px;
  line-height: 25px;
}
.layout div .img {
  width: 60%;
  background-image: url("../images/map.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

2024 웹마스터1: JavaScript

// 이미지 슬라이더

const slideWrapEl = document.querySelector(".slide_wrap");
// console.log(slideWrapEl);
let num = 0;

setInterval(() => {
  num++;
  slideWrapEl.style.marginLeft = -100 * num + "%";
  slideWrapEl.style.transition = "0.6s";
  if (num == 3) {
    setTimeout(() => {
      num = 0;
      slideWrapEl.style.marginLeft = 0;
      slideWrapEl.style.transition = "0s";
    }, 600);
  }
}, 3000);