728x90
TIL
📌
오늘 한 일
업데이트 페이지 👉 css 구현
페이지 👉 글 꼴 수정
팔로우 페이지 👉 css 구현
딥러닝 적용한 페이지 기다리는 중
오늘도 하루 종일 css html 수정 구현 반복한 거 같다.
페이지에 새롭게 만들 때 좋은 디자인이 떠오르지 않는다.
역시 많이 봐야 떠오르지 않을까라는 생각이든다.
그래서 마켓컬리, 당근, 페이스북, 인스타, 쿠켓마켓 등
많은 사이트를 보면서 참고한 거 같다.
지금은 딥러닝 적용된 페이지를 기다리는 중이다.
오늘 이거 마무리하고 자지 않을까 싶다.
비밀번호 보기/숨기기 기능 구현
HTML
<div class="main">
<input type="password" placeholder="비밀번호를 입력하세요">
<i class="fa fa-eye fa-lg"></i>
</div><head>태그 안에 아래 코드 입력해야 아이콘 가져올 수 있음
<head>
<link rel="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>CSS
div.main{
position: relative;
padding: 20px;
}
div.main input{
width: 300px;
height: 30px;
background-color: black;
border: 0;
color: white;
text-indent: 10px;
}
div.main i{
position: absolute;
left: 75%;
top: 27px;
color: orange;
}Javascript
$(document).ready(function(){
$('.main i').on('click',function(){
$('input').toggleClass('active');
if($('input').hasClass('active')){
$(this).attr('class',"fa fa-eye-slash fa-lg")
.prev('input').attr('type',"text");
}else{
$(this).attr('class',"fa fa-eye fa-lg")
.prev('input').attr('type','password');
}
});
});눈 모양 아이콘이 <i> 태그에 onclick을 달고 클릭하면 <input> 태그에 active로 전환
비밀번호를 입력하는 <input> 태그가 active 클래스를 가지고 있으면
font awesome의 fa-eye 아이콘을 fa-eye-slash로 변경하여 눈 모양에 슬래시가 추가된 아이콘으로
변경하여 시각적 효과를 준 뒤
<input>의 type을 password가 아닌 일반 text로 변경하면 비밀번호가 그냥 노출된다.
728x90
'내일배움캠프' 카테고리의 다른 글
| 46. 내일배움캠프 - 8주차 WIL (0) | 2022.10.22 |
|---|---|
| 45. 내일배움캠프 - 35일차 TIL 팀 KPT (0) | 2022.10.21 |
| 43. 내일배움캠프 - 33일차 TIL (0) | 2022.10.20 |
| 42. 내일배움캠프 - 32일차 TIL (2) | 2022.10.18 |
| 41. 내일배움캠프 - 31일차 TIL (0) | 2022.10.18 |
댓글