<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#news-section p {color: red;}
#weather-section p {color: green;}
#footer-section {
background-color: #444;
color: white;
padding: 14px;
}
</style>
</head>
<body>
<h1>div 태그 사용하기</h1>
<div id="contents-section">
<div id="news-section">
<h2>뉴스 속보</h2>
<p>중앙 HTA 이응수 강사가 워크넷 이벤트 응모에 당첨되었습니다.</p>
<p>중앙 HTA 박수정 학생이 워크넷 이벤트에 아쉽게 탈락했습니다.</p>
</div>
<div id="weather-section">
<h2>날씨 정보</h2>
<p>오늘 서울의 날씨는 흐리고 차차 비가 오겠습니다.</p>
<p>내일 서울의 날씨는 비 온 후 기온이 많이 떨어지겠습니다.</p>
</div>
</div>
<div id="footer-section">
<h3>중앙 HTA 방송국</h3>
<p>주소: 서울특별시 종로구 봉익동 디아망 빌딩</p>
<p>전화: 02-1234-5678</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.up {color: red;}
.down {color: blue;}
</style>
</head>
<body>
<h1>span 태그 사용하기</h1>
<h2>주식 현황</h2>
<p>셀트리온 <span class="up">+0.45%</span></p>
<p>아시아나 항공 <span class="down">-5.97%</span></p>
<p>에프로젠 KIC <span class="up">+12.52%</span></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.gallery {
width: 400px;
height: 400px;
}
.thumbnail {
width: 120px;
height: 120px;
opacity: 0.3;
}
.highlight {
opacity: 1;
}
</style>
</head>
<body>
<h1>id와 class 속성 사용하기</h1>
<h2>이미지 갤러리</h2>
<div id="img-gallery-box">
<img src="images/Chrysanthemum.jpg" class="gallery">
</div>
<div id="img-thumbnail-box">
<img src="images/Chrysanthemum.jpg" class="thumbnail highlight">
<img src="images/Desert.jpg" class="thumbnail">
<img src="images/Hydrangeas.jpg" class="thumbnail">
<img src="images/Jellyfish.jpg" class="thumbnail">
<img src="images/Koala.jpg" class="thumbnail">
<img src="images/Lighthouse.jpg" class="thumbnail">
<img src="images/Penguins.jpg" class="thumbnail">
<img src="images/Tulips.jpg" class="thumbnail">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(".thumbnail").click(function() {
var imgPath = $(this).attr('src');
$('.gallery:first').attr('src', imgPath);
$('.thumbnail').siblings().removeClass("highlight");
$(this).addClass('highlight');
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>폼 요소 연습하기</h1>
<h2>input 태그 연습하기</h2>
<form>
<label>숨김필드</label><input type="hidden" /><br />
<label>이름</label><input type="text" /><br />
<label>비밀번호</label><input type="password" /><br/>
<label>생일</label><input type="date" /><br />
<label>나이</label><input type="number" /><br />
<label>프로필사진</label><input type="file" /><br />
<label>성별</label><input type="radio" />남<input type="radio" />여<br />
<label>관심분야</label><input type="checkbox" />영화
<input type="checkbox" />미술
<input type="checkbox" />운동
<input type="checkbox" />음악<br />
<input type="submit" />
<input type="reset" />
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>input 태그의 주요 속성 연습하기</h1>
<form action="register.jsp">
<label>value 속성</label><input type="text" name="nickname" value="홍길동" /><br />
<label>placeholder 속성</label><input type="text" name="username" placeholder="이름을 입력하세요" /><br />
<label>maxlength 속성</label><input type="text" name="address" maxlength=6 /><br />
<label>readonly 속성</label><input type="text" name="phone" value="010-111-1111" readonly="readonly"/><br />
<label>disabled 속성</label><input type="text" name="school" value="서울대학교" disabled="disabled"/><br />
<label>name 속성</label><input type="text" name="userid" placeholder="아이디를 입력하세요" /><br />
<label>name 속성</label><input type="date" name="birth" placeholder="생일을 입력하세요" /><br />
<label>name 속성</label><input type="radio" name="gender" value="male" checked="checked">남
<input type="radio" name="gender" value="female">여<br>
<label>name 속성</label><input type="radio" name="career" value="0">신입
<input type="radio" name="career" value="3">3년차 이상
<input type="radio" name="career" value="5">5년차 이상
<input type="radio" name="career" value="7">7년차 이상<br>
<label>name 속성</label><input type="checkbox" name="tech" value="java" checked="checked">java
<input type="checkbox" name="tech" value="script" checked="checked">script
<input type="checkbox" name="tech" value="python">python
<input type="checkbox" name="tech" value="c">c
<input type="checkbox" name="tech" value="SQL">SQL
<input type="checkbox" name="tech" value="design">design
<input type="submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>select 태그 연습하기</h1>
<form action="register.jsp">
<label>학력</label>
<select name="school" id="">
<option value="E">초등학교 졸업</option>
<option value="M">중학교 졸업</option>
<option value="H">고등학교 졸업</option>
<option value="U" selected="selected">대학교 졸업</option>
<option value="G">대학원 졸업</option>
</select> <br>
<label>전공</label>
<select name="major">
<optgroup label="인문대학">
<option value="KQ">국어국문학과</option>
<option value="ED">영어영문학과</option>
<option value="BD">신문방송학과</option>
</optgroup>
<optgroup label="공과대학">
<option value="MD">기계공학과</option>
<option value="ELD">전기공학과</option>
<option value="ETD">전자공학과</option>
<option value="ENT">환경공학과</option>
</optgroup> <br>
<optgroup label="자연대학">
<option value="MMD">수학과</option>
<option value="PD">물리학과</option>
<option value="CD">화학과</option>
<option value="BYD">생물학과</option>
</optgroup>
</select ><br>
<label>이메일</label><input type="text" name="email1">@
<select name="email2">
<option value="" disabled selected>선택하세요</option>
<option value="daum.net">다음</option>
<option value="naver.com">네이버</option>
<option value="google.com">구글</option>
<option value="nate.com">네이트</option>
<option value="">직접 입력</option>
</select>
<input type="submit" value="제출하기"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>textarea 태그 연습하기</h1>
<form>
<label>사용자명</label>
<input type="text" name="username"> <br>
<label>자기소개</label>
<textarea name="profile" rows="5" cols="60"></textarea><br>
<input type="submit">
</form>
<hr>
<h2>textarea에 값을 미리 설정하기</h2>
<form>
<label>사용자명</label>
<input type="text" name="username" value="홍길동"> <br>
<label>자기소개</label>
<textarea name="profile" rows="5" cols="60">나는 행복합니다~.</textarea><br>
<input type="submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.first {
color: red;
}
.main span {
color: blue;
}
.enter span {
color: yellow;
}
</style>
</head>
<body>
<h1>뉴스</h1>
<h2>주요 뉴스</h2>
<ul class="main">
<li class="first">한국당 좌파 야합 반발, 정치투쟁 예고</li>
<li><span>세월호 CCTV</span> 조작, 특조위에서 밝힌다.</li>
<li><span>조선업 회복</span> 앞당긴다.</li>
</ul>
<h2>연예</h2>
<ul class="enter">
<li class="first">어벤저스 엔드게임 개봉 4시간만에 100만 돌파</li>
<li>김상혁 피규어 <span>3000만 원치</span> 수집</li>
<li>랜선라이프 <span>이영자 구독자 수</span> 보면 열심히 하게 되</li>
</ul>
<h2>스포츠</h2>
<ul class="sports">
<li class="first">3위 굳건 토트넘, 자력 UCL 유력해졌다</li>
<li>에릭센 팬 서비스도 월드 클래스</li>
<li>영국 현지, 이제 손흥민의 시대</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
label {
font-weight:bold;
}
</style>
</head>
<body>
<h1>회원가입 폼</h1>
<label>아이디</label><input type="text" name="id" placeholder="아이디 입력하세요."><br>
<label>이름</label><input type="text" name="name" placeholder="이름 입력하세요."><br>
<label>비밀번호</label><input type="password" name="pw" placeholder="비밀번호 입력하세요."><br>
<label>이메일</label><input type="text" name="mail1" placeholder="이메일 입력하세요.">@
<select name="mail2">
<option value="" disabled selected>선택하세요</option>
<option value="naver.com">네이버</option>
<option value="daum.net">다음</option>
</select><br>
<label>생일</label><input type="date"><br>
<label>자기소개</label><textarea name="profile" cols="100" rows="3" placeholder="자기소개를 300자 이내로 작성하세요."></textarea><br>
<input type="submit">
</body>
</html>