block레벨
앞서 배운 div도 블록레벨의 요소입니다. div는 페이지의 영역을 나눌때 사용하는 큰 블록이고 span은 작은 블록으로 문장안에서 사용해요.
<div style="border: 1px solid black;">div 요소는 블록레벨요소</div>\
<p>span은 <span style="border: 1px solid; color:red;">문장안</span>에서 사용된다.</p>테이블
<table>
<caption>급여(단위:만원)</caption>
<thead> <!-- 컬럼 -->
<tr>
<th>월</th>
<th>급여액</th>
</tr>
</thead>
<tbody> <!-- 데이터 -->
<tr>
<td>9월</td>
<td>350</td>
</tr>
<tr>
<td>10월</td>
<td>60</td>
</tr>
<tr>
<td>11월</td>
<td>1000</td>
</tr>
</tbody>
<tfoot> <!-- 합계 -->
<tr>
<td>합계</td>
<td>1410</td>
</tr>
</tfoot>
</table>- thead
- tbody
- tfoot
로 테이블 영역을 나눈다
테이블 태그
- th(table header) : 테이블의 타이틀을 표현함
- tr(table row) : 테이블의 행을 표현함
- td(table data) : 테이블의 데이터를 표현함
caption
테이블에 설명을 쓸 때 사용한다.
iframe
웹페이지 안에 웹페이지를 보여줌
<iframe src="05_link.html" name="iframe_a" width="700" height="800">
</iframe>form
데이터를 보낼 패키지를 입력하는 태그입니다. 폼안에서만 아래 속성들이 실행될 수 있어요
- action : 사용자가 보낼 주소(url)를 입력하는 속성
- method : 데이터를 전송하는 방식을 결정하는 속성으로 기본값은 get방식.
1) GET 방식 : 사용자가 입력한 데이터를 url주소와 함께 서버로 전송하는 방식. 데이터 정보가 url에 노출됨
2) POST 방식 : 사용자가 입력한 데이터를 요청패킷의 body에 포험시켜 외부에 노출되지않도록 전송하는 방식
POST방식의 데이터가 제대로 전송된건지 확인하는 방법
페이지에서 request가 발생하면(다른페이지로 이동) 네트워크적으로 변화가 생기는 것인데개발자툴에서 네트워크가 변경이 됐는지 확인할 수 있다.
Network>Headers>Form Data에서 전송된 데이터를 확인 할 수 있음
input
전송할 데이터를 입력하는 태그입니다.
type
문자열 입력 형식을 결정하는 속성
type="password": 비밀번호가 *로 대체되어 비밀번호를 입력type="date": 날짜 선택이 가능한 달력형식의 입력창type="submit": 데이터 전송type="reset": form에 입력된 모든 데이터를 삭제type="radio": 라디오버튼. 선택된 객체의 value값을 파라미터로 전송. name이 같으면 같은 그룹으로 묶여서 중복선택 불가능.type="checkbox": 같은 name의 체크박스는 배열방식으로 체크한 모든 value의 값이 파라미터로 전송됨.type="file": 파일을 선택해서 입력
name
변수이름을 설정하는 속성. 데이터를 받는 쪽에서 데이터를 분별하기 위해 사용하는 파라미터 이름.
required
필수로 입력받아야하는 데이터에 쓰는 속성
checked
radio나 체크박스에서 사용하는데 기본값이 체크된 상태를 만들 수 있어요.
select
<select name="coffee">
<option>아메리카노</option>
<option>라떼</option>
<option>카라멜마끼아토</option>
</select> select를 사용해서 드롭박스를 만들 수 있어요.
label
<label for="name">이름</label>
<input id="name" type="text" name="name">label을 눌러서도 입력이 활성화되게끔 하기위해 사용하는데 그러려면 label과 input이 연결되어 있어야 하기 때문에 for과 id를 같은 이름으로 지정해 연결합니다.
CSS
Cascading Style Sheet
<style type="text/css"></style>
CSS 적용하는 방법
- Inline Style : HTML 태그 안에서 스타일 속성 설정
- Internal Style :
<head>태그 안에서 스타일 요소 정의 - External Style : 외부 CSS 파일을 링크해서 적용(CSS 파일 생성해서 불러옴)
CSS 적용순서
<head>안에 넣는 순서에 따라 적용순서가 바뀜- 가장 마지막에 선언한 값이 적용됨
- 일반적으로 link 먼저 선언됨.
css 적용
h1{ background:lightgrey; }태그로 적용
#id1{}
.div1{}id로 적용할땐 클래스 앞에 #를 붙이고 클래스로 적용할 땐 클래스이름 앞에 .을 붙여야합니다.
<link rel="stylesheet" type="text/css" href="css/mystyle.css">링크로 외부css파일 적용
Selector
HTML의 요소에 접근하기 위해서 주로 선택자를 사용합니다.
1. HTML 태그 : Element, tag 선택자
2. Class : HTML 태그안에서 class 속성의 값
3. Id : HTML 태그 안에서 id 속성의 값
같은 class나 id이름을 가진 태그를 사용해서 하나의 css문으로 해당 요소들에 다 적용할 수 있어요
<div class="c2" id="i2"></div>
<div class="cls1 cls2"></div>중복 이름을 가지거나 class와 id를 두개 다 가질수도 있어요
html과 css는 정적. javascript는 동적.
