HTML 기본
HTMl
태그 등을 이용하여 문서나 데이터의 구조를 명기하는 마크업 언어
웹 표준
HTML의 기본구조
- tag :
<
와>
로 이루어진 요소 - 주석 :
<!-- 주석을 자주 사용하자 -->
태그의 요소와 속성
HTML 태그는 <열리는 태그>
와 </닫히는 태그>
로 구성된다.
<!--
<요소 속성="값">내용</요소>
<element attribute="value">content</element> -->
<a href="http://google.com">Google</a>
절대경로와 상대경로
- 절대경로 : 인터넷에 이미지를 사용할 때 주로 사용
- 상대경로
- 하위폴더로 이동 :
폴더명/파일명
- 상위폴더로 이동 :
../
으로 시작 (/
로 시작한다면 가장 최상위 폴더에서부터 시작)
- 하위폴더로 이동 :
head 태그
웹 페이지에 직접적으로 보이지 않으나, 브라우저에 정보를 제공하는 목적이다.
body 태그
<!doctype html>
<html>
<head>
<title>First HTML</title>
</head>
<body>
<h1>패스트캠퍼스 웹 프로그래밍 스쿨</h1>
<p>HTML</p>
<blockquote>처음으로 작성한 HTML문서입니다.</blockquote>
</body>
</html>
편집기 설치
- Atom
- Atom 패키지
- Emmet : HTML/CSS 코딩 생산성 향상
- less-than-slash : 자동으로 HTML태그를 닫아주는 기능
- Atom 단축기
- 텍스트 선택 후
cmd + d
하면 동일한 텍스트가 순서대로 선택 > 한번에 수정 후 esc - 맨 앞의 텍스트를 선택 후
cmd + d
>cmd + 오른쪽 방향키
하면 열의 맨 뒤에 한번에 수정 가능 - next edit point :
ctr + alt + 오른쪽 방향키
(default) oralt + 오른쪽 방향키
(custom)
- 텍스트 선택 후
블록과 인라인
요소의 형태는 Block과 Inline 두 가지로 나누어진다.
블록요소 (Block Level Elements)
블록요소는 줄바꿈이 일어나는 형태이며, 기본적으로 width가 전체 너비의 값을 가진다.
<body>
<h1>Block Level Elements</h1>
<p>h1, p, div 요소는 블록 형태</p>
<div>해당 요소에 배경색(background-color)을 지정하게 되면, 내용과 별개로 전체 너비 영역만큼을 차지한다.</div>
</body>
인라인 요소 (Inline Elements)
줄 바꿈이 없는 형태이며, 기본적으로 width가 자신의 내용만큼의 가로 너비 값을 가진다.
<body>
<strong>Inline Elements</strong>
<a href="">strong, a, span 요소는 인라인 형태</a>
<span>블록 요소는 인라인 요소를 포함할 수 있지만, 인라인 요소는 블록 요소를 포함할 수 없다.</span>
</body>
레이아웃 요소
div와 span은 오직 Block과 Inline 방식의 레이아웃을 구현하는데에 사용한다.
<h3>레이아웃 요소</h3>
<div>
<p>블록요소 내부에 <span>인라인 요소를 사용합니다.</span></p>
</div>
HTML 태그
Text tags
기본적으로 HTML 문서에는 공백은 1 space
밖에 없다.
- Headline :
<h1></h1>
- Line break :
<p>
<br>
- Horizontal rule :
<hr>
- Blockquote :
<blockquote>
- Preformatted text :
<pre>
(태그 안에 문자들이 타이핑한 형식대로 출력) - 줄바꿈 없는 텍스트 태그
- 굵게 표시 :
<strong>
(중요한 내용),<b>
(보기 좋게 굵게 표시) - 이탤릭 표시 :
<em>
(문맥상 중요한 내용),<i>
(기울여 보고 싶을 때) - 형광펜 효과 :
<mark>
- 굵게 표시 :
Image, Hyperlink Tags
- Anchor :
<a>
- href : 이동할 페이지 주소
- target : _self, _blank
- title : 마우스를 올렸을 때 보여줄 제목
- image :
<img>
- src : 이미지 경로
- alt : 대체 텍스트
- width, height : 가로/세로 크기(px단위)
Data tags
-
Ordered List :
<ol>
><li>
- Unordered List :
<ul>
><li>
- type : 1(기본값), a, A, i, I
- start : 시작할 숫자 지정
- reversed : 역순으로 표시
- Description List :
<dl>
- 개념 :
<dt>
- 정의 :
<dd>
<h3>정의 목록</h3> <dl> <dt>HTML</dt> <dd>Hyper Text Markup Language</dd> <dd>웹 페이지를 구현하는 마크업 언어이다</dd> <dt>CSS</dt> <dd>Cascading Style Sheet</dd> <dd>HTML의 형태를 지정하는 언어이다</dd> </dl>
- 개념 :
테이블 요소
테이블 기본 구조
<table>
<tr>
<th>이름</th>
<th>나이</th>
<th>점수</th>
</tr>
<tr>
<td>철수</td>
<td>23세</td>
<td>70점</td>
</tr>
<tr>
<td>영희</td>
<td>21세</td>
<td>89점</td>
</tr>
</table>
셀 병합
<!-- 가로로 셀 병합 -->
<h3>colspan</h3>
<table>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
</table>
<!-- 세로로 셀 병합 -->
<h3>rowspan</h3>
<table>
<tr>
<td rowspan="3">a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
<tr>
<td>d</td>
</tr>
</table>
열의 구조화
colgroup을 사용하여 특정 ‘열’ 또는, 특정 열의 ‘그룹’에 쉽게 속성을 줄 수 있다.
<head>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
table > colgroup {
background: #f3f3f3;
border-right: 3px double #333
}
#col1 {
background-color: red;
}
</style>
</head>
<body>
<h3>colgroup</h3>
<table>
<caption></caption>
<colgroup>
<col span="3" />
</colgroup>
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
<th>100M 달리기</th>
<th>윗몸 일으키기</th>
</tr>
<tr>
<td>홍길동</td>
<td>22세</td>
<td>남</td>
<td>15.25</td>
<td>29</td>
</tr>
<tr>
<td>황진이</td>
<td>20세</td>
<td>여</td>
<td>16.12</td>
<td>41</td>
</tr>
<tr>
<td colspan="3">참가자 평균</td>
<td>15.7</td>
<td>35</td>
</tr>
</table>
</body>
행의 구조화
<h3>행의 구조화</h3>
<!-- thead와 tfoot은 table에서 한 번만 선언 -->
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
<th>성적</th>
<th>메모</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>22세</td>
<td>남자</td>
<td>98점</td>
<td>잘생김</td>
</tr>
</tbody>
<tbody>
<tr>
<td>김춘향</td>
<td>19세</td>
<td>여자</td>
<td>99점</td>
<td>예쁨</td>
</tr>
</tbody>
<!-- 일반적으로 도표 전체의 합계나 결과를 표시 -->
<tfoot>
<tr>
<td colspan=3"">평균</td>
<td>87</td>
<td>-</td>
</tr>
</tfoot>
</table>
Form 요소
브라우저(클라이언트)에서 서버로 데이터를 전송하기 위해 사용하는 태그이다. form 태그에는 다음과 같은 속성들이 있다.
- method : 폼에서 서버로 데이터를 전송하는 방식
- get : URL에 데이터를 담아 전달
- post : URL과 별도로 전달
- action : from에서 데이터를 전송할 URL
<h3>From 요소</h3>
<form action="" method="get">
<label for="username">ID</label>
<input type="text" name="username">
</form>
input 태그
input 요소는 값을 가지거나, form에 영향을 준다.
<h3>input 태그</h3>
<form method="get">
<input type="text" id="username">
<input type="password" id="pwd">
<input type="radio" id="userradio">
<input type="checkbox" id="usercheckbox">
<input type="button">
<input type="file" id="userfile">
<input type="submit">
<!-- 초기화 -->
<input type="reset">
<!-- 서버에 전송할때, 유저에게 노출하고 싶지 않을 경우 사용 -->
<!-- file://your/path/form.html?hidden-key=hidden-value -->
<input type="hidden" name="hidden-key" value="hidden-value">
</form>
<h3>input 태그 속성</h3>
<form>
<!--
disabled : 사용할 수 없는 텍스트
readonly : 읽을 수 만 있는 텍스트
둘의 실제 동작은 동일
-->
<input type="text" value="disalbe" disabled>
<input type="text" value="readonly" readonly>
<!-- 비어있으면 전송 되지 않음 -->
<input type="text" required>
<input type="text" placeholder="비밀번호를 입력하세요">
<input type="text" size="5" placeholder="size: 5">
<input type="text" maxlength="10" placeholder="최대 10자 입력 가능">
<!-- 복수 응답이 필요할 때 checkbox 사용 -->
<input type="checkbox" checked="checked">
<!-- name 속성이 동일한 radio 타입끼리는 동시에 선택 불가능 -->
<input type="radio" id="female" name="gender" checked="checked">
<input type="radio" id="male" name="gender">
<input type="submit" value="전송">
</form>
label 태그
<h3>label 태그</h3>
<!-- label 태그 안에 form 요소를 쓰는 방식 -->
<label>ID <input type="text"></label>
<!-- label의 for 속성 값과 form의 id 속성 값을 일치시켜 그룹화 -->
<label for="username">Username</label>
<input type="text" id="username">
select 태그
<h3>select 태그</h3>
<!-- value 속성에 서버로 보낼 때 값을 지정 -->
<select name="number" id="select-id">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
<h3>select 태그 multiple 속성</h3>
<!--
기본적으로 select 요소는 option의 값을 한 개만 선택할 수 있다.
multiple 속성을 가질 경우, ctr(or cmd)키를 이용해 여러개의 값을 선택할 수 있다.
-->
<select multiple="multiple">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
<h3>select 태그 size 속성</h3>
<select size="2">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
<h3>select 태그 optgroup</h3>
<!-- option을 그룹화하여 보여준다 -->
<select>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</optgroup>
<optgroup label="Colors">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</optgroup>
</select>
button 태그
<h3>button 태그</h3>
<button type="submit">submit type button</button>
<button type="reset">reset type button</button>
<button type="button">button type button</button>
fieldset, legend 태그
<h3>fieldset, legend 태그</h3>
<fieldset>
<!-- legend는 fieldset의 가장 첫번째에 두어야 함 -->
<legend>Login</legend>
<label>username: <input type="text"></label>
<label>password: <input type="password"></label>
<fieldset>
<legend>nested fieldset</legend>
<button type="submit">Login</button>
</fieldset>
</fieldset>
클래스와 아이디 속성
속성을 만들어 사용할 수 있지만 보편적으로 class, id를 사용한다.
- class : 여러번 사용가능한 범용적인 부분을 나타냄
- id : unique한 특성을 나타냄
색상
- Hex code 사용
- 정의된 ColorName 사용