- 첫 번째 웹페이지
<head> => head 부분은 화면에 나오지 않음
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'> => 호환성 관련 부분 (현재는 지워도 상관 X)
<title>첫번째 웹페이지</title> => 탭에 나오는 이름(title)
<meta name='viewport' content='width=device-width, initial-scale=1'> => 반응형 웹 포트 관련 부분(지워도 상관 X)
</head>
<body>
<!-- title 헤더 영역 시작 -->
<h1 title="header">Hello HTML5</h1><!-- 키 = 밸류--> => h(n)은 제목 태그
<!-- title 헤더 영역 종료 -->
<div>
<h2>Hello HTML5</h2>
</div>
<div>
</div>
<h3>Hello HTML5</h3>
<h4>Hello HTML5</h4>
<h5>Hello HTML5</h5>
<div>
<h6>Hello HTML5</h6>
<p>신나는 웹개발</p>
</div>
<img src="1.jpg" width="200"> => 이미지 첨부 파일 이름과 크기 설정
</body>
</html>
- 스타일 기초
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>스타일</title>
<style>
h1 {
color: #FFFFFF; => 앞에서부터 R(Red), G(Green), B(Blue) 순서로 색깔코드로 입력 가능
background-color: #000000;
}
</style>
</head>
<body>
<h1>Hello, HTML5!!</h1>
</body>
</html>
스타일 태그에서 color 설정하는 방법
1. RGB 색깔 코드로 설정
2. RGBA 색깔 코드로 설정(A는 알파로 투명도를 결정함)
3. 지정된 색깔 이름 직접 입력
- 내부 자바스크립트 영역
<!DOCTYPE html>
<html>
<head>
<title>스타일</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"> => 외부 스타일 css 파일로 style을 적용하는 코드
<script>
/* 내부 자바 스크립트 영역 */
alert('Hello, JavaScript');
</script>
</head>
<body>
<h1>Hello, HTML5!!</h1>
</body>
</html>
- 외부 CSS 파일
h1 {
color: azure;
background-color: aqua;
}
- 외부 자바스크립트 영역
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>스타일</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="myscript.js"></script>
</head>
<body>
<h1>Hello, HTML5!!</h1>
</body>
</html>
- 외부 자바 스크립트 파일
alert("Hello, JavaScript from Outfile");
- HTML 기본
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>글자태그 학습</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h1>basic-html-2023</h1>
<hr>
<p> Java 개발자 과정 프론트앤드 리포지토리</p>
<h2>1일차</h2>
<hr>
<ul>
<li>웹 기본</li>
<li> 웹 개발학습
<ul>
<li>HTML 5 기본</li>
</ul>
</li>
</ul>
<h3>제목글자 h3</h3>
<h4>제목글자 h4</h4>
<h5>제목글자 h5</h5>
<h6>제목글자 h6</h6>
<hr>
<a href="https://www.google.com" target="_blank">구글</a> <!-- 절대 경로 --> <!-- target : 새 탭으로 열기 -->
<a href="https://www.naver.com" target="_blank">네이버</a> <!-- 절대 경로 -->
<a href="https://github.com/JANGMEN/Basic-HTML-2023" target="_blank">깃허브</a> <!-- 절대 경로 -->
<a href="C:/Source/Basic-HTML-2023/Day01/fe01_firstweb.html" target="_blank">첫번째 웹</a> <!-- 절대 경로 -->
<a href="./fe01_firstweb.html" target="_blank">첫번째 웹2</a> <!-- 상대 경로 -->
<a href="../test.html" target="_blank">부모폴더의 웹페이지</a> <!-- 상대 경로 -->
<br>
<a href="mailto:personar95@naver.com">강사에게 메일 보내기</a>
</body>
</html>
- 제목 글자 태그의 종류
h1 : 첫 번째로 큰 제목 글자 생성
h2 : 두 번째로 큰 제목 글자 생성
h3 : 세 번째로 큰 제목 글자 생성
h4 :네 번째로 큰 제목 글자 생성
h5 : 다섯 번째로 큰 제목 글자 생성
h6 : 여섯 번째로 큰 제목 글자 생성
- 글자 모양 태그의 종류
- sub : 아래 첨자, sup : 위 첨자, ins : 밑줄 글자, del : 취소선이 그어진 글자
- 본문 글자 태그의 종류
p : 본문 문단 생성
br : 줄 바꿈
hr : 수평 줄 삽입
※ 절대 경로 : 최상위 디렉토리부터 경로 끝까지 모두 기입하는 것
※ 상대 경로 : 현재 디렉토리 기준으로 해당 파일 경로까지 기입하는 것
- 앵커태그
a : 하이퍼링크 생성 ex) <a href = "이동할 웹 페이지">출력 글자</a>
- 내비게이션 메뉴
ul(unordered list) : 순서가 없는 목록 생성
ol(ordered list) : 순서가 있는 목록 생성
li(list Item) : 목록 요소 생성
- 테이블 태그
table : 표 삽입
tr(table row) : 표에 행 삽입
th(table heading) : 표의 제목 셀 생성
td(table data) : 표의 일반 셀 생성
- 테이블 태그의 속성
- table 태그의 border 속성 : 표의 테두리 두께 지정
- td, th 태그의 colspan 속성 : 셀의 너비 지정
- td, th 태그의 rowspan 속성 : 셀의 높이 지정
- 사용법
<th colspan="2">홍차</th> <!-- 가로 합치기 -->
<th rowspan="3">중국</th>
<th rowspan="4">인도</th>
※ 기존 표 추가하기
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>멀티미디어</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<img src="https://picsum.photos/300/200" width="400"> => 이미지 소스 주소와 크기 지정
<img src="nothing" alt="이미지 대신 나오는 텍스트"> => 이미지가 안 나올 때 텍스트 출력하는 방법
<hr>
<!-- <audio controls="controls"> -->
<!-- <source src = "file_example_MP3_700KB.mp3" type="audio/mp3"> -->
<!-- </audio> -->
<audio src="./media/file_example_MP3_700KB.mp3" controls="controls"></audio> => 소스파일 추가하는 2가지 방법
<hr>
<video src="./media/KakaoTalk_20230321_161956594.mp4" controls="controls"></video>
</body>
</html>
'HTML 5 + CSS 3 + JavaScript' 카테고리의 다른 글
| HTML 5 + CSS 3 + JavaScript 2일차 (0) | 2023.03.24 |
|---|
