funfunweb

input 의 type 이 search 일 경우 x 모양 없애기 x모양 나오는게 싫다면? 1. input type 을 text 로 넣는다. 2. 꼭 search 로 하고 x 모양을 없애려면? 원래 나오는 x모양 대신 내가 디자인한 x모양을 넣고 싶다면? 버튼을 따로 만들고 이미지를 넣는다. 여기선 xeicon 활용함. xeicon 활용법 공부하러가기 input field 에 내용을 입력하면 x모양 나오게 하기

배경의 색상, 이미지, 반복여부, 위치, 고정 여부를 각각 따로 기술하거나 한번에 표기할 수 있다. /*한번에*/ background:color image repeat position attachment; /*하나씩*/ background-color:값; background-image:url(경로); background-repeat:[repeat],[no-repeat],[repeat-x],[repeat-y] background-position:left top;/*기본값 = 0 0*/ background-attachment:[scroll][fixed] background-color(배경색) 색상명, hex값, rgb값, hsl 값, rgba값, hsla 값 transparent - 투명(기본값) backg..

opacity - 요소에 투명도를 부여할 수 있는 속성 opacity:0.5; 투명도는 0 ~ 1 로 표현 1에 가까워질수록 불투명 0에 가까워질수록 투명해진다.

요소의 성격을 바궈주는 속성 속성값 속성 설명 inline block 요소의 성격을 inline 요소의 성격으로 변경 - 줄바꿈 x , 규격 x block inline 요소의 성격을 block 요소의 성격으로 변경 - 줄바꿈 o, 규격 o inline-block inline 요소에게 block 특징인 규격을 줄수 있게 함. block 요소에게 inline 특징인 가로배치(줄바꿈x)할수 있게 함 none 요소를 보이지 않게 숨기고, 자리차지도 하지 않음 See the Pen display by 정은 (@luchiaChoi) on CodePen.

글자의 색상 지정하는 속성으로 색상명을 넣거나 hex 값 RGB값 HSL 값, RGBA 값, HSLA 값으로 넣을 수 있다. A 는 ALPHA 값으로 불투명도를 의미한다.

글자 또는 박스에 그림자를 주는 속성 글자에 그림자 주기 text-shadow 박스에 그림자 주기 box-shadow 기본값: none, 상속 yes, 애니메이션 yes 문법 text-shadow:x-offset y-offset blur-radius color box-shadow:x-offset y-offset blur-radius color x-offset - 그림자의 수평거리 (필수) y-offset - 그림자의 수직거리(필수) blur-radius - 흐림정도 (기본값 0) color - 그림자 색 none - 그림자 효과 없애기 x-offset 양수 입력시 오른쪽에 그림자 생김 y-offset 양수 입력시 아래쪽에 그림자 생김 그림자 중첩 속성값을 쉼표로 구분하여 여러번 작성하면 여러개의 그림자를..

대소문자 변경 속성값 속성 설명 uppercase 소문자 대문자로 lowercase 대문자 소문자로 capitalize 첫글자만 대문자로 See the Pen text-transform by 정은 (@luchiaChoi) on CodePen.

가상클래스 선택자 - 링크가 걸린 문자에 스타일 부여하기 html5에서는 일반요소도 :hover 가 적용되어 사용 된다. 속성값 설명 a:link 링크가 걸린 문자에 속성부여 a:visited 링크를 클릭하여 해당페이지에 갔다가 돌아온 경우에 속성 부여 a:hover 링크가 걸린 문자에 마우스가 올라가면 속성 부여 a:active 링크 걸린 글자가 활성화되었을 경우 속성 부여 (클릭했다가 돌아왔거나 클릭하려다 만 경우 a:focus 링크 걸린 글자(input)에 포커스가 생길 경우 키보드 tab 키 등으로 포커스가 생겼을 경우

글자에 밑줄, 윗줄, 가운데 줄을 만들거나 없애주는 속성 text-decoration:[none],[underline],[overline],[line-through] none : 줄 없애기 underline: 아래줄 overline: 윗줄 line-through : 가운데 줄 See the Pen text-decoration by 정은 (@luchiaChoi) on CodePen.

글자와 글자 사이의 간격은 letter-spacing 단어와 단어 사이의 간격은 word-spacing 으로 한다. 양수값을 입력하면 간격이 넓어지고, 음수값을 입력하면 간격이 좁아진다. p{letter-spacing:10px;} h1{word-spacing:-5px;}