CSS(20)
-
chat animation only css(채팅 애니메이션)
text1 text2 text3 text4 text5 *, *::before, *::after {box-sizing:border-box; margin:0; padding:0;} .chat-container {display:flex; flex-direction:column-reverse; position:relative; width:500px; height:300px; margin:50px auto 0; overflow:hidden; border:1px solid red;} .chat-container::before {content:''; position:absolute; top:0; width:100%; height:10%; z-index:1; background:linear-gradient(to bot..
2023.01.03 -
input date 텍스트 컬러 변경
input[type=date]::-webkit-datetime-edit-text, input[type="date"]::-webkit-datetime-edit-month-field, input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-year-field { color:#4e4e4e; }
2022.12.08 -
css + js ) input date 커스텀
input[type='date']가 처음 로딩됐을 떄 placehorder의 내용으로 보여지게 하고 날짜를 선택하면 해당 날짜가 보여지게 함 HTML CSS input[type="date"] {position:relative; padding:14px; width:150px; height:30px; font-size:14px; color:#999; border:none; border-bottom:1px solid #e0e0e0;} input[type="date"]::-webkit-calendar-picker-indicator {position:absolute; top:0; left:0; right:0; bottom:0; width:auto; height:auto; color:transparent; back..
2022.11.29 -
tab Menu - input type radio (input 라디오로 탭메뉴 만들기)
input태그의 radio 타입을 이용하여 탭 메뉴 만들기 HTML Short Medium Long Short Section Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nullam accumsan lorem in dui. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Medium Section Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis se..
2022.10.18 -
css 한줄쓰기
1. Font * font-style : 폰트 형태 등을 지정 (이탤릭 등) * font-variant : 대문자↔소문자 * font-weight : 폰트 굵기 * font-size : 폰트 크기 * line-height : 폰트 높이값 * font-family : 폰트 글꼴 .p { font-style: normal; font-variant: normal; font-weight: normal; font-size: inherit; line-height: normal; font-family: inherit; } p {normal normal normal inherit/normal inherit} - 폰트사이즈와 line-height를 같이 쓸 때는 / 를 넣어줌 2. Background * backgrou..
2022.10.14 -
플로팅 메뉴 (시간차 메뉴 나오기)
HTML CSS nav{position:fixed; right:200px; bottom:150px; z-index:100;} nav .plus{display:none;} nav .toggle {position:absolute; width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.7); cursor:pointer; z-index:10;} nav .toggle span {top:calc(50% - 1px); left:calc(50% - 11px); z-index:10;} nav .toggle span:before {content:""; transform:translateY(-7px);} nav .toggle span:after {..
2022.08.30