웹
웹 = 웹 서버 + 웹 클라이언트
웹 페이지 구성 요소
- 웹 페이지 구조와 내용 → HTML 태그
- 웹 페이지 모양 → CSS
- 웹 페이지 행동 및 응용 프로그램 → JavaScript
HTML
HTML 기본 용어
태그
요소를 만들 때 사용하는 기호
요소
시작 태그와 종료 태그로 이루어진 모든 명령어
속성
태그에 추가 정보를 부여할 때 사용
속성 이름 = ‘속성 값’
주석
<!-- 주석 내용 -->HTML5 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>HTML 글자 태그
제목 글자 태그
| 제목 글자 태그 | |
|---|---|
h1 | 첫 번째로 큰 제목 |
h2 | 두 번째로 큰 제목 |
h3 | 세 번째로 큰 제목 |
h4 | 네 번째로 큰 제목 |
h5 | 다섯 번째로 큰 제목 |
h6 | 여섯 번째로 큰 제목 |
본문 태그
| 본문 태그 | |
|---|---|
p | 문단 작성시 사용 |
br | 줄 바꾸기 |
hr | 수평선 삽입 |
pre | 포맷 그대로 출력 |
글자 모양 태그
| 글자 모양 태그 | |
|---|---|
b | 굵은 글자 |
i | 기울어진 글자 |
small | 작은 글자 |
sub | 아래 첨자 |
sup | 위 첨자 |
ins | 밑줄 글자 |
del | 취소선 |
mark | 하이라이트 |
<i>
<!-- 주의: 글자 모양 태그 내부에 제목 글자 태그와 본문 글자 태그는 넣을 수 없음 -->
<!-- <i>는 기울어진 글자 태그 -->
<h1>웹 표준 위반</h1>
<p>웹 표준 위반</p>
</i>HTML 이미지, 링크 태그
이미지 태그
img태그
img 태그 속성
| img 태그 속성 | |
|---|---|
| src | 이미지 경로 |
| alt | 이미지가 없을 때 나오는 글자 |
| width | 이미지 너비 |
| height | 이미지 높이 |
링크 태그
- 하이퍼링크(Hyperlink), 혹은
link태그 a태그
링크 태그 속성
| 링크 태그 속성 | |
|---|---|
| href | 이동할 웹 페이지 |
| title | 마우스 오버 시 표시할 텍스트 |
[실습] 기본 링크
- link.html 파일 생성
p태그 3 개 추가-
각 문단에는 원하는 웹 사이트로 이동하는 링크 추가
-
title 속성도 추가
<!-- link.html --> <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <p> <a href="https://google.com" title="구글"> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="250" height="100"" alt=""> </a> </p> <p> <a href="https://naver.com" title="네이버"> <img src="../images/naver_icon.png" width="100" height="100" alt="" /> </a> </p> <p> <a href="https://bugs.co.kr" title="벅스"> <img src="../images/cd.png" width="100" height="100" alt="" /> </a> </p> </body> </html>
-
웹 페이지 내부에서 이동하기
id 속성
- 유일해야 함
- 페이지 내부의 특정 태그로 이동할 때 사용
- 사용 방법
-
원하는 태그에 id 속성을 지정
<p id="chap1">1장 서론</p> -
a href=”#id속성”지정<p id="chap1">1장 서론</p> . . <a href="#chap1">서론으로 가기</a>
-
target 속성
- 링크를 새 탭에서 열어주는 속성
<a href="https://naver.com" target="_blank">여기를 클릭</a>공간 분할 태그
블록 형식 태그
divp- 목록 태그 (
ul,ol,li) h1~h6태그table- 입력 양식 태그
인라인 형식 태그
spanainput- 글자 형식 태그
시맨틱 태그
headernavasidesectionarticlefooter
!시맨틱 태그로 작성한 문서 모양은 구조와는 별개
미디어 첨부
이미지, 오디오, 비디오, PDF 등 첨부
objectembed
오디오 첨부
audio
| audio 태그 속성 | |
|---|---|
| controls | 재생바 표시 |
| autoplay | 자동 재생 |
| muted | 음소거 |
비디오 첨부
video
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅
