본문 바로가기

분류 전체보기402

부트스트랩 출처 : 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.

티스토리툴바