Input 요소의 속성 input 요소의 속성 input 요소는 다양한 속성을 가질 수 있다.HTML 에서 자주 사용되는 input 요소의 대표적인 속성은 다음과 같다. valuereadonlydisabledmaxlengthsize HTML5 form 요소의 속성 HTML5에서 새롭게 추가된 form요소의 속성은 다음과 같다. autocompletenovalidate HTML5 input 요소의 속성 HTML5에서 새롭게 추가된 input 요소의 속성은 다음과 같다. autocompleteautofocusformformactionformenctypeformmethodformnovalidateformtargetheight and widthlistmin and maxmultiplepatternplacehol..
Input 요소의 타입 input 요소의 타입 form 요소는 다양한 타입의 input 요소를 포함할 수 있다.HTML에서 자주 사용되는 input 요소의 대표적인 타입은 다음과 같다. textpasswordsubmitradio buttoncheckboxbutton HTML5 에서 추가된 input 요소의 타입 HTML5에서 새롭게 추가된 input 요소의 타입은 다음과 같다. 숫자 입력(number)입력 범위 지정(range)색상 입력(color)날짜 입력(date)시간 입력(time)날짜와 시간 입력(datetime-local)연도와 월 입력(month)연도와 주 입력(week)이메일 입력(email)URL 주소 입력(url)전화번호 입력(tel)검색어 입력(search) 숫자 입력(number) 태..
HTML과 XHTML XHTML(EXtensible HTML) XHTML은 Extensible HTML을 의미한다.XHTML은 HTML과 거의 비슷하지만, 문법의 적용이 조금 더 엄격한 특징을 가지고 있다. 좀 더 엄격한 버전인 XHTML을 사용하는 이유 :오늘날 웹 콘텐츠는 기존의 PC 위주의 환경에서 벗어나 여러 다양한 플랫폼에서 더욱 많이 이용되고 있다.따라서 부정확한 HTML문법을 지원하는 데 필요한 자원이 부족한 환경이 점차 생겨나기 시작했다.XHTML문서는 하나의 XML문서로서 문법적으로 정확하므로, 표준 XML 라이브러리를 이용한 자동화된 처리가 가능해진다. XHTML에서의 변경 사항 문서의 구조적 측면 : XHTML DOCTYPE을 반드시 명시해야 한다.태그의 xmlns 속성을 반드시 명시..
HTML과 자바스크립트 자바스크립트란? 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어이다.HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js 와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다. 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다. scripit 요소 script 요소는 해당 웹 페이지에 사용할 스크립트(script)를 정의하기 위해 사용한다.script 요소 내부에 직접 스크립트를 작성하거나, 외부 스크립트 파일의 주소를 src 속성값으로 명시하면 된다. 예제12345678..
Input 요소의 속성input 요소의 여러 속성을 사용하면 사용자가 입력하는 방식을 더욱 다양하게 제어할 수 있다. value 속성 value 속성은 input 요소의 입력 필드(input field)에 나타나는 초기값을 설정한다. 예제123456789101112131415161718192021222324 HTML Input Attributes value 속성을 이용한 초기값 설정 이름 : 학번 : 학과 : Colored by Color Scriptercs 실행결과 :value 속성을 이용한 초기값 설정이름 : 학번 : 학과 : readonly 속성 readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정한다.disabled 속성과 다른 점은 전송 버튼(submit)을 누..
HTML 과 CSS CSS란? CSS란 Cascading Style Sheets의 약자이다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다. HTML4부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해 졌다. 오늘날 대부분의 웹브라우저들은 모두 CSS를 지원하고 있다. CSS 적용 방법 HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같다. 인라인 스타일(Inline style) 내부 스타일 시트(Internal style sheet) 외부 스타일 시트(External style sheet) 인라인 스타일 (Inline style) 인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 ..
form 요소(feat.input 요소) form 웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다.또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용한다. form 요소는 다음과 같은 문법으로 사용한다. action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다.이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다.method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다. 따라서 사용자가 form 요소를 통해 입력한 데이터는 action속성에 명시된 위치로 method 속성의 방식을 통해 전달된다. method 속성 method 속성을 통해 명시할 수 있는 form 요소의 전달..
레이아웃 목차 HTML 레이아웃(Layout) 📌 레이아웃(layout) 이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미한다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소이다. HTML에서는 다음과 같은 방법으로 레이아웃을 작성할 수 있다. div 요소를 이용한 레이아웃 HTML5 레이아웃 table 요소를 이용한 레이아웃 div 요소를 이용한 레이아웃 📌 div 요소는 CSS 스타일을 손쉽게 적용할 수 있으므로, 레이아웃을 작성하는데 자주 사용된다. 🔔 예제) div 요소를 이용한 레이아웃 HEADER 영역 NAV 영역 SECTION 영역 FOOTER 영역 실행결과 : HTML5 레이아웃 📌 HTML5에서는 웹 페이지의 레이아웃만을 위한 별도의 새..