728x90 반응형 PROGRAMING📚/WEB📑35 [WEB]동기/비동기처리 와 콜백함수 동기/비동기처리 동기식 처리 자바스크립트는 동기식 처리를 한다. 한번에 코드 한줄씩 차례로 실행 비동기식 처리 방법 실행이 오래 걸리는 함수들을 보통 비동기식으로 처리를 한다 처리하기 위해서는 함수들을 Web API로 이동시켜두고 작업을 완료하면 결과를 출력해준다 Web API 덕분에 작업을 기다리지 않고 빠르게 처리가 가능하다 setTimeout(()=>{},시간) 을 사용해서 1초 후에 timeout1 이 출력되도록 코드를 작성하였다. 다른언어와 다르게 자바스크립트는 기다려주지 않고 해당 줄을 실행하는 동시에 정지 하지않고 실행이 바로 된다. setTimeout()함수는 자바스크립트가 비동기식으로 처리를 하기 때문에 위와 같은결과가 출력된다. 비동기식 처리의 특징은 오래걸리는 작업이 있을 경우, 해당.. 2023. 10. 24. [WEB] JS-for,forEach 문 사용하기 변수 안에 여러가지 변수를 담아서 출력 해보려고 한다 var size = ["XL", "XXL", "XXXL"]; 다음과 같은 여러 문자가 담겨있는 배열을 출력 해보려고한다 배열을 출력하는 방법은 for 문을 사용해서 배열의 사이즈를 받아서 출력해주는 방법과 for (i = 0; i console.log(element)); forEach()를 사용해도 동일한 값을 출력한다 [ forEach 예시 ] size.forEach(function (e) { $(".form-select").append("" + e + ""); }); size.forEach(function (e) { $(".form-select").append(`${e}`);}); 2023. 9. 22. [WEB]JS-자바스크립트로 HTML 추가 생성하기 자바스크립트로 HTML 생성하기 여기안에 새로운 HTMl 생성 document.createElement("생성할 태그"); 스크립트를 넣어줄 div 태그를 하나 만들어 준다 생성할 태그 안에 p를 넣어주면 p태그로 생서이 되고 h1을 넣어주면 h1 태그의 형식으로 HTML이 만들어진다 document.querySelector("#container").appendChild(a); innerHTML은 문장을 덮어써서 기존에 있던 텍스트를 지우고 작성된다 insertAdjacentHTML 문자형으로 HTML 추가하기 var 변수 안에 문자열을 통째로 저장하고 insertAdjacentHTML 을 사용해서 HTML을 추가하는 방법과 jQuery에서는 append()를 사용해서 문자열을 추가 해주는 방법이 있다... 2023. 9. 22. [WEB]JS-이미지 슬라이드 만들기 이미지 슬라이드 만들기 위와 같이 동그라미 버튼을 누르면 다른 이미지가 변하는 슬라이드를 만들어 보려고 한다 사용할 이미지를 폴더 안에 넣어주고 body 태그 안에 이미지를 담아줄 큰그룹 (slide-container) 태그를 만들어주고 그 안에 이미지 태그를 3개를 들어서 넣어주었다 슬라이드를 만들어주기 위해서 세로로 정렬된 이미지를 가로로 정렬 시켜주어야한다 그러기 위해서 CSS 파일을 하나 만들어준다 .slide-container { width: 300vw; } .slide-card-bg { float: left; width: 100vw; } 반응형 웹에서 사용되어지는 크기의 단위 중 하나가 vw(Viewport Width), 그리고 vh (Viewport Height)가 있다 가로 사이즈에 대응하.. 2023. 9. 18. [WEB]JavaScript - setTimeout / setInterval 사용하기 setTimeout() / setInterval() 사용하기 자바스크립트에서 사용하는 타이머로 사용하는 대표적인 함수에는 seTimeout()와 setInterval() 함수를 사용한다 setTimeOut setTimeout 함수는 코드를 실행 할때 바로 시작하지 않고 기다렸다가 함수를 실행 할 때 사용하는 함수이다. 사용하는 방법은 setTimeout(function(){ // Code here}, 지연시간) 의 형식으로 적어주면 된다. setTimeout(funtion(){}) 이렇게 사용하지 않고 함수를 따로 만들었을 경우, 그 함수의 이름만 적어주면된다. 지연시간은 밀리세컨드 단위로 설정 해야한다. 예를들어 지연시간 1000은 1초, 10000은 10초를 의미한다. 위코드에서는 지연시간을 5000.. 2023. 9. 15. [WEB]JavaScript 변수(var, let, const) 사용하기 JavaScript 변수(var, let, const) 변수는 값이 변하는 것이 가능한 데이터를 말한다. JavaScript에서 데이터 값을 저장하기 위해서 보통 사용한다 JavaScript에서 사용하는 변수의 종류는 var(ES5), let(JS), const(JS)를 주로 사용한다 var 키워드는 1995~2015까지 모든 자바스크립트 코드에서 사용되었고 let, const 키워드는 2015년에 자바스크립트에 추가 되었다 대부분의 프로그래밍 언어는 블록 레벨 스코프를 따르지만 자바스크립트는 함수 레벨 스코프를 따른다 그래서 ES5 까지는 글로벌 스코프(Global Scope)와 기능 스코프(Function Scope) var를 사용해서 변수를 생성하였다 ES6부터 let그리고 const 블록 스코프(.. 2023. 9. 14. [WEB] form(폼) 태그 사용하는 방법과 속성 form(폼) 태그 사용하는 방법과 속성 서버로 유저의 정보를 전송하려고 사용한다 사용자 의견이나 정보를 알기 위해 입력 하는 틀을 폼이라고 생각하면된다 폼(form) 태그 속성에는 name, action, method, target 등 다양한 속성들이 있다 form 설명 action 폼 전송할 서버 쪽 스크립트 파일을 지정한다. name 폼을 식별하기 위한 이름을 지정한다 accept-charset 폼 전송에 사용할 문자 인코딩을 지정한다 taget:action action 에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다 method 폼을 서버에 전송할 http 메소드를 정한다. form을 구성하는 태그 요소 , 태그 태그는 폼(form)태그 안에 관련 있는 요소들을 그룹화 할.. 2023. 9. 14. [WEB]jQuery 응용 -Animation 만들기 Animation을 만들기 전에 어떤 디자인을 할지 미리 생각을 하고 시작 스타일과 최종 스타일에 대한 CSS 를 만들어 준다 그런다음 원하는 방식으로 Transition을 추가해서 동작을 구현해준다 jQuery 이용해서 Animation 만들기 jQuery에서 제공하는 다양한 라이브러리가 존재한다 jQuery 입문 | 이펙트(effect) 효과 개발 지식 공유 www.devkuma.com 애니메이션 효과 $(선택자).animate(스타일 [,지속시간] [,시간당속도함수] [,콜백 함수]); 더보기 backgroundPositionX backgroundPositionY borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidt.. 2023. 9. 12. [WEB]jQuery(라이브러리)설치&기본 함수 jQuery(라이브러리)설치 jQuery 를 사용하면 $ 은 쿼리 셀렉터를 의미 addEventListener = on 함수명을 짧게 사용 가능하다 https://releases.jquery.com/ jQuery CDN jQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery 2.x jQuery 1.x jQuery Migrate jQuery UI Showing the latest stable release for the current and legac releases.jquery.com .. 2023. 9. 12. [WEB]HTML태그, class 속성 - Space(공백)으로 여러클래스 만들기 Space(공백)으로 여러클래스 만들기 HTML을 사용하다보면 많은 클래스들을 만드는데 그럴때마다 클래스를 하나하나 만들어 줄 수도 있지만 class 속성안에서 space(공백)을 하나 띄워주는 방법으로도 또 다른 클래스를 만들어 줄 수 있다 An item A second item A third item A fourth item And a fifth one 예를 들어서 오른쪽 상단에있는 메뉴 버튼을 누르면 관련된 메뉴 리스트가 아래에 나오는 것을 구현하고 싶은데 .js를 사용해서 이것을 구현 해보려고 한다 Navbar An item A second item A third item A fourth item And a fifth one .list-group { width: 100%; display: none.. 2023. 9. 12. [WEB]JS, Funtion 만들기-동적 UI 만들기 JS, Funtion 만들기-동적 UI 만들기 동적 UI 란? 블로그가 있을 때 새로운 글을 올리기 위해서 추가 버튼을 눌러서 글을 작성하고완료버튼을 눌렀을 때 없었던 글 목록이 생기는 기능과 같다고 생각하면 된다 이미 만들어져 있는 것이 아닌 없었는데 동작을 통해서 새로 생기는 것을 동적생성 이라고도 부른다 추가 버튼을 누르면 메세지 박스가 생성되는 버튼을 js를 사용해서 만들기 위해서 다음과 같이 HTML/CSS 디자인을 먼저 해준다 더보기 hello! close 추가 body { margin: 10; } div { box-sizing: border-box; } .alert-box-bg { background-color: tan; padding: 20px; border-radius: 5px; disp.. 2023. 9. 11. WEB-참고 자료 모음 Web 온라인 참고 자료 사이트 https://www.w3schools.com/ W3Schools Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com https://www.w3schools.com/html/default.asp HTML Tutorial W3Schools offers free online tutorials, reference.. 2023. 9. 11. [WEB] Javascript를 이용해서 html 글 변경 및 폰트 사이즈 변경하기 Javascript를 이용해서 html 글 내용 변경하기 Javascript 를 사용하는 곳과 방법은 다양하다 html 조작, 서버와 통신 , 클릭-타이핑 감지 , 비동기 처리 , 자료 다루기 등이 가능하게 해준다 html에서 javascript를 사용하기 위해서 html 을 하나를 만들어 작성해준다 안녕하세요! document.getElementById()를 사용해서 아이디의 이름을 가져오는 셀렉터이고 innerHTML 속성은 HTML안에있는 id 값을 변경 해주는 코드이다 이렇게 자바스크립트를 작성하는 방법을 알고 Java Script를 사용해서 다양한 동작을 만들수 있다 폰트 사이즈 변경하는 방법 font size : 20px 안녕! 폰트의 사이즈를 변경하기 위해서는 다음과 같은 코드로 변경해주어야.. 2023. 9. 11. [WEB]HTML, @keyframes 로 animaiton 만들기 HTML, @keyframes 로 animaiton 만들기 @keyframes 애니메이션 명 { 0% { 애니메이션 시작 } 50% { 애니메이션 시작하고 50% } 100% {애니메이션 끝! } } @keyframes move_title { 0% { transform: translateX(0px); } 30% { transform: translateX(-50px); } 60% { transform: translateX(50px); } 100% { transform: translateX(0px); } } 0~100% 완료 될 때 까지의 동작을 수치 상으로 만들어 주면 된다 .menu-text-title:hover { animation-name: move_title; animation-duration: 2.. 2023. 9. 6. [WEB]HTML, transform사용하기 transform 사용하기 transform:roate(회전정도 값 deg) transform: rotate(180deg); transform: traslateX(이동 값) / traslateY(이동 값) / traslateZ(이동 값) transform: translateX(10px); transform: translateY(10px); transform: translateZ(10px); translate(X,Y,Z)를 하면 값이 동시에 적용되지 않는다 값을 동시에 적용받아 위치를 이동하고 싶은 경우에는 transform: translate3d(X이동값, Y 이동값, Z이동값) 을 사용해서 이동 시켜야한다 transform: translate3d(60px, 10px, 30px); transform: s.. 2023. 9. 6. [HTML]HTML 안에 Video, Audio 적용하는 방법 HTML, Video 적용하는 방법 html 파일을 하나 만들어주고 를 넣어준다 넣어주면 화면에 영상이 뜨는 것을 확인 할 수 있다 video만 작성하면 재생을 할 수가 없는데 재생을 하는 방법은 video 태그안에 속성 값을 넣어주어야한다 video 태그안에 속성 값 controls 재생 바를 보여줌 autoplay 자동으로 재생 - 재생이 안되는 경우 뒤에 muted를 넣어준다 loop 영상을 반복 재생 poster="경로" 시작전 썸네일 이미지를 지정해준다 preload="auto" 페이지가 로드 될 때, 전체 파일을 같이 로드 해줌 preload="metadata" 페이지가 로드 될 때, 파일의 메타데이터만 로드 해줌 preload="none" 페이지가 로드 될 때, 파일을 불러오지 않는다 (미리.. 2023. 9. 6. [HTML]SASS, @use 문법 SASS, @use 문법 CSS를 사용하다 보면 계속 사용하는 파일들을 복사 붙여넣기 하기 귀찮을 때,다른 파일에 있는 내용을 가져오고 싶을 때사용하는 방법 새로운 .scss 파일을 하나 만들어준다 그리고 파일 안에 기본적으로 적용할 파일들을 넣어준다 작성해준 파일을 불러오는 방법은 @use'파일경로' 의 형태로 작성을 해준다 CSS 파일을 확인하면 상단에 'defalut'에 작성한 내용이 들어가 있는 것을 확인 할 수 있다 @minxin. $변수도 가져와서 재활용 할 수 있다 다른 파일 안에 있는 @mixin 을 사용하기 위해서는 @include mixin이름 앞에 파일명을 적어주면된다 2023. 9. 6. [HTML]Sass, @Mixin 사용하기 @Mixin()사용하기 @Mixin은 함수와 같은 기능을 한다 사용 하는 방법은 @expend와 비슷하지만 %임시변수가 아닌 @mixin font_void() { width: 200px; height: 200px; padding: 20px; } .box-green { @include box_size(); } .box-blue { @include box_size(); } .box-red { @include box_size(); } @mixin 함수명(){} 함수를 불러오는 방법은 @include 함수명(); 을 사용해서 불러온다 위와 같이 코드를 작성하면 @expend를 사용하는 것과 같은데 @mixin() 을 사용하면 코드를 가변적으로 만들수 있다 박스의 크기가 동일하게 나와버린다 각각의 사이즈를 다르게.. 2023. 9. 5. [HTML]SASS 변수, Nesting, @Extend 문법사용하기 SASS 변수, Nesting, @Extend 문법사용하기 Nesting 문법 사용하기 .col-bg h1 { font-size: 16px; } .col-bg button { color: aquamarine; } 태그 안의 태그에 접근하기 위해서는 위와 같이 사용했는데 SASS를 사용하면 하나의 큰 태그 안에 여러 태그를 넣어서 사용 하는 방법을 nesting 문법이라고 한다. .col-bg { h1 { font-size: 16px; } button { color: aquamarine; } } @Extend 문법사용하기 .btn-aquamarine{ width: 100px; height: 100px; padding: 20px; color:aquamarine; } .btn-red{ width: 100px;.. 2023. 9. 5. [HTML]SASS 셋팅하기 & 변수 값 지정하는 방법 SASS 셋팅하기 프로그래밍스러운 문법이 존재한다 개발환경 셋팅하기 VScode 설치하기 확장프로그램에서 Live Sass Complier를 설치해준다 ver 5 이상을 설치 해주어야 한다 Sass를 사용하기 위해서는 새로운 파일을 만들어서 뒤에 확장자 명을 .scss로 지정해주면 SASS 파일이 만들어 진다. .sass도 똑같이 SASS 파일이 생성되는데 둘의 차이점은 괄호를 쓰냐 안쓰냐의 차이이다 웹 브라우저는 SCSS 파일을 읽지 못하기 때문에 이 SCSS 파일을 CSS 파일로 변환을 시켜주어야한다 SCSS를 CSS로 보기 위해서 Live Sass Complier 기능을 사용해야한다 하단의 탭에 Watch Sass를 눌러주면 자동으로 두 개의 CSS 파일이 생성된 것을 확인 할 수 있다 .map 파.. 2023. 9. 5. [WEB]Bootstrap 사용 해서 쉽고 빠르게 디자인 하기 Bootstrap 사용 해서 쉽고 빠르게 디자인 하기 Bootstrap은 HTML CSS 개발을 쉽고 빠르게 하기 위해서 사용한다 https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com 사이트가 열리면 상단의 탭중에 Docs 탭을 선택해준다 사용하기 전에 우측 상단에 버전에 맞춰서 번경도 해준다 자신이 사용하고 있는 버전.. 2023. 8. 14. [WEB]Font Awesome 라이브러리 사용하기 Font Awesome 라이브러리 사용하기 https://fontawesome.com/v5/docs/web/setup/host-font-awesome-yourself Host Font Awesome Yourself The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com Font Awesome을 사용하기 위해서 라이브러리를 설치를 해주어야한다 설치를 하거나 CDN 방식/ 직접 다운 하는 방법이 있다 CDN 방식으로 설치하기 CDN방식은 해당 사이트에 있는 CSS를 불러와서 사용하는 것이기 .. 2023. 8. 2. [WEB]HTML 개발자 도구(디버깅) TIP HTML 개발자 도구(디버깅) TIP 자신이 만든 스타일이 이상 할 경우, 디자인이 적용이 되지 않을 경우, 버그를 찾아서 수정해야하는데 CSS 파일에서 일일이 하나씩 찾아서 확인하기 힘들기 때문에 "크롬 개발자 도구"를 사용해서 이 문제를 주로 해결한다. 확인하고 싶은 웹 사이트를 열어서 오른쪽 마우스 클릭을 하면 이렇게 나오는데 사이트 디버깅을 하기 위해서 [ 검사 ] 를 클릭하거나 윈도우: F12 /맥:Alt+커맨드+i 를 누르면 다음 사이트에 대한 개발자 도구창이 활성화된다 여기에서는 어떻게 작성되고 구현되어있는지 눈으로 쉽게 확인이 가능하게 되어있다. 여기서 이제 디버깅을 해야하는데 상단의 버튼을 클릭하고 원하는 요소를 클릭하면 다음 요소에 대한 HTML 정보 확인이 가능하다 그리고 그 아래에 .. 2023. 8. 2. [HTML]파일 안 이미지 불러오기/ CSS 파일 적용하기 이미지 불러오기 프로젝트 폴더 안에 넣어주고 싶은 이미지를 포함 시켜준다. 그리고 HTML 파일안에서 원하는 위치에 이렇게 넣어주면 이미지가 들어가는 것을 확인 할 수 있다 만약에 이미지가 특정 폴더 안에 들어가 있으면 해당 폴더에 접근 할 수 있도록 코드를 수정해주면된다. CSS 파일 적용하기 간단한 style 같은경우 html에서 적용이 가능하지만 모양이나 디자인이 이쁘지 않다 다양한 스타일을 적용하고싶을 것이다. 그럴 때 코드를 깔끔하고 그리고 중복이 되지 않게 디자인 작업을 하기 위해서 CSS 를 사용한다 폴더안에 HMTL과 CSS파일이 생성 되어있으면 HTML과 CSS 파일을 연결해주어야지 CSS 가 적용이 된다. 다음 두개의 파일을 link 태그를 사용해서 HTML의 'head'에 CSS를 연.. 2023. 5. 26. [HTML]좌표값을 받아서 레이아웃 이동하기 : Postion/z-index postion Float 속성은 객체를 왼쪽, 오른쪽으로 정렬해서 레이아웃을 배치한다면 Postion은 객체의 위치 기준을 정해서 원하는 위치로 배치시키는데 사용된다. top, left, bottom, rigth라는 속성을 사용하였을때 객체의 위치를 변경 할 수 있는데 어느 위치에서 라는 기준이 이 명시 되어 있지 않기 때문에 position은 기준점을 정해주는 것이라고 생각하면된다. position의 대표 속성 : static, relative,absolute, fixed 가 있다. position : static; position : relative; position : absolute; position : fixed; position:static : 기본값이 기준이 된다.(기존과 동일한 기준) po.. 2023. 5. 23. [HTML]문단(br,p,pre) 태그 사용하기 br 태그 태그는 줄바꿈을 하는 태그이다. br의 뜻은 line break의 약자이고 닫아주는 태그가 없는 빈 태그이다. 흔히 우리가 쓰는 Enter와 같은 기능이라고 보면된다. 글을 작성하고 마지막에 태그를 넣어주면 Enter와 같이 줄이 바뀌는 것을 확인 할 수 있다. p 태그 단락을 나눌 때 사용한다. HTML에서는 Enter을 입력하더라도 줄바꿈이 되지 않기 때문에 태그 속성을 사용해서 줄의 단락을 나누어 주어야한다. pre 태그 작성한 그대로의 문자열을 나타내기 위해서는 태그를 사용해야한다. 2023. 5. 22. [WEB] Visual Code/ Brackets 설치/실시간 미리보기 활성화 하기 원하는 개발 환경을 찾아서 다운받아서 설치 해주면된다. 대부분 아마 Visual Code를 많이 사용하는것 같다. 중간에 코드를 계속 짜다 보니 뭔가 불편한 점이 많아서 결국에는 Brackets로 갈아 타게됬다. 또 모름.. 다른 언어들을 많이 사용하다 보닌까 Brackets보다 Visual Code를 사용하게 될 지도.. Brackets https://brackets.io/ A modern, open source code editor that understands web design Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amou.. 2023. 5. 19. [HTML] <html>,<head>,<body> 태그 HTML은 하이퍼 텍스트 마크업 언어(HyperTextMarkup Language)라는 의미를 가지고 있다. HTMl 태그는 이러한 웹페이지를 구성 하기 위한 요소를 말한다. 사용하는 방법은 일반적으로 형식으로 작성되고 사용된다. 웹페이지(.html)를 만들려면 가장 기본적인 형식으로 다음과 같은 형식을 필수로 작성한다. 위에 코드역시 이 코드가 HTML 형식으로 작성 되어 있다는 것을 알려주는 거라고 생각하면된다 html형식 안에서 확인 할 수 있는 태그는 크게 ,,, 로 구성 되어있다. 태그의 종류 기본태그 'html', 'head', 'body' 태그 HTML은 마크업언어라서 자료의 구조를 쉽게 파악하기 위해서 태그를 사용해주는 것이 좋다. 'HTML' 태그 : 태그는 문서의 시작과 종료를 나타내는.. 2023. 5. 14. [WEB]리액트(React) 설치하고 세팅하기 리액트(React) 설치하고 세팅하기 일단 리액트를 설치 하기전에 아래 사이트에 들어가서 node.js 를 검색 하고 다운 받고 설치를 해준다. https://nodejs.org/ko/download 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 이미 설치 되어있으면 최신 버전으로 재설치하는 것을 추천 (에러갈 날 가능성이 높다고 한다) 그리고 소스 코드 편집기를 설치 해주기 위해서 Visual Studio Code 에디터를 다운 받아준다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined .. 2023. 3. 30. [WEB]Web-app(application)이란 Web-app(application)이란 일반적으로 웹서비스는 기본적으로 2대 이상의 컴퓨터가 인터넷으로 연결되어야 가능한 서비스이다. 일반적인 소프트웨어를 우리는 애플리케이션이라고 부르는데 애플리케이션(application)을 이용하기 위해서는 사용자가 작업에 필요한 소프트웨어를 설치(다운로드)해서 원하는 작업을 해야한다. 하지만 웹앱(Web-app)의 경우에는 사용자가 작업을 하는데 필요했던 소프트웨어 설치 기능(다운로드)을 웹이 대신 해주는 것이다. 대표적인 WebApp으로는 네이버, 페이스북(SNS), 쿠팡 처럼 웹브라우저를 통해서 서비스를 제공하는 형태를 말한다. Web-app 의 장점 1. 앱처럼 만들어져 있기 때문에 모바일 앱으로 발행이 쉽다 2. 앱의 전환이 빠르기 때문에 사용자들에게 긍정.. 2023. 3. 30. 이전 1 2 다음 728x90 반응형
