일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Eclipse
- 인텔리제이
- CSS
- input
- 이탈리아
- Maven
- string
- json
- IntelliJ
- CMD
- date
- Button
- 배열
- html
- list
- table
- Array
- 이클립스
- 문자열
- 테이블
- 자바
- windows
- 자바스크립트
- javascript
- Files
- ArrayList
- Visual Studio Code
- js
- vscode
- Java
- Today
- Total
목록IT/HTML&CSS (104)
어제 오늘 내일
지난번에는 ':last-child' 선택자를 이용하여 형제 요소 중 마지막 요소를 선택하는 방법을 알아보았습니다. [HTML/CSS] 형제 요소 중 마지막 요소 선택하기 (:last-child) :first-child CSS에서 ':first-child' 선택자를 이용하여 형제 요소 중 첫번째 요소를 선택할 수 있습니다. 첫번째 두번째 마지막 .my { background-color: yellow; } .my:first-child { background-color: skyblue; } .my:first-child 예제에는 'my'라는 클래스명을 가지는 3개의 형제 div가 있습니다. 이 중 가장 첫 번째 div를 선택하기 위해서 먼저 my클래스를 선택하고, :first-child 선택자를 사용하여, 이 ..
CSS의 선택자 중 자식 요소(부모 요소 바로 하위의 요소), 자손 요소(부모 요소 하위의 요소, 바로 하위가 아니어도 된다)를 선택하는 방법을 알아보도록 하겠습니다. 자식 요소 선택하기 ( '>' ) 부모 요소 바로 하위의 자식 요소를 선택하기 위한 결합자로 '자식 결합자(Child Combinator)'라고 합니다. 부모선택자 > 자식선택자 위와 같은 형식으로 사용하며, 부모 요소 바로 하위의 자식 요소를 선택합니다. 자식요소1 자식요소2 자손 div > h5 { background-color: yellow; } div > h5 div 요소 바로 하위의 h5 요소만 선택합니다. 자손 요소 선택하기 ( ' ' ) 보통 한 칸의 공백 문자로 표현하는 '자손 결합자(Descendant Combinator)..
:last-child CSS의 :last-child 선택자를 이용하여 형제 요소중 마지막 요소를 선택할 수 있습니다. 첫번째 두번째 마지막 .my { background-color: yellow; } .my:last-child { background-color: skyblue; } 위 예제는 'my' 라는 클래스명을 가지는 3개의 형제 div 요소가 있습니다. 이 3개의 형제 요소 중, 마지막 div 요소를 선택하는 예제입니다. 'my'라는 클래스를 가지는 div 영역은 배경색이 모두 노란색입니다. 이중, 마지막 div 영역만 하늘색으로 표시하기 위해서, .my:last-child 선택자를 사용하여, 배경색을 하늘색으로 지정하였습니다.
버튼 안의 글자 크기를 조정하기 위해서 font-size 속성을 사용할 수 있습니다. 버튼 안의 글자 크기 조정하기 10px 20px .small { font-size: 10px; } .big { font-size: 20px; }
input 필드의 스타일을 정의하는 방법을 알아보고 있습니다. [HTML/CSS] input 배경색, 글자색 변경하기 [HTML/CSS] input 커서 색상 변경하기 (caret-color) [HTML/CSS] input 커서 없애기 [HTML/CSS] input 테두리 아래만 남기기, 없애기 (border, outline) [HTML/CSS] input 클릭 시 테두리 색상 변경 이번에는 input 필드의 배경색을 투명하게 하는 방법입니다. background-color: transparent; background-color 속성의 값을 transparent로 지정하면, 배경색을 투명하게 합니다. 예제 .bg { background-color: yellow; } .no-bgcolor { backgro..
input 필드에 대한 스타일을 변경하는 방법을 알아보고 있습니다. [HTML/CSS] input 배경색, 글자색 변경하기 [HTML/CSS] input 커서 색상 변경하기 (caret-color) [HTML/CSS] input 커서 없애기 [HTML/CSS] input 테두리 아래만 남기기, 없애기 (border, outline) 이번에는 input 필드를 클릭했을 때 테두리의 색상을 변경하는 방법을 알아보도록 하겠습니다. input 클릭 시, 테두리 색상 변경 필드 클릭 시, 테두리 색상을 변경하기 위해서, 다음의 두 속성을 이용할 수 있습니다. border-color outline 이 두 속성의 지난번 포스팅에서 input 필드의 테두리를 없앨 때도 사용했습니다. [HTML/CSS] input 테두..
input 필드를 스타일링하는 방법을 알아보고 있습니다. [HTML/CSS] input 배경색, 글자색 변경하기 [HTML/CSS] input 커서 색상 변경하기 (caret-color) [HTML/CSS] input 커서 없애기 이번에는 input 필드의 테두리를 없애는 방법, 아래쪽에만 테두리를 남기는 방법을 알아보겠습니다. 또한, input 필드에 마우스를 가져가면 나타나는 테두리도 같이 없애보도록 하겠습니다. border-width input 필드의 테두리를 없애기 위해 border 속성을 이용할 수 있습니다. 예제 input { background-color: #FFF8DC; } .no-border { border-width: 0; } .bottom-border { border-width: 0 ..
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 필드를 클릭해보세요. 커서가 빨간색으로 변경되었습니다.