총 7개
-
100점 과제물 / 시맨틱 태그를 이용하여 페이지 구조를 작성하시오. 작성한 페이지를 화면 캡쳐하고 소스 및 태그를 정리하여 보고서 형태로 제출하시오.2025.01.161. 시맨틱 태그 HTML5 문서는 시맨틱 태그를 이용하여 어느 기기를 사용하더라도 문서 구조를 표준화시켜 정확하게 이해할 수 있습니다. 이번 과제를 통해 시맨틱 태그를 이용한 레이아웃을 만들고 스타일을 입혀 시맨틱 태그를 실제로 사용해보려고 합니다. 2. 레이아웃 구조 상단에는 전체 너비의 header 와 그 아래영역에는 좌측에 nav, 우측에 main으로 2단구성을 배치하였고 하단에는 footer가 있는 구조로 기획하였습니다. 그리고 main 영역에는 공지사항, 영상, 갤러리의 콘텐츠들을 배치할 예정입니다. 3. header 태...2025.01.16
-
HTML과 JavaScript를 이용한 테이블 행 색상 구분2025.11.141. HTML 테이블 구조 HTML의 table, tr, th, td 요소를 사용하여 테이블을 생성합니다. thead와 tbody를 구분하여 헤더 행과 데이터 행을 명확히 하며, 각 행(tr)은 여러 개의 셀(td)로 구성됩니다. 이 예제에서는 3개의 열을 가진 테이블을 생성하고 헤더 행과 3개의 데이터 행을 포함합니다. 2. CSS 스타일링 CSS의 클래스 선택자를 사용하여 홀수 행과 짝수 행에 다른 배경색을 적용합니다. even-row 클래스는 파란색(#cce6ff), odd-row 클래스는 빨간색(#ffcccc)의 배경색을 지...2025.11.14
-
영화관 좌석 예약 앱2025.01.181. 웹 앱 프로그래밍 이 프로젝트는 웹 기반 앱 프로그래밍을 활용하여 영화관 좌석 예약 기능을 구현하였습니다. HTML, CSS, JavaScript를 사용하여 사용자 인터페이스와 좌석 선택 기능을 구현하였습니다. 사용자는 좌석 번호를 입력하면 해당 좌석의 배경색이 변경되어 선택된 것을 확인할 수 있습니다. 2. 사용자 인터페이스 설계 이 프로젝트에서는 직관적이고 사용자 친화적인 인터페이스를 설계하였습니다. 헤더 영역에는 프로젝트 제목을 표시하고, 좌석 선택을 위한 입력 필드와 버튼을 중앙에 배치하였습니다. 좌석은 5행 5열로 구...2025.01.18
-
HTML5를 이용하여 아래의 표를 생성하시오2025.05.081. HTML5 HTML5는 웹 문서를 작성하기 위한 최신 버전의 HTML 언어입니다. 이 언어를 사용하면 다양한 웹 요소를 쉽게 구현할 수 있습니다. 이 문제에서는 HTML5를 사용하여 주어진 표를 생성하는 방법을 설명하고 있습니다. 2. 웹 테이블 HTML5에서는 <table> 태그를 사용하여 테이블을 생성할 수 있습니다. 이 태그 안에 <tr>과 <td> 태그를 사용하여 행과 열을 구성할 수 있습니다. 또한 rowspan과 colspan 속성을 사용하여 셀의 크기를 조절할 수 있습니다. 1. HTML5 HTML5는 웹 개발의 ...2025.05.08
-
인터넷 활용 ) 임의의 주제를 선정하고, 해당 주제에 맞는 페이지를 작성하시오. 작성한 페이지를 화면 캡쳐하고 소스 및 주요기능을 정리2025.01.191. 웹페이지 제작 이 프레젠테이션은 임의의 주제를 선정하고 해당 주제에 맞는 웹페이지를 작성하는 방법에 대해 설명합니다. 웹페이지 제작을 위해 HTML과 CSS를 사용하여 여행 관련 정보와 이미지를 제공하는 페이지를 만들었습니다. 또한 여행지 순위를 확인할 수 있는 링크를 제공하여 사용자에게 유용한 정보를 제공하고 있습니다. 2. 웹 디자인 이 프레젠테이션에서는 웹페이지 제작 시 CSS를 활용하여 레이아웃, 색상, 폰트 등 웹 디자인 요소를 구현하는 방법을 보여줍니다. 헤더, 섹션, 버튼 등 각 요소의 스타일을 지정하여 사용자에게...2025.01.19
-
HTML 입력 양식 구성 및 CSS 스타일 적용2025.12.181. HTML 입력 양식 구조 HTML 문서에서 입력 양식을 구성하기 위해 input 요소를 사용합니다. 텍스트 입력, 비밀번호 입력, 제출 버튼 등 다양한 타입의 입력 필드를 정의할 수 있습니다. 각 입력 필드는 레이블과 함께 배치되어 사용자가 쉽게 이해할 수 있도록 구성됩니다. 이 예제에서는 아이디, 비밀번호 입력 필드와 제출 버튼으로 구성된 간단한 로그인 양식을 만들었습니다. 2. CSS 스타일링 및 border 속성 CSS의 border 관련 속성을 사용하여 입력 양식의 테두리를 조정할 수 있습니다. border-radius...2025.12.18
-
가위바위보 및 주사위게임 프로그램 코드 분석2025.12.141. 가위바위보 게임 구현 React를 이용한 가위바위보 게임 프로그램으로, 사용자가 가위바위보 이미지를 클릭하면 handleButtonClick 함수가 발생하여 setHand로 사용자의 선택을 지정하고, generateRandomHand 함수로 상대방의 핸드를 랜덤으로 결정한다. compareHand 함수는 1, -1, 0 값으로 승패를 판단하며, 게임 기록과 점수를 실시간으로 업데이트하고 표시한다. 배팅 점수는 1~9 범위의 정수만 허용하는 검증 함수를 통해 관리된다. 2. 주사위 게임 구현 주사위 게임은 1~6 사이의 랜덤 값...2025.12.14