Web Server >> 단순 html
apache, nginx, nodejs
Web Application Server : WAS
tomcat, jeus, webphere, weblogic
nginix 서버 실행했고, 앞으로 여기에 과제 올림.
03장.
3-1. 이미지
이미지 파일에서 사용할 수 있는 확장자
jpg, gif, png, bmp, svg
비트맵형 이미지, 벡터형 이미지
bit map
100 * 100 = 10000
벡터 > 좌표 (주로 로고나 제품 디자인같이 확대/축소를 해도 깨지지 않는 이미지를 사용해야 할 때)
bmp : 각 비트맵 정보를 순수하게 기록 29.3k (원본)
손실 압축
png : 0.5k : 투명가능 32bit
jpg : 1.75 : 협회에서 만든 압축기법, 색상 표기갯수 24bit 투명표현x
(Huffman coding 이용해서 압축한대~!)
gif : 1.0k : 프레임기록 가능 256색 f(빨초)f(파투명) 투명표현o
wav(원본), mp3, ogg
src: 이미지의 경로
경로(path)
절대경로
상대경로
.. 이전 디렉토리
. 현재 디렉토리
/ 루트 디렉토리
이미지 주소복사는 절대경로
alt: 이미지를 설명해주는 대체 텍스트 (필수 속성)
<figure>
<figcaption> : 사진 제목
<img src="images/road.jpg" alt="사려니 숲길" width="250" height"90">
<<figure>
<img src="images/oreum-1.jpg" alt="용눈이 오름">
<figcaption>완만하고 부드러운 용눈이 오름</figcaption>
</figure>
- 아이프레임
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
</head>
<body>
<h1>이 페이지는 자식 페이지입니다.</h1>
<a href="http://www.easyspub.com" target="_parent"><img src="images/easyspub.jpg" alt="이지스퍼블리싱"></a>
</body>
</html>↑<child.html>
3-2. 링크 만들기
<a> anchor 닻
target: 링크 대상 지정
target="_blank" > 새 탭에서 열림 ***
기본값은 _self
_top: 프레임의 최고 조상
_parent: 부모 프레임
id를 이용해 페이지 내부에서의 이동이 가능
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
</head>
<body>
<ul>
<li><a href="#list1">메뉴1</a></li>
<li><a href="#list2">메뉴2</a></li>
<li><a href="#list3">메뉴3</a></li>
<li><a href="#list4">메뉴4</a></li>
<li><a href="#list5">메뉴5</a></li>
<li><a href="#list6">메뉴6</a></li>
<li><a href="#list7">메뉴7</a></li>
<li><a href="#list8">메뉴8</a></li>
<li><a href="#list9">메뉴9</a></li>
<li><a href="#list10">메뉴10</a></li>
<li><a href="#list11">메뉴11</a></li>
<li><a href="#list12">메뉴12</a></li>
<li><a href="#list13">메뉴13</a></li>
<li><a href="#list14">메뉴14</a></li>
<li><a href="#list15">메뉴15</a></li>
</ul> <!-- 특정 위치에 링크를 붙이고 -->
<ul>
<li id="list1">지방의회의 조직·권한·의원선거와 지방자치단체의 장의 선임방법 기타 지방자치단체의 조직과 운영에 관한 사항은 법률로 정한다. 대통령이 임시회의 집회를 요구할 때에는 기간과 집회요구의 이유를 명시하여야 한다.</li>
<li id="list2">모든 국민은 법률이 정하는 바에 의하여 선거권을 가진다. 신체장애자 및 질병·노령 기타의 사유로 생활능력이 없는 국민은 법률이 정하는 바에 의하여 국가의 보호를 받는다.</li>
<li id="list3">제1항의 탄핵소추는 국회재적의원 3분의 1 이상의 발의가 있어야 하며, 그 의결은 국회재적의원 과반수의 찬성이 있어야 한다. 다만, 대통령에 대한 탄핵소추는 국회재적의원 과반수의 발의와 국회재적의원 3분의 2 이상의 찬성이 있어야 한다.</li>
<li id="list4">헌법재판소에서 법률의 위헌결정, 탄핵의 결정, 정당해산의 결정 또는 헌법소원에 관한 인용결정을 할 때에는 재판관 6인 이상의 찬성이 있어야 한다. 법률이 정하는 주요방위산업체에 종사하는 근로자의 단체행동권은 법률이 정하는 바에 의하여 이를 제한하거나 인정하지 아니할 수 있다.</li>
<li id="list5">모든 국민은 사생활의 비밀과 자유를 침해받지 아니한다. 대법원과 각급법원의 조직은 법률로 정한다. 국가는 평생교육을 진흥하여야 한다. 연소자의 근로는 특별한 보호를 받는다.</li>
<li id="list6">국회에서 의결된 법률안은 정부에 이송되어 15일 이내에 대통령이 공포한다. 모든 국민은 행위시의 법률에 의하여 범죄를 구성하지 아니하는 행위로 소추되지 아니하며, 동일한 범죄에 대하여 거듭 처벌받지 아니한다.</li>
<li id="list7">국회의원은 국회에서 직무상 행한 발언과 표결에 관하여 국회외에서 책임을 지지 아니한다. 국회의원은 그 지위를 남용하여 국가·공공단체 또는 기업체와의 계약이나 그 처분에 의하여 재산상의 권리·이익 또는 직위를 취득하거나 타인을 위하여 그 취득을 알선할 수 없다.</li>
<li id="list8">재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을 해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.</li>
<li id="list9">사면·감형 및 복권에 관한 사항은 법률로 정한다. 모든 국민은 학문과 예술의 자유를 가진다. 감사원은 세입·세출의 결산을 매년 검사하여 대통령과 차년도국회에 그 결과를 보고하여야 한다.</li>
<li id="list10">국가는 농지에 관하여 경자유전의 원칙이 달성될 수 있도록 노력하여야 하며, 농지의 소작제도는 금지된다. 대법원은 법률에 저촉되지 아니하는 범위안에서 소송에 관한 절차, 법원의 내부규율과 사무처리에 관한 규칙을 제정할 수 있다.</li>
<li id="list11">훈장등의 영전은 이를 받은 자에게만 효력이 있고, 어떠한 특권도 이에 따르지 아니한다. 모든 국민은 신속한 재판을 받을 권리를 가진다. 형사피고인은 상당한 이유가 없는 한 지체없이 공개재판을 받을 권리를 가진다.</li>
<li id="list12">감사위원은 원장의 제청으로 대통령이 임명하고, 그 임기는 4년으로 하며, 1차에 한하여 중임할 수 있다. 학교교육 및 평생교육을 포함한 교육제도와 그 운영, 교육재정 및 교원의 지위에 관한 기본적인 사항은 법률로 정한다.</li>
<li id="list13">헌법재판소 재판관은 정당에 가입하거나 정치에 관여할 수 없다. 행정각부의 장은 국무위원 중에서 국무총리의 제청으로 대통령이 임명한다. 대통령은 제3항과 제4항의 사유를 지체없이 공포하여야 한다.</li>
<li id="list14">근로조건의 기준은 인간의 존엄성을 보장하도록 법률로 정한다. 행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 국민의 보통·평등·직접·비밀선거에 의하여 선출한다.</li>
<li id="list15">군사재판을 관할하기 위하여 특별법원으로서 군사법원을 둘 수 있다. 모든 국민은 자기의 행위가 아닌 친족의 행위로 인하여 불이익한 처우를 받지 아니한다.</li>
</ul>
<!-- ctrl art 누른 채로 화살표 밑으로 내리면 줄 전체가 커서가 됨 한번에 list작성 후 숫자 매기기. -->
</body>
</html>
Lorem Ipsum - 의미없는 텍스트 배치
-
<map> <area> usemap
<map name="맵이름">
<area>
<area>
<area>
</map>
<img src="" usemap="#맵이름">
<area>에서 사용 가능한 속성들
alt: 대체 텍스트 지정
coords: 좌표
href: 이동할 경로
shape: rect, circle, poly
target
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
</head>
<body>
<img src="images/kids.jpg" alt="" usemap="#favi">
<map name="favi">
<area shape="rect" coords="10,10,160,200" href="http://cafe.naver.com" target="_blank">
<area shape="rect" coords="220,10,380,200" href="http://www.facebook.com" target="_blank">
</map>
<!--
shape="Circle" coords="" x,y,r
shape="poly" coords="" x1,y1,x2,y2,x3,y3
-->
<hr>
<img src="화면설계자료/img_treat_list.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="" title="" href="http://www.naver.com" coords="153,126,28,44" shape="rect">
</map>
</body>
</html>3-3. SVG 이미지
Scalable Vector graphic
데이터 시각화
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<script src="js/modernizr-custom.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<h1>svg이미지</h1>
<img src="images/muffin.svg">
<script>
if(!Modernizr.svg) {
$("img").attr("src", "images/muffin.png");
}
</script>
<!--
안드로이드 2.3이하, IE 8이사 SVG 지원 안 함.
사용자 브라우저가 SVG를 지원하는지 -> 라이브러리를 통해
"Mordernizr.js"
-->
</body>
</html>raphael js - svg 특징 볼 수 있음.
chart.js -> 추천
'HTML5' 카테고리의 다른 글
| 21. 02. 01. 06장- 텍스트·문단·목록 관련 스타일, (0) | 2021.02.01 |
|---|---|
| 21. 01. 29. 05장- CSS의 기초, 6장. 글꼴 관련 스타일 (0) | 2021.02.01 |
| 21. 01. 28. 4장. 폼 (0) | 2021.01.29 |
| 21. 01. 26. 목록, 표 만들기. (0) | 2021.01.26 |
| 21. 01. 25~26. 기본 태그 (0) | 2021.01.26 |
