반응형
안녕하세요 코딩중인 코딩초밥입니다 ㅇㅅㅇ
오늘도 같이 코드를봐볼까요?? 😘
※BUTTON 활용
사이트에 버튼이 있어야 이동을하거나 발동할수있는 함수를 주겠죠?
▶간단예제
<!DOCTYPE html>
<html>
<body>
<!-- 버튼만드는방법 -->
<!-- 1.type ="button" -->
<!-- onclick으로 발동되는 함수를 줄수있고
alert는 기본적으로 있는 다이얼로그 함수입니다-->
<input type="button" value="중복" onclick="alert('중복된id입니다')"><br>
<!-- 2.코스튬이미지 버튼 -->
<!-- src에 내가원하는 이미지를 넣습니다 alt는 이미지가 없을떄 띄우는text입니다 -->
<button onclick="alert('이미지')"><img src="bnt01.png" alt="이미지없어여"></button>
<!-- 2-1코스튬이미지 버튼 -->
<input type="image" src="bnt01.png">
<!-- 2-2코스튬이미지로 엥커 버튼을 만들기 -->
<!-- form요소 안에서 사용하면 submit과 같은 역활 -->
<a href="./01_ex.html"><img src="bnt01.png"></a>
</body>
</html>
※콤보박스
select 박스를 만들수있습니다
▶간단예제
<!DOCTYPE html>
<html>
<body>
<!-- 1.간단한 select를만들수있습니다 -->
<select name="slec">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<!-- optiongroup 를 통하여 단락을 나눌수도있습니다 -->
<select name="se12">
<optgroup label="중식">
<option value="aaa">짜장면</option>
<option value="bbb">우동</option>
<option value="ccc">짬뽕</option>
</optgroup>
<optgroup label="일식">
<option value="111">초밥</option>
<option value="222">오꼬노미</option>
<option value="333">사시미</option>
</optgroup>
</select>
</body>
</html>
value 는 서버와 통신할떄 생성자로 쓰여질수있습니다.
다음글에서 이 value로 서버와 통신하는법을 배우겠습니다.
※fieldset
영역을 그룹화시킵니다(테두리선과 라벨을 적용합니다)
▶간단예제
<!DOCTYPE html>
<html>
<body>
<fieldset>
<!-- 제목 legend-->
<legend>인적사항</legend>
<label>이름:<input type="text"></label><br>
<label>주소:<input type="text"></label><br>
<label>번호:<input type="text"></label><br>
<label>빠밤:<input type="text"></label><br>
</fieldset>
</body>
</html>
이렇게 데이타를 받고 버튼을 만들었다면 서버를 통해서 데이타를 주고받는 간지나는작업도 해야겠죠?
다음에는 서버와 통신방법에 대해 알아보겠습니다
반응형
'이과 > HTML,CSS,JS' 카테고리의 다른 글
| HTML_다양한 입력Type (14) | 2021.05.10 |
|---|---|
| HTML_파일보내기 (1) | 2021.05.09 |
| CSS_속성,폰트,텍스트 (1) | 2021.05.07 |
| HTML_오디오,비디오 div, span (2) | 2021.05.06 |
| 반응형 웹디자인. (5) | 2021.05.03 |
댓글