본문 바로가기

언어공부/HTML

(14)
HTML - input type 속성값 HTML - input type 속성값 폼 입력 양식은 form 태그 안에 input 태그로 사용한다. input type 속성값 HTML form 양식에서 input 태그를 이용해 입력을 받는다. input 태그에는 type속성 외에 value, name속성이 있다. type : input 태그의 유형 name : form이 제출될 때 서버에서 form data를 참조하기 위해서 사용. 서버로 전달되는 이름을 뜻함. (사용자 임의 지정) value : input 태그의 초기값을 뜻하며 사용자가 변경 가능 input type 속성값들은 아래와 같다. 1) text : 한줄 입력박스를 만들어주며, 만약에 input의 type을 지정해주지 않으면 defalut 상태로 text가 지정된다. 2) passwor..
HTML - form 폼 입력 양식 / fieldset - 입력양식들을 그룹화 / legend - 입력양식 그룹의 제목 HTML - form 폼 입력 양식 form 폼 입력 양식 form태그안의 입력양식 자료는 서버로 전달된다. method속성은 자료를 서버로 전달하는 법을 지정한다. 전달하는 방법에는 get과 post가 있다. get 방식: method속성을 생략하면 기본값이 get 방식이다. get방식은 서버로 전달되는 자료값이 웹브라우저 주소창에 노출되어 보안성이 좋지 않다. 그리고 서버로 보내는 자료 길이 제한도 있다. post 방식: 자료 노출이 되지않아 보안성이 뛰어나며, 서버로 전달되는 자료길이 제한이 없다. 대부분 post방식을 사용한다. action속성값에는 서버 파일이 들어간다. form태그는 입력양식을 작성할 때 사용되는 태그이다. form태그 안의 입력양식 자료는 서버로 전달된다. inpyt type..
HTML - div와 span HTML - div와 span div와 span 특징 div는 divide의 약자로 웹페이지를 논리적인 섹션 영역으로 분리할 때 많이 사용한다. div는 블록 수준영역이기 때문에 한줄 전체 영역을 차지한다. span은 인라인 요소이기 때문에 자신이 필요한 크기만 차지한다. div는 웹 페이지의 공간을 분할하여 레이아웃을 작성하는데 많이 사용된다. 과거에는 table을 이용한 레이아웃을 많이 사용했지만 지금은 올바른 방법이 아니다. 테이블은 단지 표 형태의 데이터를 표시하는 용도로만 웹표준에서는 사용해야 한다. divide의 약자로 블록 수준 영역이기 때문에 한줄 전체 영역을 차지한다. 보통 너비와 높이를 지정해 레이아웃을 작성한다. 인라인 수준 영역이기 때문에 필요한 크기의 영역을 차지한다.
HTML - iframe HTML - iframe 태그 iframe 태그 특징 iframe은 웹 페이지 안에서 다른 웹 페이지를 표시하고자 할 때 사용한다. iframe은 inline frame의 약자이다. 흔히 광고를 위해 이것을 사용한다. 하나의 웹 페이지를 여러 프레임으로 나누어서 각각 다른 문서를 표시하고자 할 때도 사용한다. iframe은 html 4.01부터 도입하였고, 거의 모든 브라우저가 지원한다. ifame은 웹페이지 안에 다른 웹페이지를 표시하고자 할 때 사용한다. src="파일 경로와 파일명" (지정한 경로의 파일 삽입) ../ 는 한단계 상위폴더로 이동(상대경로) width="너비크기", height="높이크기" * 보안때문에 안되는 사이트도 있다.
HTML - 태그 정리 (2) HTML - 태그 정리 (2) ul태그는 부모태그, li태그는 자식태그로 부모는 반드시 자식을, 자식은 반드시 부모태그를 갖고있다. 여기서 ul li태그는 순서없는 목록을 만드는 태그이다. ul은 unordered list의 약어이다. ol태그는 부모태그, li태그는 자식태그로 부모는 반드시 자식을, 자식은 반드시 부모태그를 갖고있다. 여기서 ol li태그는 순서있는 목록을 만드는 태그이다. ol은 ordered list의 약어이다. dl태그는 정의리스트, dt태그는 항목, dd는 항목에 대한 설명할 때 사용하는 태그이다. 하이퍼링크 태그로 href속성으로 이동할 주소 또는 파일명을 지정해 지정한 주소 또는 파일로 이동시킨다. 하이퍼링크가 생기면 밑줄이 생기고 마우스 오버 했을 때 화살표 커서모양이 손가..
HTML - 태그 정리 (1) HTML - 태그 정리 (1) , , ... , heading을 나타내는 태그로 신문의 머리기사 와 마찬가지로 페이지의 머리기사를 의미한다. 주로 본문내용 제목을 지정할 때 많이 사용한다. h1이 가장 크고, h6이 가장 작다. 문단(단락)을 지정하는 태그이다. 줄바꿈을 해주는 태그이다. 입력한 그대로 표시되는 태그이다. 문장 내의 특정 문자를 더욱 진하게 강조한다. 문장 내의 특정 문자를 더욱 진하게 강조한다. 문자 밑에 밑줄을 긋는다. html5에서 태그를 사용하는 것 보다는 CSS로 text-decoration속성을 underline으로 지정하는 법을 추천한다. 글자를 기울이는 태그이다. 글자를 기울여 강조하는 태그이다. , sub는 아래첨자 태그이고 sup는 위첨자 태그이다. 수평선 태그이다.
(생활코딩) HTML 링크 걸기 <a> 태그가 웹의 왕국이라면 태그는 왕국의 제왕이다. 현대의 HTML은 150여 개 태그로 이루어져 있지만, 이들 모두 태그 아래에 있다. 검색 엔진들은 태그 덕분에 전 세계의 웹을 항해하면서 웹 페이지를 발견할 수 있고, 태그가 없다면 검색엔진은 존재하지 않는다. HyperText가 바로 이 태그를 의미 하며, anchor의 첫 글자를 띈 이다. achnor는 배가 정박할 때 사용하는 덫을 의미이다. 정보의 바다에 정박한다는 의미일 수 있다. 태그는 링크의 기능을 한다. 작성한 글 중 HTML에 공식 사용 설명서의 링크를 걸어보도록 하자. "html specification"로 검색 했을 때, HTML을 만드는 W3C라는 국제기구에서 만든 공식 설명서를 찾는다. 해당 링크를 복사 한 후, 링크 할 부분 (h..
(생활코딩) HTML 문서의 구조 <!doctype html>,<html>, <title>, <head>, <body> HTML 제목을 태그를 사용해 입력해보자. 태그는 웹페이지의 제목을 사용자에게 명시적으로 알려줄 수 있을 뿐만 아니라, 검색 엔진과 같은 기계들은 바로 이 태그를 책으로 치면 책 표지와 같은 정보로 사용한다. 에디터에 웹브라우저 좌측 상단에 문서제목을 표시 작성 후 저장해준다. 웹페이지를 불러오면 지정 제목으로 이름이 변경된 것을 볼 수 있다. 또 에디터에 한글을 입력하면 웹페이지에 깨질 수 있는데 파일 형식을 지정 안해줬기 때문이다. 해당 에디터에서 작성하고 있는 파일은 utf-8로 저장되어 있으므로, 해당 파일을 웹브라우저가 열 때도 utf-8로 열도록 지정해줘야 한다. 여기서 본문과 본문을 설명해주는 부분(title과 meta charset)이 나뉘어 지는데 이부분을 본문로 작성해줘야 한다. HTM..