📌 1. HTML 기본 구성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">css 작성구간
</style>
</head>
<body>html 작성구간
</body>
</html>📌 2. 폰트관련 태그 모음
< H >
- < h1 > , < h2 > .... < h6 >까지 있음
- 숫자가 커질수록 작아짐
- 제목에서 주로 사용한다.
< H >
- 긴 가로선 표시
< br >
- 줄바꿈
< p >
- 단락
- 사용하면 내용 앞뒤로 빈 줄 이 생기면서 단락이 생긴다.
<p>first paragraph</p><p>second paragraph</p>
--> first paragraph
--> second paragraph
< i >
- 기울임
< em >, < b > , < strong >
** (tip) 내용 강조 **
< strong > : 내용의 강조를 위해 진하게 표시하는 경우 사용
< b > : 의미 없이 진하게 표시할 때
< em > : 내용의 강조를 위해 기울임 꼴로 표시하는 경우 사용
< i > : 의미 없이 기울임 꼴로 표시하는 경우
< s >, < del >
- 취소선
<p>My favorite <s>color</s> is <del>blue</del> red.</p>--> My favorite color is blue red.
< u >
- 밑줄 텍스트
<strong>02-321-4321</strong>로 <u>변경<u/> 되었습니다.--> 02-321-4321로 변경 되었습니다.
< pre >
- pre 태그 내의 content는 작성된 그대로 브라우저에 표시된다. (공백 개행 문자 모두 포함해서)
📌 3. 리스트 태그 모음
< ul >
- , 순서가 없는 list
- 순서가 없기 때문에 앞에 글자 앞에 ●같은 불릿이 붙는다
< ol >
- , 순서가 있는 list
- type
| 기호 | 구분 |
|---|---|
| 1 | 숫자 |
| a | 영어 소문자 |
| a | 영어 대문자 |
| i | 로마숫자 소문자 |
| I | 로마숫자 대문자 |
- 예시
HTML <!DOCTYPE html> <html> <body> <h2>중첩 목록</h2> <ul> <li>Coffee</li> <li>Tea <ol> <li>Black tea</li> <li>Green tea</li> </ol> </li> <li>Milk</li> </ul> </body> </html>
- 결과
중첩 목록
- Coffee
- Tea
- Black tea
- Green tea
- Milk
📌 4. 테이블 태그 모음
1) 표 내용 정의 태그
| tag | 설명 |
|---|---|
| table | 표를 감싸는 태그 |
| tr | 표 내부의 행 |
| th | 행 내부의 제목셀(굵어짐) |
| td | 행 내부의 일반셀 |
| caption | 표 제목셀 |
2) < colgroup >
--> 열을 그룹으로 만들때 사용한다.
예시
<h1>개인연락처</h1> <table border="1"> <colgroup> <col style="width:100px;"> <col style="width:300px;"> <col style="width:100px;"> <col style="width:300px;"> </colgroup> <tr> <th>이름</th> <td></td> <th>연락처</th> <td></td> </tr> <tr> <th>주소</th> <td colspan="3"></td> </tr> <tr> <th>자기소개</th> <td colspan="3"></td> </table><h1>개인연락처</h1> <table border="1"> <colgroup> <col style="width:100px;"> <col style="width:300px;"> <col style="width:100px;"> <col style="width:300px;">
</colgroup>
<tr>
<th>이름</th>
<td></td>
<th>연락처</th>
<td></td>
</tr>
<tr>
<th>주소</th>
<td colspan="3"></td>
</tr>
<tr>
<th>자기소개</th>
<td colspan="3"></td>
</table>--> 이름 : 100px, 이름 옆 공란 : 300px, 연락처 : 100px, 연락처 옆 공간 : 300px
3) thead / tbody / tfoot
-
< thead > 요소는 테이블의 각 영역(header, body, footer)을 명시하기 위해 < tbody >, < tfoot > 요소와 함께 사용됩니다.
-
< thead > 요소는 < table > 요소의 자식 요소로써, 반드시 모든 < caption >, < colgroup > 요소 다음에 위치해야 합니다.
<table>
<thead>
<tr>
<th>출장비 내역</th>
<th>금액</th>
</tr>
</thead>
<tbody>
<tr>
<td>교통비</td>
<td>45000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>총 합계</td>
<td>103000</td>
</tr>
</tfoot>
</table>| 출장비 내역 | 금액 |
|---|---|
| 교통비 | 45000 |
| 총 합계 | 103000 |
📌 5. 링크 태그 모음
< a > : anchor, 웹 페이지나 외부 사이트 연결
1. href : 이동하고자 하는 파일의 위치(경로)를 값으로 받음
| value | description |
|---|---|
| 절대 URL | 웹사이트 URL (href=”http://www.example.com/default.html”) |
| 상대 URL | 자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”) |
| fragment identifier | 페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”) |
| 메일 | mailto: |
| script | href=”javascript:alert(‘Hello’);” |
2. target : 새 창 or 새 탭에서 링크를 열 때 사용
| 구분 | 설명 |
|---|---|
| _blank | 새로운 탭 or 창 |
| _self | 현재 탭 or 창 |
| _parent | 현재 화면을 불러낸 부모 탭 or 창, 없으면 현재 탭 or 창 |
| _top | 최상위 탭 or 창, 없으면 현재 탭 or 창 |
예시
<p><a href="http://www.daum.net" target="_balank"> daum new window</a></p>
📌 6. 미디어 태그(오디오, 비디오, 이미지)
< img > 이미지 삽입
- 이미지 설정하는 2가지 방법
1) 이미지를 직접 다운로드한 뒤, 파일 경로를 삽입하는 방법
2) 다른 웹페이지의 이미지 주소를 복사해서 삽입하는 방법
예시
<img src="./img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
- img의 속성
| attribute | Description |
|---|---|
| width | 너비 |
| height | 높이 |
| alt | 이미지를 설명해 주는 대체 텍스트 추가 |
< audio > 음악 삽입
예시
<audio src="assets/audio/Kalimba.mp3" controls></audio>
attribute Description src 음악 파일 경로 preload 재생 전에 음악 파일을 모두 불러올 것인지 지정 autoplay 음악 파일을 자동의 재생 개시할 것인지 지정 loop 음악을 반복할 것인지 지정 controls 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관
마포구 주민