HTML 12

[jQuery] jQuery 응용

- [jquery13] :nth-child() 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 jquery13.html /* :nth-child() => n번째 자손 : 특정 순서에 있는 요소를 선택할 때 사용하는 선택자 */ /* test라는 클래스의 n번째 자손 */ .test:nth-child(3){ color:blue; } td:nth-child(2){ background-color: red; } $(function(){ ..

HTML 2023.04.23

[jQuery] jQuery란? + 응용

* jquery 자바스크립트의 쓸모 있는 코드를 정리해 놓은 것 > 자바스크립트를 더 쉽게 사용 더보기 - 다운로드 Download the uncompressed, development jQuery 3.6.4 > 링크로 저장 > vscode_workspace의 js 폴더로 - [jquery01] jquery 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 jquery01.html // 자바스크립트 ..

HTML 2023.04.23

[HTML] javascript (3) - (로또 / innerText & innerHTML / 배열 / 객체 / 속성(property) + function(함수) / 익명함수)

- [javascript26] 로또 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 javascript26.html img{width: 150px; height: 150px;} // 1. bigChance() 함수 만들기 function bigChance(){ // 2. 간단한 메세지 출력 console.log("test"); // 3. 6칸 짜리 배열 선언 var num = new Array(6); // 4. 랜덤하게 번호 6개 생성 // 0

HTML 2023.04.16

[HTML] javascript (1)

* JavaScript : 웹 브라우저에서 동작하는 경량 프로그램 언어 > 개발자 도구를 찍어봐야 javascript가 반영된 내용이 보임 - var 변수명 var a = 10; ==> a라는 변수에 10의 값을 대입해 > 자료형은 안써도 됨 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // 자바 스크립트 : 웹 브라우저에서 동작하는 경량 프로그램 언어 // var 변수명 var a = 10; // a라는 변수에 10의 값을 대입해 > 자료형은 안써도 됨 var b; b = "안녕"; document.write("Hello Javascript : " + a) Colored by Color Scripter cs * 자바스크립트란? script 태그는 다른..

HTML 2023.04.16

[HTML] CSS - div ( block & in-line / position - relative, absolute, fixed / button

* Division : 웹사이트의 레이아웃, 틀을 만들 때 논리적 구분을 위해 사용 > 테이블보다 유용하게 사용 가능! - div는 'block 요소' span, image는 'in-line' 요소 - div 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 css07.html div{ width: 300px; height: 300px; background-color: rgb(255, 137, 157); } #blueDiv{ background-color: rgb(79, 79, 255); } 금요일 BLUE Colored by Color Scripter cs - [응용] 영화 목록 만들기 1 2 3 4 5 6 7 8 9 10 11 12 ..

HTML 2023.04.09

[HTML] CSS(Cascade Style Sheet) - width / border / text-align border-collapse / font / #id / .class

* CSS(Cascade Style Sheet) -> 다양한 디자인적 요소를 정의 선택자 : tag 선택자 { 속성 : 값; } - CSS : 디자인, 모양, 크기 담당 html :페이지의 구조 담당 - style > width / border / text-align / border-collapse 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 css01.html /* ..

HTML 2023.04.09