You are using an outdated browser. Please upgrade your browser to improve your experience.

11/25 html수업

bitcamp-web-project-webapp-source

한빛출판네트워크 모던 웹디자인을 위한 HTML5+CSS3입문

UX가 형편없다 -> 링크일경우 마우스 커서가 손모양으로 바뀐다던가 하는 것

사용자 편의성으로 고려했느냐? = UX(user expierence)

input창을 숫자/텍스트 타입에 따라 모바일에서 뜨는 키패드 창이 다르기 때문에 그걸 고려해서 프로그램을 짜도록 한다.

html태그에서 콘텐츠는 head와 body사이에만 존재해야 한다.

가장 바깥쪽에 있는 태그 : root태그 = html태그와 같은 것들

강사님 사진 첨부 : html트리구조

p엘레멘트와 h1엘레멘트는 분명 차이가 있다. 구글 검색 엔진에서 서치할때 h1을 보고 그것이 주제인지 판단할 수 있지만 p는 이 문서가 어떤 내용인지 판달할 수가 없다. -> 사용자가 볼때는 똑같지만 자기 홈페이지가 잘 검색되게 하기 위해서는 그 해당 의미의 엘레먼트를 사용해야한다.

의미있는 웹사이트 : 시멘틱 웹 (Semantic Web)

웹 기술은 정보표현과 전달에 간편한 방법을 제공하여 인터넷이 실생활까지 확산되는 기폭제 역할을 하였다. 그러나, 웹상에 축적된 정보가 방대해 짐에 따라 많은 문제에 봉착하게 되었다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드(keyword)에 의한 정보 접근만을 허용하고 있어, 정보 검색시 무수히 많은 불필요한 정보가 돌출하여 정보 홍수를 가중시키고 있다. 또한, 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어, 모든 정보를 사용자가 직접 개입해서 처리하여야 하는 문제가 있다. 이러한 문제들의 근본원인은 컴퓨터가 정보자원의 의미를 이해하지 못하는데 원인이 있다. 이러한 웹 기술은 팀 버너스리가 초창기에 구상하였던 웹과도 거리가 있다.

2001년 팀 버너스리등에 의해 웹 기술의 비전으로 시맨틱 웹이 제시되었다. 시맨틱 웹은 기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성(semantic interoperability)을 실현하여, 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할수 있는 웹을 만드는 것이 목표이다.

Lorem ipsum 텍스트 : 아무의미없는 더미text이다. 내용보다 디자인에 집중시키기 위해 사용됨.

인간의 마음을 모르는 개발자.. 문법을 너무 빡세게 적용한 나머지 폭망한 xhtml.. 그 이후에 다시 등장한 것이 html5

 <h2>dolor sit amet</h2>
    <hr />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

시작태그와 끝태그사이에 아무 콘텐츠도 없으면 시작태그에 /를 붙여준다.

<a href=

여기서 a는 anchor : 닻이란 뜻으로 정박지. 이 컨텐츠가 머무르고 있는 곳을 뜻한다.

href : hyper reference

=> 우리를 대신해서 링크를 대신 요청을 하는 엘리먼트

=> 원래는 우리가 직접 다 링크 입력해야하는 건데 a엘리먼트가 대신 해주는거임

줄에 그냥 놓여지는 : 인라인엘리먼트(a, 등등)

한줄 전체를 장악하는 : 블록엘리먼트 (p, head, br엘리먼트)

개발자도구 html은 원래 소스를 html문법에 맞춰 재구성한다. 그 과정에 없던 태그가 생겨서 들어갈 수도 있다.

image

image

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
   <audio src="Kalimba.mp3" controls="controls"></audio>
</body>
</html>

audio엘리멘트 : 소리를 출력할수있다.

=”” attriment value

controls속성은 속성이 존재하는 것 만으로도 의미가 있다. 일종의 yes / no

속성 이름이 존재하는 것 만으로도 화면에 띄워지기 때문에 control하나만 있어도 됨. 뒤에 =”” 값을 작성하지 않아도 됨. 뒤의 =”“값은 의미x! 하지만 기본적으로 작성해줘야 안정감 있고 일관성을 지킬 수 있다.

주의 !!!!!!!! true/false가 아니다! controls=”false” 이거 아무 소용 없다! 쓰기싫으면 controls속성 값 자체를 제거해야 한다!!

<!DOCTYPE html>
<html>
<head>
    <title>Video.js Basic</title>
    <link href="http://vjs.zencdn.net/4.9/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/4.9/video.js"></script>
</head>
<body>

</body>
</html>

자바스크립트는 시작과 끝태그 반드시 적어야 한다.

링크는 적지 않아도 된다.

placeholder구글링하면 기본 이미지 틀을 찾을 수 있다!

Form엘리먼트

GET요청과 POST요청의 차이

get은 url에 검색했던 데이터가 뜬다. content는 url에 데이터가 붙어서 가기 때문에 length와 type이 없다.

post는 content length와 content-type이 있다.

둘다 서버 응답은 같다.

post를 생략하면 기본이 get이다! 나중에 servlet에서 다시 설명나옴.

프록시 : 감시자

요청/응답 할 때 마다 로그를 남겨서 이상한 요청/응담이 나올 경우 바로 체크할 수 있다. 윈도우 Fiddler : 프록시 툴

요즘 table로 입력폼 만들면 촌개발자란 소리 들음…

div : block속성, 한줄을 차지한다.

span은 그냥 텍스트를 구분하는 용도로 쓴다. 블록타입 아니고 인라인타입

  #sidebar a:hover {
        text-decoration: underline;
        background-color: blue;
        color: yellow;
      }

hover : 마우스가 올라가있는 상태

해석 : a태그에 대해서 hover면 코드블럭을 실행하라는 뜻

a:hover와 같은 코드를 pseudo selector코드라고 부른다.

poiemaweb.com/html5-syntax