HTML 기초
- index.html은 웹상 특정 폴더의 기본 페이지인다.
- <body> 태그 안에 내용을 작성한다.
- 태그란 "이 요소는 ~~이다"를 알려준다.
<여는 태그> 내용 </닫는 태그>
<여는 태그>
내용
</닫는 태그>태그는 위와 같이 사용한다
<태그>
<태그/>내용 없이 사용되는 태그는 위처럼 단독으로 써도 된다.
<h1>~<h6>
제목 태그로, 숫자가 높을수록 글씨가 작다.
<p>
문단 태그로, 각각 줄바꿈이 된다.
<br>
줄바꿈 태그로, 닫는 태그가 필요없다. 단 남용하지 않는 것이 좋다
<hr>
가로줄 태그로, 닫는 태그가 필요 없다
공백을 나타낸다
<!-- 내용 -->
주석이다. 개발자에게만 보이는 텍스트 이다.
<b>
단순히 글씨를 굵게 만드는 태그이다.
<strong>
글씨를 굵게 만들면서 내용이 중요하다는 의미까지 담고 있다.
<i>
단순히 글자를 기울이는 태그이다.
<em>
글자를 기울이면서 추가로 강조하는 역할까지 한다.
<u>
철자 오류 표시 태그이다. (이전에는 밑줄 용도)
<s>
취소선 표시 태그이다
<mark>
노란색으로 강조되는 태그이다.
<u>,<s>,<mark>는 css와 병행해서 사용한다.
[목록 표시 태그]
<ul>
순서로서의 의미를 가지지 않을 때 사용하는 리스트 태그이다.
<ol>
순서가 필요할 떄 사용하는 리스트 태그이다.
<ul>,<ol>의 1촌 자식은 오직 <li>태그만 가능하다.
<ol>태그에 type="A" start="3" 속성을 적용하면
알파벳 대문자로 표시되며, C부터 시작한다.
[용어 정의 나열]
<dl>
<dt>용어</dt>
<dd>정의</dd>
</dl><dt> : <dd>는 1:1 또는 n:n 가능
[이미지]
<img src=“경로” alt=“대체 텍스트” title=“툴팁 텍스트” width=“픽셀 단위 정수(넓이)” height=“픽셀 단위 정수(높이)”>title은 alt의 대체제이나, alt와 반복해서 사용하면 안좋다
width, height 속성 중 하나만 값을 적용하면 그에 맞게 비율이 맞춰진다.
[표 사용하기]
<table> 테이블
<tr> 테이블의 행
<th> 열 또는 행의 헤더부분
<hd> 테이블의 데이터 셀
<!-- ex) -->
<tabel>
<tr>
<th> 1행 1열 </th>
<th> 1행 2열 </th>
<th> 1행 3열 </th>
<th> 1행 4열 </th>
</tr>
<tr>
<th> 2행 1열 </th>
<td> 2행 2열 </td>
<td> 2행 3열 </td>
<td> 2행 4열 </td>
</tr>
<tr>
<th> 3행 1열 </th>
<td> 3행 2열 </td>
<td> 3행 3열 </td>
<td> 3행 4열 </td>
</tr>
</table>
<thead> 테이블의 헤더 부분
<tbody> 테이블의 본문
<tfoot> 테이블의 푸터 부분
시멘틱 태그 느낌
[th,td 속성]
row 열
rowspan 같은 열 안의 행들을 병합시킨다. 행 병합. 즉 세로 통합
col 행
colspan 같은 행 안의 열들을 병합시킨다. 열 병합. 즉 가로 통합
+ <table>는 표 용도로만 사용해야한다.
[<a>를 사용한 링크]
<a href="(연결할 주소)" target="(링크를 열 곳 옵션)">target의 속성
_self 현재창(디폴트)
_blank 새창
href값에 #(id값)을 넣음으로써 특정 요소로 이동이 가능하다
[사용자로부터 입력 받기]
<form>태그 안에는 입력요소들, 버튼 등이 들어간다.
<label>의 for 속성과 <input>의 id속성을 같게 해서 연결시킨다.
[<button type="">]
type="submit" 정보를 보낸다.
type="reset" 정보를 초기화한다.
type="button" 버튼 고유의 기능을 사용하지않음. js를 통해 기능을 추가할 때 사용
<fieldset>을 통해 <label>,<input>을 묶을 수 있고,
<legend>를 통해서는 fieldset의 제목을 지을 수 있다.
<fieldset>을 사용해 원하는 것들을 그룹으로 묶어서
disabled 속성 등을 넣을 수 있음. disabled 속성은 포함된 요소를 비활성화는 속성
[<input> 태그의 타입과 속성들]
<input type="text">는 가장 기본적인 속성이다.
placeholder
빈칸에 나타날 안내 메세지를 넣을 수 있음
maxlength = "5" 최대 5글자까지 입력 가능
minlength = "4" 최소 4글자 이상 입력 가능
type="tell"
모바일에서 클릭했을 때 자동으로 숫자가 나옴
type="number"
숫자만 넣을 수 있음
type="range"
슬라이드바, js와 결합해서 최소,최대 등의 기능을 추가로 사용
min,max로 최대 최소 조정하며, step을 통해 단계 설정
ex) min ="0" max="100" step="20"
0~100까지의 범위 중 20씩 5칸을 넘길 수 있음
type="date"
달력이 나옴
type="checkbox"
label을 input뒤에 사용한다.
checked을 통해 체크됨 여부를 설정 가능
type="radio"
한 그룹으로 묶어서 하나만 선택할 수 있게 하려면
같은 name 속성을 지정해줘야함
checkbox 또는 radio의 value 속성
서버로 실제로 넘겨질 값을 말함
(input의 value 속성과 헷갈리지 말자)
type="file"
파일을 첨부할 수 있다.
accept="image/png" 처럼 허용 파일 지정 가능
명시하지않으면 모든 파일
type="email"
이메일 형식만 작성 가능
[input 요소 공통 속성]
value=""
기본적으로 입력되는 값이나, placeholder와는 다름
placeholder는 전송되는 값이 아니라 안내 문구,
value는 전송될 수 있는 값
autofocus
페이지를 새로고침했을 때, 이 속성이 있는 input이 자동 선택됨
readonly
input 박스의 값을 읽기만 가능하고, 입력할 수 없음. 단 전송은 가능
disabled
input 박스의 값을 읽기만 가능하고, 입력할 수 없음. 전송도 불가능
required
input에 값을 필수로 입력해야함
<textarea>
글쓰기의 본문처럼 여러 줄 이상을 받아올 때 사용
cols : 글자수 단위의 너비(기본값 20)
rows : 표시되는 줄 수(표시가 될 뿐 그 이상으로 작성 가능)
<select>
<select>
<option value=“1” selected> 1 </option>
<option value=“2”> 2 </option>
</select>셀렉트 박스를 만든다. value는 서버로 전송될 값을 말한다.
selected를 사용하면 기본적으로 선택됨
[정도를 표현하는 태그]
<progress>
진행바를 표시한다. js와 연계해서 사용한다.
max="" 최대치를 표현
value ="" 값을 표시, 50을 넣으면 50만큼 찬다
<pre>
br태그등의 줄바꿈을 사용하지 않아도 그대로 보여줌
단, css등의 효과를 적용할 때 무리가 있기에 잘 사용하지않음
<iframe src="">
웹사이트 안에 또 다른 웹사이트를 넣을 수 있음
보안상 위험, 사용성 저하, 검색 최적화 제한, 브라우저 무리등의 이유로 권장되지않음.
<span>,<div>
특별한 기능이 없는 컨텐츠 주머니이다.
<span>은 inline요소, <div>는 block 요소
<strong>,<em>,<a>에서 기능만 빼면 <span>
<h1~6>,<p>,<ul>에서 기능만 빼면 <div>