어제 오늘 내일

HTML의 속성을 이용하여 툴팁을 생성하는 방법을 알아보도록 하겠습니다. 사용자가 웹브라우저의 이미지나 텍스트에 마우스를 가져다 대면, 그에 대한 설명이 말풍선 형태로 뜨는 것을 Tooltip(툴팁)이라고 합니다. 툴팁(Tooltip) 만들기 툴팁은 간단하게 HTML의 속성을 이용해서 만들어 줄수도 있고, CSS를 이용해서 만들어 줄 수도 있습니다. 여기서는 간단히 HTML의 속성을 이용해서 툴팁을 만들어 보도록 하겠습니다. 텍스트, 링크에 Tooltip 만들기 See the Pen tooltip by anna (@hianna) on CodePen. 텍스트나 링크에 Tooltip을 만들기 위해서는 title이라는 속성을 이용합니다. 링크에 링크에 대한 Tooltip을 만들기 위해서도 title이라는 속성..

사용자로부터 색깔을 입력 받을 수 있는 방법을 알아보도록 하겠습니다. 색깔 입력 받기 HTML을 사용하여 사용자로부터 색깔을 입력 받기 위해서는 태그의 'type' 속성을 'color'로 지정해 주면 됩니다. See the Pen pickColor by anna (@hianna) on CodePen. 위의 예제를 보면 태그의 'type' 속성이 'color'로 지정되어 있는 것을 볼 수 있습니다. 이렇게 설정하면 브라우저는 색깔을 선택할 수 있는 버튼을 보여주고, 이 버튼을 클릭하면 색깔을 선택할 수 있는 창이 나타납니다. 여기서 색깔을 선택해주면 됩니다. 기본 색깔 지정하기 태그의 'value' 값을 지정해주지 않으면 기본값은 검정색으로 설정되어, 색깔 선택 버튼은 기본적으로 검정색으로 보여지게 됩니다..

날짜 시간 입력 항목에 기본값으로 현재 날짜, 시간을 지정하는 방법을 알아보도록 하겠습니다. 날짜 입력 항목에 현재 시간을 기본값으로 세팅하기 지난번에는 HTML의 태그를 이용하여날짜, 시간, 년도 등 시간 관련 정보를 입력 받는 방법을 알아보았습니다.그리고 이 항목들에 기본값을 지정하는 방법도 알아보았습니다.[IT/HTML] - [HTML] 날짜, 시간, 년도 입력받기[IT/HTML] - [HTML] 날짜, 시간 입력 항목 기본값으로 세팅하기 이번에는 이 태그의 기본값으로 현재 날짜, 시간을 지정하는 방법을 알아보도록 하겠습니다. 현재 일자, 시간을 default값으로 지정하기 위해서는Javascript를 사용해야 합니다. month 타입에 현재월 세팅하기See the Pen 20181201 by an..

이번에는 이 태그의 기본값을 지정하는 방법을 알아보도록 하겠습니다. 날짜, 시간 입력 항목 기본값 세팅하기 지난번에는 HTML의 태그를 이용하여날짜, 시간, 년도 등 시간 관련 정보를 입력 받는 방법을 알아보았습니다.[IT/HTML] - [HTML] 날짜, 시간, 년도 입력받기 See the Pen 20181201 by anna (@hianna) on CodePen. 기본값을 지정하기 위해서는 위와 같이 value 속성을 사용해야 합니다.그리고, 각 type별로 value 속성에 들어가야 하는 값의 형식이 정해져 있기 때문에, 이 형식을 지켜서 값을 입력해 주어야 합니다. input type별 value 값 입력 형식은 다음과 같습니다. month : 'yyyy-MM'date : 'yyyy-MM-dd't..

HMTL에서 날짜, 시간, 년도 등 시간 관련 정보를 입력 받는 방법을 알아보도록 하겠습니다. HTML에서 날짜, 시간, 년도 입력받기 HTML에서 사용자의 입력을 받기 위해서는 태그와 태그를 사용합니다. 태그와 태그에 대해서 잘 모른다면 먼저 아래의 포스팅을 참조하세요.[IT/HTML] - [HTML] 태그로 사용자 입력 받기 See the Pen 20181201 by anna (@hianna) on CodePen. 날짜, 시간, 년도 등 시간 관련 정보를 입력 받기 위해서는위와 같이 input 태그의 type 속성의 값을 지정해 주면 됩니다.입력 창의 오른쪽 화살표를 클릭하면 달력을 이용하여 날짜를 선택 할 수도 있습니다.시간 관련해서 type 속성으로 지정할 수 있는 값들은 아래와 같습니다. mon..

이번에는 HTML 태그를 이용하여 브라우저의 배경색을 변경하는 방법을 알아보도록 하겠습니다. 브라우저의 배경색 변경하기 브라우저의 배경색을 변경하는 방법은 여러가지가 있습니다. body태그에 bgcolor 속성 지정하기 See the Pen aQjbOw by anna (@hianna) on CodePen. 가장 간단한 방법은 위와 같이 body 태그의 'bgcolor'속성에배경색으로 지정하고 싶은 색을 지정해 주는 것입니다.'bgcolor'는 'background color'의 약자입니다. 이때, bgcolor의 값에는 다음의 3가지 타입의 값을 지정해 줄 수 있습니다. namered, yellow, black, white 등과 같이 색 이름을 직접 써줍니다.색의 이름을 직접 적어주므로, 배경에 어떤 색..

var, const, let 차이 var, const, let은 javascript 코드를 보다 보면 자주 보게 되는 변수 선언 방법입니다. 그렇다면, 이 세가지 변수 선언 방법에는 어떤 차이가 있을까요? const, let은 ES6(ECMAScript6)의 문법이고, var는 ES6이전의 문법입니다. 그럼 이 세가지 변수 선언 방법의 차이점에 대해서 더 자세히 알아보죠. 1. var es6 이전의 변수 선언 방식입니다. 'var'는 매우 유연한 방식으로 변수를 선언할 수 있는 방법입니다. 그렇지만, 몇 가지 문제점을 가지고 있기도 합니다. (1) scope function 단위의 scope을 가집니다. See the Pen js example by anna (@hianna) on CodePen. 위의 ..

지난 번에는 태그와 태그로 라디오버튼을 만들고,라디오버튼에 선택 된 정보가 어떻게 서버로 전달되는지 알아보았습니다.[HTML] 라디오버튼(radio) 만들기 이번에는 태그 내에 입력된 데이터를 초기화 시켜주는리셋 버튼을 생성하는 방법을 알아보도록 하겠습니다. 입력 데이터 초기화를 위한 리셋 버튼(reset) 만들기 계속해서 태그의 ‘type’ 속성에 들어가는 값들에 대해서 알아보고 있습니다.text 일반 텍스트를 입력 받을 수 있습니다.password 패스워드를 입력 받을 수 있도록, 입력 값이 화면에 보여지지 않도록 합니다.submit 태그 내에 입력된 데이터를 서버로 전달해 줍니다.button 버튼을 생성해 줍니다.checkbox 체크박스 형태의 입력을 받을 수 있습니다.radio 라디오 버튼 형태의..

지난 번에는 태그와 태그로 체크박스를 만들고,체크박스에 선택 된 정보가 어떻게 서버로 전달되는지 알아보았습니다.[HTML] 태그로 체크박스(checkbox) 만들기 지난번에 알아본 체크박스는 사용자가 여러 개의 선택을 할 수 있었습니다.이번에는 사용자의 선택을 “하나만” 입력 받을 수 있는, 라디오버튼(radio)을 만드는 방법을 알아보도록 하겠습니다. 태그로 라디오버튼(radio) 만들기 계속해서 태그의 ‘type’ 속성에 들어가는 값들에 대해서 알아보고 있습니다.text 일반 텍스트를 입력 받을 수 있습니다.password 패스워드를 입력 받을 수 있도록, 입력 값이 화면에 보여지지 않도록 합니다.submit 태그 내에 입력된 데이터를 서버로 전달해 줍니다.button 버튼을 생성해 줍니다.check..

지난 번에는 태그와 태그로 버튼을 만들고, 버튼을 클릭하여 원하는 동작을 하도록 하는 방법을 알아보았습니다. [HTML] 태그로 버튼(button) 생성하기 이번에는 사용자의 선택을 입력 받을 수 있는, 체크박스(checkbox)를 만드는 방법을 알아보도록 하겠습니다. 태그로 체크박스(checkbox) 만들기 계속해서 태그의 ‘type’ 속성에 들어가는 값들에 대해서 알아보고 있습니다.text 일반 텍스트를 입력받을 수 있습니다. password 패스워드를 입력받을 수 있도록, 입력값이 화면에 보여지지 않도록 합니다. submit 태그 내에 입력된 데이터를 서버로 전달해 줍니다. button 버튼을 생성해 줍니다. checkbox 체크박스 형태의 입력을 받을 수 있습니다. radio 라디오 버튼 형태의 ..