html tag

기능요소 (링크, 이미지)

a 앵커(anchor)

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
  • “a” 태그는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼 링크를 정의합니다.
  • “a” 요소의 가장 중요한 속성은 링크의 목적지를 나타내는 href 속성입니다.
  • 기본적으로 링크는 모든 브라우저에서 다음과 같이 나타납니다.
  • 방문하지 않은 링크에는 밑줄이 그어져 파란색으로 표시됩니다.
  • 방문한 링크에 밑줄이 그어지고 자주색입니다.
  • 활성 링크에는 밑줄이 그어지고 빨간색으로 표시됩니다.
a:link, a:visited { 
    color: (internal value);
    text-decoration: underline;
    cursor: auto;
}

a:link:active, a:visited:active { 
    color: (internal value);
}
  • 텍스트나 이미지에 링크를 설정할때 사용.
  • 인라인 요소
  • href : 이동할 주소
  • target : 페이지를 띄울 타겟 (_blank:새창, _self:현재창)
  • alt : 대체 텍스트
  • title : 말풍선 텍스트

img 이미지(Image)

  • 이미지 태그는 HTML페이지 내에서 이미지를 표시할때 사용합니다.
  • 이미지 태그는 src와 alt 속성을 필요로 합니다.
  • 대체 텍스트
  • src : 이미지 주소
  • alt : 대체 텍스트
  • title : 말풍선 텍스트
  • width : 그림 넓이
  • height : 그림 높이

이미지를 버튼으로 사용하기

<a href="링크주소"><img src="이미지주소" /></a>

문단관련 요소 (제목, 단락, 줄바꿈, 구분선)

h1~h6

 <h1>제목1</h1>
 <h2>제목2</h2>
 <h3>제목3</h3>
 <h4>제목4</h4>
 <h5>제목5</h5>
 <h6>제목6</h6>
  • “h1”에서 “h6” 태그는 HTML 제목을 정의하는 데 사용됩니다.
  • “h1”은 가장 중요한 제목을 정의합니다. “h6”는 가장 중요하지 않은 제목을 정의합니다.
 <h1>대한민국</h1>
     <h2>서울시</h2>
         <h3>영등포구</h3>
             <h4>여의도동</h4>
         <h3>마포구</h3>
     <h2>경기도</h2>
         <h3>안양시</h3>
         <h3>수원시</h3>
     <h2>강원도</h2>
 <h1>미국</h1>
 <h1>일본</h1>
 <h1>중국</h1>

p 문단(paragraph)

 <p>글자가모여서 단어, 단어가 모여서 문장, 문장이 모여서 문단을 이룹니다.</p>
  • “p” 태그는 단락을 정의합니다.
  • 브라우저는 각 “p” 요소 앞뒤에 약간의 여백 (여백)을 자동으로 추가합니다. 여백은 CSS로 수정 될 수 있습니다 (마진 속성 포함).
  • “글을 읽다 보면 문장이 몇 개 이어지다가 행(行)이 바뀌는 것을 볼 수 있다. 행을 바꾸는 것은 거기에서부터 새 이야기가 시작된다는 것을 시각적으로 알려 독자들에게 이해를 돕기 위해서다.” 단락 쓰기에 대해

줄바꿈

  • 단락에서 강제로 줄바꿈 할때
  • 빈 요소 (empty element)
  • 종료태그 </br> 가 없음

구분선 <hr />

  • 수평선으로 표현되어 구분선 역할
  • 빈 요소(empty element)
  • 종료태그 </hr>가 없음
  • 텍스트 브라우저나 CSS가 제공되지 않는 환경에서 구조적 구분을 표현할 수 있다.

텍스트관련 요소 (강조, 추가, 삭제, 첨자)

강조 strong, em

<strong>굵은 글씨로 표시</strong>
<em>기울어진 글씨</em>
  • <b>, <i> 사용하지 않음

추가글, 삭제글 ins, del

<ins>텍스트의 아래쪽에 밑줄 표시</ins>
<del>텍스트의 중간에 가로줄 표시</del>
  • <u>,<strike> 사용하지 않음

첨자 sup, sub

2<sup>3</sup>
H<sub>2</sub>O
  • 윗첨자(superscript) - sup - 제곱수 등을 표현할때 사용 - 23
  • 아랫첨자(subscript) - sub - 화학식 등을 표현할때 사용 - H2O

목록요소 (비순서형, 순서형, 정의형)

비 순서형 목록 ul

  • (ul : Unordered List) (li : List)
  • 절차적이지 않은 (순서에 관계없는) 리스트를 작성할때 사용합니다.
  • 여러 항목을 나열하는 형태를 가지고 있습니다.
 <ul>
 	<li>리스트1</li>
 	<li>리스트2</li>
 	<li>리스트2</li>
 </ul>

순서형 목록 ol

  • (ol : Ordered List) (li : List)
  • 절차적인 (순서에 관계 있는) 리스트를 작성할때 사용합니다.
  • 순차적인 프로세스를 표현하기에 적합합니다.
 <ol>
 	<li>리스트1</li>
 	<li>리스트2</li>
 	<li>리스트2</li>
 </ol>

정의형 목록 dl

  • (dl : Difinition List) (dt : Defines a term 용어) (dd : Defines a description 서술)
  • 용어의 정의 부분과, 용어에 대한 설명부분으로 나뉘어져 있습니다.
  • 단순히 정의형 목록만이 아니라 주종관계가 성립되는 콘텐츠에 광범위하게 사용됩니다. (dt : 주, dd : 종)
 <dl>
 	<dt>용어1</dt>
 	<dd>설명1</dd>
 	<dt>용어2</dt>
 	<dd>설명2</dd>
 </dl>

목록 사용 예시

<h1>커리(Curry) 만들기</h1>
<h2>재료</h2>
<ul>
	<li>카레가루 100g</li>
	<li>닭 가슴살 200g</li>
	<li>감자 1개</li>
	<li>양파 1/2개</li>
	<li>당근 1/2개</li>
</ul>
<h2>만드는 방법</h2>
<ol>
	<li>카레 가루 8큰술에 물 6큰술을 넣어 풀어 놓는다.</li>
	<li>닭가슴살, 감자, 양파, 당근을 따로 중불에 살짝 볶는다.</li>
	<li>볶아 놓은 재료를 카레를 풀어놓은 물과 함께 냄비에 넣고<br>
	 물 2컵을 부은 후 15분 정도 끓인다.</li>
</ol>

<dl>
	<dt>커리(Curry) 만들기</dt>
	<dd>
		<dl>
			<dt>재료</dt>
			<dd>
				<ul>
					<li>카레가루 100g</li>
					<li>닭 가슴살 200g</li>
					<li>감자 1개</li>
					<li>양파 1/2개</li>
					<li>당근 1/2개</li>
				</ul>
			</dd>
			<dt>만드는 방법</dt>
			<dd>
				<ol>
					<li>카레 가루 8큰술에 물 6큰술을 넣어 풀어 놓는다.</li>
					<li>닭가슴살, 감자, 양파, 당근을 따로 중불에 살짝 볶는다.</li>
					<li>볶아 놓은 재료를 카레를 풀어놓은 물과 함께 냄비에 넣고<br>
						물 2컵을 부은 후 15분 정도 끓인다.</li>
				</ol>
			</dd>
		</dl>
	</dd>
</dl>

테이블 요소 (구성, 병합, 제목, 요약문, 그룹화, 연관성)

Structured:구조화된

  • 구조화된 정보의 대표적인 사례는 표(table)라고 할 수 있다. Microsoft EXCEL
  • 정보를 구조화 함으로써 정렬, 검색, 필터링이 가능하게 됨
서술적인 정보 : 철수는 초등학교 4학년이고 부산에 살고있는 남자아이이다. 장래희망은 과학자이다. 영희는 철수보다 2살어린 동생이고 화가가 되고 싶어한다. 영수는 만화가가 꿈이고 서울에 살며 8살이다.

이름 나이 성별 주소 장래희망
철수 12 남 부산 과학자
영희 10 여 부산 화가
영수 8 남 서울 만화가
  • table : 테이블 전체를 의미합니다.
  • tr : 행 (table row)
  • th : 제목 셀 (table header)

  • td : 내용 셀 (table cell)

  • border-collapse: collapse : 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현 합니다.
  • border-collapse: separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현 합니다.

셀 병합 (rowspan, colspan)

  • 행 병합 : rowspan : 세로로 병합
  • 열 병합 : colspan : 가로로 병합
<table>
	<tr>
		<th> </th>
		<th> </th>
		<th> </th>
		<th> </th>
	</tr>
	<tr>
		<td> </td>
		<td colspan="3">colspan="3"</td>
	</tr>
	<tr>
		<td> </td>
		<td colspan="2">colspan="2"</td>
		<td> </td>
	</tr>
</table>

<table>
	<tr>
		<th> </th>
		<th> </th>
		<th> </th>
		<th> </th>
	</tr>
	<tr>
		<td> </td>
		<td rowspan="2">rowspan="2"</td>
		<td> </td>
		<td rowspan="2">rowspan="2"</td>
	</tr>
	<tr>
		<td> </td>
		<td> </td>
	</tr>
</table>

<table>
	<tr>
		<th> </th>
		<th> </th>
		<th> </th>
		<th> </th>
	</tr>
	<tr>
		<td> </td>
		<td colspan="3" rowspan="2">colspan="3" rowspan="2"</td>
	</tr>
	<tr>
		<td> </td>
	</tr>
</table>

셀 병합 예시

학과 학번 이름 전화번호
멀티미디어디자인 20150001 학생1 010-1234-5678
멀티미디어디자인 20150002 학생2 010-1234-5678
멀티미디어디자인 20150003 학생3 010-1234-5678
애니메이션 20150004 학생4 010-1234-5678
애니메이션 20150005 학생5 010-1234-5678
총학생수 5명 
<table>
	<tr>
		<th>학과</th>
                <th>학번</th>
                <th>이름</th>
                <th>전화번호</th>
	</tr>
	<tr>
		<td>멀티미디어디자인</td>
                <td>20150001</td>
                <td>학생1</td>
                <td>010-1234-5678</td>
	</tr>
	<tr>
		<td>멀티미디어디자인</td>
                <td>20150002</td>
                <td>학생2</td>
                <td>010-1234-5678</td>
	</tr>
	<tr>
		<td>멀티미디어디자인</td>
                <td>20150003</td>
                <td>학생3</td>
                <td>010-1234-5678</td>
	</tr>
	<tr>
		<td>애니메이션</td>
                <td>20150004</td>
                <td>학생4</td>
                <td>010-1234-5678</td>
	</tr>
	<tr>
		<td>애니메이션</td>
                <td>20150005</td>
                <td>학생5</td>
                <td>010-1234-5678</td>
	</tr>
	<tr>
		<td>총학생수</td>
                <td> </td>
                <td> </td>
                <td>5명</td>
	</tr>
</table>

제목 및 요약문 (caption, summary)

  • Summary : 테이블의 내용을 설명, 시각적으로 테이블 접근이 쉽지 않은 사용자를 위한 배려
  • Caption : 테이블의 내용을 대표할 수 있는 제목을 작성
<source lang="javascript" line>
<h1>출석부</h1>
<table summary="대학교 학과별 학번, 이름, 전화번호 정보">
	<caption>대학교 학생 목록</caption>
	<tr>
		<th>학과</th><th>학번</th><th>이름</th><th>전화번호</th>
	</tr>
	<tr>
		<td>멀티미디어디자인</td><td>20150001</td><td>학생1</td><td>010-1234-5678</td>
	</tr>
</table>

행 그룹화 요소 (thead, tfoot, tbody)

  • 선언순서 : thead, tfoot, tbody
  • thead 테이블의 헤더 영역, 반드시 th 요소를 사용하여 제목 셀이라는것을 명시
  • tfoot 위치에 관계 없이 테이블의 가장 마지막 행에 출력
  • tbody 논리적 구분을 위해 여러번 등장할 수도 있다
<table>
	<thead>
		<tr>
			<th>학과</th><th>학번</th><th>이름</th><th>전화번호</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td rowspan="3">멀티미디어디자인</td><td>20150001</td><td>학생1</td><td>010-1234-5678</td>
		</tr>
		<tr>
			<td>20150002</td><td>학생2</td><td>010-1234-5678</td>
		</tr>
		<tr>
			<td>20150003</td><td>학생3</td><td>010-1234-5678</td>
		</tr>
		<tr>
			<td rowspan="2">애니메이션</td><td>20150004</td><td>학생4</td><td>010-1234-5678</td>
		</tr>
		<tr>
			<td>20150005</td><td>학생5</td><td>010-1234-5678</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="3">총학생수</td><td>5명</td>
		</tr>
	</tfoot>
</table>

제목 셀과 내용 셀의 연관성 (scope)

  • scope=”row” : 행의 제목
  • scope=”col” : 열의 제목
<table>
		<tr>
			<th scope="col">학과</th><th scope="col">학번</th><th scope="col">이름</th><th scope="col">전화번호</th>
		</tr>
		<tr>
			<td rowspan="3">멀티미디어디자인</td><td>20150001</td><td>학생1</td><td>010-1234-5678</td>
		</tr>
		<tr>
			<td>20150002</td><td>학생2</td><td>010-1234-5678</td>
		</tr>
		<tr>
			<td>20150003</td><td>학생3</td><td>010-1234-5678</td>
		</tr>
		<tr>
			<td rowspan="2">애니메이션</td><td>20150004</td><td>학생4</td><td>010-1234-5678</td>
		</tr>
		<tr>
			<td>20150005</td><td>학생5</td><td>010-1234-5678</td>
		</tr>
		<tr>
			<td colspan="3" scope="row">총학생수</td><td>5명</td>
		</tr>
</table>

그룹화요소 (div, span)

블록 그룹화 요소 div

  • 분할, 나누기의 의미. 구룹핑(grouping)의 역할
  • id와 class로 해당 그룹의 의미를 부여
  • 블록 요소를 그룹화 하기 위하여 사용됨
  • 레이아웃 구현
  • 논리적이 구조를 구려하여 서로 연관성 있는 콘텐츠를 그룹핑
<div id="div1" class="div_class"> 내용 </div>

인라인 그룹화 요소 span

  • 인라인 요소를 그룹화
  • id와 class로 해당 그룹의 의미를 부여
  • 인라인 요소 이므로 p, ul 같은 블록 요소를 포함할 수 없다.
<span id="span1" class="span_class">내용</span>