HTML - 구조잡기, 의미
CSS - 예쁘게 꾸미기, layout 잡기, 표현하기
Javascript - 동작
※ HTML5
- 문서유형
<!DOCTYPE html> // 문서유형지정 => 이제부터 document type html 이야 !
<html lang="ko"> //언어지정=korean
<head> // 문서 정보를 지정
<meta charset="EUC-KR">
<title>제목</title>
</head>
<body> // 실제 화면에 보이는 문서 내용을 입력
</body>
</html>
▶ 기본 태그
<!DOCTYPE html>
- 웹브라우저 : "HTMl5에 맞춰 문서를 해 석하면 되겠구나"
<html lang="ko">
- 언어지정 : 한글
- 언어 표기를 하지 않으면 검색사이트에서 언어를 제한해서 검색할 때 검색 되지 않을 것임
<head>
- 웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들은 모두 부분에 입력함
<title> - 문서제목
<meta> - 문자 인코딩 및 문서 키워드, 요약 정보
<!--주석-->
- ctrl + shift + /
▶ 글자 태그
[1] 제목
- HTML5의 대표적인 글자 태그는 제목을 입력할 때 사용하는 제목 글자 태그 h
h1, h2, h3, h4, h5, h6
[2] 본문
<p> - (Paragraph) 단락만들기 : 태그로 표시하는 텍스트 앞뒤에서 줄바꿈이 일어남
<br> - 개행 태그 : 줄바꿈태그
<hr> - 수평 줄 태그
<p>p태그입니다.<br>br태그는 줄바꿈 태그<br><br>두줄 줄바꿈</p>↓
p태그입니다.
br태그는 줄바꿈 태그
▶ a태그 (글자태그)
<a> - (Anchor) 원하는 문서나 사이트로 연결하기
- href 속성 : 이동하고자 하는 웹 페이지를 지정
▷ target : 링크로 연결할 문서가 실행되는 브라우저 창의 위치를 지정.
- target"_self" : 링크가걸린 현재 브라우저 / 프레임
- target"_blank" : 새 브라우저에
- target"_parent" : 링크가있는 문서를 호출한 부모 브라우저 / 프레임
<a href="http://www.nate.com" target="_blank">nate로 이동</a><br>=> 새창으로 nate 들어가기
<a href="../../jquery/day1/dd.html">dd.html로 이동</a><br>
.. /.. => 폴더 2개 뒤로간 후 내가 원하는 파일이 있는 위치찾기
▷ 빈링크 : 이동하지않는 a태그
a 태그 본래 가지고 있는 하이퍼링크 기능을 제거하고 사용하는 경우
하이퍼링크기능을 제거하더라도 a 태그에 href 속 성을 반드시 입력해야 함 (웹표준)
<a href = "#">메뉴1</a> // 눌러도 이동 X
▷ 페이지 내부이동 : 현재 페이지 내부에서 원하는 장소로 이동할 수 있다
원하는 장소에 id 속성을 부여해야 함
<a href = "#alpha">Alpha로 이동</a> // 얘를 누르면
<h1 id="alpha">Alpha</h1> // 여기로 이동한다= > a 태그를 클릭하면 지정한 id 속성이 있는 위치로 스크롤바가 자동으로 이동함
▷ 이미지에 링크걸기
<a href = "test1.html"><img src = "../image/kor.png"></a><br>
<a href = "aTag.html" title = "링크의 툴팁 표시">aTag.html로</a>
▶ 텍스트 태그
- 띄어쓰기
<pre>~<pre> - ((Preformatted text) 입력하는 그대로 화면에 표시하기, 색상,모양 변경불가
[block 형식] - 차곡차곡 쌓아 올려지는 형식 글자가 웹 페이지의 너비만큼 차지하면서 쌓아 올려짐
- 선택한 텍스트 글자에만 적용되는 것이 아니라, 텍스트가 포함된 블록 전체에 적용되는 태그
: <p>,<clockquote>,<pre>,<div>,<h>,<목록>,<테이블>
[inline 형식] - 한 줄 안에 차례차례 위치하는 형식 글자가 한 줄에 차례차례 들어감
- 태그를 적용해도 줄바꿈 없이 태그를 사용한 영역에 만 적용됨
: <mark> 형광펜효과
<strong> bold 체, 강조
<em> 기울기, 강조
<span> 태그 자체로는 아무 의미가 없지만, 단락 안에서 줄바꿈 없이
일부 텍스트만 묶어서 스타일을 적용하려고 할 때 주로 사용함
<b> bold 체
<i> 기울기
외 <q>,<span>,<a> 등
▶ 특수문자
▶ 목록 태그
- 목록화해서 정리 가능
- CSS를 적용해 메뉴나 본문 내용 등 에서 다양하게 활용가능
▷ 기본목록
<ul> - 순서가 없는 목록 태그 (UnOrdered List)
<ol> - (Ordered List)
- 순서가 있는 목록을 나타낼 경우 start 속성을 이용해 목록의 시작점을 정할 수 있다
<li> 중첩해서 목록을 만들고 싶을 때는 li 태그 안에 목록 태그 중첩해서 사용
<ul>
<li>HTML5
<ol>
<li>Multimedia Tag</li>
<li>Connectivity</li>
<li>Device Access</li>
</ol>
</li>
<li>CSS3
<ul>
<li>Animation</li>
<li>3D Transform</li>
</ul>
</li>
</ul>
▷ 정의목록
- 제목과 그에 대한 설명으로 이루어진 정의 목록을 만듬
- 단어를 써놓고 그 정의를 풀이한 목록을 정의 목록이라고 함
<dl> (Definition List) 정의 목록 태그
<dt> (Definition Term) `` 제목
<dd> (Definition Description) ``설명
<h3>¤ 동백방</h3>
<dl>
<dt>대상</dt>
<dd>여자 도미토리</dd>
<dd>동성(또는 가족)1팀</dd>
<dt>크기</dt>
<dd>4인실</dd>
<dt>가격</dt>
<dd>1인 20,000원</dd>
</dl>
▶ 테이블태그 - HTML 페이지에서 표를 만들 때 사용하는 태그
<tr> 표 내부의 행 태그 (table row)
<th> 행 내부의 제목 셀 태그 (table header)
<td> 행 내부의 일반 셀 태그 (table data)
<table border="1"> // 속성 : HTML5의 table 태그는 border 속성 하나만 가지고 있다
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
</table>
- 실행 후 F12 눌러서 요소검사하면 tbody 태그가 자동으로 생성되어있음
▷ th 태그와 td 태그의 속성
rowspan : 칸을 행으로 합치기
clospan : 칸을 열로 합치기
<table border="1" >
<tr> //첫번째행row
<th colspan="3">Table Data</th> //열 3개로 합치기
<th rowspan="3">Table Data</th> //행 3개로 합치기
</tr>
<tr> //두번째행row
<td>Table Data</td>
<td rowspan="2">Table Data</td> //두번째 열의 행2개를 합치기
<td>Table Data</td>
</tr>
<tr>//세번째행row
<td>Table Data</td>
<td>Table Data</td>
</tr>
</table>
▷ 테이블 태그2
<caption> - 표에 제목 붙이기 : 표 위쪽가운데 위치, 1테이블 1캡션
<col> - 한 열에 있는 셀 모두 묶기 : 묶어서 같은 스타일 적용 (</col> 은 없음)
<colgroup> - <col>을 묶어서 그룹으로 스타일적용
=> <col>,<colgroup>태그는 <tr><td>태그 전에, <caption>태그 다음에 사용해야 함
▷ 테이블 태그3 - 표 구분태그
<thead> - 제목이 있는 부분
<tbody> - 본문
<tfoot> - 요약부분
= > <tbody>태그 이전에 , <tbody><tfoot>태그가 먼저 와야 함
▶ 이미지 태그
▷ img 태그의 속성
· src : 이미지의 경로 지정
· alt : 이미지가 없을 때 나오는 글자 지정
- 시각 장애인을 위한 화면 리더기가 이미지에 대해 읽어 줄 대체 텍스트
· width : 이미지의 너비 지정(스타일시트를 이용하는 것이 일반적)
· height : 이미지의 높이 지정(스타일시트를 이용하는 것이 일반적)
· title : tooltip 표시하기
<body>
<img src="images/Penguins.jpg" alt="펭귄" width="300" />
<br><br>
<img src="Nothing" alt="그림이 존재하지 않습니다."
width="300" />
</body>
▶ 오디오 태그
- 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그
▷ audio 태그의 속성
· src : 음악 파일의 경로 지정
· preload : 음악을 재생하기 전에 오디오 파일을 모두 다운로드할 것인지
또는 일부 정보만 다운로드할 것인지 여부를 지정
· autoplay : 음악을 자동 재생할지 지정
· loop : 음악을 자동 재생할지 지정
· controls : 음악 재생 도구를 출력할지 지정
<body>
<audio src="Kalimba.mp3" controls autoplay></audio>
</body>
▶ 비디오태그 > HTML_1강_태그_66,67P
▶ form(입력양식)태그
- 클라이언트측에서 서버로 값을 전송할 때 사용하는 태그
- 클라이언트에서 입력한 정보를 서버의 특정 URL로 전달
입력 양식 - 사용자에게 입력 받는 공간을 의미
입력 양식 태그 - 입력 양식을 만들 때 사용하는 태그
▷ form 태그의 속성
· action : 입력 데이터의 전달 위치를 지정함
- 사용자가 입력한 값들은 action에 지정한 서버 페이지(jsp)로 전송됨
· method : 입력 데이터의 전달 방식을 선택함
>> method 속성의 GET - 주소에 데이터를 입력해서 보내는 방식
<body>
<form method="get">
<input type="text" name="search" />
<input type="submit" />
</form>
</body>file:///d:/src/test.html
>> method 속성의 POST - 주소가 변경되지 않음
- GET방식과 달리 비밀스럽게 데이터를 전달하는 방식
- http://localhost:포트번호/폴더이름/파일이름?search=abcd 형태로 url 이 변경됨
<body>
<form method="post">
<input type="text" name="search" />
<input type="submit" />
</form>
</body>file:///d:/src/test.html?search=abcd
▷ form 태그
<select> - 여러 개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소
<textarea> - 여러 줄의 글자를 입력할 때 사용하는 태그
<label> - input 태그를 설명하는 데 사용됨
<input> - 사용자에게 정보를 입력 받는 기능을 수행하는 태그
· type 속성 : text, password, file, submit
<input> 태그의 속성 : type, action, name 외 : HTML_1강_태그_75~85P
<body>
<form>
<input type="text" name="name" /><br />
<input type="password" name="password" /><br />
<input type="file" name="file" /><br />
<input type="submit" />
</form>
</body>
▶ 공간분할태그
▷ div
- block 형식으로 공간을 분할함
ㄴ - 차곡차곡 쌓아 올려지는 형식
▷ span
- inline 형식으로 공간을 분할함
ㄴ 한 줄 안에 차례차례 위치하는 형식
= 의미는없고 공간을 분할하는 역할을 함
▷ 시멘틱구조태그
기존에는 div로 썼었는데
div 로 구조를 나누면 어디가 뭐인지 구분이 안되어서 HTML5부터는 시멘틱구조태그가 생겼다
= 태그이름만 보면 구조를 알 수 있도록
<header> : 제목
<aside> : 사이드바
- 있을수도있고 없을수도 있음
<nav> : 메뉴
<section> : 본문
- section 아래 컨텐츠를 꼭 감싸야함 ex ) article
- 실제 콘텐츠 내용은 <section>태그 안에서 <article>태그를 이용해서 표시
<footer> : 맨 밑에 꼬리말
<address>
- 우편물주소는 footer 에 넣음
'HTML' 카테고리의 다른 글
| [Thymeleaf] 프로젝트에 사용한 타임리프 문법 정리 (0) | 2022.08.19 |
|---|---|
| [HTML] CSS 스타일속성 2 (0) | 2022.04.20 |
| [HTML] CSS 스타일속성 1 (0) | 2022.04.20 |
| [HTML] CSS, 선택자 (0) | 2022.04.19 |