HTML: 웹브라우저 내의 문서를 표현할 수 있는 언어
1.HTML 구조
<html>
<head>
<title>웹브라우저 탭에 보여지는 제목</title>
</head>
<body>
웹브라우저 내부에 보여지는 내용
</body>
</html>
1-3. 표형태로 표현할 경우:<body>이 곳에다가 적는다.</body>
1-3-1.표
<table>
</table>
1-3-2.표내부에 한 줄 : <table>이곳에다가 적는다.</table>
<tr>
</tr>
1-3-3 한 줄의 한칸 : <tr>이곳 사이에 적는다.</tr>
제목표현
<th>제목</th>
데이터표현
<td>데이터</td>
<a></a> : 링크라고 알려주는 태그
리스트태그
1. ul:그룹핑
<ul>
2. li: 리스트 표현
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ul>
<ol>
3. ol :순서가 있는 그룹핑(숫자 1,2,3..)
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ol>구조 태그
1.최상위 태그
<html></html>
2.문서 자체를 꾸며주는 태그들(head 태그 안에 들어오는 것)
<title>탭의 제목을 보여준다.</title>
<mata charset = "UTF-8"></mata>
3.본문태그(body 태그 안에 들어오는 것)
h1 : 제목
<h1>큰제목</h1>
<h2>중간제목</h2>
4.
<Doctype>웹브라우저에게 이것은 어떠한 표준을 따르는 코드들을 알리는 태그</Doctype>
1.p태그
<p>단락을 나누는 태그 자동 한줄 띄어쓰기가 됨 </p>
2.<br>
강제로 줄바꿈
한 줄 띄어쓰려면 태그를 2번 써줘야한다.
3.img 이미지 태그
<img src = " " width = " " height = " " alt= "이미지가 깨졌을 경우 보여줄 텍스트 " title="마우스를 가져다 놨을 때 보이는 글자">
4.표
<td>테이블 테이터</td>
<tr>행 td를 묶어주는 것 </tr>
<table border="테두리">테이블을 만들어주는 태그</table>
<thead>테이블의 헤드</thead>
<th>제목</th>
<tbody>데이블 중간</tbody>
<tfoot>테이블 마지막</tfoot>
<td rowspan="세로행병합"></td>
<td colspan="가로열병합"></td>
5.form
<form>입력한 정보를 서버로 전송할 때 사용하는 것 </form>
<form action="입력된 값을 이 주소로 전송한다."></form>
6.입력박스(form태그로 감싸줌)
<p><input type="text" name="입력값에 이름을 붙여주는 것 " value="입력칸에 나오는 이름"></p>
<input type="password">
전송하는 버튼
<input type="submit">
7.여러줄을 입력받는 것(form태그로 감싸줌)
<textarea cols="글자 수" rows="줄 수"></textarea>
8.선택(form태그로 감싸줌)
<form>
<select>
<option value="선택할 것의 이름명">선택을 할 수 있는 것들 </option>
</select>
<input type="submit">
</form>
-다중선택(form태그로 감싸줌)
<form>
<select name="전송 이름 명" multiple>
<option value="선택할 것의 이름명">선택을 할 수 있는 것들 </option>
</select>
<input type="submit">
</form>
9. 라디오버튼(하나의 버튼만 누를 수 있는 버튼)(form태그로 감싸줌)
<input type="radio" name="라디오 버튼에서 name이 같으면 같은 것 중에 하나지만 고를 수 있다." value="값이름" checked>
checked는 체크를 끝낸 것
10.체크박스(다중 선택 버튼)(form태그로 감싸줌)
<input type="checkbox" name= "" value="값이름">
11. 자바스크립트에서 사용한다(form태그로 감싸줌)
<input type="button" value="버튼" onclick="">
12.초기화(form태그로 감싸줌)
<input type="reset">
13.hidden (form태그로 감싸줌)
웹페이지 주소에 값을 보여주지 않고 싶을 때 사용(아이디와 패스워드 등 )
<input type="hidden" name="hide" value="egoing">
14.label(form태그로 감싸줌)
<p>
id를 지정하면 label은 for다음의 이름의 id의 이름표가 되어 클릭하면 그 이름의 입력창으로가게된다.
<label for="id_txt">무언가의 이름표</label>
<input id="id_txt" type="text" name="id" value="id">
</p>
<p>
붉은색으로 쓰여진 글자를 클릭해도 체크박스가 클릭된다
<label>
<input type="checkbox" name="color" value="red">붉은색
</label>
</p>
15.method(form태그로 감싸줌)
post방식(예)) 비밀번호 아이디 주소줄에 값을 보여주고 싶지 않을 경우)
<form action="" method="POST"></form>
get방식(url전송 방식)
<form action="" method="GET"></form>
16.파일 업로드(form태그로 감싸줌)
서버 폴더에 해당 파일이 저장된다
이미지를 첨부할 경우 반드시 enctype="multipart/form-data을 써준다
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="profile">
<input type="submit">
</form>mata 태그
<head>
어떤 방식으로 저장하는 지
<meta charset="UTF-8">
웹에서 표시되지 않지만 요약자료로 작용된다
<mata name="description" content="코딩자료">
웹페이지를 분류 할때 사용하는 키워드
<meta name="keywords" content="코딩">
<meta name="author" content="egoing">
이웹페이지는 30초 간격으로 리프레쉬됩니다
<meta http-equiv="refresh" content="30">
</head>
semantic(의미론적 태그)
1.<header></header>
<header>
<h1></h1>
</header>
<footer>
<ul>
<li></li>
</ul>
</footer>
2.<nav> 네비게이터 </nav>
3.<section>
<article>본문</article>
</section>
':: IT > HTML' 카테고리의 다른 글
| [HTML] 모바일 지원 메타태그 (0) | 2020.06.01 |
|---|---|
| [HTML] 의미론적인 태그 (0) | 2020.06.01 |
| [HTML] from: hidden / lable (0) | 2020.05.31 |
| [HTML] HTML의 웹 기본 태그, <head>와 <body> 태그 설명 (0) | 2020.05.22 |
| [HTML5] 태그 (0) | 2020.03.25 |