2장
이번 강의에서는 자주 사용하는 태그들을 확인했다.
강의에서 언급되는 태그들은 일단 다 외우려고 노력했지만 뭐 안외워지면 나중에 찾아보면 되겠지!
일단 정리해두고 필요할 때 마다 꺼내보자
HTML 태그 소개
종류가 다양한 만큼 의미에 맞는 태그를 사용하여 사람 뿐만아니라 브라우저가 잘 이해할 수 있도록 (시멘틱마크업) 하는 것이 매우 중요하다
대부분의 웹페이지들은 실제 20~30개의 태그만 사용한다고 하니
많이 쓰이는 태그들은 잘 정리하고 부족한 부분은 그때그때 찾아서 사용하며 익히자
제목과 단락 요소
- h1~h6 태그
<h1>역사</h1>
<h2>개발</h2>- Paragraph 태그
<p> ... </p>- 개행 태그
<br> 빈태그 사용하기
혹은 <p></p> 로 개행하기텍스트를 꾸며주는 요소
- 의미가 없는 표현용 태그들임
다만 i 는 단순 표현용 태그에서 의미를 가지는 태그로 변경되었음
특정 이유(기술적인 용어, 외국어 문구, 소설 속 인물의 생각 등...) 을 다른 글자들과 구분하기 위해서 사용한다는 것을 알고있자
<b>bold</b>, <i>italic</i>, <u>underline</u>, <s>strike</s>시멘틱 마크업 : 의미를 잘 전달하도록 문서를 작성하는 것
정보를 얼마나 잘 구조화 하느냐는 html을 배우면 계속 따라다닐 숙제일것이다. 시멘틱 Semantic은 기계(브라우저, 컴퓨터)가 잘 이해할 수 있도록 하는 것이다. 이는 적절한 요소를 사용하는 것에서 시작하기에 정해진 약속을 잘 지키면 되는 것이다.
구체적으로 마크업 할 때에는 의미에 맞는 태그, 요소를 사용하는 것이고
문서를 표현할 때에는 구조화를 잘 해주면 된다.
정해진 약속대로 코드를 작성하게 되면 기계 뿐만아니라 사람도 이해하기 쉬운 코드가 된다.
다음 왼쪽의 태그와 오른쪽의 태그를 비교하며 시멘틱마크업을 이해하고 넘어가자
<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>
<!-- 잘 이해하자. 이 둘을 실행하면 "같은 모습"으로 출력되나
실제로는 그 의미가 다르다.
우리의 눈으로는 같아 보이지만 브라우저는 이 두 태그를 다르게 이해하는 것이다!! -->앵커 요소
HTML 의 HT(HyperText)는 링크를 의미하며 그 링크를 만드는 태그를 앵커 태그 라고한다.
앵커 태그를 이용해 다른 페이지로 이동하거나 현재 페이지 내에서 특정 위치로 초점을 이동시킬 수 있다. HTML의 가장 큰 특징이 되는 태그이며 그만큼 중요하고 자주 사용되는 태그이다
<a></a> : 앵커태그, a태그, 앵커, 링크 등 여러 이름으로 불림- href 속성 : 링크를 만들기 위해 반드시 href(hypertext reference) 속성을 가지고 있어야 한다. href 속성 값은 링크의 목적지가 되는 URL이다
- target 속성 : 링크된 소스를 어디에 표시할지 나타내는 속성
_self, _blank, _parent, _top 이 있다
_self 는 현재 페이지에 표시 / _blank는 새 페이지 혹은 새 탭에 표시
나머지 둘은 프레임이라는 특정 조건에서만 작동하고 요즘 프레임을 잘 안쓴다고한다
<a href="http://www.naver.com/" target=_blank>네이버</a>- 내부링크 : 앵커를 이용할 때 href 속성 값에 #와 페이지 내 요소의 id 값을 적으면 된다. 이때 요소의 id 값도 물론 내가 설정해주는 것이다
<!--페이지 최상단으로 옮겨주는 리모컨-->
<h1 id="page-top-id">페이지 최상단</h1>
...
<a href="#page-top-id">최상단으로 이동하기</a>의미가 없는 컨테이너 요소 (NonSemantic Tag)
웹이 발전하며 현재의 웹페이지는 본래 HTML의 목적인 문서 형태보다는 시각적으로 정보를 표현하는 방향으로 많이 발전했다
애초에 문서를 위한 언어였던 HTML은 대부분의 태그들이 문서에 적합한 의미를 갖고있고 이런 태그들로는 현재의 다양한 콘텐츠를 표현하기에 부족한 부분이 있다
태그 자체에는 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그다
스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 사용된다
HTML 버전이 업그레이드 되며 웹에 알맞는 태그들이 많이 생겼지만 이런 의미없는 태그는 여전히 빈번하게 사용된다
<div></div> 태그와 <span></span> 태그는 가장 대표적으로 많이 쓰이는
의미 없는 태그다리스트 요소
- li : 리스트 태그
- ul : Unordered List
<ul>
<li>암벽화</li>
<li>초크백</li>
<li>그랜즈레미디</li>
</ul>- ol : Ordered List
<ol>
<li>1. 문제를 확인한다</li>
<li>2. 루트파인딩을 한다</li>
<li>3. 시도한다</li>
</ol>- dl : Description List, Definition List
<dt></dt> : definition term으로 용어를 구분하는 태그다
<dd></dd> : definition description으로 용어의 정의를 나타낸다
<dl>
<dt>리플리 증후군</dt>
<dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 ...</dd>
<dd>리플리 증후군의 또다른 설명 ... </dd>
<dt>피그말리온 효과</dt>
<dd>타인의 기대나 관심으로 인하여 ...</dd>
<dt>언더독 효과</dt>
<dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl> 당연하지만 리스트도 중첩이 된다
<h1>월드컵 조 편성</h1>
<ol>
<li>
<h3>A조</h3>
<ul>
<li>러시아</li>
<li>우루과이</li>
<li>이집트</li>
<li>사우디아라비아</li>
</ul>
</li>
<li>
<h3>B조</h3>
<ul>
<li>이란</li>
<li>스페인</li>
<li>포르투갈</li>
<li>모로코</li>
</ul>
</li>
<li>
<h3>C조</h3>
<ul>
<li>프랑스</li>
<li>덴마크</li>
<li>호주</li>
<li>페루</li>
</ul>
</li>
</ol>이미지 요소
문서에 이미지를 삽입할 수 있는 img 태그
<img src="./HTML logo.jpeg" alt="로고">- img 자체는 빈 태그이다.
- src : 필수속성임 source 즉 이미지 경로 설정
- 상대경로 : 현재 웹 문서의 페이지, 폴더를 기준으로 나타내는 경로
./(현재폴더) or ../(상위폴더) or ../../ or folder/ 와 같이 사용 - 절대경로 : 어떤 파일에서 불러오던 상관없이 불러오는 경로
C:// or http://
- 상대경로 : 현재 웹 문서의 페이지, 폴더를 기준으로 나타내는 경로
- alt : alternate 즉 이미지의 대체 텍스트 설정 (필수라고 생각하기)
- width / height : 이미지의 크기를 지정. 보통 CSS를 통해 유동적으로 조절하지만 고정된 사이즈라면 이 속성을 활용하는 것이 효율적임
이미지 별 차이점 간단하게 알고가기
gif : 256색으로 제한적이지만 용량이 작고 애니메이션과 투명 이미지가 가능
jpg : 높은 압축률과 자연스러운 색상 표현, 가장 일반적임, 투명지원x
png : jpg와 비교했을 때 이미지 손실이 없고 투명과 반투명 모두 지원
테이블 요소
데이터를 표로 나타낼 때 사용하는 태그이다
가로 : 행, row
세로 : 열, column
td, th : 데이터 셀(table-cell) 태그. 제목 행의 셀을 나타낼 때에는 th 쓰기
tr : 행(table-row) 태그 표는 가로로 그리는 것이라고 이해하기.
<table>
<tr>
<td></td><td></td><td></td><td></td> 2행 4열 을 그려봄
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
</table>- 테이블 구조 관련 태그들 :
<caption></caption> : 표의 제목
<thead></thead> : 제목 행을 그룹화
<tbody></tbody> : 본문 행을 그룹화
<tfoot></tfoot> : 바닥 행을 그룹화- 테이블 관련 속성 :
colspan : 셀을 가로 방향으로 병합
rowspan : 셀을 세로 방향으로 병합
수동으로 개수를 세서 써줘야함
표를 그리기 전 병합되기 전의 행과 열의 개수를 확인하자.
<table>
<caption> Monthly Savings </caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td rowspan="2">$100</td>
</tr>
<tr>
<td>February</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Sum</td>
</tr>
</tfoot>
</table>- col 태그
- colgroup 태그
- scope 속성
- headers 속성
폼 요소 (FORM)
서버에 데이터를 전달하기 위한 요소들
사용자로부터 데이터를 받아야 하는 경우 사용되는 요소들을 폼 요소라고 한다
- input 요소 : 대표적인 폼 요소로 빈 요소이다. 다양한 type 속성으로 여러 종류의 입력 양식으로 나타난다
- type="text"
- placeholder="" : 양식 가이드 텍스트 옆에 씀
- type="passowrd"
- type="radio" : 선풍기 버튼처럼 하나를 누르면 나머지가 올라옴. 구글 폼 투표 생각하면될듯 남/녀 등 상호배타적인 항목들에 사용
- name="" : 네임으로 명시를 해줘야 같은 레벨의 선택지인 것을 알 수 있음
- checked : 기본으로 체크돼서 나옴. True로 기본값 된 상태
type="checkbox" : 중복으로 체크 가능, 예를들어 관심사나 취미 체크할 때
- name="" : 네임으로 명시를 해줘야 같은 레벨의 선택지인 것을 알 수 있음. 라디오버튼과 체크박스를 그룹화시켜주는 속성
- checked : 기본으로 체크돼서 나옴. True로 기본값 된 상태. 값이 별도로 존재하지 않는 boolean 속성 - type="file" : 파일 업로드
- type="submit" : 값을 서버에 제출
- type="reset" : 페이지의 값들을 초기화
- type="button" : 아무런 기본 동작이 없는 빈 버튼. 개발자가 커스텀해서 사용
위의 버튼들은 value="" 으로 이름 변경 가능. - type="image" : submit과 동일하게 작동. 단지 사진을 버튼에 입력할 수 있음. 사진이기에 src와 alt 속성이 필요함 width height 물론 사용가능
- type="text"
- select 요소 : 선택 목록 상자(콤보박스)
<select>
<option>1</option>
<option>2</option>
<option selected>3</option> : checked와 동일한 기능
</select>- textarea 요소 : 여러 줄 텍스트 입력 상자
<textarea>
...
</textarea>
cols, rows 속성 있음, 박스 크기 조절 ,값은 한 줄에 들어가는 글자의 수
텍스트 상자이기에 placeholder도 가능- button 요소 : 사용자가 클릭 가능한 버튼
<button type=""> ... </button> 버튼 태그는 빈 태그가 아님
VS
<input type="submit | reset | button">
위는 사용자가 값을 입력하는 폼 요소들이며 밑은 그 외적인 태그들이다
- label 요소 : 폼 컨트롤과 연결 시켜주기 위하며 웹 접근성 향상에 도움이 된다 (필수적)
화면에는 별 차이 없어보이지만 실제로는 요소들이 연결된 상태이다!
<label for="userid"> 아이디 : </label> <input type="text" placeholder="영문으로만 써주세요" id="userid"><br>- fieldset 요소, legend 요소 : 폼 요소들을 구조화하기 위해 필요한 태그들
fieldset 태그는 그룹화 해주는 태그이며 legend 태그는 묶인 그룹의 이름을 지정해주는 태그이다
<fieldset>
<legend>기본 정보</legend> 주의점은 자식요소중 가장 먼저 선언해야하는 요소라는 것
...
</fieldset>폼 단원에서 내가 여태까지 배운 요소들을 다 사용한 전체 예문이다
<form action="/test.html">
<h1>Form 관련 요소</h1>
<fieldset>
<legend>필수 정보</legend>
<label for="userid">아이디 : </label> <input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
<label for="userpw">비밀번호 : </label><input type="password" id="userpw"><br>
성별 : <label for="man">남자 </label><input type="radio" name="sex" checked id="man">, <label for="woman">여자 </label><input type="radio" name="sex" id="woman"><br>
</fieldset>
<fieldset>
<legend>부가 정보</legend>
취미 : 영화감상 <input type="checkbox" name="hobby" checked>, 운동 <input type="checkbox" name="hobby">, 독서 <input type="checkbox" name="hobby"><br>
프로필 사진 업로드 : <input type="file"><br>
<input type="submit" value="전송"><br>
사는 지역 : <select>
<option>서울</option>
<option>경기</option>
<option>인천</option>
<option selected>제주</option>
</select><br>
자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해 주세요"></textarea><br>
</fieldset>
<button type="submit">버튼요소 전송</button><br>
<button type="reset">버튼요소 취소</button><br>
<input type="reset" value="취소"><br>
<input type="button" value="등록"><br>
<input type="image" src="./HTML logo.jpeg" alt="전송" height="50" width="50">
</form>FORM 요소
폼 데이터를 그룹화하여 서버에 전송한다
<form action="..." method="...">
...
</form>- action : 폼 데이터를 처리하기 위한 서버의 주소 .... 묶는 이유다. 각각 필요한 곳으로 전송하기 위해서 묶는것
- method : 데이터를 전송하는 방식을 지정 어떻게 전송 ?(get,post)
get은 내가 보내는 url에 정보가 보이고
post는 url에 정보가 안보인다. 개인정보는 이렇게 넘겨야겠지 ?
이처럼 큰 차이가 있음.
끝.
