4-1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
</head>
<body>
<h1>수습 국원 모집</h1>
<h2>방송에 관심 있는 새내기 여러분 환영합니다</h2>
<p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다. <br>
평소 방송에 관심있었던 여러 학우들의 지원바랍니다.</p>
<ul>
<li><b>모집 기간 :</b> 3월 2일 ~ 3월 11일</li>
<li><b>모집 분야 :</b> 아나운서, PD, 엔지니어</li>
<li><b>지원 방법 :</b> 양식 작성 후 이메일 접수<br>
<i>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</i></li>
</ul>
<h3>혜택</h3>
<ol type="a">
<li>수습기자 활동 중 소정의 활동비 지급</li>
<li>정기자로 진급하면 장학금 지급</li>
</ol>
<img src="images/mic.jpg" alt="">
</body>
</html>
4-2 마무리 문제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
table, td, th {
border:1px solid #ccc;
}
td, th {
padding:10px 20px;
}
td:last-child{
width:200px;
}
</style>
</head>
<body>
<h1>수습 국원 지원 양식</h1>
<table>
<tr>
<th rowspan="3">개인정보</th>
<th>이름</th>
<td></td>
</tr>
<tr>
<th>학과/학번</th>
<td></td>
</tr>
<tr>
<th>연락처</th>
<td></td>
</tr>
<tr>
<th>지원 분야</th>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
5-1 마무리 문제'
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
<style>
ul { list-style:none;}
li { line-height:50px; }
label {
width:60px;
float:left;
}
</style>
</head>
<body>
<h1>예약 정보</h1>
<form>
<ul>
<li>
<label for="r-name">이 름</label>
<input type="text" id="r-name">
</li>
<li>
<label for="r-phone">휴대폰</label>
<input type="tel" id="r-phone">
</li>
<li>
<label for="r-email">이메일</label>
<input type="email" id="r-email">
</li>
<li>
<input type="submit" value="예약하기">
</ul>
</form>
</body>
</html>
문제를 풀면서 느낀점은..나는 value와 id의 차이점이 조금 헷갈렸땅...ㅠㅠ
value는 보여지는 화면인데 id는..?label이랑 같이 쓴다는 점밖에 이해를 못하겠음..
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
#container {
width:520px;
border:1px solid black;
padding:20px 40px;
margin:0 auto;
}
fieldset { margin-bottom:15px; }
legend { font-weight:bold; }
ul {list-style-type: none;}
li { line-height:30px;}
</style>
</head>
<body>
<div id="container">
<h1>프런트엔드 개발자 지원서 </h1>
<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
<hr>
<form>
<h4>개인정보</h4>
<ul>
<li
<label for="sname"> 이름 </label>
<input type="text" id="sname" autofocus placeholder="공백없이 입력하세요">
</li>
<li>
<label for="snumber"> 연락처 </label>
<input type="text" id="snum">
</li>
</ul>
<h4>지원 분야</h4>
<ul>
<li>
<label><input type="radio" name="field" value="an"> 웹 퍼블리싱</label>
</li>
<li>
<label><input type="radio" name="field" value="pd"> 웹 애플리케이션 개발</label>
</li>
<li>
<label><input type="radio" name="field" value="eng"> 개발 환경 개선</label>
</li>
</ul>
<label>
<h4>지원동기</h4>
<textarea id="motive" cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요."></textarea>
</label>
<div>
<input type="submit" value="접수하기">
<input type="reset" value="다시 쓰기">
</div>
</form>
</div>
</body>
</html>
문제를 풀면서 느낀점 여기서 label과 value를 같이쓸 때 value값은 일단 아무렇게나 지정해도 되는것인지.?일단은 그렇게 이해함.
6-1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<h1>웹 기술 - 기본</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript 기초</li>
</ul>
</body>
</html>
느낀점:외부스타일 시트가 제일 많이 쓸 것 같다.
6-2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>탐라국 입춘굿</title>
<style>
#container { /* 내용 전체를 감싸는 영역 */
width:600px; /* 너비 600 픽셀 */
margin:20px auto; /* 내용이 화면 중앙에 오도록 지정 */
}
h1 {
display: inline-block; /* 글자 부분에만 배경 색이 채워지도록 지정 */
background-color:#0404aa; /* 배경 색 - 짙은 파란색 */
color:#fff; /* 글자 색 - 흰색 */
}
.accent {
font-weight: bold; /* 글자 굵게 */
color:red; /* 글자 색 - 빨간색 */
}
</style>
</head>
<body>
<div id="container">
<h1>탐라국 입춘굿</h1>
<p>제주도의 문화축제 중에서 유일하게 <span class="accent">탐라 시대부터 내려온 축제</span>이다.</p>
<p>제주에서 입춘은 새철<sup>(제주어, 샛절)</sup> 드는 날이라 한다. <br>
하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다.
</p>
</div>
</body>
</html>
이문제는 id 선택자 클래스 선택자, 타입선택자만 구분하면 되는듯..
7-1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
<style>
.container {
width:500px;
padding:10px;
border:1px solid #ccc;
}
.subject {
color:#ad3000;
font-weight:700;
font-size:larger;
}
ul {
list-style-type:none;
}
li {
line-height:2.0;
}
</style>
조건 3가지만 고쳐주면 됐기때문에 쉬웠던 문제
7-2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
.container {
width:300px;
height:70px;
margin:0 auto;
background-color:#444;
}
h1 {
text-align: center;
line-height: 70px;
color:#fff;
text-shadow:3px 2px 5px #000;
}
</style>
</head>
<body>
<div class="container">
<h1>웹 개발 기초</h1>
</div>
</body>
</html>
7-3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 3</title>
<style>
table{border:!px solid balck;
border-collapse:collapse;
caption-side:bottom;}
td,th{
padding:10px;
border:1px solid black;
}
.heading{
background:#eee;
}
</style>
</head>
<body>
<table>
<caption>2019 국민 독서실태</caption>
<thead>
<tr class="heading">
<th>구분</th>
<th>성인</th>
<th>독서자</th>
</tr>
</thead>
<tbody>
<tr>
<th class="heading">종이책</th>
<td>6.1권</td>
<td>11.8권</td>
</tr>
<tr>
<th class="heading">전자책</th>
<td>1.2권</td>
<td>7.1권</td>
</tr>
<tr>
<th class="heading">오디오북</th>
<td>0.2권</td>
<td>5.5권</td>
</tr>
</tbody>
</table>
</body>
</html>
난 일케풀었는데 똑같은 결과가 나왔따.. 근데 답지엔 웬 col이 있는데 이게 뭐임..?몰겠다
7-4
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 4</title>
<style>
#container { /* 전체 콘텐츠를 감싸는 div */
width:650px; /* 너비 */
margin:0 auto; /* 가로로 중앙에 배치 */
padding:5px; /* 테두리와 내용 사이의 패딩 여백 */
}
#check { /* 텍스트 부분을 감싸는 div */
width:640px; /* 너비 - 그림 너비 값에 맞춤 */
border:1px solid #ccc; /* 테두리 */
}
h1 {
color: white; /* 글자색 */
font-size: 1em; /* 글자 크기 */
background: #222; /* 배경색 */
margin: 0; /* 제목과 다른 요소 간의 마진 여백 */
padding: 10px; /* 테두리와 제목 텍스트 사이의 패딩 여백 */
}
h2 {
color: #ff0000;
font-size: 1.5em;
text-align: center;
}
p {
font-size: 1.2em;
line-height: 2em;
font-weight: bold;
text-align: center;
}
.accent {
color: #0000ff;
}
.smalltext {
font-size: 0.7em;
}
</style>
</head>
<body>
<div id="container">
<img src="images/top.jpg" alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 질좋은 사과를 저렴하게 즐겨보세요">
<div id="check">
<h1>확인하세요</h1>
<h2>주문 및 배송</h2>
<p><span class="accent">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
<hr>
<h2>교환 및 환불</h2>
<p>불만족시 <span class="accent">100% 환불</span>해 드립니다<br>
고객센터로 전화주세요</p>
<hr>
<h2>고객센터 </h2>
<p>0000-0000<br>
<span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
</div>
</div>
</body>
</html>
