html 독학1
ex1.html
<!<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title>나의 첫웹페이지</title>
</head>
<body>
<header>
<p>header</p>
<nav></nav>
</header>
<main>
<section>
<p>section</p>
<article>
<p>article</p>
</article>
</section>
<aside>
<p>aside</p>
</aside>
</main>
<footer>
<p>footer</p>
</footer>
</body>
웹페이지 구조를 짰어요
article vs section
article 내용이 독립적이고 홀로 설수 있는 내용
section 서로 관계있는 문서를 분리하는 역할
여러개의 section을 article로 묶을 수도있고
마찬가지로 여러개의 article을 section으로 묶을 수 있다.
section vs div
내용 관계 O -> section
의미적으로 관계 X -> div
strong vs b
strong 해당 콘텐츠의 중요성 강조
b 텍스트 자체 강조
em vs i
em 의미적인 강조
i 단순 문자열
스크린 리더에서 또렷한 차이를 볼 수 있다.
strong vs em
em 구어체 강조와 같이 문장의 의미를 변경하는 데 사용
strong 문장의 일부분에 중요성추가
<h3>웹이란?</h3>
<blockquote cite=https://nemne.tistory.com/23> //인용문
<p><strong><em>웹사이트(Website)</em></strong>는 HTTP <i><u>프로토콜</u></i>을 써서 어떤 <s>URL</s>에서 받아오는 텍스트굵게/텍스트 기울임 텍스트기울임/텍스트밑줄 텍스트취소선
<abbr title ="Hyper Text Markup Language">HTML</abbr>로 쓰인[1] 문서이다.</p> //줄임말
<cite> //참고내용
<b>[나무위키]</b> //텍스트굵게
</cite>
</blockquote>
<nav>
<ul> //순서가 없는 목록
<li><a href="ex2.html">html</a></li>
<li><a href="">css</a></li>
<li><a href="">JavaScript</a></li>
</ul>
<ol type="a"> //순서가 있는 목록
ex) type =1(숫자),a(영문소문자),A(영문대문자),i(로마 숫자 소문자),I(로마 숫자 대문자) ,start=3 3부터 시작
<li><a href="">html</a></li>
<li><a href="">css</a></li>
<li><a href="">JavaScript</a></li>
</ol>
<dl>
<dt>frontend</dt> //설명할 용어
<dd>html</dd> //설명할 내용
<dd>css</dd>
<dd>JavaScript</dd>
</dl>
</nav>
table 만들기
<table border="1">
<colgroup> //여러열 지정
<col style="background-color:greenyellow"> //첫번째 열 스타일 지정
<col span="2" style="background-color:pink"> //동일한 스타일로 두번째,세번째 스타일 지정
</colgroup>
<caption>표제목</caption> //표제목
<thead> //표중 제목
<tr> //행 삽입
<th scope="col">이름</th> //셀 삽입(진하게 표시)
<th scope="col">학과</th>
<th scope="col">등급</th>
</tr>
</thead>
<tfoot> //표중 요약
<tr>
<th colspan="2" scope="row">전체평균</th> //2개의 열 합치기
<td>A</td> //셀 삽입
</tr>
</tfoot>
<tbody> //표중 본문
<tr>
<th scope="row">sy</th>
<td>정보통신공학</td>
<td>A</td>
</tr>
<tr>
<th scope="row">ys</th>
<td>컴퓨터공학</td>
<td>A</td>
</tr>
</tbody>
</table>
<p><code> //소스 코드 표시
word = "hello world"<br>
print(word)<br>
exit()
</code></p>
<p>
Hello world <sub>Hello world</sub><br> //아래첨자
Hello world <sup>Hello world</sup><br> //위 첨자
Hello world <small>Hello world</small><br> //작은 텍스트
</p>
<p> html태그 <del>독학</del> <ins>공부중</ins>입니다.</p>
//공동작업문서에 기존 내용 삭제 , 새로운 내용 삽입
이미지 삽입
<img src="coding.jpg" width="350" height="280" alt="coding" title="코딩">
이미지 파일 경로 가로 세로 크기 조절(%,px) 대체용 텍스트
오디오,비디오 등 멀티미디어파일 삽입
ex)
<object type="application/pdf"
data="/media/examples/In-CC0.pdf"
width="250"
height="200">
</object>
<iframe> </object> 사용할수 없을 때 사용하는 퇴화태그,업데이트 X
<object> 실시간 업데이트 O
<embed> object 태그와는 달리 닫기태그가 없으므로 자식 태그 둘수 없음
ex)
<embed src="URL주소">
예전에는 웹에서 음악파일을 재생하거나 비디오 파일을 재생하려면 별도의 프로그램(플러그인)을 설치하여 실행
플러그인 필요없이 브라우저에서 바로 재생하는 태그
<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>
- src : 비디오 파일의 주소
- controls : 컨트롤러 표시
- autoplay : 자동 재생
- loop : 반복 재생
- width : 영상의 가로길이
- height : 영상의 세로길이
- muted : 음소거
<article>
<p>article</p>
<img src="coding.jpg" width="350" height="280" alt="coding" title="코딩"/>
<p><a href="https://www.naver.com/" target="_blank>"네이버로이동</a></p>
<p><a href="https://www.naver.com/" target="_blank>">
<img src="star.jpg" width="350" height="280" alt="star" title="naver"/></a></p>
</article>
이미지 삽입
텍스트 링크
이미지 링크(사진 누르면 naver로 이동)
form 기본형
method
get: 사용자 입력 내용이 드러나게 서버로 넘겨줌
데이터가 외부에 노출되어 보안에 취약
http메소드 정의에서 get방식은 지정된 리소스에서 데이터를 요청하는 경우인 읽을때 사용하는 메소드
post:사용자 입력 내용이 드러나지 않게 서버로 넘겨줌
보안에 취약하지 않음(개인정보나 보안에 이용)
http메소드 정의에서 post방식은 지정된 리소스에서 데이터를 처리할 경우인 수정,삭제할때 사용하는 메소드
name:자바스크립트로 폼이름 지정
action: 서버 프로그램 지정
target:열어볼 파일 위치 지정
autocomplete :자동 완성 기능 지정(기본값 on)
<fieldsest> 폼 내부에서 구역을 나눔
<legend> 구역 제목 붙이기
input 태그
type:태그 모양을 다양하게 변경
name:태그이름 지정
readonly:태그 읽기전용
maxlength:해당 태그 최대 글자 수 지정
required:해당 태그가 필수 태그로 지정
autofocus:웹페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동
placeholder:태그에 입력할 값에 대한 힌트를 줌
pattern:정규표현식을 사용하여 특정범위 내의 유효한 값을 입력 받을때 사용
ex2.html
ex1)
fieldset 태그는 관련된 입력 양식들을 그룹화
legend 태그는 fieldset 태그 내에서 사용되어야 하며 그룹화된 fieldset의 제목을 정의
<form name="profile" action="/action_page.php" method="get" autocomplete="on">
<fieldset style = "width:150"> //폼 내부에서 구역 나눔
<legend>반려견 정보</legend> //구역 제목 붙이기
이름: <input type="text" name="name"><br>
나이: <input type="text" name="age"><br>
</fieldset>
<br>
<fieldset style ="width:180; height:110">
<legend>상세사항</legend>
성격:<input type="text" name="personality"><br>
좋아하는 놀이:<input type="text" name="hobby"><br>
</fieldset>
</form>
ex2)
<form action="#" accept-charset="utf-8" name="person" method="get">
<fieldset style = "width:150">
<legend>개인정보</legend>
이름: <input type="text" name="name" required/><br>
전화번호: <input type="text" name="number"
pattern="\d{3}\-\d{4}-\d{4}"
title="010-1234-1234 형식으로 입력해주세요"><br>
아이디:<input type="text" name="id" value="id"/><br>
비밀번호:<input type="password" name="password"/><br>
성별 : 남<input type = "radio" name="gender"/>
여<input type = "radio" name="gender"/><br>
운동: 헬스<input type = "checkbox" name="checkbox1" />
요가<input type = "checkbox" name="checkbox2"/>
크로스핏<input type = "checkbox" name="checkbox3" /><br>
<input type = "submit" value = "submit"/>
<input type = "reset" value = "reset"/><br>
</fieldset>
</form>
ex3) 목록태그 <select> ,<optgroup>,<option>
<form action="#" accept-charset="utf-8" name="life" method="get">
<fieldset style = "width:150">
<legend>지역</legend>
<select name="city1" size="5" multiple>
<option value ="seongnam-si">성남시</option>
<option value ="suwon-si">수원시</option>
<option value ="yongin-si">용인시</option>
<option value ="anyang-si">안양시</option>
<option value ="gwacheon-si">과천시</option>
<option value ="uiwang-si">의왕시</option>
</select>
<br>
<select name="city2">
<optgroup label = "서울">
<option value ="seongnam-si">성남시</option>
<option value ="suwon-si">수원시</option>
<option value ="yongin-si">용인시</option>
</optgroup>
<optgroup label = "경기도">
<option value ="seongnam-si">성남시</option>
<option value ="suwon-si">수원시</option>
<option value ="yongin-si">용인시</option>
</optgroup>
</select>
<br>
<input type ="submit" value = "submit"/>
<input type = "reset" value = "reset" />
</fieldset>
</form>
ex4) 여러줄 글상자<textarea>
<form action="#" accept-charset="utf-8" name="question" method="get">
<fieldset style = "width:250">
<legend>입력</legend>
문의<br>
<textarea name ="content" cols="50" rows="5"
placeholder="문의사항을 입력해주세요"></textarea>
<br>
<input type="submit" value="submit"/>
<input type="reset" value="reset"/><br><br>
</fieldset>
</form>
ex5)입력값 후보
리스트에서 어느 한가지를 선택하거나 키워드에 입력할 수 있다.
<form action="#" accept-charset="utf-8" name="dog" method="get">
<fieldset style = "width:250">
<legend>입력 값 후보</legend>
<br>
좋아하는 강아지 입력<br>
<input type="text" name="dog" list="dog">
<datalist id="dog">
<option value="말티즈">maltese</option>
<option value="푸들">poodle</option>
<option value="리트리버">retriever</option>
</datalist>
<br>
<input type="submit" value="submit"/>
<input type="reset" value="reset"/><br><br>
</fieldset>
</form>
ex6) input 태그에서 date
<form action="#" accept-charset="utf-8" name="date" method="get">
<fieldset style = "width:250">
<legend>달력</legend>
<br>날짜입력<br>
<input type="date" min="2000-01-01" max ="2023-01-01" name="date" step="1"><br>
<input type="submit" value="submit"/>
<input type="reset" value="reset"/><br>
</fieldset>
</form>
ex7)input 태그에서 number 와 range
<form action="#" accept-charset="utf-8" name="choice" method="get">
<fieldset style = "width:350">
<legend>number</legend>
number : <input type="number" min="0" max ="100" step="5" name="number">
</fieldset>
<br>
<fieldset style = "width:350">
<legend>range</legend>
range : <input type="range" min="0" max ="100" step="5" name="range">
</fieldset>
<br>
<input type="submit" value="submit"/>
<input type="reset" value="reset"/>
</form>
ex8)input 태그에서 color
<form action="#" accept-charset="utf-8" name="choice" method="get">
<fieldset style = "width:350">
<legend>color</legend>
color : <input type ="color" color="color">
</fieldset>
<br>
<input type="submit" value="submit"/>
<input type="reset" value="reset"/>
</form>
<label for="fruitItem">여기를 클릭하시오</label>
<input id="fruitItem" type="checkbox" />
for 쓰지않고 label 사용
<form name="selectexercise">
<ul>
<li>
<label><input type="checkbox" />헬스</label>
</li>
<li>
<label><input type="checkbox" />필라테스</label>
</li>
</ul>
</form>
<button type="button" onclick="alert('완료')">
Click Me!
</button>
