일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- string
- list
- Files
- table
- Maven
- 자바스크립트
- vscode
- 테이블
- Button
- 이클립스
- Array
- html
- windows
- CSS
- ArrayList
- IntelliJ
- js
- Java
- json
- Eclipse
- javascript
- input
- 문자열
- CMD
- date
- 이탈리아
- Visual Studio Code
- 배열
- 자바
- 인텔리제이
- Today
- Total
목록html (110)
어제 오늘 내일
input 필드를 비활성화 하는 방법은 disabled 속성을 사용하는 방법과 readonly 속성을 사용하는 방법 이렇게 2가지가 있습니다. 이 두가지 속성을 사용하는 방법과 차이점을 알아보도록 하겠습니다. input 필드 비활성화 하기 (disabled, readonly 차이) 1. disabled 2. readonly 1. disabled input 필드에 disabled 속성을 사용하면, 위의 예제와 같이 input 필드가 비활성화 됩니다. input 필드의 색깔이 바뀌고, input 필드를 클릭해도 포커스가 가지 않습니다. 가장 중요한 것은, disabled 속성을 설정하면, 위의 예제와 같이 기본값이 설정되어 있더라도, submit을 수행하면 값이 전달되지 않습니다. 2. readonly in..
지난 번에는 사용자가 로컬에서 파일을 선택하고, 그 파일 내용을 읽어오는 방법을 알아보았습니다. [HTML] input type='file' 속성 알아보기 ( 파일 입력 ) [HTML] input type='file' 속성 알아보기 ( 파일 입력 ) 웹페이지에서 사용자의 로컬 파일을 입력받기 위해서는 다음과 같이 input 태그의 type속성을 file로 지정하는 방법을 사용합니다. See the Pen read file by anna (@hianna) on CodePen. 여기에서는 input의 type.. hianna.tistory.com [Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택) [Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택) HTML/Javascrip로 로..
웹페이지에서 사용자의 로컬 파일을 입력받기 위해서는 다음과 같이 input 태그의 type속성을 file로 지정하는 방법을 사용합니다. See the Pen read file by anna (@hianna) on CodePen. 여기에서는 input의 type을 'file'로 지정했을 때 추가로 사용할 수 있는 속성들에 대해서 알아보도록 하겠습니다. > "accept" 입력받을 수 있는 파일의 유형을 지정하는 속성입니다. accept 속성을 지정하지 않으면 모든 유형의 파일을 입력 받을 수 있습니다. 여러 종류의 파일을 입력받기 위해서는 아래와 같이 쉼표로 목록을 구분하여 작성합니다. See the Pen read file by anna (@hianna) on CodePen. accept 속성 값 - 확..
지난번에는 HTML과 Javascript에서 날짜와 시간을 처리하는 방법들을 알아보았습니다. [HTML] 날짜, 시간, 년도 입력받기 [HTML] 날짜, 시간 입력 항목 기본값으로 세팅하기 [HTML] 날짜 입력 항목에 현재 시간을 기본값으로 세팅하기 [Javascript] 현재 날짜, 시간 구하기 [Javascript] Date 객체로 원하는 날짜, 시간 표현하기 [Javascript] 날짜 계산하기 (년/월/일 더하기, 빼기) [Javascript] 월의 마지막 날 계산하기 이번 포스팅에서는 날짜를 계산할 때 마지막 날짜, 윤년, 윤달 처리를 어떻게 할 것인지 알아보도록 하겠습니다. Date() 함수를 이용한 날짜 계산에서 발생하는 말일자 문제 See the Pen Date by anna (@hian..
HTML과 Javascript에서 날짜와 시간을 처리하는 방법을 알아보고 있습니다. [HTML] 날짜, 시간, 년도 입력받기 [HTML] 날짜, 시간 입력 항목 기본값으로 세팅하기 [HTML] 날짜 입력 항목에 현재 시간을 기본값으로 세팅하기 [Javascript] 현재 날짜, 시간 구하기 [Javascript] Date 객체로 원하는 날짜, 시간 표현하기 [Javascript] 날짜 계산하기 (년/월/일 더하기, 빼기) 이번에는 해당 월의 마지막 날짜, 말일을 구하는 방법을 알아보도록 하겠습니다. 해당 월의 마지막 날짜, 말일을 구하는 방법 See the Pen Date by anna (@hianna) on CodePen. 지난번 포스팅에서 날짜를 표현하기 위해서 아래의 함수를 사용할 수 있다고 하였습..
지난번에는 Javascript에서 [Javascript] 현재 날짜, 시간 구하기 [Javascript] Date 객체로 원하는 날짜, 시간 표현하기 이번에는 Date 객체를 활용하여 날짜를 더하고 빼는 방법을 알아보도록 하겠습니다. 연도 더하기, 빼기 See the Pen Date by anna (@hianna) on CodePen. 1년 후의 날짜, 1년 전의 날짜를 계산하기 위해서 getFullYear()와 setFullYear() 함수를 사용하였습니다. date객체에서 getFullYear() 함수를 이용해서 연도를 추출한 후에, 해당 연도에 1을 더하거나 빼서 1년 후와 1년 전의 연도를 구하고, 그 값을 다시 setFullYear() 함수를 사용해서 원래의 Date객체의 연도를 변경해 주었습니..
지난 번에는 콤보박스(select)를 활용하는 기본적인 방법들을 알아보았습니다. [HTML] 콤보박스(select) (1) - 기본값 지정, 비활성화, 항목 비활성화 이번에는 콤보박스의 사이즈를 지정하는 법, 중복 선택이 가능하도록 설정하는 법, 카테고리를 설정하는 법을 알아보도록 하겠습니다. 콤보박스의 사이즈 늘리기 See the Pen select by anna (@hianna) on CodePen. 위와 같이 태그에 'size' 속성을 지정해 주면 드롭다운 목록이 아닌, 선택 목록이 지정된 크기만큼 보여지게 됩니다. 선택 항목의 갯수보다 size가 작으면 자동으로 스크롤이 생성됩니다. 콤보박스 중복 선택 설정하기 See the Pen select by anna (@hianna) on CodePen...
사용자로부터 선택 입력을 받을 수 있는 콤보박스(드롭다운 박스)를 만드는 방법을 알아보도록 하겠습니다. 기본 콤보박스 만들기 See the Pen select by anna (@hianna) on CodePen. HTML에서 콤보박스를 만들기 위해서는 , 을 사용합니다. 태그 안에 태그를 포함시키고, 선택할 값들을 태그 안에 지정해 줍니다. 기본값(default) 지정 See the Pen select by anna (@hianna) on CodePen. 기본값을 지정하지 않으면 가장 위에 있는 값이 기본으로 선택됩니다. 특정한 값 하나를 기본값(default)으로 지정하고 싶으면, 위와 같이 기본으로 지정하고 싶은 값의 태그에 'selected'라고 지정해주면, 해당 항목이 기본값으로 지정이 되고, 화..
HTML의 속성을 이용하여 툴팁을 생성하는 방법을 알아보도록 하겠습니다. 사용자가 웹브라우저의 이미지나 텍스트에 마우스를 가져다 대면, 그에 대한 설명이 말풍선 형태로 뜨는 것을 Tooltip(툴팁)이라고 합니다. 툴팁(Tooltip) 만들기 툴팁은 간단하게 HTML의 속성을 이용해서 만들어 줄수도 있고, CSS를 이용해서 만들어 줄 수도 있습니다. 여기서는 간단히 HTML의 속성을 이용해서 툴팁을 만들어 보도록 하겠습니다. 텍스트, 링크에 Tooltip 만들기 See the Pen tooltip by anna (@hianna) on CodePen. 텍스트나 링크에 Tooltip을 만들기 위해서는 title이라는 속성을 이용합니다. 링크에 링크에 대한 Tooltip을 만들기 위해서도 title이라는 속성..
날짜 시간 입력 항목에 기본값으로 현재 날짜, 시간을 지정하는 방법을 알아보도록 하겠습니다. 날짜 입력 항목에 현재 시간을 기본값으로 세팅하기 지난번에는 HTML의 태그를 이용하여날짜, 시간, 년도 등 시간 관련 정보를 입력 받는 방법을 알아보았습니다.그리고 이 항목들에 기본값을 지정하는 방법도 알아보았습니다.[IT/HTML] - [HTML] 날짜, 시간, 년도 입력받기[IT/HTML] - [HTML] 날짜, 시간 입력 항목 기본값으로 세팅하기 이번에는 이 태그의 기본값으로 현재 날짜, 시간을 지정하는 방법을 알아보도록 하겠습니다. 현재 일자, 시간을 default값으로 지정하기 위해서는Javascript를 사용해야 합니다. month 타입에 현재월 세팅하기See the Pen 20181201 by an..