본문 바로가기

분류 전체보기192

flex layout 📖 flex layout한 방향 레이아웃 시스템(1차원)  1. 컨테이너에 Display: flex; 를 설정하는 것으로 시작속성명속성값설명displayinline block inline-block flex * display는 상위 개념 / flex-direction은 하위 개념   ex) display: flex; 로 전체 구성을 flex 선언했지만, 일부는 세로 정렬(flex-direction: column;)하고 싶을 때   2. flex 컨데이너에 적용하는 속성; 전체 아이템에 적용됨속성명속성명 한꺼번에 지정속성값설명flex-direction(배치 방향)flex-flow(방향 · 줄넘김동시 선언)rowrow-reversecolumncolumn-reverse flex-wrap(줄넘김 처리)no-w.. 2024. 5. 21.
jQuery 선택자 📖 jQuery 선택자HTML 요소를 선택하여 가져옴; 선택한 요소의 디자인 속성을 '동적'으로 변경함jQuery 선택자 형식 : $("선택자") 1. 기본 선택자가장 기본적으로 요소(태그)를 선택하는 방법기본 선택자 종류형식설명태그 선택자$("p")p 요소를 선택id 선택자$("#gnb")id = gnb 요소를 선택class 선택자$(".logo")class = logo인 요소를 선택자식 선택자$("#gnb > ul > li")#gnb의 자식 요소 ul의 자식 요소 li를 선택하위 선택자$("#gnb ul")#gnb의 하위에 있는 모든 ul 요소를 선택인접 선택자$("#visual + #content")#visual 다음에 오는 #content 요소를 선택(= 바로 다음에 오는 형제 선택자. #vis.. 2024. 5. 20.
jQuery 연결 방법 📖 jQuery를 사용하기 위해서는 jQuery 라이브러리를 웹페이지에 연결해서 사용해야 함 jQuery 라이브러리 연결 방식(i) 파일을 직접 다운받아 연결(ii) CDN(Content Delivery Network) 방식  1. Download 방식 ① jQuery 라이브러리 다운로드https://jquery.com/download 에 접속 → Download the uncompressed development version of jQuery 3.7.1 다운jQuery 폴더에 저장 'jquery-3.7.1.js'② HTML 문서에서 jQuery 라이브러리 연결html 문서를 jQuery 라이브러리와 같은 경로에 저장에 입력라이브러리가 잘 연결되었는지 확인하기 위해 '$(document).ready.. 2024. 5. 20.
사용자 정의 객체 📖 객체란?변수) 데이터 값을 하나 밖에 저장하지 못함객체) 데이터 값을 필요한 대로 만들어 사용할 수 있음객체의 데이터) '이름: 값'의 쌍으로 이루어져 있음. 이것을 속성(Properties)이라고 함 변수에 {이름: 값, 이름: 값, ...}의 형태로 저장이 되면 변수는 객체가 됨var 변수 = {name: '개감동', age: 6, nationality: '대한민국', ...};객체의 속성(Properties) : 프로퍼티(객체의 속성값을 저장함) & 메서드(객체의 함수)로 나뉨var 변수 = {    name: '개감동',    //프로퍼티    age: 6,    //프로퍼티    printOut: function() {    //메서드    },    ...};객체 : 사용자 정의 객체(사.. 2024. 5. 20.
내장 함수 1. 내장 함수자바스크립트에 기본적으로 내장되어 있는 함수들  1) 인코딩 ・ 디코딩 함수'http://icoxpublish.com/search?query=자바스크립트'와 같이 URL 주소에 쿼리 정보를 전송하여 데이터를 처리해야 하는 프로그램; 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있음       → 문자를 부호화시킴(by 인코딩 함수) & 부호화된 문자를 다시 원래 문자로 되돌림(by 디코딩 함수)함수명설명encodeURIComponent( )영문, 숫자, ( ) - _ . ~ * ! ' 을 제외한 문자를 인코딩함decodeURIComponent( )encodeURIComponent( )의 디코딩 함수  2) 숫자, 유/무한 값 판별 함수함수명설명isNaN( )- 숫자인지 아.. 2024. 5. 16.
재귀 함수 1. 재귀 함수함수 안에서 자신의 함수를 다시 호출하는 함수 function factorial(n){ if(n === 0){ console.log('호출 끝'); }else{ console.log('호출' + n); factorial(n-1); }}factorial(10);     출처 : ⎡반응형 웹 실전 프로젝트 가이드 (김광수, 조혜경)⎦ 2024. 5. 16.

티스토리툴바