일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Array
- list
- Files
- 자바
- Java
- 이클립스
- 이탈리아
- input
- 인텔리제이
- Button
- 테이블
- 자바스크립트
- windows
- Visual Studio Code
- 배열
- vscode
- Eclipse
- Maven
- javascript
- IntelliJ
- string
- table
- 문자열
- CSS
- ArrayList
- json
- js
- CMD
- html
- date
- Today
- Total
목록html (110)
어제 오늘 내일
웹에서 알파벳의 대문자를 소문자로, 소문자를 대문자로 변환하는 방법은 2가지가 있습니다. Javascript를 이용하는 방법 [Javascript] 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로) [Javascript] 문자열의 첫 글자만 대문자로 변환하기 CSS를 이용하는 방법 text-transform 여기서는 CSS를 이용하여 대소문자를 변환하거나, 첫글자만 대문자로 바꾸는 방법을 소개합니다. text-transform CSS의 text-transform 속성은 요소의 문자열을 대문자 또는 소문자로 표시하는 방법을 지정합니다. text-transform 속성 값 none uppercase : 텍스트를 대문자로 lowercase : 텍스트를 소문자로 capitalize : 각 단어의 첫글자를 ..
가상 요소란? (Pseudo-elements) CSS 가상 요소는, 선택자에 추가하는 키워드로, 선택한 요소(element)의 일부에만 스타일을 적용합니다. 즉, 선택한 요소 전체에 스타일을 적용하는 것이 아니라, 요소의 일부에만 스타일을 적용합니다. 다시 말해, HTML에 새로운 요소(element)를 추가한 것처럼 동작합니다. 가상 요소 사용법 가상 요소는, ::before, ::after, ::first-letter 와 같이 앞에 '::'를 붙여서 표기합니다. p::first-letter { color: blue; } 위 코드로 영역의 첫번째 글자를 파란색으로 지정할 수 있습니다. 가상 요소 종류 가상 요소의 종류는 다음과 같습니다. ::before ::after ::first-letter ::fi..
HTML 페이지가 길 경우, 페이지의 상단에 목차를 만들고, 목차를 클릭하면, 페이지의 원하는 부분으로 이동하고자 할 때 책갈피 기능을 사용할 수 있습니다. 페이지 링크 만들기 제목 1 제목 2 태그의 'href' 속성값을 '#'로 시작해야 합니다. 여기서 '#' 뒤의 'title1', 'title2'는 이동하고자 하는 위치의 태그 name 값입니다. 이 링크를 클릭하면, 페이지 내의 위치로 커서가 이동합니다. 이동하고자 하는 위치 지정 제목 1 ....content.... 제목 2 ....content.... 이동하고자 하는 위치에 태그를 추가하고, name 속성에 고유한 이름을 지정해 줍니다.
CSS를 사용하여 div에 배경 이미지를 넣는 방법입니다. 배경 이미지 넣기 (background-image) 배경 이미지 반복 횟수 지정하기 (background-repeat) background-repeat 속성 값 배경 이미지 반복 (repeat) 배경 이미지 한 번만 넣기 (no-repeat) 가로 방향으로 이미지 반복 (repeat-x) 세로 방향으로 이미지 반복 (repeat-y) 배경 이미지 잘리지 않도록 반복 (space) - 공백 배경 이미지 잘리지 않도록 반복 (round) - 빈 공간 없음 배경 이미지 위치 지정하기 (background-position) 배경 이미지 가운데 한 번만 넣기 (center) 배경 이미지 크기 설정하기 (background-size) 이미지가 잘리지 않는 ..
div 안의 배경색을 지정하기 위해서는 css의 background-color 속성을 지정합니다. background-color 예제 div { height : 20px; width : 200px; } CSS에서 색깔을 지정하는 방법은 다음과 같습니다. 이름 16진수 RGB(A) HSL(A) 위 예제는 각각 4가지 방법을 이용하여 div의 배경색을 지정한 예제입니다. CSS에서 색깔을 지정하는 위 4가지 방법에 대해서는 지난 포스팅을 참조하세요. [CSS] CSS에서 색깔을 지정하는 4가지 방법 (이름, 16진수, RGB(RGBA), HSL(HSLA)) 이번에는 CSS에서 색상을 지정하는 방법을 정리해 보도록 하겠습니다. 색상을 지정하는 방법은 여러가지가 있지만 여기서는 가장 많이 사용되는 4가지 방법을..
childElementCount DOM에서 Javascript를 이용하여 자식 요소(element)의 개수를 확인하기 위해서 Element의 childElementCount 속성을 사용할 수 있습니다. ParentNode.childElementCount childElementCount는 요소의 자식 요소(child element) 개수를 리턴합니다. (단, 이 속성은 IE9 이전 버전에서는 지원하지 않습니다.) 예제 바나나 사과 ======== 결과 ======== // parent element 선택 const parent = document.getElementById('parent'); // childElementCount 값 찍기 document.write(parent.childElementCoun..
javascript에서 dom의 요소(element)를 복사하여 붙여넣기 하는 방법입니다. cloneNode() dom의 노드(node)를 복사하는 함수입니다. var dupNode = node.cloneNode(deep); 이 함수는 node를 복사하여, 복사본을 리턴(dupNode)합니다. 파라미터 deep (optional) true/false 요소의 하위 요소까지 모두 복사하려면 true 요소의 하위 요소를 제외하고 복사하려면 false default : false 또는 true (최신 브라우저에서는 default 값이 false 이지만, 구형 브라우저에서는 default 값이 true입니다. 따라서, 이 값은 optional 이지만, 가능하면 파라미터 값을 명확하게 작성해 주는 것이 좋습니다. ..
이번에는 CSS에서 색상을 지정하는 방법을 정리해 보도록 하겠습니다. 색상을 지정하는 방법은 여러가지가 있지만 여기서는 가장 많이 사용되는 4가지 방법을 정리하였습니다. 이름 16진수 RGB 또는 RGBA HSL 또는 HSLA 1. 이름 색상의 이름을 직접 써서 컬러를 지정할 수 있습니다. 브라우저가 인식할 수 있는 색상 이름은 대략 147개입니다. 이 방법은 쉽게 색상을 지정할 수 있는 장점이 있지만, 표현할 수 있는 색상의 한정적이고, 색상을 사용하려면 이름을 외우고 있어야 한다는 단점이 있습니다. div { height : 20px; width : 200px; } 색상의 이름을 직접 css의 속성값으로 지정해 주었습니다. 전체 색상 이름은 아래 링크의 페이지를 참조하세요. Color keywords..
CSS를 적용하는 3가지 방법 HTML에 CSS를 적용하는 방법은 3가지가 있습니다. 인라인 (Inline CSS) 내부 (Embedded CSS) 외부 (External CSS) 인라인 (Inline CSS) 안녕하세요? 스타일을 적용하고자 하는 HTML 위치에 'style' 속성을 정의하여 HTML에 직접 스타일을 정의할 수 있습니다. 내부 (Embedded CSS) 안녕하세요? CSS 속성을 HTML의 태그 사이에 을 배치하는 방법입니다. 이 때는, HTML의 어느 항목에 CSS를 적용해야 하는지를 나타내기 위해 CSS 선택자를 사용해야 합니다. 위 예제에서는 태그 안의 'p'가 선택자(CSS Selector)입니다. 이것은 HTML의 'p' 태그를 선택하여 스타일을 적용하도록 합니다. 외부 (Ex..
이번 포스팅에서는 사용자가 체크박스를 선택했을 때, 텍스트 박스를 활성화하고 체크박스 선택을 해제했을 때, 텍스트 박스를 비활성화 하는 방법을 정리해보도록 하겠습니다. 체크박스 선택 시, 텍스트박스 활성화/비활성화 하기 다음 예제는 아래와 같이 동작합니다. 체크박스 선택 했을 때 텍스트 박스 활성화 텍스트 박스에 포커스 체크박스 선택해제 했을 때 텍스트 박스 비활성화 텍스트 박스 입력값 초기화 기타 의견 입력 function toggleTextbox(checkbox) { // 1. 텍스트 박스 element 찾기 const textbox_elem = document.getElementById('my_text'); // 2-1. 체크박스 선택여부 체크 // 2-2. 체크박스 선택여부에 따라 텍스트박스 활성..