1. 글자관련태그
<h1>~<h6> h1부터 글자 숫자가 올라갈 수록 글자 크기가 작아짐
<h3 style="color:hotpink;"> 이런식으로 색깔 변경 가능
<strong, em> 글자 굵기와 기울기 조정가능
<mark> 형광팬효과
<u> 밑줄긋는 태그
<s> 글자 가운데 선을 긋는 태그(취소선)
<del> 글자 가운데 선을 긋는 태그(삭제선)
<abbr title="Hyper Text Markup Language">HTML</abbr> 마우스 오버 시 툴팁 표시
2. 목록관련태그 <ul> unodered list 순서가 없는 목록 태그 <li> list item 목록의 한줄 <ol> ordered list 순서가 있는 목록 type 속성 -> a, A, i ,I 차례대로 영어 소문자, 대문자, 로마 소문자, 대문자ex)<ol type="i" start="1" reversed> 이런식으로 응용가능
3. 표관련태그 <thead>, <tbody>, <tfoot> 이 있음 머리 몸통 다리 ex)#tb2 thead{background-color: yellow;} 이런식으로 색넣기 가능 <tr> table row 행 태그 <td> table date 열 태그 <th> table header 태그 - 테이블의 제목 또는 내용 강조시, Bold+가운데정렬
<caption> 테이블에 대한 설명 작성 태그 <thead> 테이블 상단 영역 - 컬럼 제목 <tbody> 테이블 중단 영역 - 값 작성 <tfoot> 테이블 하단 영역 - 합계, 총합 <rowspan> 행이 쌓인 방향(세로) 병합 <colspan> 행이 나열된 방향(가로) 병합 tr>td*5{5}
4. 이미지관련태그
<src> 삽입할 이미지의 경로를 작성하는 속성(파일위치, 인터넷주소)
<width/height> 너비/높이
<alt> 이미지 설명 작성하는 속성(이미지가 출력되지 않을 경우, 화면에 대신출력)
ex)<img src="image/cats/cat1.jpg" alt="고양이 1번 이미지" width="400px" height="240px"> 이런식으로!5. 영역관련태그
.red{
background-color: red;
}
class 속성 값이 red인 요소의 배경색을 red로 지정
block 형식 요소 - 화면을 수직분할, 사각형 형태도 영역을 지정
요소 종류 - h1~h6, p/pre, hr, div(영역 분할), 시맨틱 태그(div태그에 이름 추가한태그)
inline 형식 요소 - 화면을 수평분할, 작성된 내용 단위로 영역을 지정
요소 종류 - b, i, strong/em, mark, span(영역 분할)
위 둘을 섞은 형식 = inline-block 대표적인 태그 : img, iframe
ex)<img src="images/cats/cat2.jpg" width="300px" height="240px">
<iframe src="06_이미지관련태그.html" width="600px" height="800px" frameborder="1"></iframe>
6. 하이퍼링크관련태그
href : 연결할 주소를 작성하는 속성
target = "_blank 새 탭으로 열기
<a href="01_글자관련태그.html"> 글자 관련 태그 </a>
<img src="images/dogs/dog2.jpg">
7. 입력관련태그
input 태그
웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그
다수의 typle이 존재하고 input이 변형된 태그도 존재
input 태그에는 name이라는 속성을 작성 할 수 있다.
type="text", "password", "search", "tel", "email"
아이디 : <input type="text"> <br>
비밀번호 : <input type="password" id="pw"> <br>
주소 : <input type="url"> <br>
검색 : <input type="search"> <br>
전화번호 : <input type="tel"> <br>
이메일 : <input type="email"> <br>
숫자 입력 : <input type="number"
min="0"
max="100"
step="10"
value="50">
여러 연관된 값을 묶어서 선택하는 경우에 사용하는 type
- radio : 여러 값 중 하나만 선택
- checkbox : 여러 값 중 원하는 값 모두 선택
* radio/checkbox 는 하나의 input으로 값을 결정하는 것이 아닌
여러 input으로 값을 결정하기 때문에
여러 input이 하나의 그룹임을 명시
-> name 속성 값을 이용!!! (name이 같으면 같은 그룹)
*radio/checkbox는 값을 별도로 입력할 수 없기 때문에
value 속성을 이용해 기본 값을 지정해놔야 한다!!
A팀 <input type="radio" name="team" value="에이">
<br>
B팀 <input type="radio" name="team" value="비">
<br>
C팀 <input type="radio" name="team" value="씨">
RED <input type="checkbox" name="colors" value="red">
<br>
GREEN <input type="checkbox" name="colors" value="green">
<br>
BLUE <input type="checkbox" name="colors" value="blue">
<br>
- 입력 관련 태그(input)의 제목을 나타내는 태그다
- 사용법 1 : label 태그 내부에 입력 관련 태그를 하나 작성하면
label 태그를 클릭했을때
입력 관련 태그를 클릭한 효과를 볼 수 있다
- 사용법 2 : 입력 관련 태그의 id 속성 값을
label 태그의 for 속성에 똑같이 작성하면
label - input 연결되어짐
<h4>사용법 2</h4>
1번 <input type="checkbox" name="numbers" value="1" id="check1">
2번 <input type="checkbox" name="numbers" value="2" id="check2">
3번 <input type="checkbox" name="numbers" value="2" id="check3">
4번 <input type="text" id="check4">
- select : 클릭하면 밑으로 메뉴가 내려오는 입력태그(드롭 다운)
- option : select 클릭 시 보여지눈 메뉴(값)를 작성하는 태그--
* seleck는 input의 name 역할
option은 input의 value 역할
<select name="menu">
<option>국밥</option>
<option>포케</option>
<option>샌드위치</option>
<option>라면</option>
</select>
type="color" : 색을 선택해서 입력할 수 있는 타입
type="file" : 파일을 선택할 수 있는 버튼 추가 타입
type="hidden" : 존재는 하지만 화면에 보이지 않는 타입
<input type="color">
<br>
<input type="file">
<br>
<input type="hidden" value="숨겨진 값">
8. 폼관련태그
- 입력 양식을 작성하는 판(영역)
- 내부에 작성된 입력 값을
지정된 경로로 제출하는 역할
[속성]
1) action : 제출될 곳을 지정하는 속성(주소를 작성)
2) method(방식) : 설정된 곳으로 데이터를 전달하는 방식
3) name : 이름 지정하는 속성(JS 사용)
4) target : 제출된 페이지를 현재/새 탭으로 열기
<form action="result.html" method="GET">
<!-- input의 name은 제출되는 값의 이름(key) 역할 -->
ID : <input type="text" name="id">
<br>
PW : <input type="password" name="pw">
<button type="submit">제출하기</button>
</form>
fieldset : 테두리를 만들어 영역을 나누는 용도의 태그
주로 form 태그 내부에서 입력 값을 구분하는 용도로 사용
legend(제목) : fieldset의 제목 역할을 하는 태그
<fieldset>
<legend>필수 입력 사항</legend>
아이디 : <input type="text" name="id">
<br>
비밀번호 : <input type="password" name="pw">
</fieldset>
<fieldset>
<legend>선택 입력 사항</legend>
나이 : <input type="number" name="age">
<br>
주소 : <input type="text" name="adress" size="50">
</fieldset>
<button type="submit">회원 가입</button>
<button type="reset">초기화</button>
<button type="button" onclick="alert('버튼 클림됨')">버튼</button>
</form>
- 버튼을 만드는 태그
- type 속성 값에 따라서 동작이 달라짐
type="submit" : 제출 버튼을 만들 때 사용
(button 태그의 기본 값
== type 속성을 작성하지 않으면 자동으로 submit 지정)
type="reset" : 버튼이 포함된 form태그의 모든 입력 값을 초기화
type="button" : 아무런 기능이 없는 버튼
-> JS에서 기능을 추가하는 용도의 버튼