: 웹 문서를 만드는 기본언어
: 웹 브라우저에 내용을 보여는 텍스트, 이미지, 영상등의 위치를 표시
<!DOCTYPE html> // 웹문서의 유형 지정하는 선언문 : html5로 작성한 웹문서라는 표시
<html lang="ko"> // 웹문서의 시작 , 언어지정
<head> // 브라우저가 해석하는데 필요한 정보를 입력.
<meta charset="UTF-8"> // meta : 웹사이트의 키워드나 간단한설명등의 정보를 지정.
==>화면에 표시할 글자의 인코딩지정.
<title>HTML 기본 문서</title> // title : 웹문서의 제목 입력 ==> 제목 표시문에 표시됨.
</head>0
<body> // 실제로 웹 브라우저 화면에 나타나는 내용 입력.
<h1>프런트엔드 웹 개발</h1> // 제목 입력 태그로 h6까지 있음.
<hr> // 가로선
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
</html> // 웹문서의 끝
: 의미를 담고있는 태그란 뜻으로, 이름만 봐도 어떤 역할을 하는지 알수 있음.
→ 필요성
: 웹 브라우저가 사이트의구조를 제대로이해할수 있음.
: 문서구조가 정확히나눠져 다양한 화면에서 웹 문서를 쉽게 표현 할수 있음.
: 인터넷에서 검색할 때 필요한 내용을 정확하게 찾을 수있음.
<header>
: 말머리 부분을 의미하며, 사이트 전체나 특정 영역의 헤더가 존재
: 주로 사이트의 맨 위쪽이나 왼쪽에있으며, 검색창이나 사이트 메뉴를 삽입.
<nav>
: 같은 웹문서 안에서 다른위치로 연결하거나 다른 웹 문서로연결하는 링크를 만듦.
: 위치에 영향을 받지 않아 모든곳에 포함이 될수 있고, 독립적으로도 사용 할수 있음.
: 여러개 사용할 경우 각각의 id 속성을 지정하면 다른 스타일을 적용할 수 있음.
<main>
: 웹문서의 핵심이 되는 내용 삽입.
: 메뉴, 사이드바,로고처럼 페이지마다 들어가는 내용이 아닌 웹문서마다 다르게 보여줄 내용으로 구성
: 웹 문서마다 한번씩만 사용 가능.
<ariticle>
: 웹에서 실제로 보여주고싶은 내용(독립적인 컨텐츠 항목) 삽입.
: 한 문서 안에 여러개 사용 가능.
<section>
: 컨텐츠의 영역을 나타내며, 서로 다른 여러개의 컨텐츠를 묶는 용도로 사용.
<aside>
: 본문의 왼쪽이나 오른쪽, 아래쪽에 생성되는 사이드 바 영역.
: 선택적으로 필요한 경우에만 사용.
<footer>
: 웹 문서 맨 아래 쪽 영역
: 사이트 제작 정보나 저작권 같은 내용 삽입.
: 다른 시맨틱 태그를 모두 사용할수 있음.(
<div>
: 문서 구조를 만들거나 스타일을 적용할 때 사용. ==> 영역을 구별하거나 스타일로 문서를 꾸밈
: 단순히 스타일 적용하기위해 컨텐츠를 묶을 때는
9.<link>
: <link rel="외부소스" type= " 파일 형식" href= "외부 소스경로">
: 현재 문서와 외부 소스의 관계를 정의 할 때 사용.
: <head>
태그 내부에만 위치 할 수 있으며 개수는 제한이 없음.
: 빈 태그로 속성만을 포함.
: 주로 스타일시트 (Style Sheet)를 연결할 때 사용.
: 상대적 경로와 절대적 경로가 있음.
1) 상대적 경로 : 현재 문서 기준으로 외부 소스의 경로를 작성하는방법 (./ 현재위치의 폴더, ../ 상위 폴더, / 최상위폴더)
2) 절대적 경로 : 내 컴퓨터에 지정되어 있는 소스의 주소를 이용하는 방법. ( http:// , c:/users/file/......)
< hn>제목</hn>
: 웹문서의 제목 입력
: n 에는 1~6의 숫자를 넣어 텍스트를 크기 별로 표시. ==> h1이 제일 큰 제목이며 점점 작아짐.
: </h>
로 제목 마지막에 반드시 닫아줘야함.
: 다른 텍스트보다 크고 진하게 보임.
<p>내용</p>
: 텍스트의 단락을 입력할 때 사용.
: 텍스트의 앞뒤로 빈주이 생기면서 단락을 표시해줌.
ex)
<p>안녕하세요.</p>
<p>만나서 반갑습니다.</p>
<p>제 이름은 //<p></p> 안에서 줄을 바꿔도 출력은 연결되어서 나옴.
천소진 입니다.</p>
실행 결과
안녕하세요.
만나서 반갑습니다.
제 이름은 천소진 입니다.
- br : 줄바꿈 할때 사용 : 단독으로 사용하므로 닫는태그가 필요 없음.ex)
<p>안녕하세요.</p>
<p>만나서 반갑습니다.</p>
<p>제 이름은 <br>천소진 입니다.</p>
실행 결과
안녕하세요.
만나서 반갑습니다.
제 이름은
천소진 입니다.
<pre>내용</pre>
ex)
<pre>안녕하세요
만나서 반갑습니다.
저는 천소진 입니다.</pre>
실행 결과
안녕하세요 만나서 반갑습니다. 저는 천소진 입니다.
<blockquote>인용문</blockquote>
: 인용문을 삽입할 때 사용.
: 다른 텍스트보다 약간 들여쓰여짐.
<strong>굵게 강조할 텍스트</strong>
, <b>굵게 표시할 텍스트</b>
: 경고나 주의사항처럼 중요한 내용을 강조할 때는 <strong>
: 단순히 글자만 굵게 표시 할 때는 <b>
<em>이탈릭체로 강조할 텍스트</em>
,<i>이탈릭체로 표시할 텍스트</i>
==> 기울인 텍스트
: <em>
은 문장에서 특정부분을 강조하고 싶을때 사용.
: <i>
는 단순히 다른 텍스트와 구별할 때 사용되며, 마음속의 생각이나 , 용어, 관용구등에 적용함.
<ol><li>항목</li></ol>
==> 여러개의 순서있는 목록을 연결하여 붙여야 할 때는 start로 원하는 번호를 입력.
<ul><li>항목</li><ul>
ex)
<body>
<h1>ol tag</h1>
<ol type="1"> //순서있는 ol 태그
<li><a href="https://ko-kr.facebook.com/" >Facebook</a></li>
<li><a href="https://twitter.com/?lang=ko">Tweeter</a></li>
<li><a href="https://kr.linkedin.com/">Linked in</a></li>
</ol>
<br>
<h1>ul tag</h1>
<ul> //순서없는 ul 태그
<li><a href="https://ko-kr.facebook.com/" >Facebook</a></li>
<li><a href="https://twitter.com/?lang=ko">Tweeter</a></li>
<li><a href="https://kr.linkedin.com/">Linked in</a></li>
</ul>
</body>
실행 결과
ex)ol+ul = ul안의 ol
<body>
<ul>
<li>HTML5</li>
<ol type="1">
<li>Mulitmedia Tag</li>
<li>Cinnnectivity</li>
<li>Device Access</li>
</ol>
<li>CSS3</li>
<ul>
<li>Animation</li>
<li>3D Transform</li>
</ul>
</ul>
</body>
실행 결과
<dl><dt>이름(단어)</dt><dd>값(설명)</dd></dl>
<dl></dl>
사이에 한쌍의 <dt>와 <dd>
가 있어야 함.<dt>
하나에 여러개의 <dd>
사용 가능.ex) 상품소개 페이지에서 중량별로 상품개수를 보여줄때
<table><caption>표 제목</caption></table>
<tr></tr>
: 행 표시(블럭 하나가 하나의 행), <td></td>
: 열 표시 (블럭 순서대로 열에 적용)
<th></th>
: 제목 셀 생성 ==> 표의 속성이름을 나타내는 행을 만들때는 <td>
대신 사용.
==>글씨가 진하게 표시되고, 가운데 정렬됨.
<thead></thead>
: 표 제목, <tbody></tbody>
:표 내용, <tfoot></tfoot>
: 표 요약
: 표의 구조를 지정
: CSS를 사용해 각각 다른 스타일 적용 가능.
: 표가 길어 화면이 넘어갈 경우 <thead>
와 <tfoot>
는 고정하여 여러장 인쇄시에 자동으로 인쇄가능.
rowspan : 행 합치기 , clospan : 열 합치기
: 셀을 합치는 속성으로 <td>
나 <th>
태그에서 사용.
==> 기본구조
<td rowspan = "합칠 셀의 개수">셀의 내용</td>
<td clospan = "합칠 셀의 개수">셀의 내용</td>
<col>
: 열 1개를 지정 <colgroup></colgroup>
: <col>
태그를 두개이상 묶음.
: <caption>
바로 다음에 사용 ==> 표 내용이 시작되기전에 열의 상태를 지정.
: 한 행이지만 열마다 속성을 다르게 할때는 속성이 없는 열에도 <col>
로 단순명시 해줘야함.
ex)
<table>
<caption>표 제목</caption>
<colgroup>
<col style="background-color:#eee;"> //첫번째 열에 배경색 지정
<col> //속성이 없는 열도 명시
<col style="width:150px">
<col style="width:150px"> // 세번째와 네번째 열의 너비 지정.
</colgroup>
<col span="2" style="width:150px"> ==> 두개의 열이 같은 속성을 가지므로 묶어서 표현 가능.
<img src ="이미지 파일 경로" alt= "대체용 텍스트">
: src
는 이미지가 있는 파일의 경로를 나타내므로반드시 적어줘야함. ( 폴더이름/ 파일이름.파일형식 )
==> 웹 문서 파일과 이미지 파일이 같은 경로에 있다면 이미지 파일의 이름만 작성.
: alt
는 화면낭독기등에서 이미지를 대신해서 읽어줄 텍스트를 삽입.
==> 인터넷이 불안정하거나 파일 경로를 잘못 넣어 이미지를 제대로 표시 할 수 없을 때 대신 나타남.
==> 텍스트를 부연설명한는 텍스트가 아닌 이미지가 나타내는 말 자체를 텍스트로 표현해야함.
!!!! 웹에서 사용하는 대표적인 이미지 파일형식
→ gif : 파일 크기가 작아서 아이콘이나 불릿등 작은 이미지에 사용.
→ jpg/jpeg : gif 보다 색상과 명암을 다양하게 표현 가능. 수정을 반복하면 화질이 떨어짐.
→ png : 네트워크용으로 개발된 파일로 색상 표현이 다양하고 투명 배경도 가능. 웹에서 가장 많이 사용.
width 와 height
: 이미지의 크기를 조절 하는 속성.
: 둘중 하나만 지정해도 나머지는 비율을 자동으로 계산하여 나타냄.
==> %, px 단위 사용가능하며, px 는 숫자만 입력하면됨.
ex)
<img src="images/salad.jpg" alt="레드향"> // 원래 크기
<img src="images/salad.jpg" alt="레드향" width="50%"> // width = 50%, height = 50%로 지정한 이미지
<img src="images/salad.jpg" alt="레드향" width="150"> // width = 150px으로 지정한 이미지
<img src="images/salad.jpg" alt="레드향" width="100%"> // 이미지를 브라우저에 딱맞게 설정할 때
<object width="너비" height="높이" data= "파일"></object>
: 오디오, 비디오, 자바애플릿, PDF 등 다양한 파일 삽입 가능
<embed src ="파일 경로" width ="너비" height="높이">
: html 초기버전부터 사용 가능하며 닫는 태그가 없음.
: 다른 태그들을 지원하지 않는 웹 브라우저에서도 사용가능.
<audio src="오디오 파일 경로"></audio>
, <video src="비디오 파일 경로"></video>
: 사용자가 음악이나 비디오를 재생 또는 멈출수 있도록 컨드롤 바를 넣어줄수 있다.
==> <audio src="오디오 파일 경로" controls></audio>
!!!!!! <audio>
와 <video>
의 여러가지 속성
→ controls : 컨트롤바 표시
→ autoplay : 자동실행
→ loop : 반복재생
→ muted : 소리제거
→ preload : 파일 로딩 방식 지정 ,기본값 auto
→ width, height : 플레이어의 너비와 높이 지정
→ poster = "파일 이름" : 비디오가 재생되기 전까지 표시될 포스터 이미지 지정. (thumbnail)
==> 오디오 파일을 배경음악으로 쓰려면 autoplay
와 loop
를 지정하고 controls
를 빼면 됨.
==> 대부분의 웹브라우저에서 오디오나 소리가 있는 비디오의 자동재생은 금지.
<a href="링크 주소"> 텍스트</a>
ex)
<body>
<a href="#alpha">Move to Alpha</a><br>
<a href="#beta">Move to Beta</a><br>
<a href="#gamma">Move to Gamma</a><br>
<hr>
<h1 id="alpha">Alpha</h1>
<p>In ipsum ad voluptate culpa deserunt consectetur veniam aute qui. </p>
<h1 id="beta">Beta</h1>
<p>Id quis aliqua officia labore incididunt commodo aliquip velit laboris. </p>
<h1 id="gamma">Gamma</h1>
<p>Id irure est tempor tempor. </p>
</body>
</html>
이미지 링크 <a href="링크 주소"><img src="파일 경로" alt="대체용 텍스트"</a>
target="_blank"
: 링크를 클릭했을때 새탭에서 연결된 문서가 열리도록 설정해주는 속성.
==><a href="링크 주소" target="_blank"> 텍스트</a>