일상의 변화를 기록

웹페이지는 사용자와 서버간의 상호작용이 가능하다. 입력한 것을 서버로 보내면 서버는 그것을 처리하여 사용자에게 보여준다. 이렇게 서버로 정보를 보내는 역할을 하는 것이 form이다. form의 속성- action : 보낼 서버의 주소- method : 서버에게 보내는 방법 (GET, POST, PUT, DELETE)를 정하는 속성 * 가장 일반적으로 쓰이는 속성(GET, POST)GET - URL에 전송하는 내용이 노출된다. 속도는 빠르지만 보낼 수 있는 용량이 작고, 보안성이 취약하다.POST - URL에 전송하는 내용이 노출되지 않는다. 이렇게 폼안에 서버의 주소와 보내는 방법을 정해주고 그 안에서 input 태그를 이용해서 정보를 입력받고 그 정보를 보내게 된다. 폼에서 보낼 서버의 주소는 적지 않..

input태그(2)에서는 HTML5에서부터 지원하는 타입들에 대해서 쓰겠다.(윈7, 익스플로러8에서는 지원이 안되는 타입들) 1. e-mail email 타입은 간단한 이메일 형식을 확인해준다. @이의 앞뒤 정도만 확인해서 정확하지는 않지만 어느정도 잘못된 이메일을 걸러줄 수 있다. required - 아무것도 입력하지 않고 submit을 눌렀을때 공백을 채우라는 메세지를 띄워준다. 2. number, range number은 숫자만 입력하도록 제한해주고 range는 스크롤바와 비슷한 바를 생성해서 컨트롤 할 수 있다. number에 숫자 이외의 문자를 넣으면 입력되지 않는다. value로 초기값을 min으로 최소값을 max로 최대값을 설정할 수 있다. range또한 min,max를 설정할 수 있고 st..

홈페이지창을 보면 각 사이트마다 아이콘이 적용된 것을 확인할 수 있다. 티스토리에는 주황바탕에 T 모양이 새겨진 아이콘이 있다 이 아이콘을 적용하는 방법은 head 태그안에 link 태그를 이용해서 추가 할 수 있다. 링크태그를 이용해서 버튼 모양의 아이콘을 추가한 모습이다. 이러한 아이콘을 favicon이라고 부른다 input에 대하여 들어가기전에 form 태그를 먼저 알아보자 웹페이지는 사용자와 서버간의 상호작용이 가능하다. 입력한 것을 서버로 보내면 서버는 그것을 처리하여 사용자에게 보여준다. 이렇게 서버로 정보를 보내는 역할을 하는 것이 form이다. form의 속성- action : 보낼 서버의 주소- method : 서버에게 보내는 방법 (GET, POST, PUT, DELETE)를 정하는 속..

iframe 태그는 html 문서안에 또 다른 문서를 넣을수 있다. 예를 들어서 예제 페이지 안에 유튜브 동영상을 iframe 태그를 이용해서 넣을 수 있다. 사용 방법 이다. 유튜브에 소스코드 복사 기능을 이용해서붙여넣기 해서 동영상을 추가해 봤다. 로그인 페이지와 동영상을 iframe으로 불러와서 붙여넣은 화면이다

리스트에는 3가지 종류가 있다. 1. UL : 정렬 넘버가 없는 리스트 2. OL : 정렬 넘버가 있는 리스트 3. DL : 리스트안의 리스트 ul 태그는 정렬 넘버가 없는 리스트를 만드는 태그로서 위와 같이 ul태그로 열고 닫으며 그 안에 li태그를 통해서 리스트의 목록을 넣을수 있다. style은 스타일 형태를 지정할 수 있으며 default값은 disc이다. default로 리스트를 생성할 경우 li태그로 추가한 항목들 앞에 검정색 동그라미가 붙는 것을 확인 할 수 있다. ol 리스트의 사용법이다. ul과 같이 ol태그로 묶고 li태그를 통해서 항목을 추가한다. type을 통해 타입을 설정할 수 있고 default 값은 1이다. default 값으로 ol을 출력한 모습이다. 마지막으로 dl 태그를 ..

a 태그는 anchor의 약자로 닻이라는 의미를 갖고 있으며 하이퍼링크를 걸어주는 태그이다. 1. href : hypertext reference의 약자로 연결할 주소를 지정하는 속성이다. 2. target : 링크를 여는 방법1.)_self : 현재 페이지에서 연결됨2.)_blank : 새탭에서 연결됨3.)_parent : iframe환경에서 사용되며 부모창을 연다.(부모창이 없으면 해당 창에서 링크로 연결된다.) 4.)_top : iframe 환경에서 사용되며 최상위페이지에서 연결됨.(부모창이 없으면 해당 창에서 링크로 연결된다.) 3. title : 마우스커서를 올릴때 도움말을 설정 사용법 위와 같이 사용한한다. 고양이 이미지는 img에서 사용한 이미지이다. 링크가 걸릴 텍스트에 이미지를 넣으면 사..

img는 이미지를 삽입하는 태그이다. src : 이미지 경로 alt : 이미지에 대한 설명 width : 이미지 가로크기 height : 이미지 세로크기 width와 height를 입력하지 않을시 이미지 원본의 크기로 출력된다. 러시안블루2 라는 사진을 출력하도록 만들었다. 정상적으로 이미지 파일이 출력된 모습 만약 정상적으로 이미지를 불러오지 못했을경우 alt의 설명이 나오는 것을 알 수 있다.

테이블은 row(행)과 column(열)로 이루어져 있으며 rowspan과 colspan은 행과 열을 합치는 역할을 합니다. 위와 같은 테이블에서 1번째 테이블은 2행8열로 이루어져 있지만 1번째 행도 8열로 만든뒤 실행을 시키면 위와 같이 의도한 형태와는 다른 형태를 볼 수 있다. clospan을 이용하면 열을 병합할 수 있게 된다 colspan = "8" 은 자신을 포함해서 8개의 열을 병합하라는 뜻이다. colspan을 이용해서 열을 병합한다는 것을 기억하도록하자. 두 번째 테이블은 8행2열 테이블로 1열의 행이 2개로 병합되어있다. 따라서 row(행)span을 이용해서 병합을 해줘야 한다는 것을 알 수 있다. 4로 채우도록 병합해야하기 때문에 주차행이 아닌 4가 들어가는 행으로 7개의 행을 병합하..

테이블 테이블은 table 태그를 이용한다. tr은 로우(row, 행)을 의미하고 th(table head)로 글씨가 커지고 굵어진다. td(table data)는 테이블에 넣을 데이터를 뜻한다. html과 예제를 실행시킨 모습이다.caption 태그는 테이블의 제목을 지정하는 태그이며 2행 2열의 테이블을 만든 모습이다.

1. br 태그는 'break'의 약자로 줄바꿈을 할 때 사용된다.Enter키와 같은 역할로 로 사용한다. 은 여는 태그는 있지만 닫는 태그()은 존재하지 않기 때문에 사용시 로 사용해도 문제는 없지만 로 사용하는것이 더 가독성을 좋게 만든다. 2.p는 'paragraph'의 약자로 문단을 표현할때 사용한다. 로 열어서 사용하고 문단이 끝나면 닫는다. 태그로 문단을 감싸면 문단 위와 아래에 작은 공백이 생긴다. * html은 태그를 이용하지 않으면 줄바꿈을 인정하지 않기때문에 와 을 사용해야한다.* html은 공백을 한 글자만 허용하기 때문에 여러 공백을 표기하고 싶으면 ' '(공백문자)을 사용해야 한다. 태그로 묶여진 문장은 하나의 문단으로 취급되어 첫번째 문단과 두번째 문단 사이에는 줄바꿈 태그가 없..