-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* input3 이름을 가진 input 요소의 기본 스타일 설정 */
input[name=input3] {
width: 200px; /* 너비 설정 */
padding: 10px; /* 안쪽 여백 설정 */
transition: width .4s ease-in-out; /* 너비 변화 시 전환 효과 설정 */
}
/* input3 이름을 가진 input 요소가 포커스를 받을 때의 스타일 설정 */
input[name=input3]:focus {
width: 200px; /* 포커스 시 너비 설정 (변화 없음) */
padding: 15px; /* 포커스 시 안쪽 여백 확대 */
background-color: pink; /* 포커스 시 배경색 변경 */
}
</style>
</head>
<body>
<!-- 문서의 주요 제목 -->
<h1> HTML Form 스타일 설정</h1>
<!-- 폼 요소 시작 -->
<form>
<!-- 입력 요소 그룹화 및 제목 설정 -->
<fieldset>
<legend>기본정보</legend>
<!-- 텍스트 입력 필드 -->
<input type="text" name="input3">
</fieldset>
</form>
</body>
</html>name 속성이 input3인 입력 필드의 스타일을 CSS로 설정하는 예제이다. 기본적으로 이 입력 필드는 너비가 200픽셀이고 안쪽 여백이 10픽셀이고, 너비가 변화할 때 0.4초 동안 부드럽게 전환되도록 설정되어 있다. 사용자가 입력 필드를 클릭하여 포커스를 맞추면, 안쪽 여백이 15픽셀로 늘어나고 배경색이 분홍색으로 변경된다. 이러한 스타일 변경은 transition 속성으로 정의된 전환 효과에 의해 부드럽게 나타내고이 코드는 전체적으로 간단한 폼 요소와 이를 스타일링하는 방법이다.
-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 문서의 문자 인코딩을 UTF-8로 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 반응형 디자인을 위해 화면 크기를 설정 -->
<title>Document</title> <!-- 브라우저 탭에 표시될 문서 제목 -->
</head>
<body>
<h1>초등학교 사칙연산 계산기</h1> <!-- 페이지의 주요 제목 -->
<form action="">
<fieldset>
<legend>계산기</legend> <!-- 폼 그룹의 제목 -->
<input type="text" size="2" value="7" class="hang1"> <!-- 첫 번째 입력 값 -->
<select name="" id="oper"> <!-- 연산자 선택 -->
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" size="2" value="10" class="hang2"> <!-- 두 번째 입력 값 -->
<button class="resultBtn">=</button> <!-- 결과 버튼 -->
<span class="resultArea">0</span> <!-- 결과 출력 영역 -->
</fieldset>
</form>
<script>
var hang1 = document.getElementsByClassName('hang1')[0]; // 첫 번째 입력 값 요소 선택
var hang2 = document.querySelectorAll('.hang2')[0]; // 두 번째 입력 값 요소 선택
var resultBtn = document.querySelector('.resultBtn'); // 결과 버튼 요소 선택
var resultArea = document.querySelector('.resultArea'); // 결과 출력 영역 요소 선택
var oper = document.getElementById('oper'); // 연산자 선택 요소 선택
resultBtn.addEventListener('click', function(event) {
event.preventDefault(); // 폼 제출 기본 동작 방지
console.log(hang1.value + oper.value + hang2.value); // 연산식 콘솔 출력
// eval() 함수 사용해 연산 수행 및 결과 출력
resultArea.innerHTML = eval(hang1.value + oper.value + hang2.value);
});
</script>
</body>
</html>
초등학교 저학년용 간단한 계산기를 구현한 예제이다. 기본 구조는 HTML5로 작성되었으며, 문서의 문자 인코딩을 UTF-8로 설정하고, 반응형 디자인을 위해 화면 크기를 설정한다. 제목은 "Document"로 설정되고, 본문에서는 주요 제목으로 "초등학교 사칙연산 계산기"를 표시한다. 폼 요소는 <fieldset>을 사용해 그룹화되고, "계산기"라는 제목을 갖는다. 첫 번째 입력 값은 class="hang1"로 설정된 <input> 요소로, 기본값이 7이다. 연산자 선택을 위한 <select> 요소에는 덧셈, 뺄셈, 곱셈, 나눗셈 옵션이 포함된다. 두 번째 입력 값은 class="hang2"로 설정된 <input> 요소로, 기본값이 10이다. 결과를 계산하기 위한 버튼은 class="resultBtn"으로 설정된 <button> 요소이며, 결과 출력 영역은 class="resultArea"로 설정된 <span> 요소로 초기값이 0이다. 스크립트에서는 각 요소를 선택하고, 결과 버튼 클릭 시 eval() 함수를 사용해 연산을 수행하고 결과를 출력한다
-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 문서의 문자 인코딩을 UTF-8로 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 반응형 디자인을 위해 화면 크기를 설정 -->
<title>Document</title>
</head>
<body>
<h1>JS Form Validation</h1> <!-- 페이지의 주요 제목 -->
<form action="" id="myForm"> <!-- 폼 시작 -->
제목: <input type="text" name="title"><br> <!-- 제목 입력 필드 -->
이름: <input type="text" name="name"><br> <!-- 이름 입력 필드 -->
내용: <textarea name="content"></textarea><br> <!-- 내용 입력 필드 -->
<input type="submit" value="저장"> <!-- 저장 버튼 -->
</form>
<script>
var myForm = document.getElementById('myForm'); // 폼 요소 선택
myForm.onsubmit = function(event) {
event.preventDefault(); // 폼 제출 기본 동작 방지
// 제목 필드가 비어있는지 확인
if(myForm.title.value == "") {
alert('제목을 입력 하세요!');
myForm.title.focus();
return;
}
// 이름 필드가 비어있는지 확인
if(myForm.name.value == "") {
alert('이름을 입력 하세요!');
myForm.name.focus();
return;
}
// 내용 필드가 비어있는지 확인
if(myForm.content.value == "") {
alert('내용을 입력 하세요!');
myForm.content.focus();
return;
}
// 모든 유효성 검사가 통과되면 폼을 제출
myForm.method = 'get';
myForm.submit();
}
</script>
</body>
</html>문서는 폼 유효성 검사를 통해 사용자가 입력 필드를 올바르게 채웠는지 확인한다. 제목, 이름, 내용 필드가 비어있으면 경고 메시지를 표시하고 해당 필드에 포커스를 맞추고 모든 필드가 채워진 경우에만 폼이 제출된다
-4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원 관리 페이지</title>
<!-- 인터널 방식(내부 설정 방식) -->
<style>
.saveBtn {
width: 100px;
height: 30px;
background-color: red;
border: 0;
border-radius: 6px;
box-shadow: 1px 1px 2px;
}
/* css3maker.com에서 설정 후 복사 */
.element {
border: 2px solid rgba(100, 100, 100, 1);
border-radius: 4px;
background-color: rgba(247, 203, 203, 0.5);
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.77);
text-shadow: 4px 2px 4px rgba(0, 0, 0, 0.3);
padding: 10px 0px;
text-align: center;
}
.memListTbl {
border: 1px solid black;
width: 100%;
border-collapse: collapse;
}
.memListTbl tr th {
border: 1px solid black;
}
.memListTbl td {
border: 1px solid black;
text-align: center;
}
.subTbl tr td {
border-left: 0 solid black;
border-right: 0 solid black;
border-top: 0 solid black;
border-bottom: 1 solid black;
}
div.container {
margin: auto;
max-width: 800px;
min-width: 600px;
}
</style>
</head>
<body>
<div class="container">
<div>
<!-- 제목 -->
<h1 class="element">회원 관리 페이지</h1>
</div>
<div>
<!-- 입력 폼 -->
<form action="" method="post">
<table>
<tr>
<th><label for="name">이름</label></th>
<td><input type="text" name="name" id="name" placeholder="성명을 입력 하세요"></td>
</tr>
<tr>
<th><label for="dept">부서</label></th>
<td><input type="text" name="name" id="dept" value="경영지원"></td>
</tr>
<tr>
<th><label for="rank">직책</label></th>
<td><input type="text" name="name" id="rank" value="과장"></td>
</tr>
<tr>
<th><label for="gender">성별</label></th>
<td>
<input type="radio" name="gender" id="gender"> 남성
<input type="radio" name="gender" id="gender" checked> 여성
<input type="radio" name="gender" id="gender"> 기타
</td>
</tr>
<tr>
<th><label for="favorit">관심</label></th>
<td>
<input type="checkbox" name="favorit" id="favorit" value="sw개발" checked> SW개발
<input type="checkbox" name="favorit" id="favorit" value="영업" checked> 영업
<input type="checkbox" name="favorit" id="favorit" value="독서"> 독서내부 스타일을 사용하여 회원 관리 페이지를 구성한다. 사용자 입력 폼을 통해 회원 정보를 입력하고, 입력된 데이터를 저장할 수 있으며, 저장된 데이터를 테이블 형식으로 표시한다. 각 요소에 대해 스타일이 정의되어 있어 보기 좋은 레이아웃을 제공한다.
-5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="LSH의 SW - A website showcasing software projects, profile, gallery, lectures, and shop.">
<title>LSH의 SW</title>
<style>
/* 기본적인 스타일 설정 */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
header {
border: 0px solid gray;
max-width: 1000px;
margin: auto;
}
h1 {
text-align: center;
}
/* 내비게이션 바 스타일 */
nav {
border-bottom: 1px solid black;
background-color: #f8f8f8;
transition: background-color 0.3s;
}
/* 내비게이션 바 호버 효과 */
nav:hover {
background-color: #e0e0e0;
}
ul {
margin: auto;
border: 0px solid red;
padding: 0;
overflow: hidden;
max-width: 600px;
text-align: center;
}
header ul li {
width: 100px;
height: 50px;
border: 0px solid black;
display: inline-block;
box-sizing: border-box;
line-height: 50px;
cursor: pointer;
}
/* 메뉴 항목 호버 효과 */
header ul li:hover {
border-bottom: 2px solid red;
font-weight: bold;
color: red;
transition: color 0.3s, border-bottom 0.3s;
}
</style>
</head>
<body>
<header>
<h1>LSH SW</h1>
<nav>
<ul>
<li>Home</li>
<li>Profile</li>
<li>Gallery</li>
<li>Lecture</li>
<li>Shop</li>
</ul>
</nav>
</header>
<aside>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</aside>
</body>
</html>"LSH의 SW"라는 제목의 웹사이트를 위한 기본 레이아웃과 스타일을 정의한다. 페이지는 헤더와 내비게이션 바를 포함하고 있으며, 주 메뉴는 홈, 프로필, 갤러리, 강의, 쇼핑 항목으로 구성되어 있있다. 헤더는 중앙에 정렬된 제목과 내비게이션 메뉴를 포함하고 있고, 내비게이션 바와 메뉴 항목에 호버 효과가 적용되어 있어 사용자가 마우스를 올리면 배경색과 글씨 색이 변하고 하단에 빨간색 밑줄이 생긴다. 본문에는 아직 내용이 추가되지 않은 사이드 내비게이션이 포함되어 있다. 스타일링은 내부 스타일 시트를 통해 설정되었으며, 전체적인 레이아웃은 중앙 정렬을 통해 균형 있게 배치되어있다
-6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div 요소에 대한 기본 스타일 */
div {
border: 1px solid navy;
padding: 5px;
border-radius: 8px;
}
/* header 클래스 스타일 */
div.header {
overflow: hidden;
}
/* middle 클래스 스타일 */
div.middle {
overflow: hidden;
}
/* footer 클래스 스타일 */
div.footer {
height: 100px;
}
/* container 클래스 스타일 */
div.container {
width: 1000px;
margin: auto;
}
/* header 내부 h1 요소 스타일 */
div.header h1 {
text-align: center;
margin: 0;
}
/* header 내부 nav 스타일 */
div.header nav {
border-bottom: 1px solid black;
background-color: #f8f8f8;
transition: background-color 0.3s;
}
/* header nav 호버 효과 */
div.header nav:hover {
background-color: #e0e0e0;
}
/* header 내부 ul 스타일 */
div.header ul {
margin: auto;
padding: 0;
overflow: hidden;
max-width: 600px;
text-align: center;
list-style-type: none;
}
/* header ul 내부 li 요소 스타일 */
div.header ul li {
width: 100px;
height: 50px;
display: inline-block;
line-height: 50px;
cursor: pointer;
box-sizing: border-box;
}
/* li 요소에 대한 호버 효과 */
div.header ul li:hover {
border-bottom: 2px solid red;
background-color: black;
font-weight: bold;
color: red;
transition: color 0.3s, border-bottom 0.1s;
}
/* middle 클래스 내부 첫 번째 자식 div 스타일 */
div.middle>div:nth-child(1) {
background-color: orange;
width: 180px;
height: 600px;
}
/* middle 클래스 내부 두 번째 자식 div 스타일 */
div.middle>div:nth-child(2) {
background-color: greenyellow;
width: 590px;
height: 600px;
}
/* middle 클래스 내부 세 번째 자식 div 스타일 */
div.middle>div:nth-child(3) {
background-color: skyblue;
width: 180px;
height: 600px;
}
/* middle 클래스 내부 모든 div 스타일 */
div.middle>div {
float: left;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<!-- 헤더 영역 -->
<div class="header">
<h1>LSH SW</h1>
<nav>
<ul>
<li>Home</li>
<li>Profile</li>
<li>Gallery</li>
<li>Lecture</li>
<li>Shop</li>
</ul>
</nav>
</div>
<!-- 중간 영역 -->
<div class="middle">
<div></div>
<div></div>
<div></div>
</div>
<!-- 푸터 영역 -->
<div class="footer" style='text-align: center;'>footer부분</div>
</div>
</body>
</html>"LSH SW"라는 웹사이트의 구조와 스타일을 정의한다. div 요소에 기본적인 스타일을 적용하고, 페이지는 세 개의 주요 섹션으로 나뉜다: header, middle, footer이다. 헤더(.header)에는 제목과 내비게이션 바가 포함되어 있으며, 내비게이션 바는 메뉴 항목을 중앙에 배치하고, 호버 효과로 배경색과 글씨 색이 변한다. 중간 영역(.middle)은 세 개의 열로 나뉘며 오렌지, 연두색, 하늘색 배경을 가지며, 플로트를 이용해 왼쪽으로 정렬된다. 푸터(.footer)는 고정된 높이와 중앙 정렬된 텍스트를 가지며, "footer부분"이라는 텍스트를 포함한다. 전체 레이아웃은 .container 클래스로 중앙에 배치되고 최대 너비는 1000px로 설정된다. 이 구조는 웹페이지의 시각적 배치와 스타일을 명확하게 정의하여 깔끔하고 일관된 디자인을 제공한다
-7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 수정 입력 박스 숨김 처리 */
td.modifyBox {
display: none;
}
</style>
<script>
// 할일 목록 초기 데이터
var todoList = [
{seq:101, title:"여행하기", done:false},
{seq:102, title:"포트폴리오 만들기", done:true},
{seq:103, title:"팀 프로젝트 하기", done:false},
{seq:104, title:"엄마 생일 선물 준비하기", done:false},
];
var seqCnt = 105; // 할일 항목의 고유 번호 초기값
// 페이지 로드 후 실행될 코드
window.onload = function() {
var memoTxt = document.getElementById('memoTxt'); // 메모 입력란
var demo = document.querySelector('#demo'); // 할일 목록 테이블
var clickBtn = document.querySelector('#clickBtn'); // 저장 버튼
// 삭제 버튼 클릭 이벤트 처리 함수
HTMLButtonElement.prototype.handleDelEvt = function (btn) {
var trElement = btn.parentElement.parentElement; // 버튼의 부모 요소인 tr 요소
var targetSeq = trElement.dataset.seq; // 삭제할 항목의 고유 번호
// 해당 번호를 가진 할일 항목 찾기
var idx = todoList.findIndex(function(todo) {
return targetSeq == todo.seq;
});
// 항목을 배열에서 제거하고 목록 갱신
if(idx != -1) {
todoList.splice(idx, 1);
drawList();
}
}
// 수정 버튼 클릭 이벤트 처리 함수
HTMLButtonElement.prototype.editClickHandle = function(btn) {
var trElement = btn.parentElement.parentElement; // 버튼의 부모 요소인 tr 요소
var targetSeq = trElement.dataset.seq; // 수정할 항목의 고유 번호
var idx = todoList.findIndex(function(todo) {
return targetSeq == todo.seq;
});
// 해당 항목 수정 모드 활성화
if(idx != -1) {
var modifyBox = trElement.querySelector(".modifyBox"); // 수정 입력 박스
var titleBox = trElement.querySelector(".titleBox"); // 할일 제목 표시 박스
modifyBox.style.display = "block";
titleBox.style.display = "none";
var modifyTxt = trElement.querySelector(".modifyTxt"); // 수정 입력란
modifyTxt.value = todoList[idx].title; // 현재 제목을 입력란에 설정
// 수정 완료 버튼 클릭 이벤트 처리 함수
trElement.querySelector(".modifyBtn").onclick = function(event) {
modifyBox.style.display = "none";
todoList[idx].title = modifyTxt.value; // 수정된 제목으로 업데이트
drawList(); // 목록 갱신
};
}
}
// 할일 목록을 화면에 그리는 함수
function drawList() {
demo.innerHTML = ""; // 기존 목록 초기화
todoList.forEach(function(todoObj){
demo.innerHTML += `<tr align="center" data-seq="${todoObj.seq}">
<td><input type="checkbox" onchange="window.aaaa(this)"></td>
<td class="titleBox">${ todoObj.title }</td>
<td class="modifyBox">
<input type="text" class="modifyTxt"> <button class="modifyBtn">수정완료</button>
</td>
<td><button onclick="editClickHandle(this)">수정</button></td>
<td><button onClick="handleDelEvt(this)">삭제</button></td>
</tr>`;
});
}
drawList(); // 초기 목록 그리기
// 새로운 할일 항목 추가 이벤트 처리 함수
var handleEvent = function(eventTodoList(할일 목록)dmf 관리하는 웹 페이지를 구현하고 있다. 초기 데이터로는 할일 목록을 포함하는 배열이 있고, 각 항목은 고유 번호, 제목, 및 완료 여부를 갖는다. 페이지가 로드되면 JavaScript는 이 목록을 테이블 형식으로 화면에 표시한다. 사용자 인터페이스는 항목 수정과 삭제를 지원한다. 삭제 버튼을 클릭하면 해당 항목이 목록에서 제거되고, 수정 버튼을 클릭하면 입력 박스가 표시되어 제목을 수정할 수 있다. 수정 완료 버튼을 클릭하면 수정된 제목이 저장되고 화면에 반영한다
