일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Maven
- Eclipse
- ArrayList
- CMD
- 문자열
- IntelliJ
- 배열
- windows
- js
- CSS
- input
- javascript
- 자바스크립트
- Files
- string
- Visual Studio Code
- json
- Java
- 인텔리제이
- Button
- 이탈리아
- Array
- list
- 테이블
- html
- vscode
- 이클립스
- table
- 자바
- date
- Today
- Total
목록IT/HTML&CSS (104)
어제 오늘 내일
HTML에서 링크된 페이지를 새창 또는 새탭으로 여는 방법입니다. 블로그 새창에서 열기 태그로 링크된 페이지를 새창 또는 새탭으로 열기 위해서는 target 속성을 추가하고, 그 값을 '_blank'로 지정해야합니다. 하지만, 아쉽게도 '새창'에서 열 것이냐, '새탭'에서 열 것이냐는 HTML로 지정할 수 없습니다. 그것은 사용자 브라우저의 설정을 따릅니다. 인터넷 익스플로러(IE) 링크 새탭/새창에서 열기 설정 구글 검색 결과 새탭에서 열기
HTML에서 테이블을 표현하고, 테이블의 셀을 병합하는 방법을 알아보도록 하겠습니다. 먼저, HTML로 테이블을 그리는 방법을 모른다면 지난 포스팅을 참조하세요. [HTML] 기본 테이블(표, Table) 그리기 (table, tr, td, th) [HTML] 테이블 제목 지정하기, caption tag 아래 예제 테이블을 가지고 가로, 세로 셀 병합을 해 보도록 하겠습니다. 학년 반 1 1 1 2 2 1 세로 셀 병합하기 (rowspan) 학년 반 1 1 2 2 1 위 코드는 2개의 '1학년' 항목이 2 row가 병합되었습니다. 2개의 row가 병합되었으므로, 결국 세로 방향으로 합쳐진 셀이 만들어진 것입니다. 여러줄의 row를 병합 할때는 위의 예시처럼 병합을 시작하려는 cell에 rowspan을 정..
datalist와 select는 비슷해보이지만, 차이점이 있습니다. === 선택 === 한국어 영어 중국어 스페인어 select는 사용자가 선택할 수 있는 선택 항목을 제공하고, 그 범위내에서만 선택이 가능합니다. [HTML] 콤보박스(select) (1) - 기본값 지정, 비활성화, 항목 비활성화 [HTML] 콤보박스(select) (2) - 사이즈 지정, 중복선택, 카테고리 설정 [Javascript] 콤보박스(select)에서 선택한 값, 텍스트 출력하기 datalist는 option 목록에 없는 값도, 사용자의 입력을 받을 수 있습니다. 사용자가 입력창에 타이핑을 하면, option 목록에서 일치하는 값을 찾아서 자동완성 기능을 제공합니다. 자동완성 기능을 제공하기 때문에, 사용자가 선택해야 할 ..
input에 자동완성이 적용되는 경우 사용자의 입력을 받는 input 항목을 입력하다보면 아래의 예제와 같이 특정 input의 경우 사용자가 기존에 입력했던 값을 기반으로 자동완성이 제공되는 경우가 있습니다. 이름 : 이메일 : input의 name 속성이나 id 속성이 같을 경우 자동완성 기능이 제공됩니다. 위 예제는 많은 웹사이트에서 사용하는 id 속성값인 'name', 'email'을 지정하였습니다. 아마, 다른 사이트에 입력한 적이 있던 name이나 email 목록이 자동완성으로 목록에 나타날 것입니다. 이것은 보통 브라우저가 자동으로 해주는데, 어떤 경우에는 이 기능을 해제해야 할 필요도 있습니다. input에 자동완성 해제하기 이름 : 이메일 : input에 자동 완성을 해제하기 위해서 'au..
input 필드를 비활성화 하는 방법은 disabled 속성을 사용하는 방법과 readonly 속성을 사용하는 방법 이렇게 2가지가 있습니다. 이 두가지 속성을 사용하는 방법과 차이점을 알아보도록 하겠습니다. input 필드 비활성화 하기 (disabled, readonly 차이) 1. disabled 2. readonly 1. disabled input 필드에 disabled 속성을 사용하면, 위의 예제와 같이 input 필드가 비활성화 됩니다. input 필드의 색깔이 바뀌고, input 필드를 클릭해도 포커스가 가지 않습니다. 가장 중요한 것은, disabled 속성을 설정하면, 위의 예제와 같이 기본값이 설정되어 있더라도, submit을 수행하면 값이 전달되지 않습니다. 2. readonly in..
웹페이지에서 사용자의 로컬 파일을 입력받기 위해서는 다음과 같이 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 속성 값 - 확..
지난 번에는 콤보박스(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을 사용하여 사용자로부터 색깔을 입력 받기 위해서는 태그의 'type' 속성을 'color'로 지정해 주면 됩니다. See the Pen pickColor by anna (@hianna) on CodePen. 위의 예제를 보면 태그의 'type' 속성이 'color'로 지정되어 있는 것을 볼 수 있습니다. 이렇게 설정하면 브라우저는 색깔을 선택할 수 있는 버튼을 보여주고, 이 버튼을 클릭하면 색깔을 선택할 수 있는 창이 나타납니다. 여기서 색깔을 선택해주면 됩니다. 기본 색깔 지정하기 태그의 'value' 값을 지정해주지 않으면 기본값은 검정색으로 설정되어, 색깔 선택 버튼은 기본적으로 검정색으로 보여지게 됩니다..