4주차

1 분 소요

계획

알고리즘 트리 개념숙지 및 예제풀이
웹프로그래밍 게시판 구현

결과

앞서 배운 내용들을 토대로 차근차근 웹페이지의 구색을 맞추고자 기존의 페이지에서 계속 추가하기로 했다.
먼저 좌측에 사이드바를 이용하여 원하는 게시판으로 이동할 수 있게 하였다.
대략적인 게시판의 형태는 다음과 같은데, 사실 html을 이용한 기본적인 틀만 만든것이기에 JavaScript를 이용하여 실제로 입력을 받아 글쓰기가 가능한 형태를 추후에 구현하고자 한다.
사용된 코드는 대략적으로 이러하다.

    <body>
    <div class="home">
        <h3><a href="file:///C:/Users/Park%20Ji%20Woo/Desktop/%EB%AA%A8%EA%B0%81%EC%BD%94%20web/day4.html">HOME</a></h3>
    </div>
    <div class="sidebar">
        <aside>
        <ul>
            <li><a href="file:///C:/Users/Park%20Ji%20Woo/Desktop/%EB%AA%A8%EA%B0%81%EC%BD%94%20web/day4-1.html">자유 게시판</a></li>
            <li><a>질문 답변</a></li>             
            <li><a href="file:///C:/Users/Park%20Ji%20Woo/Desktop/%EB%AA%A8%EA%B0%81%EC%BD%94%20web/day4-2.html">주차별 결과</a></li>     
            <li><a href="file:///C:/Users/Park%20Ji%20Woo/Desktop/%EB%AA%A8%EA%B0%81%EC%BD%94%20web/day4-3.html">팀원들의 블로그</a></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
        </ul>
    </aside>
    </div>
    <div class="frame">      
      <table class="table">
          <tr class="th">
               <td>번호</td><td>제목</td><td>작성자</td><td>날짜</td><td>조회수</td>
          </tr>    
          <tr>
          <td>124</td>
          <td>수면 잘하는 법</td>
          <td>Admin</td>
          <td>2020-07-13</td>
          <td>53315</td>
          </tr>

  body{
    background-color: rgb(218, 218, 218);
}
.frame{
    margin: 50px auto;
     border: 1.5px solid rgb(0, 0, 0);
    width: 1050px;
    background-color: rgb(241, 242, 243);
    overflow: hidden;
    border-radius: 10px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
aside{
    float: left;
    font-size: 25px;
    color: rgb(8, 97, 156);
    background: rgb(232, 255, 255);
    border: 1px solid rgb(1, 8, 22);
    border-radius: 10px;
}
li{
    padding-top: 20px;
    padding-bottom: 30px;
    list-style: none;
    font-weight: bold;
    padding-right: 30px;
}
a:link, a:visited{
    text-decoration: none;
    color:  rgb(5, 48, 77);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
} 
.home{
    color: rgb(4, 62, 110);
    padding: 0px 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.table{
   margin: auto;
   color: rgb(3, 38, 66);
   text-align: center;
   
}
.th{
    font-size: 20px;
    padding-bottom: 30px;
    padding-top: 30px;
    font-weight: bold;
    color: black;
}
td{
    width: 140px;
    border-top: 1px solid;
    padding: 20px;
}

알고리즘은 트리부분에서 개념숙지와 간단한 예제를 풀이한 코드를 해석하였다. 실제로 직접 예제를 풀고 싶었지만 앞서 웹프로그래밍 학습에 보다 시간이 소모되어 예제를 풀지 못했다. 앞선 모임에서도 이러한 상황이 발생했는데 아무래도 각 학습마다 정확한 시간분배를 하여 학습해야 할 필요성이 느껴졌다.

Twitter Facebook LinkedIn

지우

4주차

계획

결과

공유하기

참고

2021하계 모각코 6주차

2021하계 모각코 5주차

2021하계 모각코 4주차

2021하계 모각코 3주차