코딩 기초 교육: HTML, CSS, JavaScript 단계별 이해

총무팀 실무 예시: 비품 신청서 만들기

◆ 코드 (HTML만)

<!-- HTML: 웹페이지의 "뼈대"를 담당 -->
<table>
  <thead>
    <tr>
      <th>번호</th>
      <th>품목명</th>
      <th>수량</th>
      <th>신청자</th>
      <th>상태</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>A4 용지</td>
      <td>10</td>
      <td>김철수</td>
      <td>승인</td>
    </tr>
    <tr>
      <td>2</td>
      <td>볼펜</td>
      <td>20</td>
      <td>이영희</td>
      <td>대기</td>
    </tr>
  </tbody>
</table>

◆ 실행 결과

번호	품목명	수량	신청자	상태
1	A4 용지	10	김철수	승인
2	볼펜	20	이영희	대기
3	포스트잇	5	박민수	승인

HTML만 있을 때의 특징

내용과 구조만 표시 가능
기본적인 표 형태 제공
디자인은 브라우저 기본값
사용자와 상호작용 불가
정적인 화면만 보여줌

◆ 코드 (HTML + CSS)

/* CSS: 웹페이지의 "디자인"을 담당 */

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

th {
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
  padding: 12px 16px;
  font-weight: 600;
}

td {
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
}

tr:nth-child(even) {
  background: #f8f9fa;
}

tr:hover {
  background: #fff3e6;
}

◆ 실행 결과

번호	품목명	수량	신청자	상태
1	A4 용지	10	김철수	승인
2	볼펜	20	이영희	대기
3	포스트잇	5	박민수	승인

HTML + CSS가 있을 때의 특징

보기 좋은 디자인 적용 가능
회사 브랜드 컬러 적용
호버 효과 등 시각적 피드백
여전히 정적인 화면
데이터 추가/삭제는 수동

◆ 코드 (HTML + CSS + JS)

// JS: 웹페이지의 "동작"을 담당

const data = [
  { id: 1, item: "A4 용지", qty: 10, user: "김철수", status: "승인" },
  { id: 2, item: "볼펜", qty: 20, user: "이영희", status: "대기" }
];

function renderTable() {
  const tbody = document.getElementById('tbody');
  tbody.innerHTML = data.map(row => `
    <tr>
      <td>${row.id}</td>
      <td>${row.item}</td>
      <td>${row.qty}</td>
      <td>${row.user}</td>
      <td>${row.status}</td>
    </tr>
  `).join('');
}

function addItem(item, qty, user) {
  data.push({
    id: data.length + 1,
    item, qty, user,
    status: "대기"
  });
  renderTable();
}

◆ 실행 결과 (직접 조작해보세요!)

번호	품목명	수량	신청자	상태	관리

HTML + CSS + JS가 있을 때의 특징

데이터 추가/삭제 가능
실시간 검색/필터링
사용자와 상호작용
동적인 화면 업데이트
JSON 데이터 활용 가능

MS Power Platforms 연계 구조

HTML
구조

→

CSS
디자인

→

JavaScript
동작

→

JSON/SharePoint
데이터

Power Apps에서 HTML 컨트롤로 UI를 만들고, Power Automate로 데이터를 연동합니다

◆ 코드 (HTML만)

◆ 실행 결과

HTML만 있을 때의 특징

◆ 코드 (HTML + CSS)

◆ 실행 결과

HTML + CSS가 있을 때의 특징

◆ 코드 (HTML + CSS + JS)

◆ 실행 결과 (직접 조작해보세요!)

HTML + CSS + JS가 있을 때의 특징

MS Power Platforms 연계 구조

비품 신청 추가