국비학원 교육 일지
[48일차] 국비 교육
snooop
2022. 9. 27. 17:42
<시험 예제>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1. 외부 스타일 시트 가져오기 -->
<link rel="stylesheet" href="style.css">
<title>시험대비 연습</title>
<style>
table, th, td{
border-collapse: collapse ;
/* collapse : table테두리와 td의 테두리 사이의 간격을 없앰 겹치는 부분은 한줄로 나타냄 */
border: 1px solid #333;
}
th{
background-color: orange;
color: white;
}
textarea{
/* display: flex;
justify-content: center;
align-items: center; */
vertical-align: middle;
/* inline이나 inline-block 요소에만 적용 됨(block요소인 div는 불가능 ) */
}
</style>
</head>
<body>
<!-- 2.body태그 : html에서 화면에 출력할 태그와 script를 구문 등을 모두 작성 할 수 있는 태그 -->
<h1></h1> <!-- 3. h태그를 크기 순으로...-->
<h2>....</h2>
<h6></h6>
<!-- 4. 기본구성 -->
<!-- <!DOCTYPE html>, <html> , <head>,</head>, <body>,</body> </html>-->
<p>안녕하세요. 오늘은 화요일 입니다.<br> 그리고 UI 디자인 시험 치는 날 입니다.</p>
<!-- 5. br 태그는 페이지에서 줄바꿈을 할 때 사용 -->
<!-- p 태그는 본문에서 단락을 나눌때 사용 -->
<!-- 6. 페이지에서 사진을 출력할때 사용하는 태그와 사용 방법 -->
<img src="파일의 경로" height="사진의 높이 지정"
width="사진의 너비 지정" alt="이미지가 없을때 출력할 내용 ">
<!-- 7. ul 태그 : 순서가 없는 목록을 표시할 때 사용 -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- ol 태그에 올 수 있는 타입 : I(로마자 대문자) i(로마자 소문자)
A(알파벳 대문자) a(알파벳 소문자) -->
<ol type="A"> <!-- 8. 순서가 있는 목록 태그에서 로마자 (대문자)로 표시하는 방법 <ol type="I"> -->
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<!-- 9. Block 속성과 inline 속성에 대한 설명 : -->
<!-- Block 속성 : 라인 전체를 차지하는 속성 -->
<!-- inline 속성 : 요소의 영역만 차지하는 속성 -->
<!-- 10. 페이지를 이동하는 태그가 무엇이고 어떻게 사용하는지 -->
<a href="이동할 주소" >화면에 표시할 문구</a>
<!-- 11. 표를 표시하는 태그가 무엇이고 사용하는 방법?? -->
<!-- table 태그와 tr : table row, td: table data -->
<table>
<tr>
<td></td>
</tr>
</table>
<!-- 12. colspan 속성에 대해서 : column을 합칠 때 사용함 -->
<!-- rowspan 속성에 대해서 : row를 합칠 때 사용 -->
<!-- 13. id 속성과 class 속성의 차이점 기술 -->
<!-- id 속성: 태그의 선택자로 사용 되며 페이지내에서 유일한 값이어야 함 -->
<!-- class 속성 : 태그의 선택자로 사용되며 페이지 내에서 여러 태그의 중복 사용 가능 -->
<!-- 14. test.jpg 파일을 넓이 100px 높이 100px의 크기로 페이지에 출력하는 태그 작성 -->
<img src="test.jpg" width="100px" height="100px" alt="">
<!-- 한문제 스킵 -->
<!-- 15.h태그와 table 태그 사용 문제 -->
<!-- 이름 나이 성별 -->
<h2>HTML Table</h2>
<table>
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<tr>
<td>이영지</td>
<td>21세</td>
<td>여자</td>
</tr>
<tr>
<td>안유진</td>
<td>20세</td>
<td>여자</td>
</tr>
<tr>
<td>미미</td>
<td>24세</td>
<td>여자</td>
</tr>
</table>
<!-- 16. -->
<h2>HTML List</h2>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>ajax</li>
</ul>
<!-- 17. start에 숫자를 넣으면 n번째부터 출력 됨 -->
<ol type="a" start="5">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>ajax</li>
</ol>
<!-- 18. input 태그의 여러가지 출력 형태를 묻는 문제 -->
<h2>HTML input</h2>
<input type="text" placeholder= "아이디입력 "><br>
<!-- 19. -->
<select>
<option value="">제목</option>
<option value="">내용</option>
<option value="">작성자</option>
</select>
<input type="text" placeholder="검색어입력"><br>
<!-- 20. -->
<input type="date">
<!-- 포트폴리오 문제 -->
<form>
<fieldset>
<legend>공지사항 작성하기</legend>
<p>
<label for="title">제목</label>
<input type="text" id= "title" placeholder="제목을 입력하세요">
</p>
<p>
<label for="content">내용</label>
<textarea name="" id="contents" cols="30" rows="10"></textarea>
</p>
<p>
<label for="uploadFile">첨부파일
<input type="file">
</label>
</p>
<button>작성하기</button>
</fieldset>
</form>
<hr>
<table>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
<tr>
<td>9</td>
<td>공지사항</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
</body>
</html>