본문 바로가기

전체 글402

input에 입력된 값을 다른 곳에 붙여넣기 상황 웹 사용자가 값을 입력할 수 있는 input이 있고, 이곳에 타이핑해서 넣은 값을, button을 클릭하면 onclick 이벤트가 발생하여 특정 id를 가진 화면의 구역으로 텍스트 형태로 붙여넣고 싶은 상황 문제해결 순서 input 태그에 ID 값을 부여해준다. 인풋에 담긴 내용을 옮길(출력시킬) 태그에 아이디를 부여해준다. 이나 등 ① 자바스크립트에서 input 값을 특정 변수에 value로 담는 함수를 지정하고 ② innerHTML을 통해 변수값을 특정 태그 아이디에 대체시킨다. function 온클릭함수명() { // 버튼에 온클릭 이벤트로 발생시킬 함수명 // '값을담을변수명'에 인풋값을 불러온다. let 값을담을변수명 = document.getElementById('인풋아이디').value.. Programing/JavaScript 2024. 2. 28.
input 태그 값 가져와서 콘솔에 출력해보기 // input 값 가져오기 function 설정할함수명() { let 값을담을함수명 = document.getElementById('input의아이디').value; console.log(값을담을함수명); } 위와 같이 자바스크립트를 작성한다. 그리고 아래와 같이 버튼 등에 onclick 이벤트를 넣어준다. Programing/JavaScript 2024. 2. 28.
여러 개의 div 한 열로 정렬하기 출처 : https://nine01223.tistory.com/186 (html/css) div 2개 나란히 정렬하는 방법 div를 나란히 정렬하는 것은 사실 굉장히 복잡한 css 기술을 요구한다. 하지만 inline-block을 사용하면 굉장히 심플하게 원하는 효과를 낼 수 있다! 비록 100% 완벽한 방법은 아니지만(좀 더 복잡한 코 nine01223.tistory.com Programing/HTML 2024. 2. 28.
컬러 헥스코드 추출 사이트 https://www.color-hex.com/ Color Hex Color Codes Color Hex Color Codes Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. Color-hex.com also generates a simple css code for the selecte www.color-hex.com Programing 2024. 2. 28.
클립보드에 복사하기 또는 js파일에 아래의 코드를 변수로 지정해준다. function copyToClipBoard() { window.navigator.clipboard.writeText("복사될 텍스트").then(() => { alert("복사되었습니다."); }); } 위의 copyToClipBoard()라는 함수를 실행하기 위한 이벤트를 HTML 버튼 등에 속성으로 담는다. 복사하기 Programing/JavaScript 2024. 2. 28.
부트스트랩 출처 : https://www.youtube.com/watch?v=5ETqQWvwXV4 부트스트랩이란? 가장 많이 사용하는 웹 디자인 프레임워크 중 하나. Responsive Web (반응형 웹)을 만들기도 편하다. 화면 구성의 기본 (12 Grid) 우리가 보는 웹의 화면은 12Grid system으로 row(열)를 12개로 분할한다. 위와 같은 코드에서는 큰 div로 작은 div 3개 구획을 가져가는 모습인데, col-md-4는 md(미디엄) 중간 사이즈로 12 그리드 중 4개씩 가져가라는 의미로 한개의 열에 3개의 구획이 들어가는 모습임. md의 의미는 웹이 생각하는 md 중간사이즈일 때 12 그리드 중 4개의 그리드 만큼 차지하라는 의미로, 중간사이즈 밑으로 웹페이지가 축소되면 (모바일 기기 등에.. Programing/CSS 2024. 2. 28.
Form에 입력된 값을 가져오기 위와 같은 Form이 4개가 있고 이 Form에 들어간 내용을 불러와야 한다. 참고로 저 한 개의 폼은 아래와 같이 작성되어 있다. 앨범 이미지 첫번째로 해야 할 일, input 태그에 id를 부여한다. (위에선 image) 사용자가 폼에 입력한 값을 불러오려면 .val()이라는 함수를 사용한다. function makeCard() { let image = $('#image').val(); } 이렇게 불러온 값을 새로운 앨범 카드로 만들어야 한다. 카드를 만드는 HTML 태그를 전체 복사한다. 그 다음 별도의 함수를 만들어 `` 백틱 안에 넣는다. let temp_html = ` ${title} ${content} ${date} ` 위의 코드는 temp_html이라는 함수를 만들고, 그 함수를 실행하면 .. Programing/JavaScript 2024. 2. 26.
JQuery와 fetch JQuery는 JavaScript 라이브러리이다. 사용하기 전 Import를 해야 한다. JQuery import 하기 CDN 삽입 내에 삽입한다. 일반적으로 아래. ID 지목하기 기본형 $('#title') 제이쿼리에서는 $표시로 특정 ID를 지목한다. function hey() { $('#title').text('쥬라기월드') } 위의 코드를 실행하면 title이라는 ID가 부여된 태그가 쥬라기월드라는 텍스트로 바뀌게 된다. fetch fetch는 인터넷을 통해 데이터를 요청하고 받아오는 과정을 의미한다. 예를 들어 만들어진 API를 통해 데이터를 가져오는 과정. 출처 : 스파르타코딩클럽 Programing/JavaScript 2024. 2. 26.
JS로 함수를 만들고 실행되게 하는 방법 기본형 funtion 함수명() {함수의 내용(명령어)} function hey() { alert('안녕하세요') } 위는 hey() 라는 함수명을 임의로 지정해서 alert('안녕하세요')라는 알림 메시지가 뜨도록 함수를 지정한 것이다. 어떤 action이 발생했을 때 함수 hey()가 작동되도록 아래와 같이 태그의 속성값으로 지정하면 된다. 제출하기 위와 같이 제출하기라는 버튼에 onclick시 hey()가 작동되도록 설정할 수 있다. 그런데 JavaScript의 명령어가 길고 어렵다 보니 CSS의 부트스트랩과 같이 미리 만들어 놓은 라이브러리가 존재한다. 이를 잘 활용하면 빠르고 효율적으로 코드를 작성할 수 있다. 이것을 JQuery라 한다. 출처 : 스파르타코딩클럽 Programing/JavaScript 2024. 2. 26.
반복문 반복문은 일반적으로 리스트라는 꾸러미와 함께 같이 쓰인다. 위와 같은 형태로 ages의 리스트에 있는 자료를 일일이 출력하고 싶다 할 때, 이 숫자가 많으면 아래의 콘솔 코드를 계속 작성하기도 힘들다. 따라서 이와 같이 같은 명령을 반복할 때 반복문을 사용한다. (foreach) 'ages에서 하나씩 돌면서 안의 명령어를 실행한다' let ages = [15, 30, 28, 7, 40, 13]; ages.forEach(a => { if (a < 20) { console.log('청소년입니다') } else { console.log('성인입니다') } }); 위 함수는 반복문과 조건문을 동시에 사용한 것으로 조건문을 반복문이 품고 있는 형태이다. 출처 : 스파르타코딩클럽 Programing/JavaScript 2024. 2. 26.

티스토리툴바