일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- CMD
- Visual Studio Code
- Files
- input
- js
- 문자열
- 이클립스
- string
- 인텔리제이
- table
- Button
- 테이블
- Eclipse
- json
- 자바
- 이탈리아
- date
- javascript
- ArrayList
- html
- Array
- CSS
- 배열
- windows
- vscode
- list
- IntelliJ
- Java
- 자바스크립트
- Today
- Total
목록CSS (80)
어제 오늘 내일
input 필드의 스타일링 방법에 대해 알아보고 있습니다. [HTML/CSS] input 배경색, 글자색 변경하기 [HTML/CSS] input 커서 색상 변경하기 (caret-color) 이번에는 input 필드를 클릭하면 나타나는 커서를 없애는 방법입니다. caret-color caret-color 속성의 input 필드의 커서 색상을 지정하는 속성입니다. 이 속성의 값을 'transparent'로 지정하여, input의 커서를 숨길 수 있습니다. 예제 .no-caret { caret-color: transparent; } 위 예제에서 첫번째 input에 필드를 클릭하면, 커서가 나타납니다. 두번째 input 필드를 클릭하면, 커서가 보이지 않습니다.
지난번에는 input의 배경색과 글자색을 변경하는 방법을 알아보았습니다. [HTML/CSS] input 배경색, 글자색 변경하기 이번에는 input 필드 안의 커서 색깔을 변경하는 방법입니다. caret-color 이 caret-color 속성을 이용하여 input 필드 안의 커서 색상을 변경할 수 있습니다. 예제 input { caret-color: red; } input 필드를 클릭해보세요. 커서가 빨간색으로 변경되었습니다.
input 필드의 배경색과 글자을 변경하기 위해서 다음 속성을 사용 할 수 있습니다. background-color : 배경색 변경 color : 글자색 변경 예제 input { background-color: yellow; color: red; }
버튼에 대한 스타일링 속성들을 알아보고 있습니다. [HTML/CSS] 버튼 크기 조정하기 (padding) [HTML/CSS] 버튼 테두리 둥글게 만들기 (border-radius) [HMTL/CSS] 버튼 테두리 색 변경, 테두리 없애기 [HTML/CSS] 버튼 글자색 변경하기 (color) [HTML/CSS] 버튼 배경색 지정하기 [HTML/CSS] 버튼 마우스 오버, 클릭 시 배경색 변경하기 border-width 버튼의 테두리 두께를 지정하기 위해 border-width 속성을 사용할 수 있습니다. border-width 속성은 다음의 4가지 속성 정보를 포함합니다. border-top-width border-right-width border-bottom-width border-left-width..
CSS에서 태그를 사용하여 목록을 만들면 목록 앞에 점 또는 숫자가 보여집니다. ( 태그와 사용하면 점, 태그와 함께 사용하면 숫자) 이 점 또는 숫자의 색깔을 바꾸기 위해서 CSS의 ::marker 가상 요소를 사용할 수 있습니다. ::marker ::marker는 리스트 아이템 앞에 오는 마커를 선택하는 가상 요소입니다. 리스트의 점 색깔 바꾸기 하나 둘 셋 li::marker { color: red; } li::marker { color: red; } ::marker 가상 요소로 li의 마커를 선택하여 마커의 색깔을 변경하였습니다. 리스트의 점 대신 하트로 바꾸기 하나 둘 셋 li::marker { content: '❤ '; color: pink; } li::marker { ... } ::marke..
텍스트를 흐리게 블러 처리하기 위해서 다음 2가지 방법을 사용할 수 있습니다. text-shadow filter: blur() text-shadow CSS의 text-shadow 속성은 텍스트에 그림자를 만들어줍니다. text-shadow에 관한 자세한 설명은 지난 포스팅을 참조하세요. [HTML/CSS] 텍스트에 그림자 넣기 (text-shadow) text-shadow text-shadow .ex01 { background: blue; text-shadow: 0px 0px 10px white; color: transparent; } .ex02 { text-shadow: 0px 0px 10px black; color: transparent; } div { font-size: 30px; font-weig..
CSS에서 텍스트에 그림자 효과를 주기 위해서는 text-shadow 속성을 사용합니다. text-shadow text-shadow: 3px 4px 5px red; 속성값 offset-x, offset-y (필수) 그림자의 위치를 지정합니다. offset-x : 양수이면 글자의 오른쪽에, 음수이면 글자의 왼쪽에 그림자가 나타납니다. offset-y : 양수이면 글자의 아래쪽에, 음수이면 글자의 위쪽에 그림자가 나타납니다. blur-radius 숫자가 커질수록, 그림자가 흐릿해집니다. color 그림자의 색깔을 지정합니다. 텍스트에 그림자 효과 주기 예제 ex01 ex02 ex03 .ex01 { text-shadow: 5px 5px gray; } .ex02 { text-shadow: 5px 5px 4px ..
이전 포스팅에서는 CSS의 box-shadow 속성을 사용하여 박스에 그림자를 만들어주는 방법을 알아보았습니다. [HTML/CSS] div 박스에 그림자 만들기(box-shadow) [HTML/CSS] div 박스 그림자 한쪽만 만들기(위, 아래, 오른쪽, 왼쪽) 이번에는 box-shadow로 생성한 그림자에 투명도를 지정해 주는 방법을 알아보려고 합니다. 투명도 설정하기 box-shadow 속성에는, 투명도를 설정할 수 있는 항목이 따로 없습니다. 그래서, 그림자의 투명도를 지정하기 위해서는 color 항목을 rgba형식을 사용해서 표현해야 합니다. color를 표현하는 방법 중 하나인 rgba는 'red, green, blue, alpha' 이렇게 4가지 값을 지정할 수 있는데, 이 중, alpha는..
지난 번에는 CSS의 box-shadow 속성을 사용하여 그림자를 만드는 방법을 알아보았습니다. [HTML/CSS] div 박스에 그림자 만들기(box-shadow) [HTML/CSS] div 박스에 그림자 만들기(box-shadow) 박스에 그림자를 그리기 위해서는 CSS의 box-shadow 속성을 사용합니다. box-shadow 이 속성은 CSS 요소에 그림자를 추가해줍니다. box-shadow : 5px 5px 5px 5px red inset; 허용 값 offset-x, offset-y 그림자의 위치를 hianna.tistory.com 이번에는 이것을 응용하여, 박스의 위쪽, 아래쪽, 오른쪽, 왼쪽에만 그림자를 만들어보겠습니다. box-shadow 먼저 잠깐, box-shadow에 지정할 수 있는..
박스에 그림자를 그리기 위해서는 CSS의 box-shadow 속성을 사용합니다. box-shadow 이 속성은 CSS 요소에 그림자를 추가해줍니다. box-shadow : 5px 5px 5px 5px red inset; 허용 값 offset-x, offset-y 그림자의 위치를 지정합니다. offset-x : 양수를 입력하면 그림자가 오른쪽으로, 음수를 입력하면 그림자가 왼쪽으로 만들어집니다. offset-y : 양수를 입력하면 그림자가 아래쪽으로, 음수를 입력하면 그립자가 위쪽으로 만들어집니다. blur-radius 숫자가 커질수록, 그림자가 블러 처리되어 흐려집니다. spread-radius 숫자가 커질수록, 그림자의 크기가 커집니다. color 그림자의 색깔을 지정할 수 있습니다. inset ins..