본문 바로가기

03. 웹 표준 기술43

[부트스트랩] ㅁ 빠르게 화면을 예쁘게 작업을 하고싶다면 무료 템플릿 사용.- 보통 이런 것들은 부트스트랩이라는 걸로 작업이 되어 있다.  ㅁ 부투스트랩은 jQuery와는 상관없고 html, css와 관련 있다.  ㅁ https://www.w3schools.com/ - 부트스트랩도 다양한 업체에서 제공하는데 조금씩 다르다.- w3schools가 깔끔하다.- 상단의 Bootstrap 메뉴 - B4 클릭- 최신버전이 무조건 좋은게 아니다. B5(Bootstrap 5) 버전은 아예 jQuery를 못 쓴다.- 버전에 대한 차이는 버전 아래에 쓰여 있다. B4는 IE 9 이하는 지원 안한다.  - 특정 요소에 클래스만 넣으면 알아서 스타일이 반영된다.   ㅁ 굳이 파일 다운받을 필요는 없고 cdn 방식으로 사용한다.  - cs.. 2024. 8. 22.
[jQuery] 06. effect ㅁ 특정 요소에 이펙트 효과를 주는 메소드- 물론 css로 해도 되지만 jQuery로도 간단하게 할 수 있다.   ㅁ - 요소의 크기(width, height)가 조정되면서 보여지고 사라지는 효과의 메소드.크기가 점점 작아지면서 사라지고 점점 커지면서 보여지는 효과의 메소드들이다.  - 사용법 요소.show | hide | toggle(['ms']);           //   밀리세컨드 제시 가능 - show : 특정 요소의 가로 세로 크기가 점점 커지면서 display를 기존 상태로 처리- hide : 특정 요소의 가로 세로 크기가 점점 작아지면서 display를 최종 none 처리- toggle : show() hide() - block상태가 아닌 기존상태라고 한 이유는, div는 block이지만.. 2024. 8. 22.
[jQuery] 05. each ㅁ each 메소드- 배열의 요소들 또는 객체의 속성들을 순회할때 사용할 수 있는 메소드- for in 문과 유사하게 수행됨. (반복문 느낌)  - 사용법 (1) $.each( 배열 | 객체, function(매개변수1, 매개변수2) {    순회하면서 수행할 내용}) (2) $(배열).each(function(매개변수1, 매개변수2) {    순회하면서 수행할 내용})  - 배열이나 객체의 속성을 순회하면서 매번 function이 실행됨. (즉 콜백함수같은 거다) - 배열제시시 첫번째 인자값으로 인덱스 수, 두번째 인자값으로 (인덱스 자리에 있는) 요소가 전달됨.(dom 요소 아니고 배열에 있는 요소)- 객체제시시 첫번째 인자값으로 속성명, 두번째 인자값으로 속성값이 전달됨.(객체는 인덱스의 개념이 없.. 2024. 8. 22.
[jQuery] 04. dom_dynamic ㅁ 동적으로 요소를 생성하거나 복제, 제거한다   ㅁ 동적으로 요소 생성 >  (1) 문자열로 요소 만드는 방식- 변수 = '안녕하세요'            //     이렇게 만들고 변수에 담을 수 있다는 뜻.  (2) jQuery 객체로 요소 만드는 방식- 변수 = $('').text('안녕하세요');     - 변수 = $('안녕하세요');                //  더 간단한 방법 ( b태그 요소 객체가 만들어짐)  - jQuery 객체로 요소를 만들면 jQuery 메소드를 사용할 수 있다.문자열을 달러 괄호로 감싸면 된다.- 이때까지 달러 괄호 안에 요소 선택을 위해 선택자를 써왔는데, 항상 선택자를 써야하는 것은 아니다.요소를 생성할 때는 문자열을 쓴다.- 어떤 태그의 요소를 만들고 싶.. 2024. 8. 21.
[jQuery] 03. event ㅁ jQuery 방식으로도 특정 요소에 이벤트 핸들러를 연결할 수 있다.지금까진 인라인 이벤트 모델 방식으로 무언가를 클릭했을 때 선언적 함수가 호출되게만 했었다.   ㅁ - jQuery용 객체에 이벤트 핸들러를 부여하는 메소드.- 주로 이벤트명이 곧 메소드명으로 되어있다. - 특정 이벤트 대상이 되는 요소에 특정 이벤트 발생시 실행될 function을 부여할 수 있다.    ㅁ 이벤트 메소드 사용법 이벤트대상.이벤트메소드(이벤트핸들러);  (1) 익명함수 이벤트대상.click( function([evt]) {    실행내용;} )   (2) 화살표 함수                                                         //  this 못 씀. 이벤트대상.click( (.. 2024. 8. 21.
[자바스크립트] 14. Data 속성 (Data Attribute) ㅁ data 속성- HTML 구성 요소의 데이터를 저장하기 위한 속성으로 data-* 작성할 수 있다. (속성명은 마음대로 부여)- 모든 data-* 속성은 알게 모르게 DOM의 dataset이라는 속성(property)에 저장됨.             HTML Attribute                   DOM Property       1) data-aaa=""                  dataset.aaa       2) data-aaa-bbb=""          dataset.aaaBbb  (dash 구분자는 자동으로 camel-cased 처리됨)       3) data-aaaBbb=""           dataset.aaabbb  (대문자는 소문자로 처리됨)  - (요소에 작성할.. 2024. 8. 20.
jQuery 실습문제, jQuery로 data 속성에 접근, 조작 ㅁ 뭐가 자바스크립트 방식이고 뭐가 jQuery 방식인지 구분할 수 있어야 한다.회사에서는 섞어서 쓴다.   ㅁ 연습문제 (총 12문제) DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>           -->        script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">script>head>body>     h2>연습h2>    div id="practice">        h4>h4.. 2024. 8. 20.
jQuery 02. dom_property (요소 선택해서 property 조작) ㅁ 요소 선택도 jQuery 방식으로, 메소스도 jQuery 측에서 제공하는 메소드들을 이용했다.이런 것들을 순수 자바스크립트 방식으로 하기에는 복잡하다.제공하지 않는 기능들도 많고. 그래서 jQuery를 사용한다. ㅁ 지금까지 요소 선택을 했다. 이제 요소의 속성값을 가져오거나 변경하는 것을 해본다.자바스크립트에서 DOM 객체 선택해서 property를 가져오거나 변경했었다. 그런걸 jQuery로 해본다. - 자주 사용했던 속성들과 관련된 메소드들이 jQuery 측에서 제공되고 있다.자바스크립트 방식과 비교해가면서 사용해본다.    ㅁ innerText 및 innerHTML 속성 관련 메소드- 두 속성은 해당 요소의 컨텐츠 영역값을 가지고 있는데, 그때 그 컨텐츠 영역에 html 태그가 있다면 그 태그.. 2024. 8. 20.
[jQuery] 01. jQuery ㅁ 지금까지 자바스크립트 방식으로 요소를 선택, 조작하고 속성도 제어했다.- 그런데 복잡한 구문들을 편리하게 쓰고한다면 제이쿼리라는 라이브러리를 사용할 수 있다.- 제이쿼리도 결국 자바스크립트 기반이기 때문에 소스코드를 작성한다.자바스크립트 소스코드랑 혼용해서 기술해도 된다.  ㅁ jQuery- 자바스크립트만으로 코드를 짜게 되면 굉장히 구문이 복잡하다.다수의 요소에 동일한 이벤트를 부여할 때 매번 요소에 일일이 접근해야 해서 for문을 돌리는 등 번거롭다.- 자바스크립트의 복잡한 구문을 보다 간소화해서 사용할 수 있도록 만들어진 라이브러리 (.js)- 자바스크립트 코드가 내부적으로 다 작성되어 있다. 편하게 쓰도록 함수 등을 정의해 두었다. 자바스크립트 유용한 함수들이 만들어져 있는 모음집이다.우리는 .. 2024. 8. 20.
13. BOM [ 19일 월 12시 25분 ~ 12시 50분까지 그냥 다 ]  ㅁ - 브라우저 객체 모델 Browser Object Model- 브라우저의 구성 요소와 관련된 객체   ㅁ BOM 종류 (1) window : 브라우저 화면 자체를 의미 (모든 Java (2) history : 방문했던 경로를 기억하고 있는 객체          //   뒤로가기, 앞으로가기를 가능하게 함(3) location : 경로(URL)를 관리하는 객체                      // 주소창과 연관(4) screen : 브라우저 화면 정보를 관리하는 객체  ㅁ 브라우저에도 뒤로 가기, 앞으로 가기가 가능하지만, 우리가 버튼을 둬서 뒤로가기 앞으로 가기 할 수 있다. 12시 25분쯤 1분.    ㅁ history 주요 메소.. 2024. 8. 19.
12. 정규 표현식 ㅁ - Regular Expression이어서 regExp로 줄여서 얘기하곤 한다.- 자바스크립트에서도 정규 표현식 객체를 제공한다.생성자 함수가 있어서 그 생성자를 이용해서 생성시킬 수도 있다. - 자바스크립트뿐 아니라 자바, 오라클 등에서도 쓰인다.- 줄여서 정규식이라고도 한다.         정규표현식 >       1. Regular Expression       2. 어떤 문자열이 특정 패턴을 가지고 있는지 확인하기 위한 표현식.      3. 정규표현식을 잘 쓰게 되면 복잡한 조건검사를 할 필요가 없다. (길이 체크, 문자 하나씩 체크)       4. JavaScript 정규식 작성 예시         - 리터럴 표기법 외에 자바스크립트에서 제공하는 객체를 이용해서 생성도 가능하다.     .. 2024. 8. 19.
[자바스크립트] 복습2 ㅁ (1) 나   DOCTYPE html>html lang="en">head>  meta charset="UTF-8">  meta name="viewport" content="width=device-width, initial-scale=1.0">  title>Documenttitle>head> body>   button id="btn1" onclick="season();">버튼1button>  div id="result1">div>   script>      /*      #btn1 클릭시      봄여름가을겨울      요소를 #result1에 넣으시오.    */    function season() {         const d1 = document.getElementById("result1");.. 2024. 8. 16.
[자바스크립트] 실습문제4 - 함수, 객체 실습문제 ㅁ 실습문제10_함수실습문제  - 요소.style.display="none" --> 해당 블럭요소 안보이게끔- 요소.style.display="block" --> 해당 블럭요소 보이게끔  - form이 보였다가 안보였다.  체크박스로 ? 라디오로? 체크하면 동적으로 저 폼이 뜨게끔 하면 된다. 각각을 클릭했을 때 띄워줄 div 폼을 미리 만들어 둬라. 그리고 스타일로 display none       ㅁ 실습문제11_객체실습문제       ㅁ실습문제12_객체실습문제 2024. 8. 14.
[자바스크립트] 11. event + 정규표현식 맛보기 ㅁ - DOM 객체에서 발생되는 시그널- 시스템에서 일어나는 사건(Action) 또는 발생(Occurence)를 의미한다. - 주요 이벤트 발생 방식(1) 사용자의 액션에 의해서 생성 (클릭, 키보드 입력, 마우스 움직임 등)(2) API의 이벤트 생성    ㅁ - 이벤트 발생시 동작시킬 함수 - 이벤트 핸들러(함수) 동작시 이벤트 핸들러의 매개변수로 발생된 이벤트에 대한 각종 정보들이 담겨있는 Event 객체가 인자로 자동 전달된다.- 이벤트 핸들러(함수)를 작성할 때 매개변수를 두면 이벤트 객체가 전달된다.매개변수명은 관례상 "event" 또는 "evt"로 한다.    ㅁ 이벤트 모델 Event Model- 이벤트가 발생했을 때 이벤트 핸들러를 할당하는 방법을 이벤트 모델이라고 한다. - 종류(1) .. 2024. 8. 14.
[자바스크립트] 09. JSON, 10. Date ㅁ 지금까지 자바스크립트에서 객체를 직접 만드는 법을 배워보았다.- 이렇게 만든 객체를 서버로 전송하거나, 서버측에서 이러한 객체 형태를 응답받을 때가 있다.이때 자바스크립트 객체 형태를 굉장히 많이 주고 받는다.- 그런데 내가 객체를 만들었다고 해서 바로 전달할 수 없다.항상 웹 서버와의 통신시에는 문자열의 형태로 데이터를 주고받아야 한다.   ㅁ JSON- 클라이언트, 서버간 데이터를 주고받을 때 포맷 값중의 하나다.   ㅁ - Javascript Object Notation- Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다.- 웹 애플리케이션에서 데이터를 전송할 때 주로 사용한다. (자바스크립트 서버)   - Javascript 객체와는 살짝 차이점이 .. 2024. 8. 14.
[자바스크립트] 08.객체 - (2) ㅁ   DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>head>body>    h2>in과 with 키워드h2>    이름 : input type="text" id="name"> br>    국어 : input type="number" id="kor"> br>    수학 : input type="number" id="math"> br>    영어 : input type="number" id="eng"> br>br>    button onclick="fnInWith();">실행확.. 2024. 8. 14.
[자바스크립트] 08. 객체 ㅁ 객체- 자바스크립트의 데이터 유형 중 하나.- 중괄호{ }로 생성.- 각 데이터는 "속성(property): 값(value)"의 형태로 정의한다.     (key-value 세트를 Entry라고 한다) - 후행 쉼표(trailing comma)를 사용할 수 있다.   변수 = {    속성 : 값,    속성 : 값,    속성 : 값,};      ㅁ 객체 내에 정의되어있는 속성에 접근하는 방법  (1) 점( . ) 표기법 객체.속성  (2) 대괄호( [ ] ) 표기법- 그냥 속성 쓰면 안 되고 문자열로 써야 한다. 객체['속성']       ㅁ  DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" co.. 2024. 8. 13.
[자바스크립트] 07. 함수 - (2) callback 함수 ㅁ 콜백함수- 인자로 다른 함수에 전달되어서 실행되는 함수   ㅁ 콜백함수 예시1- 로그인 기능 구현시마다 아이디/비번/이메일/토큰 중에 매번 두 개를 체크해야된다.  DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>head>body>    script>         // 각 체크를 담당하는 함수들을 미리 정의        const fnIdCheck = () => { console.log("아이디체크"); }        const fnPwdCheck = () => { con.. 2024. 8. 13.
[자바스크립트] 07. 함수 ㅁ 함수 작성 방법   (1) 함수 선언식 function name() { }   (2) 함수 표현식 const 변수 = function( 매개변수 ) { 실행내용 }   (3) 화살표 함수- 함수 표현식의 간결한 대안.- 프론트엔드를 전문적으로 쓰지 않는 회사는 잘 쓰지 않지만, 프론트엔드를 전문적으로 쓰는 회사는 무조건 화살표 함수로 쓴다. const 변수 = ( 매개변수 ) = > { 실행내용 }      ㅁ (1) 함수 선언식- 함수 이름을 결정해서 함수를 정의하는 방식. (기명함수)- 함수 선언은 호이스팅(hoisting)이 되므로(최상단으로 끌어올려지므로) 선언하는 코드 line에 상관없이 언제든 호출 가능하다. (호출) named();(정의) function named() { 실행내용 }(호.. 2024. 8. 13.
[자바스크립트] 실습문제3 - 배열관련 문제 ㅁ 문제1  DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>head>body>    button onclick="fnPractice1();">연습1button>    button onclick="fnPractice2();">연습2button>    div id="practiceResult">div>        script>        function fnPractice1() {            // 하단의 이미지명들이 담겨있는 배열을 통해서            // 연습.. 2024. 8. 12.
[자바스크립트] 06. 배열 (객체), 배열 관련 속성 및 메소드 ㅁ Array- 다수의 데이터들을 담을 수 있다. (자바의 ArrayList와 유사하다)- 크기에 제약이 없고, 타입에도 제약이 없다.- 타입은 object(객체)- 후행 쉼표(trailing comma)를 사용할 수 있다. - 형식 : [element, element, ...]     //     배열 내에 담겨있는 값들을 요소라고 하는데, html에서의 요소와는 다르다.- 배열내의 요소에 접근은 배열[index]로 한다.    ㅁ Array 선언방법  (1) 변수 = new Array([크기]);          //       크기 지정 안 할 수도 있다. (2) 변수 = new Array(element, element, ...); (3) 변수 = [ ]; (4) 변수 = [element, elem.. 2024. 8. 12.
[자바스크립트] 05. 문자열, 수학, 형변환 관련 메소드 ㅁ String 관련 메소드1- 문자열 데이터에 html 태그를 감싸서 반환 (1) 문자열.bold()                      :      "문자열" 반환(2) 문자열.italics()                    :      "문자열" 반환(3) 문자열.small()                    :      "문자열" 반환(4) 문자열.sub()                       :      "문자열" 반환(5) 문자열.link(href)                 :      "문자열" 반환...    DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="wi.. 2024. 8. 12.
[자바스크립트] 04. DOM - (3) 복습 ㅁ 복습1   onclick="fnRemind1();">복습1   - var로 선언된 변수는 해당 영역 내에서 hoisting된다. 선언과 초기화가 같이 이루어지는 구문은 선언 부분만 호이스팅된다. - 만약 var name = "홍길동" 이 구문 자체가 없다면(name이라는 변수 자체가 선언되지 않으면), 콘솔창에 오류는 나지 않고 그냥 빈 문자열 출력된다.- 블럭 내에서 var로 선언된 변수만이 블럭 바깥쪽에서 쓸 수 있다.let, const로 선언된 변수는 그 블럭 내에서만 사용할 수 있다. 이게 scope의 차이다.    ㅁ 복습2    onclick="fnRemind2();">복습2  id="result1">        ㅁ 복습 3  DOCTYPE html>html lang="en">head> .. 2024. 8. 12.
[자바스크립트] 실습문제2 - DOM 관련문제 [실습문제02_DOM 조작]  - 문제1, 2 다 네모 검은 박스는 div로.   100x100 픽셀임. - 색상 선택하는 input요소    ㅁ 문제 2-1  (1) 나 DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>head>body>    div id="box1" style="width: 100px; height: 100px; background-color: black;">div>    input type="color">    button onclick="fnChangeCo.. 2024. 8. 9.
[자바스크립트] 04. DOM - (2) 동적인 효과 주기 ㅁ 함수로 동적인 효과 주기  body>    div id="div1">        img src="../assets/assets/image/city1.jpg" width="100px" height="100px">    div>    h2>특정요소의 컨텐츠 영역 조작하기h2>    div id="div2">b>안녕하세요b>div>    div id="div3">b>어서오세요b>div>      button onclick="fnChangeContent();">컨텐츠영역조작button>      script>         // 함수로 동적인 효과주기 (화면 전체 수정 아니고 일부만 수정됨)        function fnChangeContent() {            const divEl2 = do.. 2024. 8. 9.
[자바스크립트] 04. DOM ㅁ DOM- Document Object Model 문서 객체 모델- HTML, XML 문서의 프로그래밍 인터페이스.(자바스크립트만의 용어는 아니고, xml에서도 나온다)- 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하며 문서의 구조, 스타일, 내용 등을 변경할 수 있게 도와줌. - 자바스크립트에서는 html 요소들을 DOM 구조로 인식하고 있음따라서 자바스크립트에서는 요소 하나하나들을 DOM 객체라고 함.            ■■■ HTML ■■■                            ■■■ DOM tree ■■■                                           Document                                         .. 2024. 8. 9.
[자바스크립트] 실습문제 ㅁ 실습문제01_동적으로 테이블 생성    DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>head>body>        table border="1">        tr>            td width="40px" height="40px">1td>            td width="40px" height="40px">2td>            td width="40px" height="40px">3td>        tr>        tr>            t.. 2024. 8. 8.
[자바스크립트] 02. 연산자, 03. 제어문 [02. 연산자] ㅁ 탭사이즈 보통 2로 줄여서 함.  기존에 작업했던 문서는 4칸이 그대로 유지된다. 새 문서부터는 적용됨.  ㅁ  (1) 산술 연산자- 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%), 제곱(**)- 자바스크립트는 정수와 실수를 구분하지 않고 number타입으로 취급하기 때문에,5 / 2하면 2.5가 나온다.- 5%2는 1이 나온다.- 5**2는 25가 나온다. (2) 증감 연산자- 1씩 증가(++), 1씩 감소(--) (3) 대입 연산자 / 복합 대입 연산자- 대입( = )- 복합 대입( +=, -=, *=, /=, %=,     **= ) - 마지막은 몇 제곱한 만큼을 다시금 대입한다. (4) 비교 연산자- >, >=, - equal value          .. 2024. 8. 8.
[자바스크립트] 01. 변수 ㅁ vscode에서 shift tab하면 뒤로 들여쓰기 ㅁ vscode 켜서 html 파일 작성하고 live server 열고 할 필요 없이개발자 도구 콘솔 f12 창에서 자바스크립트 구문을 써서 바로 테스트해볼 수 있다.   - 쓰고 엔터.     ㅁ   (1) string- 단일 문자와 문자열의 구분이 없음. 작은 따옴표, 큰 따옴표 모두 사용 가능. (2) number- 정수와 실수 구분이 없음. 123과 123.0은 같은 타입이다.- 추가로 NaN(Not a Number : 숫자간의 연산을 하다가 숫자가 아니게 된 경우) , Infinity(무한대 숫자), -Infinity가 존재한다. (3) boolean- true / false 값을 가진다.  (4) object- 객체자료형으로 메소드(met.. 2024. 8. 8.
[자바스크립트] 00. 개요 ㅁ css든 자바스크립트든 다 html 문서 내에 작성. ㅁ 자바스크립트 언어를 기반으로한 프론트엔드 라이브러리가 엄청 많다. 리액트, 노드, 뷰 등  ㅁ 1) HTML : 웹 문서의 큰 틀 (뼈대)2) CSS : 웹 문서의 스타일(색상, 디자인, 간격, 배치 등)3) JavaScript : 웹 문서내의 동적인 처리들을 담당                        특정 이벤트(클릭, 드래그 앤 드랍 등) 발생시 수행되어야되는 동작들 처리  ㅁ 자바스크립트는 html, css처럼 단순하지 않음. 자바처럼 하나의 프로그래밍 언어다.  ㅁ - 자바와 무관. 옛날에는 모카라는 이름. - 브라우저 전쟁하면서 단기간에 개발되어서 자유도가 되게 높아서 어려워 한다.- 하필 문법이 자바와 비슷하다. 하지만 자바와는 .. 2024. 8. 8.

티스토리툴바