16일차

백엔드를 팝니다·2024년 7월 16일

개발자 수업

목록 보기

10/72

Document_image

// 예제 1) js 에서 src, width, height 속성 추가하기
// TODO: 1) img 태그 선택
let image = document.querySelector("#image"); // img 태그 (객체) 변수 저장

// TODO: 2) img 속성 추가 : src, width, height
image.src = "https://via.placeholder.com/300x200";
image.width = "300";
image.height = "200";

mouseover2

// 1) onmouseover , onmouseout 속성 이용
// 2) .addEventListenter(" ", 함수*()) 이용

// TODO: 1) div(#rect) 태그 선택

let rect = document.querySelector("#rect");
rect.addEventListener("mouseover", function () {
//실행문;
// 참고) : css -> 명명법(이름짓기) : background-color (마이너스 표기법)
// js -> backgroungColor (낙타(카멜)) 표기법 ) = java
rect.style.backgroundColor = "green";
rect.style.borderRadius = "50%";
});

// TODO: 3) .addEventListener("mouseout, 함수 ()) 이용작성(정의)

rect.addEventListener("mouseout", function () {
// 실행문 : 복원
rect.style.backgroundColor = "";
rect.style.borderRadius = "";
});

dom_classlist

// 예제 : .red 클래스를 추가
// 1)div 태그(#content) 선택
// document.querySelector("#content").classList.add("red");
document.querySelector("#content").classList.add("skyblue");

location

function naver() {
//클릭시 실행
location.href = "https://www.naver.com";
}

JQUERY_SELETOR

// TODO: 사용법 : jquery ? :
// TODO: 사용법 : JS의 유용한 함수들의 모임(패키지)
// TODO: 대유행 왜? 1) QUERYSELECTOR() : 선택 함수 및 코딩 라인이 김
// TODO: 웹브라우저 종류별로 따로 코딩했음
//그래서 개발자들이 거의 제이쿼리감 크로스 브라우저 문제없음
// $(function () {
// // 코딩 : #title 선택해서 color ="skyblue";
// $("#title").css("color", "skyblue");
// });

// 간단 연습 : h1 태그를 선택해서 color 를 red로 바꾸세요

$(function () {
$("#title").css("color", "red");
});

JQUERY_ALL

(*) 전체선택자

$(function () {
// 코딩 : 전체 태그 선택해서 border : 1px solid blue
//간단연습 : 전체 태그 선택해서 color : 녹색
$("").css("border", "1px solid blue");
$("").css("color", "green");
});

jq 함수 체이닝

//함수 체이닝 : 함수().함수2().함수3()..............
$("#tit")
.css("background-color", "red")
.css("border", "2px solid black");

태그 2개 동시에 선택해서 디자인하기

$(function () {
// 코딩 : h1, #tit(h3) 태그 선택해서 디자인하기
// background-color : blue
// border : 2px dashed red
$("h1, #tit")
.css("background-color", "blue")
.css("border", "2px dashed red");
});

jq_children(자식 선택자)

// 예제 : ul 태그 밑에 자식 태그(#first) 선택해서 배경색 블랙 글자 화이트
$("ul>#first").css("background-color", "black").css("color", "white");

jq_속성선택자

$(function () {
// 코딩 : 속성선택자 사용 : 태그[속성]
$("#wrap a[target]").css("color", "red");
});

// 코딩 : 1) input 태그의 value 속성값을 출력
// TODO: 사용법 : let 변수 = $("css선택자").val();
// let result = $("#user-name").val(); // 용대리
// alert(result);
// 2) 용대리 -> 강대리 value 속성값을 수정
// TODO: 사용법 : $("css선택자").val("수정값");
// $("#user-name").val("강대리");
//간단연습 :1) input 태그에 value 값 수정

jq_click

// $(function () {
// // TODO: 사용법 :
// // 코딩 : 1)버튼클릭하면 2)p 태그 색깔을 빨강으로 변경
// // 실행문 : $("태그").함수();
// });
// $("button").click(function () {
// // 클릭시 실행
// $("p").css("color", "red");
// });