크롬브라우저에서 실행시 입력박스(text, number 등)를 클릭하면 default값으로 검은 테두리가 생긴다고 한다. 이를 제거해주어야 :focus가 적용된다. 제거는 outline: none; 을 이용하면 된다. /*css 예시*/ #billNum:focus{ outline: none; border: 2px solid blue; } 참조: https://myhappyman.tistory.com/144
/*css*/ /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 참조 : https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp
value : 기본값 placeholder : 안내 문구 placeholder로 지정하면 화면상에는 뜨지만 submit을 해도 데이터가 넘어가지 않음. input type="number" 와 같은 숫자만 입력 가능한 박스에도 문자열로 안내 가능. //Custom //아무것도 출력되지 않음 경우에 따라 placeholder보다 lable을 이용해 안내 문구 만들기를 권장하는 경우 있음. 2018년 글로 조금 오래되었지만 여전히 참고할 만한 부분이 있어 아래 블로그를 읽어보면 좋을 듯. 블로그 주소: https://ibrahimovic.tistory.com/30 Placeholder를 사용하지 마세요. 이 글은 Don’t Use The Placeholder Attribute 를 번역, 핵심 내용만 짧게 요약..
box-shadow: inset(내부그림자) / x축이동 / y축이동 / blur-radius(블러) / spread-radius(크기) / 색상 /*예시*/ /*box-shadow: x축이동 / y축이동 / blur-radius / 색상*/ box-shadow: 0px 10px 15px hsl(0, 36%, 70%);
background 요소 중 linear-gradient 활용 background: linear-gradient(각도, 색상, 색상); 각도 /*예시*/ background: linear-gradient(90deg, hsl(171, 41%, 78%), hsl(208, 46%, 41%)); to top, to bottom, to left, to right n deg (degree의 줄임말) 색상 /*예시*/ background: linear-gradient(to left, yellow 25%, green 30%, blue); 2가지 이상의 색상도 가능 색상 뒤에 n %를 붙여서 색상 범위 지정
position 속성 static (기본) relative (자신 기준) absolute (상위 요소 기준) fixed (뷰포트 기준) stickey (스크롤링 기준) top, bottom, right, left : 위치 지정 대부분의 경우 postion과 top, bottom, right, left가 같이 사용됨. 여기에서는 relative와 absolute만 다루도록 하겠다. 나머지는 차차 내가 필요할 때 업데이트. -relative position: relative; 부모 요소와 상관 없이 요소 이동 가능. 위치는 요소의 원래 기본 위치에서 top, bottom, right, left의 방향으로 얼마나 벗어났는지 지정. -abrolute position: absolute; position 속성이 '..