본문 바로가기

FrontEnd/HTML

(18)

#8-3. HTML input 요소 :: 이메일, URL, 전화번호, 검색어 입력 # HTML에서 사용되는 다양한 input 요소들을 살펴봅니다. # 이메일(email), url 주소(url), 전화번호(tel), 검색어(search) # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML input 요소 :: 이메일, URL, 전화번호, 검색어 입력 1) 이메일 입력(email) 태그의 type 속성값을 "email"로 설정하면, input요소는 사용자가 email 주소를 입력할 수 있도록 합니다. 브라우저의 지원 여부에 따라 email 주소가 유효한 email 주소인지 자동으로 검사합니다. 2) URL 주소 입력(url) 태그의 type 속성값을 "url"로 설정하면, input요소는 사용자가 URL을 입력할 수 있도록 합니다. 브라우저의 지원 ..

#8-2. HTML input 요소 :: 날짜, 시간 관련 입력 # HTML에서 사용되는 다양한 input 요소들을 살펴봅니다. # 날짜 입력(date), 시간 입력(time), 날짜와 시간 입력(datetime-local), 연도와 월 입력(month), 연도와 주 입력(week) # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML input 요소 :: 날짜, 시간 관련 입력 1) 날짜 입력(date) 태그의 type 속성값을 "date"로 설정하면, input요소는 사용자가 날짜를 입력할 수 있도록 합니다. 브라우저의 지원 여부에 따라 날짜를 선택하기 위한 캘린더를 보여줍니다. 2) 시간 입력(time) 태그의 type 속성값을 "time"으로 설정하면, input요소는 사용자가 시간를 입력할 수 있도록 합니다. 브라우저의 ..

#8-1. HTML input 요소 :: 숫자 입력, 입력 범위 지정, 색상 입력 # HTML 에서 사용되는 다양한 input 요소들을 살펴봅니다. # 숫자 입력(number), 입력 범위 지정(range), 색상 입력(color) # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML input 요소 :: 숫자 입력, 입력 범위 지정, 색상 입력 1) 숫자 입력(number) 태그의 type 속성값을 "number"로 설정하면, input요소는 사용자가 숫자를 입력할 수 있도록 합니다. number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생기는 점입니다. 브라우저의 지원 여부에 따라 min속성과 max속성을 이용하여 숫자 선택에 제한값을 설정할 수도 있습니다. 2) 입력 범위 지정(ran..

#7. HTML5에서 추가된 다양한 타입의 input 요소 # HTML5에서 새롭게 추가된 다양한 타입의 input 요소는 다음과 같습니다. # datalist 요소, keygen 요소, output 요소 # 각 요소들의 특징과 사용방법에 대해서 알아보도록 하겠습니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML에서 추가된 다양한 타입의 input 요소 1) datalist 요소 datalist 요소는 input 요소에 대해 미리 정의된 옵션 리스트를 명시해 주는 요소입니다. 사용자는 텍스트를 바로 입력해도 되고, 드롭다운 메뉴에서 미리 정의한 옵션 중의 하나를 골라도 됩니다. 단, input 요소의 list 속성값이 datalist 요소의 id 속성값과 반드시 일치해야 연결됩니다. 2) keygen 요소 keyge..

#6-3. HTML input 요소의 속성 변경하기 # 앞서 살펴본 input 요소의 다양한 형태에서 속성을 바꿔 알맞는 속성을 사용할 수 있도록 합니다. # value, readonly, disabled, maxlength, size 등의 속성을 변경할 수 있습니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML Input 요소의 속성 1) value 속성 value 속성은 input 요소의 입력 필드(input field)에 나타나는 초깃값을 설정합니다. 이름 : 학번 : 학과 : 2) readonly 속성 readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정하는 것입니다. disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 초깃값이 서버로 전송된다는 점입니다. 이름..

#6-2. HTML input 요소를 사용해 입력받기 # HTML에서는 다양한 타입의 input 요소를 사용해 사용자로부터 입력을 받을 수 있습니다. # 텍스트 입력(text), 비밀번호 입력(password), 라디오 버튼(radio), 체크박스(checkbox) # 파일선택(file), 선택 입력(select), 문장 입력(textarea), 버튼 입력(button), 전송 버튼(submit), 필드셋(fieldset) # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML 1. 다양한 타입의 input 요소 HTML에서 사용할 수 있는 대표적인 input 요소들은 다음과 같습니다. 텍스트 입력(text) 비밀번호 입력(password) 라디오 버튼(radio) 체크박스(checkbox) 파일선택(file) 선택 입력(sele..

#6-1. HTML Form 사용 방법(method :: get, post) # HTML에서 사용되는 form 요소를 알아보겠습니다. # from 사용 문법을 배우도록 하겠습니다. # method 속성의 get , post에 대해 배우고 그 장,단점에 대해 배워보도록 하겠습니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML Form 요소 1) form 요소란? 웹 페이지에서는 form요소를 사용하여 사용자로부터 입력을 받을 수 있습니다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form요소를 사용합니다. 문법: action: 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시해야 합니다. (이렇게 전달 받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 합니다.) method: 입력받은 데이터..

#5-2. HTML 테이블(table) 만드는 방법 # HTML에서 테이블(table)을 만드는 방법을 소개합니다. # 테이블의 구성요소와 열을 합치는 방법, 행을 합치는 방법 등을 소개합니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 테이블(TABLE) 1) HTML 테이블(table)이란? 테이블(table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다. HTML에서는 태그를 사용하여 이러한 테이블을 작성할 수 있습니다. 태그의 구성은 다음과 같습니다. 1. 태그는 테이블에서 행을 구분 2. 태그는 각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨가 적용되고 정렬은 가운데 정렬 3. 태그는 테이블의 열을 각각의 셀(cell)로 나누어 줌 CSS의 border..

#5-1. HTML 리스트(list) 만드는 방법(ul, ol, dl) # HTML 에서 리스트(list)를 만드는 방법을 설명한다. # HTML 리스트(list)에는 세 가지 방법이 있습니다. # 1) 순서가 없는 리스트(unordered list) :: # 2) 순서가 있는 리스트(ordered list) :: # 3) 정의 리스트(definition list) :: # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 리스트(List) 리스트를 만들 때 한 가지 팁이 있는데, 리스트를 만들 때 "Tap" 키를 활용하는 것입니다. 이 방법은 프론트 개발자들의 피로도를 줄여줄 수 있는 조그만한 팁이라고 할 수 있습니다. 아래와 같은 리스트를 만든다고 가정을 했을 때, 손으로 작성하는 코드의 양을 줄일 수 있습니다. 1) 순서가 없는 리..

#4-4. HTML 이미지(Image) <img> 태그 # HTML 에 이미지를 삽입하는 방법을 알아봅니다. # HTML 다양한 설정 방법을 알아봅니다. # 이미지 삽입, 이미지 크기 설정, 이미지 테두리(border) 설정, 이미지에 링크 설정, 이미지맵 만들기 # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 이미지 1) 이미지 삽입 문법 src 속성은 이미지가 저장된 주소의 URL 주소를 명시합니다. alt 속성은 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있습니다. 2) 이미지 크기 설정 HTML 에서는 style 속성으로 이미지의 크기를 설정할 수 있습니다. 또한, width와 height 속성을 이용하면, 이미지의 너비와 높이를 각각 픽셀(pixel) 단위로 설정할 수 있습니다..

이전 1 2 다음

티스토리툴바