HTML WebUI 구현

1. 모바일 어플리케이션 종류

• 네이티브 앱 : 우리가 만드는 어플리케이션
• 디바이스 고유언어로 만든다.
• 모바일 웹 : 핸드폰에 설치되어있는 브라우저에 사이트를 킨다.HTML,CSS,PHP,javascript 등
• (실제 web과 주소가 다르고 핸드폰에 적합하게 스타일링한다.)
• 모바일 웹앱 : 액티비티안 웹뷰를 넣어서 보여준다.디바이스 고유기능을 쓸 수 없다. 가장만들기 쉽지만 기능적 제한이 있다.
• HTML,CSS,PHP,javascript 등으로 web page를 만든다.
• 하이브리드앱 : 네이티브앱 + 웹앱 → 요새는 잘 안쓴다.

※ 요새는 cross platform을 잘 쓴다.

2. Web UI

web ui를 만든다는것인 웹뷰에 web site를 만들어서 넣는다는것이다.

• xml 역할 : HTML
• 꾸미는 역할 : CSS
• 움직이는 동작 작업 : java script

⇒ 팀 프로젝트 진행 (7~8일)

3.Web이란?

글씨말고 이미지도 볼 수 있게 하면 좋을텐데.. HTML

웹 이라는 말 자체는 www이다. world wide w를 줄인것이다.

정보를 제공하는 쪽을 웹서버 ↔ 정보를 받는 쪽은 클라이언트

근데 정보를 주고받을때 규칙이 필요하다. 그 규칙을 프로토콜이라고한다.

HTTP Request : 특정한 파일을 요청한다. GET방식 등

HTTP Response: 찾은 파일을 돌려준다. 200은 OK라는 뜻이다.

서버에서 정보를 줄 때, 정보를 해석할 수 있게 표시해줘야한다.

xml은 내가 정하는거고, HTML은 이미 정해진거다. (<p>, <a> 등)

웹브라우저의 역할 : HTML을 예쁘게 보여주는 역할이다.

팀 버너스리 본인이 불편해서 HTML을 만듬. (연구자료 그래프 보내고시퍼)

HTML을 쓰는 방법 : https://www.w3schools.com/

HTML 버전은 계속 바뀌다가 지금의 HTML5이 나왔다. (2012년)

4버전전까지는 동영상이 불가능했다. 플래시가 필요함 → 외부 프로그램을 쓰면 보안에 취약하다.

HTML5로 변하면서 기능이 많아졌다.

네이티브앱과 웹앱은 보이기엔 차이가 많이 없다.

토스도 웹앱으로 만든 대표적인 앱! , 찜카

웹사이트도 HTML로만 만드는건 아니다.

HTML로 내용을, CSS로 색깔을 넣고, 동작은 javaScript로 !

4. element

xml에서는 view , html에서는 element라고 부른다. (텍스트든 이미지든 다 요소라고부른다. )

요소 = (시작태그+ 콘텐츠 + 종료태그)

문법

1. 시작태그 : <이름=”값”>
2. https://www.naver.com>ㅇㅇㅇㅇ

findViewById → findElementById → getElementById

1. <!DOCTYPE> 맨위에 쓴다.
2. 헤드와 바디요소를 구별한다.

 

 

헤드는 맨 위에 탭 부분, 바디는 하얀바닥부분

이제 기본적인 웹 페이지를 만들어보자. html로 만든거를 웹페이지 문서라고 한다.

이미지, 리스트 등등 만들어보자!

• <p>는 한단락, 끝나면 자동으로 줄넘김이 된다. → 한줄이아니다. 얘는 마진과 패딩을 기본으로 갖고있어서 간격이 멀다. 띄어쓰기는 다섯칸한다해도 한칸 띄어진다.
• <pre>는 앞에 tab이 좀 되어있어서 잘 안쓴다.
• 헤딩요소는 글씨 크기 선택가능하다.
• 텍스트 서식은 찾아보자.

</b> → </strong>으로 변경됨. 강하게 써라. (시멘틱)

<i> → <em> 텍스트를 강조한다. 이탤릭

<code>는 코드임을 강조한다.

<sup>위첨자 , <sub>아래첨자

• &와 ;사이에 문자를 써준다 .

> 은 >을 의미한다.

 은 non-breaking space의 약자로 공백한개문자를 뜻한다.

• meta : 데이터를 설명하려는 태그문 메타

<meta charset="utf-8">

• 리스트 <ul>
• url 걸기 : 앵커

target 속성을 찾아보자 . http://www.tcpschool.com/html-tag-attrs/a-target

• block요소는 세로는 wrap이고 가로는 match이다.
• inline요소는

Entitycode

https://aneok.tistory.com/86

empty element

엔드태그가 필요없는 요소들

• <br> 강제 줄바꿈 태그
• <hr> 태그를쓰면 수평선이 생긴다.
• 이미지 보여주기

alt는 이미지가 없으면 대체로 보여주는 것 “ 설악산 “

html이 이미지를 갖고있는게 아니다. 이미지 주소를 서버에 넣는것이다. → 서버에 이미지를 업로드해줘야한다.

JPEG : 24비트, 투명도가 없다. 손실 압축 방식 (실사사진들)

PNG : 무손실 압축 방식. 투명도를 갖고있다. 32비트. (게임캐릭터들)

GIF : 애니메이션을 지원한다. 256개의 색깔만 보여준다. 해상도가 아주떨어짐