| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 사용법
- SPAN 값 변경 방법
- 수소화불화탄소
- LEL
- 교정 방법
- 가스분석기
- 미드로 영어 공부하기
- Span
- JavaScript
- SENKO SP-MGT-P SPAN 보정 방법
- 넷플릭스 드라마 추천
- 폭발범위
- 가스
- 유대교의 역사
- 용어정리
- HCFC
- SP-MGT-P
- 가스 분석기
- 배너로드 치트
- 보정
- javascript 배우기
- 아마존
- 교정
- 이미지의 크기
- 방법
- 메뉴얼
- Calibrtion
- 블랙프라이데이
- css 독학
- 보정 방법
Archives
- Today
- Total
푸르생 스토리
html. AZ 총정리! 본문
728x90
반응형
SMALL
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<body>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<h5 align="right"></h5>
<h5 align="conter"></h5>
<h5 align="left"></h5>
<p></p>
<br/> <!--엔터 -->
<!--스페이스 바-->
<b></b> <!--기준 텍스트 보다 굵게-->
<big></big> <!--기준 텍스트 보다 크게-->
<small></small> <!--기준 텍스트보다 작게-->
<i></i> <!--기준 텍스트에 기울기 적용-->
아랫첨자<sub>n</sub>
윗첨자<sup>n</sup>
<ins></ins> <!--텍스트에 밑줄-->
<del></del> <!--텍스트에 취소선-->
<mark></mark> <!--텍스트에 형광펜 강조효과-->
<hr/> <!-- 가로선 구분 -->
< <!--tag가 아닌 괄호 표시 --> >
& <!-- & 특수문자 삽입 -->
" <!-- 큰따옴표 표시--> "
© <!-- 카피라이터 표시-->
<a href="www.naver.com">텍스트에 링크 걸기</a>
<a href="www.naver.com" target="blank">새 창으로 열기</a>
<a href="www.naver.com" title="링크에 대한 요약 설명 걸기"></a>
<!--한 페이지 내에서의 이동 링크 걸기-->
<a href="#con_1">1번 location 이동</a>
<a href="#con_2">2번 location 이동</a>
<a name="con_1">
<h1>1번 location으로 이동 하셨습니다.</h1>
</a>
<a name="con_2">
<h1>2번 location으로 이동 하셨습니다.</h1>
</a>
<!-- 순서가 없는 목록 태그-->
1. (기본)검정색 동그라미
<ul type="disc">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
2.흰색 동그라미
<ul type="circle">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
3.검정색 사각형
<ul type="square">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 순서가 있는 목록 태그-->
1.(기본) 순서 1~n
<ol type="1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
2.순서 A ~ Z 대문자 알파벳
<ol type="A">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
3.순서 a ~ z
<ol type="a">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
4.순서 로마 표현법
<ol type="i">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!--정의 목록 태그-->
<dl>
<dt>제목 1</dt>
<dd>제목 1에 해당하는 설명</dd>
<dd>제목 1에 해당하는 설명</dd>
<dt>제목 2</dt>
<dd>제목 2에 해당하는 설명</dd>
<dd>제목 2에 해당하는 설명</dd>
</dl>
<p>
<h1>이미지 첨부 방법</h1>
<img src="same/1.jpg" /> <!--같은 디렉토리 내 이미지 첨부-->
<img src="../top/2.jpg" /> <!-- 상위 디렉토리 이미지 첨부-->
<a href="www.naver.com">
<img src="same/1.jpg" /> <!--이미지에 링크 삽입-->
<img src="../top/1.jpg" /> <!--상위 이미지에 링크 삽입-->
<img src="bottom/1.jpg" /> <!--하위 이미지에 링크 삽입-->
</a>
</p>
<!--테이블(표) 만들기-->
<table width="200" height="200" border="1" cellpadding="0" cellspacing="0">
<!--width 너비-->
<!--height 높이-->
<!--cellpadding 내용과 테두리의 간격-->
<!--cellspacing 테두리 안쪽 겉쪽과의 간격-->
<tr> <!--한줄 입니다-->
<td><!--한칸 입니다-->
</td>
</tr>
</table>
<br/>
<!-- 2줄 짜리 테이블 만들기-->
<table width="100" height="200" border="1" cellpadding="15" cellspacing="0">
<tr>
<td> 1번 내용 </td>
</tr>
<tr>
<td> 2번 내용 </td>
</tr>
</table>
<br/>
<!-- 1줄에 2칸-->
<table width="200" height="100" border="1" cellpadding="15" cellspacing="0">
<tr>
<td> 1번 내용 </td><td> 2번 내용 </td>
</tr>
</table>
<br/>
<!-- 2줄에 2칸-->
<table width="200" height="200" border="1" cellpadding="15" cellspacing="0">
<tr>
<td> 1번 내용 </td><td> 2번 내용 </td>
</tr>
<tr>
<td> 3번 내용 </td><td> 4번 내용 </td>
</tr>
</table>
<br>/
<!-- 합치기 명령 -->
<!--1. 먼저 만나는 td에 명령을 삽입-->
<!-- => 가로 합치기(colspan = 합치는 칸의 갯수 -->
<!-- => 세로 합치기(rowspan) = 합치는 칸의 갯수-->
<!--2. 가로 합치기 = 합쳐지는 td 삭제-->
<!--3. 가로 합치기 = 합쳐지는 tr 삭제-->
<!-- 1번과 2번이 합쳐짐-->
<table width="200" height="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"> 1번 2번 </td>
</tr>
<tr>
<td> 3번 </td>
<td> 4번 </td>
</tr>
</table>
<br/>
<!-- 1번과 3번이 합쳐짐-->
<table width="200" height="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2"> 1번 3번 </td>
<td> 2번 </td>
</tr>
<tr>
<td> 4번 </td>
</tr>
</table>
<br/>
<!-- 테이블의 제목 및 구간별 구분 방법-->
<h2>테이블의 제목</h2>
<table width="300" height="300" border="1" cellpadding="0" cellspacing="0">
<caption><h3>테이블의 제목</h3></caption> <!--자동으로 중앙 정렬-->
<thead>
<tr>
<th> 1번 </th>
<th> 2번 </th>
<th> 3번 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 4번 </td>
<td> 5번 </td>
<td> 6번 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"> 7번 </td>
</tr>
</tfoot>
</table>
<br/>
<!-- 공간분할, 시멘틱태그-->
<!-- 자연적으로 세로로 정렬이 됨을 확인-->
<div>세로정렬의 공간 분할 태그 : 블럭형식태그</div>
<div>세로정렬의 공간 분할 태그 : 블럭형식태그</div>
<div>세로정렬의 공간 분할 태그 : 블럭형식태그</div>
<div>세로정렬의 공간 분할 태그 : 블럭형식태그</div>
<div>세로정렬의 공간 분할 태그 : 블럭형식태그</div>
<br/>
<span>가로 정렬의 공간 분할 태그 : 인라인형식태그</span>
<span>가로 정렬의 공간 분할 태그 : 인라인형식태그</span>
<span>가로 정렬의 공간 분할 태그 : 인라인형식태그</span>
<span>가로 정렬의 공간 분할 태그 : 인라인형식태그</span>
<span>가로 정렬의 공간 분할 태그 : 인라인형식태그</span>
<br/>
<!-- 공간 분할 css가 필수임 -->
<header>
<h1>로고 영역</h1>
</header>
<nav>메뉴 영역</nav>
<section>
<article> 텍스트가 많은 영역 구분</article>
<article> 텍스트가 많은 영역 구분</article>
<article> 텍스트가 많은 영역 구분</article>
</section>
<aside>
부수적인 사이드 내용 영역
</aside>
<footer>
카피라이터 영역(웹사이트의 가장 하단 영역)
</footer>
<!--오디오 태그 속성-->
<h2>오디오 태그</h2>
<audio src="오디오를 불러오는 경로 태그.mp3" controls="controls" preload="none" autoplay="autoplay">
<!--src = "오디오를 불러오는 경로 태그"-->
<!--prelaod="사이트에서 오디오 파일을 다운로드 받을 수 있게하는 태그 "-->
<!--autoplay="autoplay" 오디오를 자동으로 틀어주는 태그-->
<!--loop="loop" 오디오 파일을 반복적으로 재생 하는 태그-->
<!--controls="controls" 음악을 재생할 수 있는 컨트롤러-->
<!--브라우저 별로 사용 가능한 소스가 각각 다르기 때문에 3가지 소스에서 선택적으로 사용하게 전부 선언-->
<source>src="audio.mp3" type="audio.mp3" />
<source>src="audio.ogg" />
<source>src="audio.wav" />
</audio>
<h2>비디오 태그</h2>
<video width="200" height="200" src="비디오를 불러오는 경로 태그.mp3" controls="controls" autoplay="autoplay" > <!--src = "오디오를 불러오는 경로 태그"-->
<!--poster=" 비디오 로딩 화면 태그 "-->
<!--prelaod="사이트에서 오디오 파일을 다운로드 받을 수 있게하는 태그 "-->
<!--autoplay="autoplay" 오디오를 자동으로 틀어주는 태그-->
<!--loop="loop" 오디오 파일을 반복적으로 재생 하는 태그-->
<!--controls="controls" 음악을 재생할 수 있는 컨트롤러-->
<!--width="비디오의 너비" height="비디오의 높이"-->
<!--브라우저 별로 사용 가능한 소스가 각각 다르기 때문에 3가지 소스에서 선택적으로 사용하게 전부 선언-->
<source>src="video.mp4" type="video.mp4" />
<source>src="video.ogv" type="video.ogg" />
</video>
<h2>입력 양식 태그1</h2>
<form action="웹서버 전송을 할 수 있게 하는 파일 삽입" method="폼을 전송할 방식 선택 속성"> </form>
<form>
<h2>회원가입</h2>
<fieldset>
<legend>개인정보</legend>
이름:<input type="text" /><br/>
나이:<input type="text" /><br/>
</fieldset>
</form>
<form>
<h2>회원가입</h2>
<fieldset disabled name="fieldset_name">
<legend>개인정보</legend>
이름:<input type="text" /><br/>
나이:<input type="text" /><br/>
</fieldset>
</form>
<h2>form 태그의 속성</h2>
<!-- method-->
<!-- method="get:256~4,096" 정보의 양을 제한 하는 속성-->
<!-- method="post" 정보의 양을 제한 하는 속성-->
<!--name="여러개의 폼 사용시 식별하기 위한 폼의 이름"-->
<!-- action="폼을 전송할 서버쪽의 스크립트 파일을 지정,
onsubmit 이벤트로 action 속성 지정하지 않고 스크립트로 처리 가능"-->
<!--target="action에서 지정한 스크립트 파일을 현재창이 아닌 다른 위치에서 열도록 지정함."-->
<h2>fieldset 태그의 속성</h2>
<!--disabled="fieldset 태그의 자식 요소를 사용할 수 없음" 화면에 표시만 되고 입력 또는 선택이 안되도록 하는 속성-->
<!--form="현재 속해 있는 form의 이름을 표시할 수 있음"-->
<!--name="서버로 넘겨줄때의 이름 설정"-->
<h2>입력 양식 태그2</h2>
<!--<input type="타입 형태" name="input 태그의 이름설정" value="서버로 넘기는 값" />-->
<input type="text" name="id" value="아이디" size="30" maxlength="5">
<input type="checkbox" id="ch_box_1"><label for="ch_box_1">체크박스내용</label><br/>
<input type="checkbox" id="ch_box_2"><label for="ch_box_2">체크박스내용</label><br/>
<input type="checkbox" id="ch_box_3"><label for="ch_box_3">체크박스내용</label><br/>
<input type="radio" id="ra_box_1"><label for="ra_box_1">라디오 내용</label><br/>
<input type="radio" id="ra_box_2"><label for="ra_box_2">라디오 내용</label><br/>
<input type="radio" id="ra_box_3"><label for="ra_box_3">라디오 내용</label><br/>
<input type="image" src="logun.jpg" />
<h2>텍스트 영역</h2>
<textarea cols="50" rows="10"></textarea>
<h2>드롭다운 목록 태그</h2>
<select size="4" multiple>
<optgroup label="과일목록1">
<option>과일 이름</option>
<option>사과</option>
<option>바나나</option>
<option>자몽</option>
</optgroup>
<optgroup label="과일목록2">
<option>과일 이름</option>
<option>사과</option>
<option>바나나</option>
<option>자몽</option>
</optgroup>
</select>
<!--hidden 사용자에게 보이지 않지만 서버로 넘겨지는 값(가입날짜 또는 경로등) BOX 없음-->
<!--text 한줄짜리 텍스트 상자(name, size, value, maxlength) BOX-->
<!--search 검생상자 BOX-->
<!--tel 전화번호 입력 BOX-->
<!--url URL 주소 입력 BOX-->
<!--email 이메일 주소 입력 BOX-->
<!--password 비밀번호 입력 BOX-->
<!--number 숫자를 조절 BOX-->
<!--range 숫자를 조절하는 슬라이스 BAR-->
<!--color 색상 TABLE-->
<!--checkbox 다중 선택이 가능한 체크 BOX-->
<!--radio 단일 선택만 가능한 라디오 BUTTON-->
<!--datetiome 국제 표준시로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초) BOX-->
<!--date 사용자가 있는 지역을 기준으로 날짜(연, 월, 일)-->
<!--month 사용자의 지역을 기준으로 날짜(연, 월)-->
<!--week 사용자 지역을 기준으로 날짜(연, 주)-->
<!--time 사용자 지역을 기준으로 시간(시, 분, 초, 분할초)-->
<!--button 버튼 삽입-->
<!--file 파일을 첨부할 수 있는 버튼 삽입-->
<!--submit 서버에 전송 버튼 삽입-->
<!--image submit 버튼 대신 이미지를 삽입-->
<!--reset 리셋 버튼 삽입-->
</body>
</head>
</html>
#html 파일 열기 #html 편집기 #html #html 이미지 링크 #아이폰 html #html css #html코인 #html 띄어쓰기 #html 색상표 #html 주석 #html파일 여는법 #html5 #html 파일이 안열려요 #HTML5 동영상 플레이어 #html5 다운로드 #html 태그 #html 파일 엑셀파일로 변환 #html 이미지 삽입 #html div #html 표 만들기 #html style #html pdf 변환 #html tag #html table #HTML5 #HTML 하이퍼링크 설정하기 #HTML 코드 #HTML CSS #HTML 그림 삽입하기
728x90
반응형
LIST
'개발 > HTML+CSS' 카테고리의 다른 글
| html 과 css의 관계 기본 5편 / CSS inherit (0) | 2021.04.07 |
|---|---|
| html 과 css의 관계 기본 4편 / CSS 선택자. (0) | 2021.04.07 |
| html 과 css의 관계 기본 3편 / CSS 기초와 display의 대표적인 속성 3가지 (0) | 2021.04.07 |
| html 과 css의 관계 기본 2편 / CSS 기초와 display 속성 (0) | 2021.04.07 |
| html 과 css의 관계 기본 1편 (0) | 2021.04.07 |
'개발/HTML+CSS' Related Articles
more
