[ 스파르타 / Web ] 웹 퍼블리싱 정복 1주차

jQuery

---

자바스크립트에서 버튼 클릭 이벤트 예제

 

document.getEelementById('btn').addEventListener('click', function() {
	alert('버튼 클릭');
});

 

jQuery로 훨씬 간단하게 만들 수 있다. HTML 파일에 아래의 코드를 추가해준 뒤,

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 

JS파일에서 jQuery를 사용할 수 있게 된다.

 

$('#btn').on('click',function() {
	alert('버튼 클릭');
});

// document = $
// getElementById('btn') = ('#btn')
// .addEventListener() = .on

 

 

transition

---

아래와 같이 버튼에 적용된 css가 있을 때,

 

.btn {
  padding: 5px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  color: #e8344e;
  background-color: white;
  border: solid 2px #e8344e;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}

 

all을 쓰면 .btn 안에 모든 것(color, background-color)에 transition이 적용된다.

 

transition: all 0.3 ease-in-out;

 

 

반면 all 대신에 color을 적으면 color에만 transition이 적용된다.

 

transition: color 0.3 ease-in-out;

 

 

 

 

hover vs focus

---

hover: 마우스가 올라갔을 때

focus: 마우스가 클릭했을 때

 

 

토글(toggle) 기능

---

안 보이는 상태 -> 보이는 상태 -> 안 보이는 상태로 변경시켜 준다. 주로 아래와 같은 display로 구현된다. 

 

display: block; /* (보이는 상태) */
display: none; /* (안 보이는 상태) */

 

 

 

미디어 쿼리란?

---

주로 화면 크기가 다른 장치 (PC, 태블릿, 스마트폰) 마다 다른 디자인을 부여주기 위해 사용된다. 화면 크기가 768px보다 작을 경우 width를 100% 변경해준다.

 

@media (max-width: 768px) {
	.button {
		width: 100%;
	}
}