웹스터디

코스 전체목록

닫기

HTML

| 공개

웹의 신체인 HTML에 대해서 알아봅니다. 

개발자 도구를 같이 공부하면 좋습니다.

크롬 개발자 도구

Git Hub

FireFox를 사용할 경우에는 Firebug를 사용하면 좋습니다.

예제들은 JS Fiddle를 통해서 실습해 볼 수 있습니다.

JS Fiddle에 대한 수업은 다음과 같습니다.생활코딩 JS Fiddle

HTML의 태그에 대한 정보들을 w3g.org에서 확인하면 된다.

HTML에서 문서 형식의 중요성에 대한 내용은 이 곳 에서 확인하면 됩니다. 

웹과 인터넷은 다르다. 인터넷은 통신망이 연결되어 있는 기기끼리 정보를 주고 받는 것을 지칭하지만, 반면에 웹은 인터넷 위에 문서가 오고가는 것을 지칭한다.

HTML5 과거에는 문서 중심의 어플리케이션이었다면, 최근에는 기능성 중심의 어플리케이션이 따른다.

<body>  태그 안 쪽에 들어가는 내용들을 '메타 데이터'라고 한다.

roll over란,링크 위에 커서를 올리는 행위를 말한다.

링크를 시키는 문법에는 여러 종류가 있다.
CS's AWS(링크만)
CS's AWS(타이틀 띄우기)
CS's AWS(새 창에서 열기)
CS's AWS(현재 프레임에서 계정으로 이동)

웹페이지의 특정한 곳으로 이동시키는 방법지디넷으로 이동

아스키 코드에 대한 참조 홈페이지.10번, 13번 참조

HEAD 태그는 문서를 설명하는 태그. body태그 안쪽에 있는 정보들이 웹브라우저에 뿌려지는 역할을 한다면, head태그는 body태그의 정보를 설명하는 메타 정보이다.(메타 정보라는 것은, 좀 더 추상적인 레벨에서 설명을 하는 정보를 뜻하는 듯 하다.)

meta tag라는 것은 어떤 내용을 기술하는 것이 아니라, 속성을 정의해 주는 태그이다. 어떤 내용들이 나오지는 않는다.

메타 데이터의 이름은 name속성 안 쪽에 들어가고, meta data의 형식은 content 안 쪽에 들어간다.

description은 검색 엔진에서 다룰 때 중요하게 다루는 데이터이다.

키워드라고 하는 메타 데이터는 description과 비슷한 형식. 데이터의 형식중에서 중요한 낱말들만 안 쪽으로 들어간다. 검색 엔진에서 중요하게 사용되는 데이터이다.

chastset이라고 하는 것은 문자의 코드! 문자코드를 제대로 기술하지 못하면, 문자가 깨지는 현상이 일어난다. 어떤 문서가 깨지는 현상이 일어났을 때, 가장 먼저 의심해봐야할 부분.

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="refresh" content="2;url=http://opentutorials.org/">

    </head>

</html>

이런 내용을 삽입하게 된다면, 2초후 웹 브라우저가 refresh가 되면서 생활코딩 사이트로 이동하게 된다.

이런 코드는 어떤 사이트가 더 이상 운영되지 않을 때, 자동으로 바꿔주는 역할을 하게 한다.

title 태그는 탭에 제목을 표시하는 부분에 표시가 된다.

actionget방식의 차이! 

url을 통해서 정보를 전달하는 방식이 바로 get방식이다!

url을 바뀌지는 않지만 서버에 정보를 전달하는 방식이 바로 post방식이다.

크롬 개발자 도구에서 network section을 보면 

request는 브라우저가 서버한테 정보를 '요청'하는 행위.

response는 서버가 브라우저로부터 어떤 '요청'을 받아서 어떤 연산을 한 후에 다시 클라이언트로 정보를 전송하는 행위.

get방식은 url을 통해서 데이터를 전송하기 때문에 보낼 수 있는 정보의 길이가 제한되어 있다. 퍼머링크란?

post로 데이터 전송시 url이 퍼머링크 방식으로 되지 않아서 링크를 클릭시 온전한 데이터를 볼 수 없다. 대신 전송할 수 있는 데이터의 양이 제한이 없다.

텍스트 필드(한줄)

form tag - form tag 안 쪽에 사용자의 입력을 받는 태그들이 있다.!

텍스트 area(여러줄)

form이라는 것.

사용자의 데이터를 서버에 전송하는 방법!

action에는 서버가 될, url의 주소를 넣는다. method에는 데이터를 전송하는 방법을 넣는다.

method의 전송 방법은 - get과 post 가 있다!

댓글

댓글 본문
graphittie 자세히 보기