🐥HTML, CSS, Javascript, jQuery: 첫 번째 개인 프로젝트 하면서 새로 알게 된 것 모음 조각 (2) [K-디지털 트레이닝 27일~]

[230206~] 첫 번째 개인 프로젝트 하면서 새로 알게 된 것 모음

새로 알게 된 것뿐만 아니라 이전에 이론 공부 했던 것들 중에 다시 상기하게 된 것도 포함했다.
프로젝트를 만드는 과정에서 배웠던 이론들을 직접 적용하니 머릿속에 더 남는 것 같다. :)

상대적으로 길이가 긴 내용은 개별 글로 옮겼다. (230329 ~ )

---

230208 Wed

autofocus="autofocus"

The autofocus attribute is a boolean attribute. When present, it specifies that the element should automatically get focus when the page loads.

---

비밀번호

/* 회원 로그인 */
$('#btnSignIn').on('click', function (e) {
	if (frmValid.isValid() && _modLogin.isValid()) {
		if($("input[name='idAutoChk']").val() == 'Y'){
			setCookie('_YBLGID',btoa($('#txtId').val()),365);
		}

		$('#frmSignIn').submit();
	} else {
		console.log("유효성 체크 중 오류가 발생하였습니다.");
		e.preventDefault();
	}
});

---

230208

포커스 이용해서 input text 눌렀을 때 border 효과 주기

[CSS] input text focus border color, 포커스 시 테두리 색상 변경

참고: https://zxchsr.tistory.com/301

/*input 클릭하면 효과 있다.*/
input:focus{outline:none;/*input 박스를 클릭 했을떄 나오는 테두리 색상 없애기*/
border:solid 2px #CCCCFF; /*box-shadow: 0 0 5px #d6a8e9;*//*그림자 효과*/};

!important 쓰니까 실행됐다.

select:focus{
border:solid 2px #CCCCFF !important; box-shadow: 0 0 15px #ECEEFF;}

참고: https://stackoverflow.com/questions/43820420/change-the-border-color-of-the-select-input-for-focus

---

230209 Thu
line spacing

line-height:15px;

---

230210 Fri

background-position으로 이미지 이동 가능
background-position: 왼/오 위/아래;
참고: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

.card:nth-child(4):before {/*축제 대회*/
  background-image: url(https://i.imgur.com/9gEELRn.jpg);
  background-position: 5.5cm;
}

 

---

230212 Sun
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

ellipsis

This keyword value will display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.

---

230221 Tue
입력한 이메일 폼 가져오기

이메일<input type="text" id="email_id" class="form_w200" value="" size="15">@
<input type="text" id="email_domain" class="form_w200" value="" size="15"> 
		<select class="select" onclick="setEmailDomain(this.value);return false;" id="emailOption"><!-- 이메일 선택 옵션 -->
			<option value="">직접입력</option>
			<option value="naver.com">@naver.com</option>
			<option value="hanmail.com">@hanmail.net</option>
			<option value="gmail.com">@gmail.com</option>
			<option value="nate.com">@nate.com</option>
			<option value="daum.net">@daum.net</option>	
		</select><br>

제이쿼리

	// 이메일 도메인에 이메일 선택 옵션 값을 가져온다.
	  var email_id =$("#email_id").val();
	  var email_domain =$("#email_domain").val();
	  var mail ="";
	  
	  function setEmailDomain(domain){

---

230318

text-shadow: 1px 1px 2px pink;
/* 위아래, 양옆, 번지는 것, 색상 */

---