html 파일을 만들어서 테스트 하는건 html을 비주얼스튜디오코드를 설치를 해서 코딩을 한후 브라우저에 띄우는
설명글을 참조해 주세요.
https://astonysia-story.tistory.com/49
웹개발의 아주 기초적인 html, javascript, style(css), jquery 를 배워 보세요
웹개발이든 어떤 개발이든 간에 기초가 상당히 중요 합니다. 웹개발이면 자바, jsp, php, asp, c#등 많치만 자바와 jsp 리액트 그리고 뷰를 많이 쓰는 추세 입니다. 프론트앤드의 기초는 html, javascript,
astonysia-story.tistory.com
html의 기본 문법
<html></html> : 시작과 끝
<head></head> : 헤더 안에는 meta, script, style을 정의 및 불러 올수가 있습니다.
<title></title> : <head> 안에 꼭 넣어 주어야 하고 제목을 지정 할수 있습니다.
예를 들어서 <title>html 기본 문법</title> 'html 기본 문법' 이 제목에 브라우저 상단에 보여 집니다.
<body></body> : 여기에 html 코드를 작성 할수 있습니다.
html body에 사용 하는 코드
<div></div> : 상자를 그려서 그 안에 내용을 넣으면 그 내용이 브라우저에 보여진다는 것으로 이해하면 쉽습니다.
<ul>, <li> : 리스트를 작성 하는 코드 입니다.
예제)
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
결과)
위 코드로 작성을 하면 해당 그림처럼 내용이 나옵니다.
그리고 div를 ul에 붙이면...
예제)
<div>
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
</div>
이런식으로 작성을 할수 있습니다.
<hr> : 표시선을 그릴수 있습니다.
<table><table> : 말 그래도 표를 작성을 할수 있습니다.
⊙ tr : 행을 지정을 합니다.
⊙ td : 행의 열을 지정을 합니다.
⊙ table의 속성
- align : left(기본), center, right
- width : 가로 길이
- height : 세로 길이
- valign : top, middle, bottom
- border : 테두리 두께를 지정
⊙ 코드 예제
<hr>
<table width="50%" align="center">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr height="100">
<td valign="top">4</td>
<td valign="middle">5</td>
<td valign="bottom">6</td>
</tr>
<tr>
<td align="left">7</td>
<td align="center">8</td>
<td align="right">9</td>
</tr>
</table>
<hr>
결과)
hr, table을 작성을 하면 위 그림처럼 나옵니다.
<img> : 그림을 불러 올수 있습니다.
⊙ img 속성
- width : 가로를 지정
- height : 세로를 지정
- border : 테두리 두께를 지정 0 이면 테두리가 보이지 않습니다.
- src : 여기에 이미지 경로를 적어 주면 됩니다
⊙ 코드 예제
<img src="/loudspeaker-1459128_640.png" style="width:200px;height:200px;cursor:pointer;" />
style 로 width, height를 줄수 있습니다., cursosr:pointer는 그림에 마우스를 올리면 손가락 표시가 나오도록 해줍니다.
결과)
그림을 불러오면 해당 이미지 처럼 그림이 불러와 집니다.
<h1~h6> : 헤더를 지정 할수 있습니다.
예제)
<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>
결과)
이렇게 글자를 제목처럼 크게 보여 줍니다.
<form>, <input>, <select> 속성
form 속성
- name : 이름 입력
- id : 아이디 입력
- action : 폼에서 submit시에 이동할 페이지 주소 및 프로세스 주소
- method : post, get 둘중 하나를 입력 합니다.
+ post : 보안적으로 파라미터를 다 숨겨 줍니다.
+ get : 파라미터를 다 보여 줍니다.
input 속성
- name : 이름 입력
- id : 아이디 입력
- type : text, checkbox, radio, button, submit(form 전송시에 사용 가능),
hidden(값을 숨길때 사용) - 브라우저에는 보이지 않습니다, file(파일을 불러 올수 있습니다)
- size : text 시에 사용. 인풋박스의 길이를 지정 할수 있습니다.
select 속성
- name : 이름 입력
- id : 아이디 입력
- option : <option value="">내용</option> 으로 select 안에서 사용
예제)
<form name="frm" id="frm" method="post" action="/select">
<input type="text" name="input1" id="input1" size="10" /> <br>
<input type="text" name="input1" id="input1" size="15" value="test input" /> <br>
<input type="hidden" name="input1" id="input1" size="10" value="test hidden" /> <br>
<input type="checkbox" name="chk" id="chk" /> 체크박스 <br>
<input type="radio" name="rdo" id="rdo" /> 라디오박스 <br>
<input type="button" name="btn" id="btn" value="버튼" /> <br>
<input type="submit" name="smt" id="smt" value="submit" /> <br>
<select>
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
</select> <br>
<input type="file" name="file" id="file" />
</form>
결과)
이렇게 그림처럼 나옵니다.
html 이벤트
onClick : 클릭시 이벤트를 발생 시킵니다.
onDblClick : 더블 클릭시에 이벤트를 발생 시킵니다.
onKeyPress : 키 입력시에 이벤트를 발생 시킵니다.
onKeyUp : 키를 입력후 손을 띄면 이벤트를 발생 시킵니다.
onKeyDown : 키를 입력시 누를때 이벤트를 발생 시킵니다.
onChange : select 박스등에서 값이 변경 되는 경우 발생 되는 이벤트 입니다.
예제)
<script>
function test() {
alert("123");
}
</script>
<input type="text" name="input1" id="input1" size="10" onClick="test();" >
이벤트는 이런식으로 작성 할수 있습니다
'IT, 인터넷 > HTML, JQUERY, JAVASCRIPT, CSS' 카테고리의 다른 글
| 룰렛 플러그인으로 룰렛 돌리는 프로그램 만들기 (0) | 2021.09.28 |
|---|---|
| 웹개발의 아주 기초적인 html, javascript, style(css), jquery 를 배워 보세요 (0) | 2021.09.27 |
| jquery 사용해서 배열 json 데이터 만들기 (array, object) (0) | 2021.09.16 |
