반응형
웹에서 화면구현
1. html / css / javascript
2. 웹서버세팅
* windows 기반
1) jdk
2) apache-tomcat(웹서버 프로그램)
* 웹서버 - html 문서를 인터넷상에서 공유하는 프로그램(www)
프로그램은 기초과학에 속하며 용어를 잘 알아두는게 중요하다, 추후 용어들은 위키피디아 등에서 꼭 읽어볼것을 권장.
* 4차 산업혁맹 3가지 핵심기술 - IoT, 빅데이터, 블록체인
3. html(Hyper Text Markup Language)
1) Markup
태그를 중심으로 문서를 구조화(디자인 x) 시킴
<태그></태그> - <html>
<특수한태그 /> - <br />
<태그 속성="값" 속성="값"></태그>
2) Hyper Text
링크 구조
www.w3schools.com <- 웹 전반적인 내용이 잘 설명되어 있는 사이트
www.phpschool.com <-개발자 사이트 xhtml로 되어있음.
<!doctype html> <= html5 버전
<html>
<head>
<meta charset="utf-8" /> <= html5용 다국어 처리
</head>
<body>
</body>
</html>
ex.10 <head>에 값 넣기(제목) 및 표 만들기
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>난 제목</title>
</head>
<body>
<!--
표 - 행과 열
<table> - <tr> / <td>
-->
<table width="400" height="200" border="1">
<tr>
<td height="50">1 열</td>
<td>2 열</td>
<td>3 열</td>
</tr>
<tr>
<td height="100">1 열</td>
<td>2 열</td>
<td>3 열</td>
</tr>
<tr>
<td>1 열</td>
<td>2 열</td>
<td>3 열</td>
</tr>
</table>
</body>
</html>
즐겨 찾기시 위와 같이 지정된 값으로 저장 및 표시된다.
ex.11 <table>속 값 편집
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>난 제목</title>
</head>
<body>
<table width="400" height="200" border="1">
<tr>
<td align="center" valign="middle">1 열</td>
<td align="left" valign="top">2 열</td>
<td align="right" valign="bottom">3 열</td>
</tr>
<tr>
<td align="center">1 열</td>
<td align="left">2 열</td>
<td align="right">3 열</td>
</tr>
<tr>
<td valign="top">1 열</td>
<td valign="middle">2 열</td>
<td valign="bottom">3 열</td>
</tr>
</table>
</body>
</html>
ex.12 <table> merge기능(병합)
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>난 제목</title>
</head>
<body>
<table width="400" height="200" border="1">
<tr>
<td colspan="2">1 열</td>
<!--<td>2 열</td>-->
<td>3 열</td>
</tr>
<tr>
<td colspan="3">1 열</td>
<!--<td>2 열</td>-->
<!--<td>3 열</td>-->
</tr>
<tr>
<td rowspan="2">1 열</td>
<td rowspan="3">2 열</td>
<td>3 열</td>
</tr>
<tr>
<!--<td>1 열</td>-->
<!--<td>2 열</td>-->
<td>3 열</td>
</tr>
<tr>
<td>1 열</td>
<!--<td>2 열</td>-->
<td>3 열</td>
</tr>
</table>
</body>
</html>
Colspan을 한 후 merge되는 영역의 소스를 주석처리 또는 지워주지 않을 경우
ex.13 <table> colspan, rowspan을 이용한 표 편집
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>난 제목</title>
</head>
<body>
<table width="400" height="200" border="1">
<tr>
<td colspan="2" align="center">1</td>
<!--<td>2 열</td>-->
<td rowspan="2" align="center" valign="middle">2</td>
</tr>
<tr>
<td rowspan="2" align="center" valign="middle">4</td>
<td align="center">5</td>
<!--<td>3 열</td>-->
</tr>
<tr>
<!--<td>1 열</td>-->
<td colspan="2" align="center">3</td>
<!--<td>3 열</td>-->
</tr>
</table>
</body>
</html>
ex.14 <table> 전체 편집(cellpadding=셀내부, cellspacing=셀외부) 및 셀배경색 지정
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>난 제목</title>
</head>
<body>
<!--
bgcolor 색 관리
1. 이름(영문명)
2. 16진수(RGB) - #RRGGBB
background 위치
-->
<table border="1" cellspacing="0" cellpadding="10" bgcolor="red">
<tr bgcolor="green">
<td bgcolor="yellow">1 열</td>
<td bgcolor="#cc99ff">2 열</td>
<td>3 열</td>
</tr>
<tr>
<td>1 열</td>
<td>2 열</td>
<td>3 열</td>
</tr>
<tr>
<td>1 열</td>
<td>2 열</td>
<td>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
크롬에서 개발자 모드로해서 모바일 개발환경 만드는 법
ex.15 <table> 셀배경을 사진으로 할때
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>난 제목</title>
</head>
<body>
<!--
background="이미지 위치"
-->
<table width="400" height="300" border="1" >
<tr>
<td background="./images/tomcat.png">1 열</td>
<td>2 열</td>
<td>3 열</td>
</tr>
<tr>
<!--
table에서 컬럼 제목을 쓸때 사용
-->
<th>1 열</th>
<th>2 열</th>
<th>3 열</th>
</tr>
<tr>
<td>1 열</td>
<td>2 열</td>
<td>3 열</td>
</tr>
</table>
</body>
</html>
ex.16 목록 만드는 법
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<!--
목록
1. 순서가 없는 목록
2. 순서가 있는 목록
3. 사전식 목록
-->
<ul type="square">
<li>사과</li>
<li>수박</li>
<li>참외</li>
</ul>
<ol type="I" start="5">
<li>사과</li>
<li>수박</li>
<li>참외</li>
</ol>
<dl>
<dt>사과</dt>
<dd>맛있다</dd>
<dt>키위</dt>
<dd>맛없다</dd>
</dl>
<ul>
<li>사과</li>
<li>키위</li>
<li>
<ul>
<li>하나</li>
<li>둘</li>
</ul>
</li>
</ul>
</table>
</body>
</html>
ex.17 목록에 링크 거는 법
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<!--
html안에서 다른 html 호출
iframe
-->
<h3>새로운내용보이기</h3>
<p>
<ul>
<li><a href="https://m.naver.com" target="child">네이버</a></li>
<li><a href="https://m.daum.net" target="child">다음</a></li>
</ul>
</p>
<iframe name="child" src="https://m.daum.net" width="600" height="800" frameborder="0" scrolling="no"></iframe>
</body>
</html>
ex.18 사진을 통한 링크 거는 법
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<a href="https://www.daum.net"><image src="./images/workplace.jpg" width="400" height="379" /></a>
<a href="https://www.daum.net"><image src="./images/workplace.jpg" width="400" height="379" usemap="#workmap"/></a>
<!--
이미지 부분에 링크를 연결 - imagemap
-->
<map name="workmap">
<area shape="rect"
coords="34,44,270,350"
href="https://www.naver.com" />
<area
shape="circle"
coords="337,300,44"
href="https://www.daum.net" />
</map>
</body>
</html>
ex.19 사진속 특정부위를 눌렀을 경우 오른쪽 창에 링크된 html이 연동되어 열리는 방법
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<table border="1" cellspacing="0" width="400" height="400">
<tr>
<td>
<table border="1">
<tr>
<td rowspan="2"align="center" valign="top">
<target="child"><image src="./images/workplace.jpg" width="400" height="379" usemap="#workmap"/></a>
<map name="workmap">
<area shape="rect" coords="34,44,270,350" href="https://m.naver.com" target="child"/>
<area shape="circle" coords="337,300,44" href="https://m.daum.net" target="child"/>
</map>
</td>
</tr>
<tr>
<td>
<iframe name="child" width="600" height="800" frameborder="0" scrolling="no"></iframe>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
오전 주 내용
<table>
<tr>, <th>, <td>
- 표를 구성
- layout(전체 페이지의 윤곽)
<ul>, <ol>
<li>
<dl>
<dt>, <dd>
<iframe> 작은 창을 만드는 태그
<map>
<area>
ex.20 글에 북마크 하는 방법
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
목차<br />
<!--
목차 혹은 북마크 기능
-->
<ul>
<li><a href="#p1">1</a></li>
<li><a href="#p2">2</a></li>
<li><a href="#p3">3</a></li>
<li><a href="#p4">4</a></li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<p id="p1">
5·18 그날의 진실 ③ 민간인 학살
마을서 놀다 변 당한 전재수군
멱감다 총맞은 12살 방광범군
계엄군, 자위권 빙자한 무차별 학살
</p>
<p id="p2">
18명 죽음에만 전두환 살인죄 인정
147명 죽음은 아무도 책임 안져
암매장·집단성폭행 등도 규명돼야
</p>
<p id="p3">
14일 광주시 북구 운정동 국립5·18민주묘지 유영봉안소는 고요했다.
1980년 5월24일 공수부대 군인들의 무차별 총격에 희생된 전재수(11)군 자리엔 무궁화 꽃을 그린 영정이 놓여 있다. 정대하 기자
14일 광주시 북구 운정동 국립5·18민주묘지 유영봉안소는 고요했다.
1980년 5월24일 공수부대 군인들의 무차별 총격에 희생된 전재수(11)군 자리엔 무궁화 꽃을 그린 영정이 놓여 있다. 정대하 기자
</p>
<p id="p4">
총소리에 놀란 아이들이 흩어졌다. 한 아이의 검정 고무신이 벗겨졌다. 뒤돌아 고무신을 줍는 순간, 총탄이 쏟아졌다.
11살 전재수(1969년생)군은 1980년 5월24일 오후 1시50분 광주시 남구 효덕초등학교 부근 마을에서 놀다가 변을 당했다.
11공수특전여단 계엄군들은 시민군과 총격전을 하다가 민간인들을 향해 무차별적으로 총을 쐈다.
비슷한 시간 진월동 원제저수지에서 멱을 감던 방광범(1967년생)군도 총을 맞고 숨졌다.
</p>
<p>
국립5·18민주묘지 안에 있는 전재수(11)군의 묘지.
국립5·18민주묘지 안에 있는 전재수(11)군의 묘지.
공수부대원들은 보복살해도 서슴지 않았다. 12·12 및 5·18 재판 1심 판결문을 보면,
5월24일 1시55분께 광주 남구 송암공단 앞 도로를 거쳐 외곽으로 빠지려던 11공수여단 부대에 수류탄 포격이 쏟아졌다.
</p>
<p>
산에 매복중이던 전투병과교육사령부(전교사) 보병학교 교도대 군인들이 무장시위대로 오인하고 공격한 것이다.
군인들 간 오인 사격으로 63대대 9명이 죽고 33명이 다쳤다.
11공수 부대원들은 군화를 신은 채 민가에 들어가 권근립(25)씨 등 청년 3명과 주민 1명을 즉결처분했다.
</p>
</body>
</html>
ex.21 <input type>을 이용하여 입력창 만드는 법
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<form>
입력 : <input type="text"><br /><br />
입력 : <input type="text" size="50"><br /><br />
입력 : <input type="text" size="50" maxlength="10"><br /><br />
입력 : <input type="text" size="50" maxlength="10" value="초기값"><br /><br />
입력 : <input type="text" size="50" maxlength="10" value="초기값" readonly><br /><br />
입력 : <input type="text" size="50" maxlength="10" placeholder="값 입력"><br /><br />
입력 : <input type="password"><br /><br />
<textarea rows="10" cols="30" placeholder="값입력"></textarea><br /><br />
<!-- 다중 선택 -->
<input type="checkbox" name="r1" />사과<br />
<input type="checkbox" name="r2" checked />수박<br />
<input type="checkbox" name="r3" />딸기<br /><br />
<!-- 단위 선택 -->
<input type="radio" name="c1" />사과<br />
<input type="radio" name="c2" />수박<br />
<input type="radio" name="c3" />딸기<br /><br />
<input type="radio" name="c" />사과<br />
<input type="radio" name="c" />수박<br />
<input type="radio" name="c" checked />딸기<br /><br />
<select>
<option>딸기</option>
<option>사과</option>
<option selected>수박</option>
</select>
<select size="3" multiple>
<option>딸기</option>
<option>사과</option>
<option selected>수박</option>
</select>
</form>
</body>
</html>
ex.22 <input type>을 이용하여 입력창 만드는 법 2 및 윈도우와 크롬의 비교
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<form>
<input type="file" /><br /><br />
<!-- 디자인 없이 값을 보유하고 싶을 때-->
<input type="hidden" value="값"/><br /><br />
<input type="color" /><br /><br />
<input type="color" value="#ff00ff"/><br /><br />
<input type="date"/><br /><br />
<input type="number" min="1" max="5"/><br /><br />
<input type="range" min="1" max="5"/><br /><br />
</form>
</body>
</html>
ex.23 <form action>을 이용하여 내가 만든 버튼이나 입력결과를 지정 주소로 submit하는법(매크로)
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<!-- submit 버튼을 클릭하면 test.html에 값을 전송 -->
<form action="test.html">
<input type="text" name="id"/><br /><br />
<input type="text" name="name"/><br /><br />
<input type="submit"/>
</form>
<form action="https://search.naver.com/search.naver">
<input type="text" name="query"/><br /><br />
<input type="submit" value="네이버 검색"/>
<input type="reset" value="내용지우기"/>
<input type="image" src="./images/tomcat.png"/>
<input type="button" value="버튼모양"/>
<button>버튼</button>
</form>
<form action="https://search.daum.net/search">
<input type="text" name="q"/><br /><br />
<input type="submit" value="다음 검색"/>
</form>
</body>
</html>
ex.24 입력값을 검사 하는 법(문자, 숫자, 이메일, url등의 form으로 입력해야 submit 되는 조건)
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<!-- 입력값의 검사 -->
<form action="https://search.naver.com/search.naver">
<!--<input type="text" name="query" required/><br /><br />-->
<!--<input type="email" name="query" required/><br /><br />-->
<!--<input type="url" name="query" required/><br /><br />-->
<!-- 정규 표현식(문자열의 형태) -->
<!--<input type="text" name="query" pattern="[a-z]{3}" required/><br /><br />-->
<input type="text" name="query" pattern="[0-9]{3}" required/><br /><br />
<input type="submit" value="값전송" />
</form>
</body>
</html>
ex.25 <datalist>를 이용하여 입력창에 보기 제시 하는 법
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<form>
<input type="text" list="browsers" />
<!-- 제시어 기능 Suggestion -->
<datalist id="browsers">
<option value="Internet Explorer" />
<option value="Fire fox" />
<option value="Chrome" />
<option value="Safari" />
</datalist>
</form>
</body>
</html>
ex.26 ex.19랑 같은건데 강사님이 짜신 코드로 훨 씬 최적화 되어있음.
<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<table width="1100" height="400"border="1" cellspacing="0">
<tr>
<td width="450" align="center" valign="top">
<target="child"></target><image src="./images/workplace.jpg" width="400" height="379" usemap="#workmap"/></a>
<map name="workmap">
<area shape="rect" coords="34,44,270,350" href="https://m.naver.com" target="child"/>
<area shape="circle" coords="337,300,44" href="https://m.daum.net" target="child"/>
</map>
</td>
<td align="center">
<iframe name="child" src="http://m.daum.net" width="600" height="800" frameborder="0" scrolling="no"></iframe>
</td>
</tr>
</table>
</body>
</html>
반응형
'Web & Mobile > HTML' 카테고리의 다른 글
| Lecture 1 - HTML(1) (0) | 2019.04.12 |
|---|
댓글