[HTML,CSS,JS] HTML 기초 문법 총 정리와 사용예제2
Devel/HTML&CSS&JAVASCRIPT2020. 8. 31. 18:48
반응형
#<table 태그>
#tr: 표 내부의 행 태그
#th: 행 나부의 제목 셀 태그
#td: 행 내부의 핼반 셀태그
#그룹핑
1. 테이블 머리 : thead
3. 테이블 내용 : tbody
2. 테이블 바닥행: tfoot ( 반드시 tbody 앞에 사용해야 한다. )
#list
#태그 그룹(group)
- div 태그와 span태그는 HTML 태그들을 그룹화할 수 있는 태그들이다. 일반적으로 대부분의 태그들은 block level(일반적으로 줄바꿈)과 inline level(줄바꿈이 없다.)로 구분되어 진다.
#<div>
- block level 태그로서 다른 HTML태그들을 그룹화하기 위한 컨테이너 역할을 한다. div 태그 자체는 특별한 의미는 없지만, block level 태그이기 때문에 브라우저에서 보여주기 전후로 line break가 삽입된다.
id 값을 사용함.
- 일반적으로 CSS와 같이 사용하여 레이아웃 설정하기 위해서 주로 사용된다.
-block level
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div 태그 실습</title>
</head>
<body>
<div id="container" style="width: 500px">
<div id="header" style="background-color: #FFA500;">
<h1 style="margin-bottom: 0;">Main Title of Web Page</h1>
</div>
<div id="menu"
style="background-color: #FFD700; height: 200px; width: 100px; float: left;">
<b>Menu</b><br>HTML<br>CSS<br>JavaScript
</div>
<div id="content"
style="background-color: #EEEEEE; height: 200px; width: 400px; float: left;">Content
goes here</div>
<div id="footer"
style="background-color: #FFA500; clear: both; text-align: center;">Copyright
</div>
</body>
</html>
#<span태그>
- inline level 태그로서 텍스트(text)을 위한 컨테이너 역할을 한다. 태그 자체는 특별한 의미는 없다.
-일반적으로 CSS와 같이 사용하여 텍스트(text)의 스타일 변경시 주로 사용된다.
-특정부분만 묶어 id부여 후 효과지정 or -결과출력
#<form태그>
- 서버에 데이터를 전송하기 위해서 HTML 폼을 사용한다
name:폼마다 부여된 이름이다.
action:아이디 pas와 같은 데이터를 처리할 서버쪽 프로그래밍 파일 이름
method: 데이터를 전송할 때 어떤 방식으로 전송 할 것인가.
get방식(action에 적혀는 프로그래밍을 url에 붙여주는 것)과 post 방식(안보이게 감춰서 보내주는 것. id/pawd에서는 안정성이 더 높다.)
(**)
input type =text 제일 많이 사용
value:적어준다면 default값
name : 나중에 server에서 name보고 값 뽑아냄.(id로도 가능)
value:써준 값을 value에 들어감.
#get방식
#post방식
#<라디오버튼>
form안에 묶여야 전송가능.
checked 기본 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form name = "myForm" action="target.html" method = "get">
<input type="radio" name= "gender" value="male">남<br>
<input type="radio" name= "gender" value="female" checked>여<br>
<input type = "submit" values="제출">
</form>
</body>
</html>
<체크박스>
values 이유, server에서 자료 뽑을때, 어떤 것을 선택했는 지 보고 값을 얻어가야하기 때문에
#<select>
#<textarea,submit, reset>
-파일 업로드 시 File enctype 주의
#<fieldset/legend>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form name="myForm" action="target.html" method="post">
<fieldset>
<legend>로그인</legend>
아이디 : <input type="text" name="userid" ><br>
비밀번호 : <input type="password" name="passwd"><br>
<input type="submit" value="로그인">
<input type="reset" value="취소">
</fieldset>
</form>
</body>
</html>
<img태그>
- 이미지 처리를 위한 태그로서 jpg,gif,png 모두 가능.
#<pre태그>
- 문장에 포함된 줄 바꿈과 여백 등을 그대로 표현 가능.
#<특수문자>
'Devel > HTML&CSS&JAVASCRIPT' 카테고리의 다른 글
| CSS의 모든것, 문법총정리(선택자, 자식, 자손,형제 개념과 적용예제) (0) | 2020.09.05 |
|---|---|
| [HTML,CSS,JS] workshop예제(기본인적사항만들기) (0) | 2020.08.31 |
| [HTML,CSS,JS] HTML 기초 문법 총 정리와 사용예제 (0) | 2020.08.31 |
| [HTML,CSS,JS] 서버 연동 후 프로젝트 실행하기 (0) | 2020.08.31 |
| [HTML,CSS,JS] Eclipse IDE 버전, 설치방법, Apache Tomcat 드라이버 설치 (0) | 2020.08.31 |
댓글()
