본문 바로가기
728x90
반응형

분류 전체보기123

jQuery 선택자 //태그 선택자 // jQuery 선택자는 css선택자와 같다!$("h5").css("color", "red");$("p").css("color", "blue");// 자바스크립트로 했을 때 //document.getElementsByTagName("p").style.color = "green";// -> 배열에 스타일을 적용할 수 없다!const arr = document.getElementsByTagName("p");for(let item of arr){    item.style.color = "green";}//h5, p 두 태그 동시에 배경색을 yellow으로 지정하기$("h5,p").css("backgroundColor", "yellow");// 클래스 선택자// 클래스 item인 요소의 글자색.. 2024. 6. 22.
함수 DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>14_함수title>    style>        /*code태그*/    code{        color:red;        font-size: 20px;        font-weight: bold;    }    #btn1{        width:50px;        height: 50px;        border:1px solid black;        font-size:30px;        font-weight: bold;      .. 2024. 6. 21.
jQuery 개요 jQuery는 요새 안쓰는 추세이지만 아직 쓰는 회사가 있다... // JS와 jQuery 차이점// 배경 :black// 글자색 : yellow// 글자크기 : 20px//Javascriptdocument.querySelector("#jsBtn").addEventListener("click",function(){    this.style.backgroundColor="black";    this.style.color="yellow";    this.style.fontSize="20px";})//jQuery$("#jQueryBtn").on("click",function(){    $(this).css("backgroundColor","black").css("color","yellow").css("font.. 2024. 6. 21.
요소 추가 제거 //추가 버튼이 클릭 되었을 때document.getElementById("add").addEventListener("click",function(){    //div 요소 생성    const div = document.createElement("div");    //div에 row 클래스 추가    div.classList.add("row");    //------------------------------        //input 요소 생성    const input = document.createElement("input");    //input in 클래스 추가    input.classList.add("in");    //input에 "type" 속성, "number" 속성 값 추가(type.. 2024. 6. 20.
DOM DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>DOMtitle>    style>        .area{            width:400px;            height: 400px;            border: 1px solid black;        }                .area >div{            width:100%;            height:10%;            box-sizing:border-box;            border:2px.. 2024. 6. 20.
객체 //객체 생성document.getElementById("btn1").addEventListener("click",function(){    const div1 = document.getElementById("div1");    // {} 객체 리터럴 표기법으로 객체 생성    // **(중요) **    // 자바스크립트 객체의 Key는 무조건 string    // "key" 또는 'key'     // 또는 key(따옴표가 없어도 string으로 인식)    const brand = "할리스"    const product = {        "pName" : "케이크",        'brand' : "스타벅스",        flavor : ["초코","딸기", "치즈"],        pric.. 2024. 6. 19.
728x90
반응형

티스토리툴바