웹문서에서 다양한 내용 입력하기(6)
2022. 8. 29. 22:48ㆍ개인활동/HTML+CSS+JS
반응형
Do it! 한권으로 끝내는 웹 기본 교과서
HTML+CSS+JS 웹표준의 정석
으로 웹개발 공부 시작함.
하이퍼링크 삽입하기
<a>
- href 속성을 이용해 연결할 파일이나 링크할 주소를 씀
- 닫는 태그 필수
- target 속성으로 새로운 탭으로 열릴지 말지를 결정
- <a href="~~"><img ~~></a>를 통해 이미지에도 링크를 걸 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>링크 삽입하기</title>
</head>
<body>
<a href="http://blog.daum.net/jepaf/2" target="_blank" alt="링크로 향합니다">자세한 정보보기</a>
</body>
</html>
태그 정리
| <hn> | n에는 1~6까지 사용할 수 있으며, 숫자가 커질수록 글자 크기가 작아짐 |
| <p> | 텍스트 단락: 내용이 길면 웹브라우저 창의 너비에 맞게 자동으로 줄을 바꿈 |
| <br> | 줄바꿈: 텍스트 단락 중 원하는 위치에서 줄바꿈, 닫는태그 없음 |
| <blockquote> | 내용 인용: 다른 내용보다 들여쓰고 단락으로 표시 |
| <strong> | 중요한 텍스트를 굵게 표시, 화면 낭독기에서 강조해 읽어줌 |
| <b> | 중요하지는 않지만 굵게 표시 |
| <em> | 중요한 텍스트를 기울게 표시(문장), 화면낭독기에서 강조해서 읽어줌 |
| <i> | 중요하지 않지만 기울게 표시(마음속 생각이나 용어) |
| <ins> | 내용을 편집할 때 추가한 내용을 표시 |
| <del> | 내용을 편집할 때 삭제한 내용을 표시 |
| <sup> | 위첨자 |
| <sub> | 아래첨자 |
| <ol> | 순서 있는 목록의 시작과 끝 |
| <ul> | 순서 없는 목록의 시작과 끝 |
| <li> | 순서 있는 목록이나 순서 없는 목록의 각 항목을 나타냄 |
| <dl> | 설명 목록의 시작과 끝 |
| <dt> | 설명 목록의 이름(제목)을 나타냄 |
| <dd> | 설명 목록의 값(설명)을 나타냄 |
| <table> | 표 |
| <caption> | 표의 제목을 넣음 |
| <tr> | 표의 행을 만듦 |
| <td> | 표의 셀을 만듦 |
| <th> | 표의 제목 셀을 만듦 |
| <thead> | 표 구조에서 제목 부분을 나타냄 |
| <tbody> | 표 구조에서 본문 부분을 나타냄 |
| <tfoot> | 표 구조에서 요약이나 정리 부분을 나타냄 |
| <col> | 표에서 열의 스타일을 지정함 |
| <colgroup> | 표에서 여러 열을 함께 묶어서 스타일을 지정 |
| <object> | 멀티미디어, pdf 파일 등 다양한 형식의 파일을 삽입 |
| <embed> | object, audio, video태그가 지원되지 않는 경우 사용 |
| <img> | 이미지 파일 삽입 |
| <audio> | 오디오 파일 삽입 |
| <video> | 비디오 파일 삽입 |
마무리 문제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>test1</title>
</head>
<body>
<h1>수습 국원 모집</h1>
<h2>방송에 관심 있는 새내기 여러분 환영합니다</h2>
<p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부와 전공은 상관없습니다.<br>
방송에 관심있는 여러 학우의 지원 바랍니다</p>
<p><ul>
<li><b>모집기간</b> : 3월 2일 ~ 3월 11일</li>
<li><b>모집분야</b> : 아나운서, pd, 엔지니어</li>
<li><b>지원방법</b> : 양식 작성 후 이메일 접수<br>
<i>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</i></li>
</ul></p>
<h3>혜택</h3>
<ol>
<li type="a">수습기자 활동 중 소정의 활동비 지급</li>
<li type="a">정기자로 진급하면 장학금 지급</li>
</ol>
<img src="images\mic.jpg">
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table, th, td {
border: 1px solid black;
font-weight: bold;
}
</style>
</head>
<body>
<h1>수습 국원 지원 양식</h1>
<table>
<colgroup>
<col>
<col>
<col style="width:150px">
</colgroup>
<tr>
<td rowspan="3">개인정보</td>
<td>이름</td>
<td></td>
</tr>
<tr>
<td>학과/학번</td>
<td></td>
</tr>
<tr>
<td>연락처</td>
<td></td>
</tr>
<tr>
<td>지원분야</td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
반응형
'개인활동 > HTML+CSS+JS' 카테고리의 다른 글
| 입력양식 작성하기(1) (0) | 2022.08.30 |
|---|---|
| 웹문서에서 다양한 내용 입력하기(5) (0) | 2022.08.17 |
| 웹문서에서 다양한 내용 입력하기(4) (0) | 2022.08.17 |
| 웹문서에 다양한 내용 입력하기(3) (0) | 2022.08.17 |
| 웹문서에 다양한 내용 입력하기(2) (0) | 2022.08.11 |