[Vue.js/개발일지] 5. 세부 페이지 제작

먼저 학교장 인사말부터 작업 시작 했습니다.

원래의 이사장 인사말 디자인도 뭐 나쁘지 않지만 일단 사진 업데이트 및 폰트설정을 했다.

글은 그대로 가져오고 모바일 웹과 대응 가능하도록 제작하였다.

<template>
  <div class="container-md">
    <div class="main-title">
      학교장 인사말
    </div>
    <hr />
    <div class="first_p">
      <img
        src="../../assets/img/인사말.png"
        alt="" />
      <p>
        지난 30여 년간 목회를 하면서 느낀 것은 교회학교(Sunday School)의 중요성입니다.  그러나 제한된 시간과 환경 속에서 학생들을 하나님께서 원하시는 하나님의 사람으로 양육하는 것은 무척 어렵고 고민스러운 문제였습니다.
        <br /><br />
        일주일에 6일 동안 복음과는 거리가 먼 세상의 환경에서 교육을 받으며, 세상의 교육에 우리 자녀들의 삶과 미래를 맡길 수 밖에 없음을 늘 안타깝게 생각해 왔습니다.
        <br /><br />
        여러 나라의 선교현장을 보면서, 자녀들에게 다양한 언어를 어릴 때부터 가르쳐 세계적인 지도자(Global Leader)로 키워야 한다는 마음을 갖고서, 이를 두고 오랫동안 기도하였습니다.
        <br /><br />
        <b>하나님께서 이 기도에 응답해 주신 것이 온누리국제크리스천학교(Onnuri International Christian Academy)입니다.</b>
        <br /><br />
        온누리국제크리스천학교는 이러한 주님의 명령에 순종하여 세워진 학교입니다.<br />
        평생을 교육에 헌신하고 계시는 신은경 교감선생님과 사명감으로 충만한 선생님들과 여러 명의 원어민 선생님들이 믿음으로 기도하고, 열정으로 가르치고, 사랑으로 학생들을 지도하고 있습니다. 
        <br /><br />
        이 학교를 졸업한 학생들은 한국과 세계의 각 분야에서 성경의 다니엘과 같은 리더들로 귀하게 쓰임 받을 것입니다. 온누리국제학교를 통해 펼쳐질 하나님의 사역에 함께 동참해 주시기를 부탁드립니다.
        감사합니다.
      </p>
    </div>
    <div class="second_p">
      온누리 크리스천 학교 학교장 <span class="name">허남길</span> 
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
  .container-md{
    font-family: 'Nanum Gothic', sans-serif;
    .main-title{
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
    }
    hr{
      margin-bottom: 60px;
    }
    img{
      float:left;
      width: 400px;
      border-radius: 40px;
      margin-right: 30px;
      margin-bottom: 200px;
    }
    .first_p{
      margin-bottom: 70px;
      font-size: 17px;
      font-weight: 400;
      color:gray;
    }
    .second_p{
      margin-bottom: 20px;
      text-align: right;
      font-weight: 600;
      font-size: 20px;
      .name{
        font-size: 25px;
      }
    }
    @media (max-width: 1000px) {
      img{
        float: none;
        width: 100%;
        margin-bottom: 80px;
      }
    }
  }
  
</style>

 

다음은 교직원 소개 페이지이다

원래는 사진 옆에 경력 같은 것들이 나와있지만, 깔끔한 페이지를 위하여 사진 및 경력을 삭제 하였다.

부트스트랩 카드를 이용하여 개발했다

https://getbootstrap.kr/docs/5.0/components/card/

카드

<template>
  <div class="container-md">
    <div class="main-title">
      교직원 소개
    </div>
    <hr />
    
    <div class="block">
      <div class="card">
        <div class="card-header">
          교장<span class="eng-head">(principal)</span>
        </div>
        <div class="card-body">
          <h5 class="card-title">
            허남길
          </h5>
          <p class="card-text">
            학교 총괄
          </p>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="card">
        <div class="card-header">
          교감<span class="eng-head">(Vice-Principal)</span>
        </div>
        <div class="card-body">
          <h5 class="card-title">
            신은경
          </h5>
          <p class="card-text">
            학교 총괄, 수학, 영어
          </p>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="card">
        <div class="card-header">
          국어 선생님<span class="eng-head">(Korean teacher)</span>
        </div>
        <div class="card-body">
          <h5 class="card-title">
            김새롬
          </h5>
        </div>
      </div>
      <div class="card">
        <div class="card-header">
          수학 선생님<span class="eng-head">(Math teacher)</span>
        </div>
        <div class="card-body">
          <h5 class="card-title">
            강태정
          </h5>
        </div>
      </div>
      <div class="card">
        <div class="card-header">
          과학 선생님<span class="eng-head">(Science teacher)</span>
        </div>
        <div class="card-body">
          <h5 class="card-title">
            김여진
          </h5>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="card">
        <div class="card-header">
          영어 선생님<span class="eng-head">(English teacher)</span>
        </div>
        <div class="card-body">
          <h5 class="card-title">
            Jennifer
          </h5>
        </div>
      </div>
      <div class="card">
        <div class="card-header">
          영어 선생님<span class="eng-head">(English teacher)</span>
        </div>
        <div class="card-body">
          <h5 class="card-title">
            엄성희
          </h5>
        </div>
      </div>
      <div class="card">
        <div class="card-header">
          미술 선생님<span class="eng-head">(Art teacher)</span>
        </div>
        <div class="card-body">
          <h5 class="card-title">
            신성순
          </h5>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="card">
        <div class="card-header">
          컴퓨터 선생님<span class="eng-head">(Computer teacher)</span>
        </div>
        <div class="card-body">
          <h5 class="card-title">
            신종웅
          </h5>
        </div>
      </div>
      <div class="card">
        <div class="card-header">
          도덕 선생님<span class="eng-head">(Ethics teacher)</span>
        </div>
        <div class="card-body">
          <h5 class="card-title">
            신병준
          </h5>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
  .container-md{
    font-family: 'Nanum Gothic', sans-serif;
    .main-title{
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
    }
    hr{
      margin-bottom: 60px;
    }
    .block{
      text-align: center;
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 50px;
      .card{
        margin: 0 auto;
        width: 30%;
        .card-title{
          font-weight: 600;
          font-size: 25px;
          margin-bottom: 20px;
        }
        .card-body{
          font-weight: 400;
          font-size: 15px;
        }
      }
    }
    @media (max-width: 1000px) {
      .eng-head{
        display: none;
      }
    }
  }
  
</style>

 

학교 시설도 원래의 화면과 그냥 똑같이 제작 하였다. 똑같이 @media를 사용하여 모바일 웹과의 대응도 작업 해주었다.

<template>
  <div class="container-md">
    <div class="main-title">
      학교 시설
    </div>
    <hr />
  
    <h3>온누리 크리스천 학교 본관</h3>
    <img
      src="../../assets/img/학교사진2.jpg"
      class="img-fluid"
      alt="온누리국제학교본관" />
    <h3>본관 입구</h3>
    <img
      src="../../assets/img/학교사진1.jpg"
      class="img-fluid"
      alt="본관 입구" />
    <h3>2층 강당</h3>
    <img
      src="../../assets/img/2층강당.jpg"
      class="img-fluid"
      alt="2층 강당" />
    <h3>2층 복도</h3>
    <img
      src="../../assets/img/2층복도.jpg"
      class="img-fluid"
      alt="2층 복도" />
    <h3>도서실</h3>
    <img
      src="../../assets/img/도서관.jpg"
      class="img-fluid"
      alt="도서실" />
    <h3>3층 복도</h3>
    <img
      src="../../assets/img/3층복도.jpg"
      class="img-fluid"
      alt="도서실" />
  </div>
</template>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
  .container-md{
    font-family: 'Nanum Gothic', sans-serif;
    text-align: center;
    .main-title{
    font-size: 40px;
    font-weight: 600;
    
    margin-top: 50px;
    margin-bottom: 20px;
    }
    hr{
      margin-bottom: 60px;
    }
    h3{
      margin-top: 100px;
      margin-bottom: 20px;
      font-size: 20px;
      font-weight: 600;
    }
    img{
      width: 70%;
    }
    
    @media (max-width: 1000px) {
      img{
      width: 100%;
      }
    }
  }
  
</style>

 

<template>
  <div class="container-md">
    <div class="main-title">
      모집 요강
    </div>
    <hr />
    <h4>
      ✔ 입학 절차<br />
    </h4>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">
            #
          </th>
          <th scope="col">
            내용
          </th>
          <th scope="col">
            장소
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            1.
          </th>
          <td>입학설명회</td>
          <td>본교 강당</td>
        </tr>
        <tr>
          <th scope="row">
            2.
          </th>
          <td>입학 원서 접수</td>
          <td>교무실</td>
        </tr>
        <tr>
          <th scope="row">
            3.
          </th>
          <td>
            학생 평가 시험 및 학부모/학생 상담
          </td>
          <td>
            교무실
          </td>
        </tr>
      </tbody>
    </table>

    <h4>
      ✔ 학생 입학 자격<br />
    </h4>
    <table class="table table-striped">
      <thead>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            1.
          </th>
          <td>초5~고1 학년의 학생이여야 한다.</td>
        </tr>
        <tr>
          <th scope="row">
            2.
          </th>
          <td>학생의 학과목 수업능력에 따라 학년이 결정된다. 모든 결정은 학교 교장과 입학위원회에 의해서 결정된다.</td>
        </tr>
        <tr>
          <th scope="row">
            3.
          </th>
          <td>
            모든 학생들은 학부모들이 학교에 교육권을 위임했음을 인식해야 한다. 그러므로 학교의 모든 규정을 잘 지키고, 교사와 교장선생님의 지도에 순종하여야 한다.
          </td>
        </tr>
        <tr>
          <th scope="row">
            4.
          </th>
          <td>
            일반적으로 학교의 모든 규정에 적합하고 이를 따를 경우 온누리국제크리스천학교는 인종, 성별의 차별 없이 학생들을 받아들이고 그 학생들에게 동일한 학습 기회를 제공한다.
          </td>
        </tr>
        <tr>
          <th scope="row">
            5.
          </th>
          <td>
            특별한 학습지도가 필요한 학생들은 학교와 상의한 후 교내에서 특별프로그램을 실시하며, 교외에서 실시할 경우 학교장의 허락을 반드시 받아야 한다.
          </td>
        </tr>
        <tr>
          <th scope="row">
            6.
          </th>
          <td>
            초6 이상의 학생들은 구원에 확신이 있는 학생이어야 한다.
          </td>
        </tr>
      </tbody>
    </table>
    <h4>
      ✔ 학부모 입학 자격<br />
    </h4>
    <table class="table table-striped">
      <thead>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            *
          </th>
          <td>부모 중 1명은 교회에 출석하며 다음 사항을 지키는 헌신적인 그리스도인이어야 한다.</td>
        </tr>
        <tr>
          <th scope="row">
            1.
          </th>
          <td>복음적인 개신교회 교인이어야 한다.</td>
        </tr>
        <tr>
          <th scope="row">
            2.
          </th>
          <td>
            주님 앞에 온전한 출석교인이어야 한다.
          </td>
        </tr>
        <tr>
          <th scope="row">
            3.
          </th>
          <td>
            복음적인 기독교 가정을 만들려고 꾸준히 노력하는 가정이어야 한다.
          </td>
        </tr>
        <tr>
          <th scope="row">
            4.
          </th>
          <td>
            학교의 모든 규정에 동의할 뿐만 아니라 학교의 부족한 면이 있을 경우라도 하나님의 가족 구성원으로 같이 기도하고 적극적으로 협력해야 한다.
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
  .container-md{
    font-family: 'Nanum Gothic', sans-serif;
   
    .main-title{
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    
    margin-top: 50px;
    margin-bottom: 20px;
    }
    hr{
      margin-bottom: 60px;
    }
    
    .table{
      margin-top: 20px;
      margin-bottom: 150px;
    }

    @media (max-width: 1000px) {
    }
  }
  
</style>