Surfin' Milkyway

웹앱 과정 - HTML

13 Apr 2020 | HTML5

Web Application Server(WAS)

  • Apache Tomcat
  • 웹 서버

맥북에서 tomcat 설치 및 서버 실행

  1. brew를 이용하여 설치 brew install tomcat
  2. tomcat 폴더로 이동하여 실행 cd /usr/local/Cellar/tomcat/9.0.34/bin ./catalina start

localhost:8080 에 접속하면 실제로 실행되고 있는 것을 볼 수 있다. catalina stop 을 입력하면 서버가 종료된다.

tomcat 폴더 아래 bin, webapps 폴더를 가장 많이 건드리게 될 것 webapps 폴더에 우리가 만든 소스를 넣어 실행한다.

맥북에서 ip 주소 확인하기

ipconfig getifaddr en0

이렇게 얻어진 ip 주소 + port 번호를 입력하면 해당 페이지를 볼 수 있다.

웹 주소

주소는 ip로 구성되고, Ipv6이 나와 있기는 하지만 일반적으로 Ipv4 사용

  • 예) 192.168.0.1
  • http://` : 프로토콜 -> 일반적으로 생략됨
  • www.naver.com : host (도메인)
  • :8080 : 포트 번호
  • /index.html : URI (주소식별자)

http vs https : 이론/기술적으로는 차이가 많다. https가 보안적으로 플러스가 되어 있다.

주소:포터/세부내용의 형식으로 이루어진다. -> 어떤 언어를 사용하면 어떤 주소로 가라.

웹브라우저를 통해 웹을 볼 수 있다. 그런데 인터넷 익스플로러가 웹 분야를 더럽혀 놓음(?)

사용자는 더 간편하게 사용하기를 원하고 있고 개발자의 부담이 증가 (다양한 플랫폼에서의 개발)

  • 웹사이트에 가입하면 가입환영이메일을 받는데, 이 이메일의 표준이 각 웹사이트나 웹브라우저마다 다름.

예전에는 html 자체가 만들어놓으면 읽어와라 하는 게 web이었지만 웹의 패러다임이 진화하면서 서로 실시간 소통을 원하는 사람들이 많아짐

현재는 소통, 플랫폼 중심의 웹 3.0을 사용하는 시대

웹 언어의 발전

알아두면 좋음

SGML

  • 가장 처음
  • 상당히 복잡하고 여러가지 기능들을 전부 넣어놓은 표준 문서.
  • 구조, 내용에 대한 상당히 상세한 표준
  • but 이것을 초반에 쓰다가 너무 복잡해서 HTML이 탄생

HTML

  • 화면에 어떤 내용을 보일 것인가!
  • 내용 위주, 표현 위주.
  • 의미적 관점에서의 단점 부각

XML

  • html은 화면에 어떻게 보이면 된다는 것만 나타냄. 이것만 가지고 있다 보니까 이것은 내가 어떠한 것을 나타내는지 의미를 모르겠다. 형식을 어떻게 나타내야할지 모르겠다. -> 좀더 구조화시키겠다 해서 나온 게 XML.
  • XML은 현재도 많이 사용 (문서를 왔다갔다할때)

XHTML

  • HTML + XML 현재 진행이 중단됨.
  • 이도저도 안됨. -> HTML 따로 XML 따로 사용.

HTML5

    • HTML4의 영역과 XHTML 1.1을 합쳐서 만든 마크업 언어 기존의 HTML 확장 현재 우리가 사용하는 언어의 대부분은 HTML5
  • 물론 예전에 만들어져 있는 웹 페이지들 보면 HTML4도 많음

인터넷 익스플로러가 웹 표준을 어기기 시작하면서 웹이 복잡해진 것. 위의 웹 언어의 발전도 인터넷 익스플로러 때문.

인터넷 익스플로러가 SGML을 무시하고 사용해도 화면에 표시될 수 있도록 해놓음. 개발자가 개발하기 어려운 부분들을 익스플로러가 넘어가도 되도록 해줌. 개발자는 개발하기 쉬워졌는데 언어가 지저분해짐.

###HTML5

요즘 웹브라우저의 특징 : HTML5 표준을 따라간다. HTML5 는 기존 웹 표준을 반드시 지켜야함. 기존보다 웹 표준이 강화됨

장애인, 노약자 등에 대한 보편적인 웹 접근성이 지원된다. -> 웹 접근성 표준 장애인이나 노약자 등이 좀더 사용하기에 편하도록 어떤 태그들이 어떻게 사용되어야 하고 꼭 어떻게 써야 한다라고 하는 것 그래서 웹 접근성을 평가해주는 업체도 따로 있음. 특히 구청, 시청 등 관공서들은 웹 접근성을 따라야 한다.

시맨틱 태그를 추가하여 기존의 태그들의 의미를 강화시킴 기존 태그들이 표현만 하는 거라고 하면 시맨틱 태그라는 개념을 추가하여 시맨틱 웹 기능을 제공

플러그인이 없어도 이미지나 mp4 파일 등을 플레이할 수 있도록 제공 -> 웹 페이지 하나가 하나의 어플리케이션이 될 수 있는 환경이 되었음.

###웹앱

native 어플리케이션까지는 못 가더라도 웹앱 수준에서 어느 정도 모바일을 지원함 아까 본 웹앱이 이정도 -> 이메일, 전화, gps 기능 등이 가능

웹 브라우저

웹 브라우저가 상당히 많은 이슈가 되어가고 있음. 지금 많은 사용자들이 인터넷 익플에서 크롬으로 넘어가는 추세

단순한 viewer로서의 예전 개념이 아니라 프로그램 자체를 실행하는 플랫폼화되어가고 있다. 데이터베이스 지원, 플레이어 지원 등!

웹 브라우저 자체가 플랫폼이 된다.

웹의 목표 : web for everything! 웹에서 모든 것을 사용할 수 있다.

인터넷 익스플로러가 시장을 점유하는 동안 비호환성 문제가 심화되어 웹브라우저 전쟁이 일어남 크롬이 가장 증가세가 뚜렷. 모바일에서 파이어폭스가 상당히 올라가 있음 오페라는 피씨에서 쓰는 사람들이 꽤 있음

웹브라우저는 단순한 번역기에서 벗어나 플랫폼화 되어가고 있다.

DOM : 트리를 구성한다. document object model

웹브라우저는 MVC 구조를 그대로 따른다. model과 data를 가지고 화면(view)로 분리됨 model -> HTML view -> CSS controller -> Javascript

네이티브앱, 웹앱, 하이브리드앱

  • 네이티브앱 : 네이티브로 실행
  • 웹앱 : 브라우저로 실행
  • 하이브리드앱 : 모바일 기기에 설치 but 내부적으로는 웹 기술로 구현

##HTML5 기초

HTML5 문서의 구조

  1. DOCTYPE 문서 유형 선언 <!DOCTYPE html>
  2. html 태그
    • head : 머리글, 문서 설명 정보
    • body : 실질적인 문서의 영역

DOCTYPE을 제외한 거의 모든 태그는 쌍을 가진다. <html></html> <body></body> <div></div>

HTML은 태그로 시작해서 태그로 끝난다. 태그 이름은 대소문자를 구별하지 않지만, 일반적으로 DOCTYPE을 제외하고는 소문자로 작성한다.

태그를 겹치게 작성하면 안됨

<!-- Bad -->
<a>
  <b>
</a>
</b>

<!-- Good -->
<a>
  <b>
  </b>
</a>

엔티티 참조는 <, >, & 정도만 알아둘 것.

메타 태그 : 태그를 설명하는 태그, 문서를 설명하는 태그 <meta>

특수하게 빈 태그들이 있음 (empty tag)

  • 속성, 속성값은 가지지만 내용은 가지지 않는 태그
    <meta>, <br>, <hr>

글자 태그

  • 가장 많이 쓰는 태그
  • 글자를 어떻게 나타내는가? 예) 굵게, 기울임 
    <b>굵게</b>
<i>기울임</i>

목록 태그

  • 순서 목록 태그 : <ol>
  • 비순서 목록 태그 : <il>

링크 태그

  • <a>

../ : 상위 폴더 ./ : 현재 폴더

공간 분할 태그

  • 이 뒤에 가면서 가장 많이 쓰는 태그 중 하나
  • 특히 <div>는 앞에 나와 있는 거의 모든 태그보다 가장 많이 사용됨
    • css와도 많이 연관되어 있음
    • 태그 자체는 큰 의미가 없이, 어디서부터 어디까지다, 라는 페이지 공간 분할로써의 역할
  • <span>과 <div>의 차이는 인라인 형식인가 블록 형식인가의 차이

시맨틱 태그

  • <header>, <nav> <section>, <article>, <aside>, <footer>은 모바일 웹 페이지에서도 가장 많이 쓰이는 형태
  • 그 중에서도 <header>, <nav>, <footer>가 가장 많이 쓰인다.

내용을 단위로 분할하여 화면에 나타낸다.

참고

Related Posts

Comments