'HTML5 웹 프로그래밍 입문' 책 기반
VSCode, 확장팩 실습 환경 구축
들여쓰기 자동화 - Prettier
개발용 웹서버 - Live Server
Prettier 세팅
- 따옴표 처리를 뭘로 할지 설정
- D2Coding 폰트 설정 - 한국어까지 지원
https://github.com/naver/d2codingfont?tab=readme-ov-file
웹 페이지 기본 구조와 작성 방법
-
태그와 요소
- 요소: HTML 페이지를 구성하는 각 부품
- 태그: 요소를 만들 때 사용하는 작성 방법
-
마크업 Language
-
내용을 가질 수 있는 요소를 생성할 때
- 시작 태그, 끝 태그 → 메타 정보(컨텐츠를 설명하는 정보)
<h1>Hello HTML</h1>
- 시작 태그, 끝 태그 → 메타 정보(컨텐츠를 설명하는 정보)
-
내용을 가질 수 없는 요소 - 단일 태그
<hr />맨 마지막에 /를 붙이는걸 권장(선택) -
닫는 태그가 반드시 존재해야 함. 생략 불가능 (부모 태그, 자식태그가 아닌 경우)
-
속성: 태그에 추가 정보를 부여
<img src=”image.png”> - src 속성이름 - "~" 속성값 -
“” 따옴표 처리 필수는 아님, 다만 따옴표가 없을 경우 공백을 기준으로 처리하는데 공백이 들어간 것일 경우 공백 앞까지만 인식을 하므로 이런 에러를 막기 위해 따옴표를 쓰는 게 좋음
- 예) this is ~ this만 인식함
-
주석 단축키
- Window
Ctrl + / - Mac
command + /
- Window
-
라이브 서버의 역할 - 수정하면 바로 반영됨
-
버그(bug) - 프로그램이 원하지 않는 방향으로 동작하는 것
-
디버그(debug) - 버그를 잡는(수정하는) 행위
- 크롬을 실행한 후 [F12] (또는 [Ctrl]+[Shift]+[I])를 누르거나 마우스 오른쪽 버튼을 누르고 [검사] 메뉴를 선택
실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
color: white;
background: black;
}
</style>
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTMLPageWithScript</title>
<script>
// 경고 창
alert('Hello JavaScript .. !');
</script>
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>
HTML5 기본 태그
-
내용과 스타일을 분리해서 정의한다
- HTML 태그 - 내용
- CSS - 스타일
-
부모와 자식 관계의 구조
<p>lorem</p>- 의미 없는 문자 나열
<p>loremN</p>-
단어 N개만 나열
- 숫자 9까지 가능
-
앵커 태그
-
하이퍼텍스트
-
a 태그(anchor)
<a href=”https://naver.com”>네이버</a> -
절대 경로 → /로 시작
-
상대 경로 → 워킹 디렉터리 (현재 위치를 기준으로 해석)
- 워킹 디렉토리는 OS가 관리, process마다
-
-
북마크 기능 #
-
#앞에 파일 경로가 올 수 있음, #이 없는 경우에는 같은 파일에서 이동
<a href=”text_anchor.html#gamma”>Gamma 부분</a> <a href=”#”>제목</a> - 나중에 링크를 넣기 위함
-
-
목록 태그
- ul : 순서가 없는 목록 생성 -
- ol : 순서가 있음 1.
- li : 목록 요소 생성
-
테이블 태그
- 해더
<thead> - 바디
<tbody> - 푸터
<tfoot>
→ 생략 가능, 옵션
- 해더
<table border="1">
-> 디폴트 0- 태그의 통합
<th colspan="2">지역별 홍차</th>
<th rowspan="3">중국</th>-
반응형 웹
- table X
-
미디어 태그
- img
- width 하나만 지정 가능 → 가로, 세로 비율 유지
- width, height 둘 다 지정 → 비율 깨짐
- 경로 src 대소문자 구분함
- 태그, 속성명은 대소문자 구분 X, 권장은 소문자
- 값은 대소문자 구분
- 이미지 태그는 줄바꿈 하지 않음
- 줄이 안 바뀌는 태그
<a><img>
- img
-
더미 이미지 제공하는 웹사이트(동영상을 불러오는 동안 다른 이미지 보여 주기)
<video controls="controls" poster="http://via.placeholder.com/1280x720">실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Anchor</title>
</head>
<body>
<a href="https://www.google.com">Google</a>
<a href="https://www.daum.net">Daum</a>
<a href="https://www.naver.com">Naver</a>
<hr />
<a href="#alpha">Alpha 부분</a>
<a href="#beta">Beta 부분</a>
<a href="#gamma">Gamma 부분</a>
<hr />
<h1 id="alpha">Alpha</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi pariatur
fugiat optio, eius facilis necessitatibus delectus placeat! Quibusdam at
ut modi libero vitae, architecto veniam, ipsa excepturi eligendi inventore
voluptate.
</p>
<h1 id="beta">Beta</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut quidem
nesciunt rerum dolorem illo praesentium recusandae. Necessitatibus enim
vitae iste quasi. Enim, iure! Laborum omnis quibusdam deleniti ducimus
similique pariatur!
</p>
<h1 id="gamma">Gamma</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, nostrum
odio. Natus quidem consequatur commodi rerum quisquam corrupti omnis.
Totam laudantium amet, iusto nam sit voluptatum at dolor sunt fugiat.
</p>
<a href="#">맨위로</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>List Nested</title>
</head>
<body>
<ul>
<li><b>과일</b></li>
<ol>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ol>
<li><b>채소</b></li>
<ol>
<li>상추</li>
<li>치커리</li>
<li>양배추</li>
</ol>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Table Span</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">지역별 홍차</th>
</tr>
<tr>
<th rowspan="3">중국</th>
<td>정산소종</td>
</tr>
<tr>
<td>기문</td>
</tr>
<tr>
<td>운남</td>
</tr>
<tr>
<th rowspan="4">인도 및 스리랑카</th>
<td>아삼</td>
</tr>
<tr>
<td>실론</td>
</tr>
<tr>
<td>다질링</td>
</tr>
<tr>
<td>닐기리</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Basic</title>
</head>
<body>
<img src="Penguins.jpg" alt="펭귄" width="300" />
<img src="Nothing" alt="그림이 존재하지 않습니다." width="300" />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Audio Source</title>
</head>
<body>
<audio controls="controls">
<source src="Kalimba.mp3" type="audio/mp3" />
<source src="Kalimba.ogg" type="audio/ogg" />
</audio>
</body>
</html>
- 웹 브라우저마다 지원하는 미디어 포맷이 다름
- audio, video 태그 내부에 포맷별 source 태그를 입력해 해결
사용자를 고려한 디자인과 UX에 관심있는 개발자