WEB
모바일 애플리케이션 종류
네이티브 앱
- 특정한 플랫폼 ( 안드로이드, IOS 등 )에 적합한 앱입니다.
모바일 웹
- 모바일 용 웹입니다. 데스크탑에서 볼 수 있는 네이버와 모바일용 네이버가 다른것처럼, 모바일용 네이버는 모바일 웹 입니다.
모바일 웹앱
- 웹을 모바일에서 사용할 수 있는 대신, 디바이스의 고유기능을 사용하지 못합니다.
하이브리드 앱
- 웹 코드와 네이티브 코드를 섞어서 사용. 디바이스의 고유기능과 웹뷰를 동시에 사용가능.
HTML
html 은 Hyper Text Mark-up Language 로, 웹페이지를 기술하기 위한 언어 입니다. 현재의 HTML 버전은 HTML5 이며, HTML5 은 완전한 CSS3 를 지원하며, 비디오와 오디오, 2D,3D 그래픽 지원, 로컬 DB 지원 등의 기능을 가지고 있습니다.
텍스트 관련
- HTML 에서는 특별한 태그 없이 글 작성이 가능합니다만,
<p></p>등을 이용하여 작성하는것이 좋습니다.
<html>
<head>
</head>
<body>
<p>이것이 하나의 단락입니다.</p>
<p>이것이 하나의 단락입니다.</p>
<p>이것이 하나의 단락입니다.</p>
</body>
</html>
-
<br>을 이용하면 줄바꿈이 가능합니다. 또한 종료태그는 없습니다. 이렇게 종료태그가 없는 태그를 Empty Element 라고 합니다. -
HTML 문서 작성시 주의할 점은 엔터키를 누르거나 스페이스바를 눌러서 공백을 주었다고 하더라도, 웹페이지에서 보여지는 결과물에서는 반영되지 않습니다. 그래서
<pre>태그를 이용하면 개발자가 입력한 그대로 화면에 출력됩니다. 다만, 폰트가 이상하며, 들여쓰기가 되므로 많이 사용되지는 않습니다. -
HTML 에서는 제목을 입력하기 위한 태그로 헤딩이 있습니다. 헤딩은
<h1>부터<h6>까지 6개를 사용하며<h1>이 가장 중요한 제목입니다. -
HTML 에서 특수문자를 표기하는 방법은 조금 특이합니다. 태그문 자체가
< , >로 표시하기 때문에 특수문자를 처리하는 방법이 별도로 존재합니다. 엔티티 코드라고 불리는 이 방법은 ,>와 같이 사용합니다.
리스트
리스트는 항목을 나열하기 위해 사용됩니다. 리스트는 크게 번호 있는 리스트와 번호 없는 리스트로 나뉩니다.
- 번호 있는 리스트 :
<ol>
<ul>
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>- 번호 없는 리스트 :
<ul>
<ol>
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ol>- 정의 리스트
리스트의 항목들과 함께 항목의 설명이 표시되는 리스트 입니다.
<dl>
<dt>에스프레소</dt>
<dd>- 커피의 기본, 커피의 원액이다.</dd>
</dl>링크
HTML 에서는 원하면 링크도 걸 수 있습니다.
<a href="info.html" target="_blank">추가 정보</a>
href 속성값으로는 링크를 걸고자 하는 주소를, target 에는 새 탭을 열지, 현재 페이지에서 열지를 결정하며, 추가 정보는 링크 텍스트 입니다.
주소의 값으로는 상대주소와 절대 주소가 있습니다. 상대 주소는 현재 html 페이지를 기준으로 주소를 설정할 수 있으며, 절대 주소는 https://www.naver.com 과 같이 페이지의 실제 주소를 입력합니다. 또한 현재 페이지의 다른 위치를 설정할 수도 있습니다.
이미지
웹 페이지에 이미지를 보여주기 위해 사용됩니다. <img> 태그를 사용하여 이미지를 보여줄 수 있으며 사용법은 다음과 같습니다.
<img src="seolak.jpg" alt="설악산">
src 속성에 이미지 파일의 이름을 지정합니다. 그러면 브라우저는 웹 서버에 이 이름을 가진 이미지 파일을 요청하고, 웹서버는 알맞은 이름을 가진 이미지 파일을 찾아 클라이언트에게 다시 전달합니다.
alt 속성은 이미지를 보여주지 못할 경우, 이미지에 대한 설명을 해줄 수 있는 속성입니다.
테이블
HTML 에서 테이블은 표 형태의 데이터를 보여주기 위해 사용됩니다.
<table border="1">
<caption>시간표</caption>
<tr>
<th></th>
<th>월요일</th>
<th>화요일</th>
<th>수요일</th>
</tr>
<tr>
<td>1교시</td>
<td>C언어</td>
<td>JAVA 언어</td>
<td>JAVA 언어</td>
</tr>
<tr>
<td>2교시</td>
<td>C언어</td>
<td>JAVA 언어</td>
<td>JAVA 언어</td>
</tr>
</table>
caption 은 테이블의 이름, <tr> 태그는 테이블의 행을, <th> 는 테이블 속성값의 제목이며, <td> 는 테이블의 데이터를 의미합니다.
