1~2일차
미니 프로젝트 진행
3일차
HTML(Hyper Text Markup Language) => 웹페이지를 만들 때 사용하는 언어 , 다른 웹 문서로 이동할 수 있는 마크업(태그로 이루어진) 언어
Wep Page => 웹 상에 있는 개개의 문서, 줄여서 웹(document) 문서라고 하며, HTML문서라고도 함 , HTML 태그들로 구성된다
(html5 버전부터 모바일 가능)
마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 나타내는 언어를 말함
인코딩 : 문자집합 정보를 표현하기 위한 글자 집합 정의를 말함
UTF-8 : 유니코드 기반의 길이 문자 인코딩 방식 중 하나
ANSE : ASCll 코드를 획장하여 사용할 수 있도록 한 문자 인코딩 방식 중 하나 256개의 문자 코드를 지원하는 html4의 기본 문자셋임
시멘틱 웹 : 의미 있는 웹, 지능적인 웹을 의미. 사람이 아닌 컴퓨터가 직/간접적으로 처리 할 수 있는 데이터를 위한 웹을 할한다
시멘틱 요소 : 그 이름 자테만으로 브라우저나 컴퓨터, 개발자 들이 의미를 파악할 수 있는 요소다(태그)
웹 표준 : 어느 브라우저, 어느 환경에서든 호환이 가능하도록 일종의 규칙을 만든 것을 말함
웹 접근성(**) : 어느(장애우, 고령자더라도) 누구나 사용 가능한 웹을 만드는 것을 말함
HTML 기본 구조 // < 앞의 띄어쓰기 사용 불가능
< !DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시 (생략가능)
태그형식 : < 태그명>(시작 태그)컨텐츠</태그명>(종료 태그) // 이름을 같아야 함
- < head> : html 문서의 메타 데이터를 정의
- < title>~<'/title> : html 문서의 제목을 정의
- < body>~<'/body> : 웹 프라우저를 통해 보이는 내용부분
실직적으로 사용자가 웹 상에서 보는 내용에 대한 전반적인 부분을 기술하는 곳
< style>,< script> 태그는 바디태그 안에도 사용 가능하다
meta 태그의 문자셋 설정 속성:
1)meta태그는 빈 태그(empty tag)이다 즉, 시작태그만 가지고 있다
2)utf-8은 대소문자 모두 상관없다
html4에서 utf-8의 경우
< meta http-equiv="Content-Type" content="text/hemp;charset=utf-8" >
html5에서 utf-8의 경우
< meta charset = "utf-8">
태그(Tag)란
:웹 페이지를 디자인이나 기능을 결정하는데 사용된다
:꺽쇠 괄호의 쌍으로 표시 <>
:꼭 시작 태그 시작부(<)와 종료태그 시작부(</)의 바로 뒤에 태그명은 공백없이 붙여서 기술해야 한다
태그의(Tag) 기본 구조
형식1 : <시작태그이름></종료태그이름>
형식2 : <태그이름> or <태그이름/>
Tip 종료 태그가 없는 태그를 빈태그(empty tag)라고함 mate,br,img,hr 등등
요소(Element)의 기본 구조
형식1 : <태그이름 속성명 = "속성값"> 콘텐츠(내용)들</태그이름>
형식2 : <태그이름 속성명 = "속성값"> or <태그이름 속성명 = "속성값" />
요소 작성 시 요령
1)속성 이름은 언제나 소문자로작성
2)인라인 속성값은 언제나 따옴표로 감쌀것
htmp 블록 레벨 요소
1) 자동으로 새 줄 바꿈이 됨 항상 새 줄에서 시작한다
2) 대부분의 모든 블럭 요소는 위 아래의 여백을 가지고 있다
3) 대부분의 모든 블럭 요소의 기본 width는 100%가 기본값이다
4) hight는 해당 컨텐트의 공간 + 위 아래 여백 값이다
< p> < div> < h1> ~ < h6> < ul> < ol> < dl> < li> < table> < form> < nav> < main> < section> < aside> < footer> 등이 있다
특이한 케이스의 요소 :
< br>태그 : 대부분의 블럭 요소가 width 100%를 가지고 있는 반면, br 엘리먼트는 영역이 없이 오로지 줄 바꿈 기능만을 수행한다
< div>태그 : 대부분의 블럭 요소가 위 아래의 여백을 가지고 있는 반명, div엘리먼트는 여백 값이 없다
html 인라인 레벨 요소
1) 자동으로 새 줄 바꿈이 되지 않는다
2) 위 아래의 여백이 없다
3) 엘리먼트가 감싸고 있는 컨텐츠(내용) 만큼의 width와 height를 갖는다
4) img나 th, td, form 요소의 인라인 레벨 요소들은 css를 통하여 width, heigth값을 설정할 수 있으나, a,span엘리먼트는 설정을 할 수 없다 또한 margin(바깥 여백)은 좌우만 적용되며, padding(안쪽 여백)속성은 상하좌우값 모두 적용 가능하다
5)css의 정렬 속성을 가질 수 없다
대표적인 인라인레벨 요소(엘리먼트) 몇 가지
<a> <button> <em> <i> <img> <input> <label> <map> <select> <span> <strong> <textarea> 등이 있다
heading태그
1) body안의 내용의 제목을 표시하는 태그
2) < h1>~< h6> 까지 제공함. 숫자가 작을수록 글자크기가 커짐
3) < h> 태그의 위아래로는 약간의 여백이 자동으로 삽입됨
4) h태그는 대소문자 구문이 없다 <H1>~</H1> or <h1>~</h1> 둘다 가능함
5) 종료태그는 꼭 기술해주자
-html에서는 인식을 해주기는 하지만 xhtml이나 xml에서는 문법을 엄격하게 짜디기 때문에 예상치 못한 오류나 결과가 발생할 수 있다
-tip 여러 검색엔진은 각 웹 사이트의 내용을 바로 이 <h> 태그를 이용하여 키워드를 수집하고, 그 내용을 파악을 한다 따라서 html문서에 포함되는 제목 <h> 은 태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수가 있다
단락 : 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 함
p태그
-<p> 태그의 위아래로는 약간의 여백이 자동으로 삽입됨
-가변폭 글자마다 폭이 영역이 다를 수 있다
hr태그
-단락을 나눌 때나 내용상의 구분을 표형하고자 할 때 사용하는 수평 가로 구분선을 의미함
<p>첫 번째 단락입니다<p/>
<hr>
<p>두 번째 단락입니다</p>
<hr>
<p>세 번째 단락입니다</p>
1단락입니다<hr>
2단락입니다<hr>
3단락입니다
pre태그
-고정폭을 가지고 있다 글자마다 폭의 영역이 똑같음
-텍스트서식 미리 정의하는 태그
-html코드에서 작성한 텍스트서식을 그대로 표형하려면< pre>태그를 사용해야 함
-<pre> 태그 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현됨
-<pre> 태그 내에 작성된 텍스트의 모든 글꼴은 고정폭 글꼴로 자동변환됨
-대소문자 구분이 없다
고정폭 글꼴(monospaced font, fixed-pitch, fixed-width, non-proportional font)각 글자가 동일한 양의 수평 공간을 자치하는 글꼴을 말한다
서식(Formatting)
-텍스트에 다양한 효과를 주는 형식
-html에서는 여러 서식 태그를 제공한다
B태그(Bold Text)
-특별한 의미 없이 텍스트를 굵개 강조하는 기능을 한다
-오피스 프로그램의 "글씨테 굵게"와 같은 기능을 함
-대소문자 구분이 없다
Stong태그 //시멘틱요소
-매우 중요한 텍스트를 정의할 때 굵게 강조하는 기능을 한다
-오피스 프로그램의 "글씨체 굵게"와 같은 기능을 함
-대소문자 구분이 없다
*html5에서는 보다 의미있는 웹을 위하여 되도록이면 강조하는 의미에 글자를 표현할때 < b>태그보다는 <Strong>사용을 권장한다
< i> < em> 태그
-오피스 프로그램의 "글씨체 기울이기"와 같은 기능을 함
-대소문자 구분이 없다
-i태그(italic text)는 단순 이탤릭체 표현
-em(emphasized text)태그(시멘틱요소)는 텍스트를 이탤릭체로 변환해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함꼐 포함해 줌
-검색 엔진 사용 시 <strong> <em> 태그를 사용하여 강조된 텍스트를 더 중요하게 인식함
<i> 내용들.. </i>
<em> 내용들.. </em>
Small 태그
-더 작은 텍스트를 정의합니다
-대소문자 구분이 없다
<small> 내용들.. </small>
Mark 태그
-표시하거나 강조 표시해야하는 텍스트를 정의할 때 사용
-텍스트에 하이라이팅(형광펜) 효과를 준다
<makr> 내용들.. </mark>
del(delete)태그 (유사 S태그: 취소선)
-요소는 문서에서 삭제 된 텍스트를 또는 대체 텍스트를 정의할 때 사용
-텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것과 같은 효과를 나타냄
<del> 내용들.. <del>
ins(insert)태그 (유사 U태그: 밑줄)
-문서에 삽입 된 텍스트를 정의할 때 사용
-텍스트에 밑줄을 그은 효과를 나타냄
<ins> 내용들.. <ins>
sub(subscript)태그
-아래 첨자 기능의 효과를 나타낼 때 사용
-대체로 일반 줄 아래에 절반 문자로 나타나며 떄로는 더 작은 글꼴로 렌더링 된다
-화학식을 나타내는 텍스트를 표시할 때 많이 사용함
<sub> 내용들.. </sub>
sup(superscript)태그
-위 첨자 기능의 효과를 나타낼 때 사용
-일반 줄 위에 반 문자로 나타나며 때로는 더 작은 글꼴로 렌더링 된다
-각주등을 나타내는 텍스트를 표시할 때 많이 사용함
<sup> 내용들.. </sup>
List 태그
-여러 요소들을 일렬로 나열한 목록이나 명단을 의미함
-순서가 없는 리스트(unordered list) , 순서가 있는 리스트(ordered list), 정의 리스트(definition list)가 있다
ul(unordered list-무순서 리스트) 태그
-나열 순서가 의미가 없는 리스트 들을 기술할 때 사용하는 태그 임
-내용은 li 태그로 감싸준다
-내용 앞에 marker로 검정색 작은 원(bullet)이 표시 됨 - 디폴트 값임
-li 태그 안에 감싸진 내용은 일정 간격으로 들여쓰기가 된다
-ul,li 모두 블럭요소임
-list-style-type 속성으로 마커 모양 변경 가능하다
ul에서 list-style-type= => type= 으로 사용 가능
list-style-type 속성값
-disc:검정색 작은 원 모양 (디폴트 기본값)
-circle:흰색 작은 원 모양
-squara:사각형 모양
형식:
<ul style="속성명:속성값; 속성명:속성값; 속성명:속성값;">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
<html lang = "ko"> => 한글 페이지 표시
4일차
ol(ordered list list - 순서 리스트) 태그
-나열 할 텍스트가 순서가 있어야 하는 데이터 일 경우에 사용하는 태그임
-내용은 li태그로 감싸준다
-내용 앞에 marker로 십진정수(diximal) 이 표시된 -디폴트 값
-li 태그 안에 감싸진 내용은 일정 간격으로 들여쓰기가 된다
-marker바로 뒤에 마침표(.)가 붙는데, 마침표를 기준으로 마커는 우측정렬
텍스트는 죄측정렬이 된다
-ol , li모두 블럭요소임
-list-style-type 속성은 마커 모양 변경 가능하다
*중첩으로 사용시 마진 사라짐
list-style-type속성값
-decimal : 숫자 (기본설정)
-upper-alpha : 영문 대문자
-lower-alpha : 영문 소문자
-upper-roman : 로마 숫자 대문자
-lower-roman : 로마 숫자 소문자
-start : 시작하는 순서를 정할 수 있다
형식:
<ol style = "속성명 : 속성값;">
<li> 내용1 </li>
<li> 내용2 </li>
<li> 내용3 </li>
</ol>
dl(description list - 정의 리스트) 태그
-나열 할 텍스트가 어떠한 대상과 대상에 대한 설명이 필요한 데이터인 경우 사용
-내용은 dl 태그로 감싸주고, 대상은 .dt태그로, 설명은 dd태그로 감싸준다
-marker 가 없다
-dl, dt태그는 들여쓰기가 되지 않으나 dd 태그 안에 감싸지 내용은 일정 간격으로 들여쓰기가 된다
-dl, dt (Description Tag) , dd(Description Deseribes) 모두 블럭 요소임
-마커가 없으므로, list-style-type속성도 없다 적용이 되지 않는다
형식1
<dl>
<dt>대상이 되는 텍스트</dt>
<dd>대상에 대한 설명이 되는 텍스트</dd>
</dl>
형식2
<dl>
<dt>대상이 되는 텍스트< /dt>
<dt>대상이 되는 텍스트< /dt>
<dd>대상에 대한 설명이 되는 텍스트< /dd>
<dd>대상에 대한 설명이 되는 텍스트< /dd>
</dl>
주석
-개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미한다
-주석안에 또 다른 주석을 작성할 수 없다
-여러줄 주석이나 태그를 무효화 처리하는 것도 가능하다.
*소스코드로는 다 보이기 때문에 중요한 정보는 기재하지 않는다
형식1
< !--주석 처리할 내용-->
형식2
< !--
주석 처리할 내용들.....
<주석처리할 엘리먼트들>....
-->
엔티드 (Entity)
-HTML 예약어(reserved characters)를 의미함
-예약어를 HTML 코드에서 사용하면 , 웹 브라우저는 그것을 평소와는 다른 의미로 해석함
-예약어를 기존에 사용하던 의미 그ㅐㄷ로 사용하기 위해 별도로 만든 무자셋을 의미
-엔티티(entity)의 이름은 대소문자를 구분한다
대표적으로 사용되는 엔티티(entity)
| 엔티티문자 | 엔티티이름 | 16진수 엔티티 숫자 | 설명 |
|---|---|---|---|
| (공백) | & nbsp; | & #160; | 줄 바꿈 없는 한 칸 공백 |
| < | & lt; | & #60; | 보다 작은 |
| > | & gt; | & #62; | 보다 큰 |
| & | & amp; | & #38; | and기호 |
| " | & quot; | & #34 | 큰 따옴표 |
| ' | & apos; | & #39; | 작은 따옴표 |
table 태그
-데이터를 표 형식으로(줄 , 열-rowㅡ 칸, 행-column)보여주는 엘리먼트임
-tr.th,td 태그등과 같이 쓰인다
-table 태그는 블럭요소이다
-tr태그 : 테이블의 줄, 열(row)을 설정하며, 블럭요소이다 (특수 위아래 여백이 없다)
-td태그 : 테이블의 칸, 행(column)을 설정하며 , 인라인 요소이다
내용의 정렬 기본값(디폴트값)은 수평 - 왼쪽정렬(left), 수직-중간정렬(middle)이다
-th태그 : td와 동일하게 : 테이블 칸, 행(column)을 설정하며 , 인라인 요소이다
-표 내용의 제목(headimg)을 담당하는 태그라 서체가 굵게 표시된다
제목의 정렬 기본값(디폴트)은 수평-가운데정렬(center) 수직-중간정렬(middle)이다
-셀과 셀 사이는 약간의 공백을 가지고 있다
-대소문자 구분하지 않는다
td , th 태그는(특수) 인라인 레벨이지만 크기 조정이 가능하고 +블럭요소가 들아올 수 있음
-테이블이 포함 할 경우 마진이 적용되지 않는다
% <= 가변 단위 px <= 고정 단위
CSS(Cascading Style Sheets)를 사용하여 테이블 요소 꾸미기
-colspan : 칸 병합을 할 때 사용하는 속성임
-속성값으로 합칠 칸 수를 십진 정수로 지정한다
-colspan속성이 있는 셀부터 그 이후의 셀을 확인하여 설정한 수 만큼의 칸 수를 병합한다
형식 :
colspan = 병합할 칸(행)수;
테이블 태그들의 형식:
<table>
<tr>
<th>제목</th>
</tr>
<tr>
<td>내용</td>
</tr>
</table>
th, td {
text-align: left;
}
th {
text-align:right; //위에서 left 로 지정해도 코드를 순서대로 읽어들이기 때문에 th는 오른쪽 정렬로 바뀐다
}
5일차
rowspan: 줄 병합을 할 때 사용하는 속성임
-속성값으로 합칠 줄 수를 십진 정수로 지정한다
rowspan 속성이 있는 셀부터 그 아래의 셀을 확인하여 설정할 수 만큼의 줄 수를 병합한다
형식 : rowspan = 병합할 줄(열) 수;
border : 테두리를 설정하는 속성
형식: border : 선굵기px 선종류 선색상;
solid : 이어진 실선으로 표시
none : 테두리 없음 표시
*선 색상은 서체와 동일하게 표현 가능
방향에 따른 표현 가능
-border-top : 위쪽 선만 설정, border-bottom : 아래쪽 선만 설정
-border-lift : 왼쪽 선만 설정, border-right : 오른쪽 선만 설정
border-space : 체두리와 셀 사이의 간격을 설정
형식 : border-spacing: 값px;
border-collapse:
겹치는 두 선을 한 선으로 표현할 떄 사용 속성값으로 collapse가 있다
table태그에 사용한다
형식 border-collapse: collapse;
CSS(Cascading Style Sheets)를 사용하여 테이블 요소 꾸미기:
padding 셀 안위 여백을 지정한다 단위는 px
형식 : padding : 여백값; (값이 0일 경우는 px단위 생략 가능)
margin : 테두리 밖의 여백을 지정한다, 단위는 px
형식 : margin : 여백값; (값이 0일 경우는 px단위 생략 가능)
- 4개 값 지정 시 : 위여백값px 우측여백값px 아래여백값px 죄측여백값px;
- 2개 값 지정 시 : 상 + 하여백값 px 좌+우여백값px;
- 1개 값 지정 시 : 상 + 히+ 좌+ 우여백값px;
border처럼 -top, -bottom, -left, -right로 개별 지정 설정이 가능하다.
caption텍스트 : table의 제목을 정하는 태그
-table 바로 위 가운데 위치 한다
-table 태그 바로 밑에 사용해준다(권장사항)
-table 밖에서 사용하면 일반 텍스트 태그로 사용이 된다
-블럭요소이다
figure 태그 :
-figcaption 와 같이 사용하면 figcaption태그가 제목이 된다
-기본정렬은 왼쪽 정렬임
-테이블에 종속되어 있는 태그는 아니다
colgroup태그 :
-col와 같이 사용하면 해당 테이블 열마다의 지정값을 설정할 수 있다
-위치는 지정할 태그 위에다 사용해준다(권장사항)
-글씨체 컬러는 지정할 수 없음
HTML의 속성이란:
-HTML요소에 대한 추가 정보를 제공하는 것을 의마
-해당 태그의 스타일을 꾸미거나 변경하거나 부가적인 어떠한 성격을 추가하는 것을 의미함
-모든 HTML요소는 속성을 가질 수 있다
-속성은 항상 시작 태그에 지정된다
-일반적으로 속성명= "속성값" 와 같은 (이름/값)의 짝으로 제공
-값은 되도록 따롬표로 감싸줄것
href속성:
-링크로 이동 페이지의 URL을 지정, 주로 a 태그(인라인 요소 특수 블럭 요소를 묶을 수 있음)나 , link태그의 속성으로 사용 됨
-시작 엘리먼트에 지정된다
target태그
값이 _blank 이면 새로운 페이지로 열어준다
값이 _self 이면 기존 페이지에서 해당 링크페이지를 열어준다
_parent,_top 도 있지만 주로 blank, self를 사용함
-href="#지정명"으로 지정하면 id 혹은 name (id(name) = "지정명") 의 지정명이 같은 위치로 이동 시킨다
-name은 a태그에 종속적이다 그래서 주로 id를 사용
-이동시 밑의 남는 공간이 없으면 새로운 공간을 따로 만들어지진 않는다
src 속성:
-파일의 경로를 표시하는 속성을 지정
-시작 엘리먼트에 지정된다
-절대경로 : 고정된 뎡로를 지정하는 방법/ 상대경로: 파일의 위치를 고려하여 상대적으로 경로를 지정하는 방법 등이 있다
-되도록이면 상대 경로를 권장, 다른 곳으로 옮겨도 파일들의 위치만 동등하게 해주면 이미지가 손실될 염려가 없다
너비, 폭 관련 속성
-픽셀(px) 값이나 비율(%)값으로 나타냄
-시작 엘리먼트 안에 기술할 것
-width : 가로 너비 속성 height : 세로 폭 속성
형식 : width = "값" height = "값" 또는 style = "width=값 height=값;"
커서 형태 >
포인터(손가락 표시 모양) 엑티브(포인터일 때 누르고 있으면 나타나는 상태) 디스티드(해당 페이지에 다녀온 상태) hover(마우스를 올려 놓은 상태)
<a href="https://www.naver.com/" target="_blank"> <h1>네이버 Links</h1></a> //커서 포인트가 한 줄 다 차지함
<h1><a href="https://www.naver.com/" target="_blank" >네이버 Links</a></h1> //커서 포인터가 네이버 links에만 차지함
alt 속성:
-이미지를 표시 할 수 없는 경우 이미지의 대체 텍스트를 지정함
-시작 엘리먼트에 기술
형식 : alt = "텍스트"
title속성:
-요소에 대한 몇 가지 추가 정보를 정의 함
-마우스를 오버하면 툴팁처럼 내요이 보여진다하여 툴팁기능이라고 함
-웹 접근성의 가장 기본적인 속성임
-시작 엘리먼트에 기술
형식 : title = "텍스트"
lang속성:
-html시작 엘리먼트 (<thml>)에 기술
-웹 페이즈의 언어와 국가를 명시할 때 사용. (예 : ko-KR:한국어-한국/ en-US:영어-미국/ ja-JP:일본어 일본)
-검색 시 웹 페이지의 언어나 국가를 하악하기 위한 것이지 웹 페이지를 해당 언어로만 기술해야 하는 것은 아니다
형식 : lang = "언어코드-국가코드"
img 태그:
-웹 페이지에 이미지를 보여주기 위해 사용
-src 속성의 꼭 기술되어야 한다 다른 속성은 없어도 상관 없다
-빈 태그(empty tag) 이다
-인라인 요소로 한 줄 바꿈이 되지 않는다
-너비, 폭 미 지정 시 디폴트는 원본 파일 크기로 적용 됨
-width속성이나 height속성을 바로 사용하는 경우는 단위를 픽셀로 자동 인식하나 style속성 안에 나열되는 속성으로 사용되는 경우는 단위를 꼭 기술해 주어야만 제대로 인식한다
-기본 정렬 값은 left-bottom 이다
-title의 텍스트는 커서가 이미지에 멈춰있을 때 나오는 텍스트임 (title이 속성으로 사용될 때)
img 형식 (=문법, Syntax) :
<img src = "경로" alt = "값" title = "텍스트" width= "값" height= "값"> 단위를 따로 지정하지 않으면 px로 인식한다
<img src = "경로" alt = "값" title = "텍스트" width= "값(px or %)" height= "값(px or %)">
포맷 형식
1. BMP(BitMap)-비손실 압축
-압축을 전혀 하지 않기 떄문에 bmp로 저장하면 매우 큰 사이즈로 저장
-용량이 커서 웹에서 잘 사용하지 않지만 디코딩을 거의 하지 않아 처리 속도가 빠르다
2.JPG, JPEG(Joint Photographic Experts Grouop)-손실 압축
-jpg, jpeg는 같은 의미 도스(DOS) 방식에서 확장자명을 3자리까지만 지정할 수 있어서 jpg라 줄인 확장자가 생겨난 것임
-용량이 작아 웹에 자주 쓰이고 압축 속도도 빠르지만 , 데이터 손실이 있고 투명도 사용이 되지 않는다(배경 투명지정 불가능, 디폴트 : 흰색)
3.GIF(Graphics Interchange Format)-무손실 압축
-투명도를 지원하며, 압축 손실이 없다 여러 장의 이미지를 한 파일에 담을 수 있어 애니메이션처럼 보이는 기능을 지원함
4.PNG(Portable Network Graphics)-무손실 압축
-gif대안으로 나왔으며 gif와는 다르게 알파값이 존재하여 투명도 지원을 한다 애니메이션 지원이 안된다
고정이미지 임
-무손실 압축으로 이미지 디테일 손실이 전혀없고 고품질 이미지를 생성하지만 파일 크기는 상대적으로 포맥보다 커진다
-압축 시 손실이 없으나 jpg보다는 처리 속도가 느리다
svg파일은 손상이 없다
map 태그 :
이미지 맵을 정의하는 데 사용된다.(클릭 가능한 영역이 있는 이미지, 고정 사이즈여야 한다.)
이미지 맵으로 사용할 수 있는 img태그와 img태그안에는 src속성, usemap속성이 있어야 한다.
map 태그에는 꼭 name속성이 기술 되어야 한다.
img태그의 usemap의 속성값과 map태그의 name의 속성값이 일치해야 한다.
영역을 설정하려면 area태그를 사용하여 설정할 수 있다. area태그는 여러 개 설정이 가능하다.
map 태그 형식(=문법, Syntax) :
<img src=“파일경로(확장자까지 포함)“ usemap=“#맵이름” width=“값” height=“값” alt=“값” title=“텍스트” >
<map name="맵이름 "> <area shape=“영역모양설정값" coords=“좌표설정값" alt=“값” title=“텍스트” href=＂파일경로(확장자포함)“ download = “다운로드파일명설정”> </map>
area 태그 :
이미지 맵 안에 클릭할 수 있는 영역을 정의하는 데 사용된다.
설정된 영역에 마우스가 오버되면 마우스 포인터가 손모양으로 변경된다.
shape라는 영역 모양 설정 속성과 coords라는 좌표값(px단위) 설정으로 영역을 설정할 수 있다.
shape속성 값:
default(전체 영역이 지정되므로 coords를 설정할 필요가 없다.
rect : 직사각형모양으로 영역 설정. coords값은 좌측상단의 x축, y축 좌표값과 우측하단의 x축, y축 좌표값을 입력하면 된다.
circle : 원 모양으로 영역 설정. coords값은 원의 중심의 x축, y축 좌표값과 반지름 값이 있으면 된다.
poly : 다각형모양으로 영역 설정. coords값은 x축, y축 값을 원하는 다각형모양의 꼭지점 좌표만큼 설정하면 된다.
download속성 :
download = “파일명”으로 기술해주면 href경로의 파일이 다운될 때 확장자는 그대로 유지되면서 파일명만 설정한 파일로 다운로드 됨.
download키워드만 있을 경우에는 원본파일명 그대로 다운로드 됨.
download속성이 아예 없으면 창에서 결과를 보여 줌.
meta 태그 :
해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용
<head>와 </head> 요소의 안에 위치함.
대부분 <title>태그의 위나 아래에 기술함.
빈 태그(empty tag: 종료태그가 없는 태그) 임.
http-equiv, name, content 3가지 속성이 있다.
*메타데이터란 : 데이터의 구조화된 데이터, 데이터를 위한 데이터라고 하는데, 쉽게 얘기하자면 어떤 데이터를 설명하기 위한 데이터라고 보면 됨.
http-equiv 속성 :
content 속성에 명시된 값에 대한 HTTP 헤더를 제공
HTTP 헤더 : 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해주는 역할을 하는 것.
content속성과 짝을 이루어 사용 가능하다. 한 개의 속성만으로는 사용 안 됨.
형식 : <meta http-equiv=“속성값” content=“값(시간,초단위);url주소” >
대표적인 속성값 :
refresh : 새로고침 기능.
content-type : 해당 문서의 인코딩 방식을 명시. (Html4버전에서)
예시 ) <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTTP (HyperText Transfer Protocol) : 텍스트 기반의 통신 규약으로 인터넷에서 데이터를 주고받을 수 있는 프로토콜을 의미
프로토콜이란: 사람과 사람이 통신할 때 서로 이해할 수 있는 언어, 공용된 언어를 사용해야만 전 세계 모든 사람과 대화 할 수 있는 것처럼, 컴퓨터와 컴퓨터도 통신을 원활하게 하기 위해 서로 이해 할 수 있는 언어, 공용된 언어를 사용 해야 한다는 것, 즉 통신 규약, 약속이라 보면 된다.
name 속성 :
메타데이터를 위한 이름을 명시
content속성과 짝을 이루어 사용 가능하다. 한 개의 속성만으로는 사용 안 됨.
형식 : <meta name=“속성값” content=“값” >
대표적인 속성값 몇 가지 :
반응형웹 (responsive web design, RWD) 이란:
PC, 스마트폰, 태블릿 PC 등의 디스플레이의 종류(모바일 기기, 디바이스)에서 하나의 웹페이지를 접속할 때 장치에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말함.
meta 태그의 name속성에서 사용하는 viewport 속성과 css의 width속성을 이용하여 반응형 웹을 만들 수 있다.
viewport 속성 :
웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어함.
형식: <meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width : 기기에 따라 달라지는 장치의 화면 너비에 맞게 웹 페이지의 너비를 설정함.
initial-scale=1.0 : 브라우저에 의해 웹 페이지가 처음으로 로드될 때 초기(맨 처음) 화면의 확대/축소 레벨을 설정함.
*initial-scal의 값은 0~1.0사이 임. 1은 원본 비율 유지. 숫자가 작아질수록 축소됨.(모바일 화면으로 해야 정확한 확인 가능)
viewport 속성 사용 시 주의해야 할 사항
-큰 고정 너비 요소를 사용하지 말 것. 이미지가 뷰포트보다 더 넓은 너비로 표시되면 수평 스크롤이 될 수 있으므로 콘텐츠를 뷰포트의 너비에 맞도록 조정해야 한다. (가로 사이즈를 큰 사이즈의 값으로 고정해서 처리하지 말라는 의미임.)
-콘텐츠가 잘 렌더링되도록 특정 뷰포트 너비에 의존하지 않도록 할 것. 화면 치수와 CSS 픽셀의 너비는 장치마다 크게 다르기 때문에, 콘텐츠는 잘 렌더링하기 위해 특정 뷰포트 너비에 의존해서는 안 된다. 특정한 한 개의 디바이스의 너비에만 의존하지 말라는 의미임.
-고정 너비값이 아닌 되도록이면 너비 100%와 같은 상대 폭 값을 사용할 것.
*렌더링이란: 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정
