html을 테스트 할 때는 jsfiddle에 html문장을 복사해서 run으로 테스트 할 수 있다.
html의 설명문(comments)은 <!-- here is comments --> 이다.
<!DOCTYPE html> #태그 형식에 대한 버전 표시
html의 설명문(comments)은 <!-- here is comments --> 이다.
기본
<html> # 전체(페이지) 블럭 시작
<head> # head 블럭
<title></title> # 브라우저 탭에 표시되는 페이지 제목
<meta charset=“utf-8”> #한글을 사용하기 위함
</head>
<body> # body 블럭
<h1>큰 제목</h1> #숫자가 커지면 작은 제목
<ol> # 순서가 있는(ordered) list 그룹
<li></li> # list(1,2,3,순으로 번호붙음)
<li></li>
<li></li>
</ol>
<ul> # 순서가 없는(unordered) list 그룹
<li></li> # list(*로 리스트 표시)
<li></li>
<li></li>
</ul>
</body>
</html>
태그는 <strong>, </strong>와 같이 시작과 닫음을 나타내는 2개 태그 쌍으로 구성됨.
태그에 속성을 추가할 수 있음. 속성은 순서없이 추가하면 됨.
<a>사이트명</a> 에 링크 속성을 추가하면
전체적으로 보면 <html></html> 내에 두 개의 블럭 <head>와 <body>가 포함됨.
<body>내에서는 <li>로 리스트를 나열하는게 일반적인데, 리스트의 블럭을 구분하기 위해 <ol>이나 <ul>를 사용.
그리고 맨 앞에는 <!DOCTYPE html>을 추가(html의 버전을 나타내는 형식)한다.
태그
<p></p> # 문단(paragraph)<br> # 줄바꿈
<img src="img.jpg" height="300" alt="이미지 설명" title="뒷산 이미지"> # alt(이미지 없을 때 표시글)
폼 기본
...<body>
<form action="http://localhost/login.php">
<p>아이디: <input type="text" name="id"></p>
<p>패스워드: <input type="password" name="pwd"></p>
<p>주소: <input type="text" name=address""></p>
<p>textarea :
<textarea cols="20" row="3"></textarea>
</p>
<input type="submit">
</form><p>textarea :
<textarea cols="20" row="3"></textarea>
</p>
<input type="submit">
</body>
이렇게 해서 submit하면 login.php로 localhost/login.php?id=egoing&pwd=1111&address=seoul 주소로 넘어간다.
dropdown/radio, checkbox/기타
#dropdown으로 메뉴가 펼쳐지고 그 중에서 하나를 선택할 수 있다.
<h1>색상 선택</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검정색</option>
<option value="blue">파란색</option>
</select>
#radio(단일선택)
<p>
<h1>색상</h1>
붉은색 : <input type="radio" name="color" value="red">
검정색 : <input type="radio" name="color" value="black" checked>
푸른색 : <input type="radio" name="color" value="blue">
</p>
단일선택이니 name이 모두 동일
#checkbox(다중선택)
<p>
<h1>사이즈</h1>
95 : <input type="checkbox" name="size" value="95">
100 : <input type="checkbox" name="size" value="100" checked>
105 : <input type="checkbox" name="size" value="105" checked>
</p>
#파일업로드
<form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="profile"> # name은 서버쪽에서 사용(정해줌)
<input type="submit">
</form>
파일 전송 방식을 나타내는 method는 get, post가 있는데 post로 해주면 전송 정보가 숨겨짐
참고문헌
[1] 이고잉 html
[2] html + AJS를 함께 테스트 할 경우 w3school
댓글 없음:
댓글 쓰기