수업이 4시간 통강이다 보니 수업 양이 너무 너무 너무 많다 ....
니가 선택한 티스토리다 악으로 깡으로 버텨
&__^ 다시 상콤하게 시작
3. img.html
이미지는 기력이 없어서 나중에 차차 쓰겠섬.. 복습느낌으로 나중에 채울거지 >응?
4. form html
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset= "utf-8">
<title>HTML5 폼</title>
</head>
<body>
<form action= "search.php" method="post">
<input type = "text" title = "검색">
<input type = "submit" value = "검색">
</form>
</body>
</html>form.html -> 뭔가를 보내려고 할 때 사용
폼태그는 데이터를 입력받고 데이터를 서버 안 쪽으로 전달하는 작업에 사용된다.
Submit속성은 전달의 트리거가 됨.
그리고 action속성에서 search.php파일이 데이터를 전달되는 타겟임. Method속성은 전달될 때의 방식임. Post는 페이지단위 데이터전달. Get은 url을 통해서 데이터를 전달함.
html을 접속했을 때 나오는 검색 창이 input type = "submit" 때문에 생기는 것.
https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=web+dev&oquery=웹개발&tqi=hyb9nlprvxZsstQFVo4ssssssMd-326822 -> 처음에 네이버에서 검색을 했는데 search.naver라는 사이트로 연결됨. url에도 충분한 정보가 들어있음. 주소창은 명령을 넣는 공간인거임
4. textarea.html
<!doctype html>
<html lang ="ko">
<head>
<meta charset = "utf-8">
<title>웹 폼</title>
<style>
form fieldset { margin:10px 0; }
form legend{ font-size: 18px; color:#0066FF; font-weight:600; }
form label.reg { font-size:14px; width:120px; float:left; }
form label em { font-size: 15px; color:red; font-weight:800; }
form ul li { list-style:none; margin:10px 0; }
form .easys{ text-align:left; font-size:12px; color:blue; }
form fieldset.sendform{text-align:center;}
</style>
</head>
<body> <form>
<fieldset class = "login">
<legend>로그인</legend>
<label for ="user id">아이디</label>
<input type = "text" id = "user id" size = "10" autofocus>
<label for = "user pw">비밀번호</label>
<input type = "password" id = "user pw" size = "10">
<input type = "submit" value = "로그인">
</fieldset>
<fieldset class = "register">
<legend>가입하기</legend>
<ul>
<li>
<label class = "reg" for = "user name">아이디 <em>*</em></label>
<input type = "text" id = "new_id" size = "20" autocomplete="on" required>
</li>
<li>
<label class ="reg" for = "new_pw1">비밀번호<em>*</em> </label>
<input type = "password" id="new_pw1" size="20" required>
</li>
<li>
<lavel class="reg" for = "new_pw2">비밀번호 확인<em>*</em></lavel>
<input type="password" id = "new_pw2" size = "20" required>
</li>
<li>
<label class ="reg" for = "user name"> 이름<em>*</em> </label>
<input type="text" id = "user name" size = "20" required>
</li>
<li>
<label class ="reg" for = "user mail">메일주소<em>*</em> </label>
<input type = "email" id = "user mail" size = "20" required>
</li>
<li>
<label class="reg" for ="user tel">전화번호</label>
<input type= "tel" id = "user tel" size="20">
</li>
</ul>
</fieldset>
<fieldset class="easys">
<legend>이지스퍼블리싱</legend>
<textarea name ="intro" cols="60" rows="5">
열심히 사는 사람들의 손을 잡아주는 곳 - 이지스 퍼블리싱
우리는 책을 내기 전에 다시 한 번 물어봅니다.
"이 책이 사람들에게 도움이 되는가?"
더 쉽게, 더 빠르게 지식을 전달하고 싶습니다.
이지스 퍼블리싱의 책과 앱을 만나보세요.
</textarea>
</fieldset>
<fieldset class= "sendform">
<input type ="submit" value ="가입하기">
<input type = "reset" value = "다시쓰기">
</fieldset>
</form>
</body>
</html>http://sj082400.ohseon.com/textarea.html
에서 결과물을 확인할 수 있다.
5. Tag - selector.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>블루베리(Blueberry)</title>
<style>
h1{
color:coral
}
h2{
color: olivedrab
}
p{
font-size:12px;
margin-left:20px;
}
</style>
</head>
<body>
<h1> 블루베리에 관한 연구 </h1>
<h2> 블루베리와 항산화 효능</h2>
<p> 블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
<p> 매사츄세츠 보스톤에 있는 USDA 노화에 관한 인류 영양 연구센터 (the USDA Human Nutrition Research)의 자료에 의하면 블루베리는 과일 중에서 가장 항산화 작용이 뛰어난 과일이라고 합니다 </p>
<h2> 블루베리와 노화 </h2>
<p> USDA 인류 영양 연구센터(the USDA Human Nutrition Research Center) 실험실에서 신경과학자들은 쥐들에게 블루베리를 먹임으로써 노화에 의한 인지능력의 손실을 예방해 준다는 사실을 발견하였습니다.</p>
</body>
</html>'프로그래밍 > HTML' 카테고리의 다른 글
| 10주차 공통모듈개발 (0) | 2022.11.09 |
|---|---|
| 2주차 수업(1) - Html, Css (0) | 2022.09.14 |
