개발 메모리

Input 요소의 타입 텍스트 입력(text) 사용자로부터 한 줄의 텍스트를 입력받을 수 있는데, form 요소 그 자체는 웹 페이지에 나타나지 않는다. 검색할 내용을 입력하세요 : 비밀번호 입력(password) 사용자로부터 비밀번호를 입력받는데 화면에 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시된다. 사용자 : 비밀번호 : 네모 버튼 선택(Button) 라디오 버튼(radio) 여러 개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있다. 정확한 입력값 전송을 위해서 똑같은 name 속성을 가지고 있어야 한다. checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다. HTML CSS JAVA C++ 체크박스(checkbox) 여러 개의 옵션 중에서..

Form 요소의 속성 autocomplete 속성 autocomplete 속성은 form이나 input 요소에 입력된 정보를 저장할지 안 할지를 명시한다. 속성값이 on으로 설정되면 브라우저는 사용자가 입력하는 정보를 자동으로 저장하고, 이후에 입력되는 입력값을 저장된 정보를 바탕으로 자동 완성해준다. text, password, range, color, date, datetime-local, month, week, email, url, tel, search과 같은 input 타입에서만 사용할 수 있다. 이름 : 나이 : novalidate 속성 novalidate 속성은 input 요소의 속성이 아닌 form 요소의 속성으로, 입력한 정보를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을..

폼(Form) 요소의 구조 웹 페이지에서는 form 요소는 사용자로부터 입력받거나, 사용자가 입력한 데이터를 서버로 보낼 때 사용한다. action 속성은 입력 데이터를 전송할 URL 주소를 명시한다. method 속성은 입력 데이터 전달 방식을 의미하며, HTTP 프로토콜로 입력 데이터를 서버에 전달하는 Get과 Post 방식이 있다. 폼(Form)의 method 속성 Get 방식 Get 방식은 전송 URL에 입력 데이터를 쿼리 스트링(Query String)으로 보내는 방식으로, URL 뒷 부분에 데이터를 추가해 전달한다. 데이터가 주소 입력창에 그대로 나타나 보안에 취약하고, 전송할 수 있는 최대 글자수가 정해져있어서 크기도 제한적이다. URL 바로 뒤에 ?를 통해 데이터의 시작을 알려주고, key..

테이블(Table) (table row)는 테이블에서 열(줄)을 구분해 준다. (table heading)는 제목 칸으로 자동으로 굵은 글씨에 가운데 정렬이 된다. (table data)는 테이블의 열을 각각의 칸으로 나누어 준다. 참치 고래 상어 문어 오징어 고등어 테두리 표현 CSS의 border 속성값을 따로 명시하지 않으면 테이블은 언제나 빈 테두리다. 테이블 합치기 열 합치기 - colspan 참치 고래 상어 문어 꽁치 행 합치기 - rowspan 상어 문어 꽁치 고등어 돌고래 열과 행 합치기 1 2 3 4 5 6 7 8 9 10 테이블의 캡션 설정 태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다. 해양 생물 참치 고래 날치 Reference http://www.tcpscho..

목록(List) 목록 태그는 주로 내비게이션 메뉴를 만들 때 자주 사용되며, 중첩도 가능하다. 순서가 없는 리스트(Unordered List) 리스트 앞에 검정색 작은 원이 위치하는데, CSS의 list-style-type 속성을 사용하면 마커를 다른 모양으로 변경할 수 있다. disc : 검정색 작은 원 모양 (기본설정) circle : 흰색 작은 원 모양 square : 사각형 모양 수박 참외 옥수수 순서가 있는 리스트(Ordered List) start 속성으로 리스트 시작값을 정할 수 있으며, value 속성으로 해당 리스트 순번을 정하고, reversed로 리스트 역순을 표현할 수 있다. type 속성값으로, “1” : 숫자 (기본값), “A” : 대문자 알파벳, “a” : 소문자 알파벳, “I..

하이퍼 링크(Hyperlink) 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능을 하이퍼링크라 하며, (anchor tag)가 그 역할을 담당한다. HTML 링크 href 속성 href 속성으로는 절대/상대 URL, 메일, 스크립트, 페이지 내의 특정 Id를 갖는 요소(fragment identifier)가 올 수 있다. Top of page! URL Local file Download file Mail Javascript Go to top target 속성 태그의 target 속성은 링크로 연결된 문서를 어떻게 열지를 명시한다. _blank : 새 창이나 새 탭에서 오픈 _self : 현재 프레임에서 오픈 (기본설정) _parent : 부모 프레임에서 오픈 _top : 현재 창의 가장 상위 프..

제목(Heading) 검색엔진은 를 이용하여 키워드를 수집하고 그 내용을 파악하므로, 문서 제목은 대신 태그를 사용한다. 태그의 위아래로는 약간의 여백이 자동으로 삽입되며, h1이 제일 크다. 제목1의 크기입니다! 제목2의 크기입니다! 제목3의 크기입니다! 제목4의 크기입니다! 제목5의 크기입니다! 제목6의 크기입니다! 굵은 글씨(Bold, Strong) 검색엔진은 이나 를 사용하여 강조된 텍스트를 더 중요하게 인식하며, 는 의미론적 중요성은 없다. 이 부분은 단순히 글씨가 굵은 부분이에요 기울인 글씨(Italic, Emphasized) 는 단순히 화면의 텍스트를 이탤릭체로 표현해주지만, 는 텍스트를 이탤릭체로 변환해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함해준다. 이 부분은 단순히 글씨가 ..

글자 스타일 HTML 요소의 style 속성을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있다. 글자 크기 변경 style 속성을 이용한 글자 크기 변경 글자색 변경 style 속성을 이용한 글자색 변경 글자 배경색 변경 style 속성으로 배경 변경 글자 정렬 변경 style 속성을 이용한 문단 정렬 변경 여러 스타일 설정 style에 사용되는 속성값들은 세미콜론 ; 으로 구분하는데, 속성을 하나만 사용하거나 여러개의 속성 중 맨 마지막 속성값에는 세미콜론을 생략할 수 있다. style 속성을 이용하여 한 번에 스타일링 하기! 색상(Color) 색상 이름으로 표현 W3C에서 정의한 16개의 HTML4 표준 색상 이름으로 색표현 할 수 있는데, 색상 이름은 대소문자를 구분하지 않는다. 색상..

시맨틱 웹(Semantic Web) 시멘틱 웹이란 사용자가 입력한 검색어가 포함된 문장 및 단락의 의미를 분석하여 검색의 결과물을 보여주는 웹 형식이다. 검색엔진은 크롤러인 로봇 프로그램으로 웹사이트 정보를 수집(crawling)하고, 인덱서 프로그램으로 검색 키워드에 대응하는 인덱스(indexing)를 만든다. 검색 로봇이 수집한 HTML 코드를 기반으로 인덱스를 생성하는데, 이 때 HTML의 시맨틱 요소(Semantic element)는 콘텐츠의 의미를 명확히 설명해주는 역할을 한다. Hello Hello 의미 요소(semantic element)란? HTML 요소는 무의미(non-semantic)와 의미(semantic) 요소로 구분할 수 있는데, 의미 요소란 그 자체로 의미를 가지고 있는 요소다...

HTML(HyperText Markup Language)이란? 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화한다. 요소(element) HTML 문서는 요소들의 집합으로 이뤄지는데, 요소는 시작과 종료 태그와 태그 사이의 컨텐츠로 구성된다. 등과 같이 종료 태그 없이 시작 태그만을 가지는 빈 요소도 존재한다. 컨텐츠 속성 (Attribute) 시작 태그에 위치하는 속성은 요소의 추가적인 정보를 제공하며, 보통 속성 이름과 값이 한 쌍을 이룬다. HTML5 표준에서는 속성 이름에 대소문자를 구분하지 않고 있지 않지만 소문자로 작성하는 것이 좋다. 글로벌 속성(Global Attribute)은 모든 HTML 요소가 공통으로 사용할 수 있는 ..