2023.03.20_웹 퍼블리싱

스파르타코딩클럽 웹 퍼블리싱_1주차

jQuery를 사용하기 위해서 jQuery라는 라이브러리를 src로 참조를 해서, 문서에서 활용할 수 있도록 한다.

<head>
  <meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

jQuery에서 $ 사용할 수 있다.

html

document.getElementById('btn').addEventListener('click', function() {
      alert('버튼 클릭 이벤트');
    })

jquery

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

html과 jquery 비교 문법이 줄어든다!

css 트랜지션

시작 지점과 끝 지점을 연결. 중간과정을 부드럽게 만들어 준다.

버튼과 특정 요소들을 마우스를 올렸을 때 마우스가 빠졌을 때, 마우스를 클릭했을 때 이전 상태와 다음 상태의 색 등에 변화를 준다.

밖에 있는 style.css 파일을 직접 참조할 수 있다

<link rel="stylesheet" href="style.css" />

Css에서

transition: all 0.3s ease-in-out; // all를 color로 변경 가능, 애니메이션 속도, 애니메이션 방식

button use-css

.button.use-css:hover는

<button class="button use-css">웹 퍼블리싱</button> 를 가리킨다.

mouseover/out 그리고 mouseenter/leave

MouseOver/Out : 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식요소의 영역까지 포함됨

MouseEnter/Leave :지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식요소가 있다면 해당 자식요소의 영역은 제외됨

dropdown_sample

/* css
   a 태그는 링크이기 때문에 파란색, 밑줄을 가지고 있다. a 태그의 원래 속성을 제거하기 위함 */
a {
  text-decoration: none;
  color: inherit;
}

position : absolute;

/* 특정 좌표를 지정하여 화면에 어느 위치에 나오게 하고 싶을 때 사용 */
position : absolute;

toggle

/* 토글 기능 : 안보이는 상태에서 보이는 상태로 바꿔 줌. 다시 클릭하면 안 보이는 상태로 바꿈 */

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

정리_js

$('.dropbtn').on('click', function (evt) {
  const ulElement = $('ul');
  ulElement.toggle();
});

이 함수는(function) ul이라는 요소를 찾아서 변수(ulElement)에 저장하고 $('ul') 과 같게 만든다.

const -> 한번 할당하고 더 이상 변경이 없을 때

let -> 한번 할당하고 계속 할당을 추가적으로 할 때

vsc 정렬 : cmd + k + f

min_개발일지