출처👠HTML 속성
<태그 속성="값" 속성="값">
🍈 속성은 요소에 대한 추가 정보를 제공
🍈 속성은 항상 시작 태그에 지정
🍈 속성은 일반적으로 name="value"와 같은 이름/값 쌍으로 제공
🍳 html5 ->
css3 : tag에 효과를 적용하는 언어
(색상, 글꼴, 크기, 여백 등등)
< p style="css속성명령어:값;css속성명령어:값;">텍스트< /p>
🍳
: 콜론(colon)
; 세미콜론(semi-colon) - 구분자 기능
🍳 IOS 국가별 코드
😉위키백과 - 국가별 코드
🍗요약
🍈 href속성은 < a> 링크가 이동하는 페이지의 URL을 지정
🍈 src속성은 < img> 표시 할 이미지의 경로 지정
🍈 width 및 heigth속성은 < img>이미지에 대한 크기 정보 제공
🍈 alt속성은 < img>이미지에 대한 대체 텍스트 제공
🍈 style속성은 색상, 폰트, 크기, 등 같은 요소에 스타일을 추가하는데 사용
🍈 lang속성은 < html>웹 페이지의 언어를 선언
🍈 title속성은 요소에 대한 몇가지 추가 정보 정의
👠HTML Paragraphs
🍳 HTML < hr> 요소
HTML 페이지에서 콘텐츠를 분리 또는 변경, 정의하는데 사용
🍳 HTML < pre> 요소
< pre> 요소 내부의 텍스트는 고정 너비 글꼴로 표시되며 공백과 줄바꿈을 모두 유지
👠HTML Styles
🍈 HTML style속성은 색상, 글꼴, 크기 등과 같은 요소에 스타일을 추가하는데 사용
🍈 HTML 요소의 스타일 설정은 style속성으로 수행
🍈 background-color - 배경 색상
🍈 color - 텍스트 색상
🍈 font-family - 텍스트 글꼴
🍈 font-size - 텍스트 크기
🍈 text-align - 텍스트 정렬
👠HTML Fomatting(서식)
🍈 < b> - 굵은 텍스트
🍈 < strong> - 중요한 텍스트
🍈 < i> - 기울임 꼴 텍스트
🍈 < em> - 강조된 텍스트(내부 콘텐츠는 일반적으로 기울임 꼴로 표시됨)
🍈 < mark> - 표시된 텍스트(강조 표시해야하는 텍스트를 정의)
🍈 < small> - 더 작은 텍스트
🍈 < del> - 삭제된 텍스트
🍈 < ins> - 삽입된 텍스트
🍈 < sub> - 아래 첨자 텍스트
🍈 < sup> - 위 첨자 텍스트
👠HTML Quotations(인용 및 인용 요소)
🍳 인용문 용 HTML < blockquote>
-다른 소스에서 인용된 섹션을 정의
🍳 짧은 인용을 위한 HTML < q>
-짧은 따옴표를 정의
-브라우저는 일반적으로 인용문 주위에 인용 부호를 삽입
🍳 약어 용 HTML < abbr>
-"HTML","CSS","Mr.","Dr.","ASAP","ATM"과 같은 약어 또는 두문자어를 정의
요소 위로 마우스를 가져갈 때 약어/ 약어에 대한 설명을 표시하려면 전체 제목 속성을 사용할 것
🍳 연락처 정보 용 HTML < address>
-문서 또는 기사의 작성자/ 소유자에 대한 연락처 정보를 정의
-연락처 정보는 이메일 주소, URL, 실제 주소, 전화번호, 소셜 미디어 핸들 등이 될 수 있음
-일반적으로 기울임 꼴로 렌더링되며 브라우저는 항상 < address>요소 앞뒤에 줄바꿈을 추가
🍳 작품 제목에 대한 HTML < cite>
-창의적인 작품 (예: 책,시,노래,영화,그림,조각 등)의 제목을 정의
-사람의 이름은 저작물의 제목이 아님
-일반적으로 기울임 꼴로 렌더링됨
🍳 양방향 재정의를 위한 HTML < bdo>
-BDO는 Bi-Directional Override를 의미
-현재 텍스트 방향을 재정의하는데 사용
👠HTML Comments(주석)
🍈 < !-- 내용 -->
🍈 설명을 달아줄 때
🍈 시작 태그에는 느낌표(!)가 있지만, 끝 태그에는 없음
👠HTML Links
🍳 Syntax(구문)
HTML < a>태그는 하이퍼 링크를 정의
🍳 The target Attribute(대상 속성)
👉기본적으로 링크된 페이지는 현재 브라우저 창에 표시됨. 이를 변경하려면 링크에 대해 다른 대상을 지정해야함
👉target 속성은 다음 값 중 하나를 사용
- _self - 기본. 클릭한 것과 동일한 창/ 탭에서 문서를 염
- _blank - 새 창 또는 탭에서 문서를 염
- _parent - 상위 프레임에서 문서를 염
- _top - 창 전체에 문서를 염
🍳 Absolute(절대) URLs vs. Relative(상대) URLs
./ (점 하나): 현재폴더
../ (점 둘): 현재폴더의 부모(상위)폴더
🍳 이메일 주소에 연결 - mailto
(참고: Outlook Express 메일 프로그램)
🍳 HTML Link Bookmarks
- 문서 내에서 링크
- id속성 (id="value")
- href속성 (href="#value")
👠HTML Tables
🍈< tr> - 각 테이블 행
🍈< th> - 제목행
🍈< td> - 데이터행
🍳 여러 열에 걸쳐있는 셀
- < colspan> - 셀이 둘 이상의 열에 걸쳐있도록 하려면 사용
- < rowspan> - 셀을 두 개 이상의 행으로 확장하려면 사용
참고&출처
😉과제
이력서테이블 만들기
아직 부족하지만,,ㅎㅎ
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
</style>
</head>
<body>
<table style="width: 50%;">
<tr>
<td rowspan="4" colspan="3">사 진</td>
<th colspan="6">이 력 서</th>
</tr>
<tr>
<td rowspan="2"> 성 명</td>
<td colspan="3" rowspan="2"> </td>
<td colspan="2"> 주민등록번호 </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td> 생년월일</td>
<td colspan="5"> 년 월 일생 (만 세)</td>
</tr>
<tr>
<td colspan="3">주 소</td>
<td colspan="6"> </td>
</tr>
<tr>
<td colspan="3">호 적 관 계</td>
<td colspan="2">호주와의 관계</td>
<td> </td>
<td> 호주성명</td>
<td colspan="2" > </td>
</tr>
<tr>
<td colspan="3"> 년 월 일</td>
<td colspan="5"> 학 력 및 경 력 사 항</td>
<td> 비 고</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
</table>
</body>
</html>