Intro
<!DOCTYPE html>-->해당 파일의 타입이 html5라는 것을 명시
<html>
<head> -->head부분에서는 html 문서의 설정정보(메타데이터)에 대한 명시
<meta charset="UTF-8">
<title>제목</title>-->검색과 북마크에 활용되는 title
</head>
<body> -->html문서의 본격적인 본문
<h1>여기도 제목</h1>-->h태그 역시 검색에 사용됨.
<p>일반적인 p태그</p>-->p태그는 단락구분태그
<br>-->줄바꿈
-->띄어쓰기
<div> -->div는 줄바꿈이 되는 단락처럼사용되나 특별한 기능이 있는 것은 아니나
</div> div안에 여러 요소를 두어 한꺼번에 디자인을 적용하는 데 활용됨
</body>
</html>
Basic1- Style and Table
<!DOCTYPE=html>
<html>
<head>
<meta charset = "UTF-8">
<title>공부하자</title>
</head>
<body>
<h2>스타일태그로 스타일을 입혀보자</h2>
<p style="backgroundcolor: red;">1.배경색 변경<p>
<p style="color: blue;">2.글자색 변경</p>
<p style="font-size: 15px;">3.글자 크기 변경</p>
<p style="color: deeppink; font-size: 20px; text-align: center;">4.복합스타일링</p>
<h2>텍스트에 링크를 참조시킬 땐 a태그 사용!</h2>
<a href="url주소" target="_blank;">네이버</a>
-->target="_blank;"는 새로운 탭에서 링크 열기를 의미
<h2>테이블 만들 땐 테이블 태그 사용!</h2>
<table>
<caption>테이블명</caption>
<thead>
<tr>
<th>컬럼1</th>
<th>컬럼2</th>
</tr>
</thead>
<tbody>
<tr>
<td>데이터1</td>
<td>데이터2</td>
</tr>
<tr>
<td>데이터3</td>
<td>데이터4</td>
</tr>
</tbody>
</table>
---->테이블 태그 안에 컬럼에 대한 정보가 담신<thead>와 데이터에 대한<tbody>태그가 있디
<thead>태그 안에 <th>태그를 통해 컬럼을 나타내는데 <tr>로 감싸준다.
tr은 한줄을 의미한다고 생각하면 될 것 같다. 예를 들어 이름,나이,몸무게 이런식으로
칼럼이 한줄에 병렬적으로 나타나므로 tr로 감싸고 그안에 th를 여러개 두어 컬럼을 나타낸다
데이터를 나타내는 <tbody>에서도 tr을 통해 한줄(한 행/row)에 대한 데이터를 입력할 수 있다.
이때 <td>태그를 사용한다.
</body>
<!html>
Basic2- Form
<!DOCTYPE=html>
<html>
<head>
<meta charset = "UTF-8">
<title>회원가입 폼을 만들어보자</title>
<!head>
<body>
<h2>회원가입 폼을 만들기 위해서는 먼저 form태그를 사용!</h2>
<form action="서버url주소" method="post" enctype="multipart/form-data">
<div> // 폼에서 lable태그는 줄바꿈이 없기 때문에 div로 감싸는 것이 일반적
<label for="UserName">이름</label>
<input type="text" id="UserName" name="name" size="10" maxlength="20">
-->input태그에서 name은 필수다. 입력받은 데이터를 서버에 전송할 때 이게 어떤 데이터
인지 식별하기 위해 사용되기 때문.
-->size는 input 칸의 보이는사이즈를 말하고 maxlength는 그 칸안에서 입력가능한 최대글자수이다.
-->input타입에는 text,email,password,radio,checkbox,datetime-local,file,submit등 다양하다
</div>
<div>
<label>사진업로드</label>
<input type="file" name="photo" accepted="images/*">
</div>
<div>
<label>성별을 체크하시오</label>
<input type="radio" name="sex" value="mail">남자
<input type="radio" name="sex" value="femail">여자
-->라디오버튼은 하나만 체크되어야하므로 같은 name으로 설정해야한다. 만약 sex라는 name설정을
하지 않는다면 둘 다 체크되게 된다.
-->그리고 데이터는 sex안에서도 남자인지 여자인지 세부데이터를 식별해야하므로 value를 사용
</div>
<div>
<lable>드롭다운은 좀 다르게 작성한다</label>
<select name=UserInfo>
<option value="guest">방문자</option>
<option value="user">일반유저</option>
<option value="admin">관리자</option>
</select>
</div>
<div>
<label>본문내용 입력</label>
<textarea name="content" rows="5" cols="20" placeholder="여기에다 글을입력하세요">
</textarea>
</div>
--->긴 텍스트 내용같은경우 textarea라는 태그를 사용하고 rows와 cols로 사이즈를 조절한다.
placeholder는 칸에 내장되어있는 기본메시지 같은 것
<div>
<button type="submit" >제출하기 </button>
</div>
-->제일 마지막에는 제출하기 버튼을 만들어야한다. input type으로도 만들수 있지만
디자인적 효용성을 위해 주로 button으로 만들어진다
</body>
<!html>
----------------------------------------------------------------------------------
<form action="서버url주소" method="post" enctype="multipart/form-data">
에서 action은 유저가 작성한 폼을 어느 서버로 보낼지에 대한 정보. method는 get,post가 있는데
여기서는 일반적으로 post. enctyle은 텍스트로만 이루어지는 폼이라면 application/x-www-form-urlencoded
파일도 있는 폼이라면 multipart/form-data
CSS 적용
<!DOCTYPE=html>
<html>
<head>
<meta charset = "UFT-8">
<title>css적용법에는 3가지가 있다</title>
<style>
p{
color:blue;
}
-->태그선택자
.c1{
color:red;
font-size:15px;
}
-->클래스선택자는 .클래스명!
#id1{
color:green;
}
-->id선택자는 #id명!
</style>
</head>
<body>
<p style="color:red; font-size:20px; text-decoration:underline">인라인<p>
-->태그를 작성할 때 바로 적용하는 것이 인라인적용
<p class="c1">블라블라</p>
<p class="c1">블라블라2</p>
-->클래스를 묶어 head부분에서 style적용하는 것이 내부스타일 적용
<p id="id1">블라블라3</p>
-->id를 활용해 head부분에서 style적용하는 것도 내부스타일 적용
</body>
외부스타일 적용은 외부에다 css파일을 두고 head부분에 아래와 같이 link태그를 둔다
<link rel="stylesheet" href="css/mystyle.css">
</html>