odada

GitHub github의 블로그에 나의 https://oddodd.io/ 도메인을 연결하려고 한다. 도메인 연결 전 가비아 등 도메인 구매 업체에서 DNS 설정 변경 - DNS 관리 https://dns.gabia.com/ [홈 > DNS 관리 > DNS 설정 > 레코드 수정 > 레코드 추가] CNAME의 값/위치를 입력할 때는 마직막에 .(점)을 입력한다. 타입 호스트 값/위 TTL CNAME @ 깃헙아이디.github.io. 600 CNAME www 깃헙아이디.github.io. 600 A @ 185.199.108.153 1800 A @ 185.199.109.153 1800 A @ 185.199.110.153 1800 A @ 185.199.111.153 1800 - 도메인 연결 아이디.github...

1. 함수 선언하기 함수 선언문과 표현식의 차이점 함수 선언문은 호이스팅이 일어나지만, 함수 표현식은 호이스팅이 일어나지 않는다. // 함수 선언문 (Declaration) function helloA() {} // 함수 표현식 (Expression) const helloB = function () {} helloA() // 함수 호출 helloB() // 함수 호출 2. 호이스팅이란? 함수 선언문이 코드의 최상단으로 끌어올려지는 것을 말한다. 함수 선언문은 선언하기 전에 호출해도 정상적으로 실행된다. hello1() function hello1() { console.log('hello1') // hello1 } 하지만, 함수 표현식은 호이스팅이 일어나지 않기 때문에, 함수 표현식을 선언하..

1. 구조 분해 할당 (Destructuring assignment) 객체나 배열을 변수로 '분해'할 수 있게 하는 문법 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 하는 표현식 배열의 구조 분해 const arr = [1, 2, 3] // const a = arr[0] // const b = arr[1] // const c = arr[2] const [a, b, c] = arr // 구조 분해 할당 // 배열 데이터를 만든 후 arr 변수에 할당 console.log(a, b, c) // 1 2 3 - 각각의 변수가 미리 할당되어 있을 경우 let a = 0 let b = 0 let c = 0 const arr = [1, 2, 3] // 초기화 후 재할당 가능 ;[a, b, c]..

home : https://splidejs.com/ option : https://splidejs.com/guides/options/#type 1. Getting Started CDN - html - scss .slide-intro { .splide { max-width: 800px; margin: 0 auto; position: relative; } .splide__track { overflow: visible; } .splide__slide img { width: 100%; height: auto; } } - js var splide = new Splide( '.splide', { type : 'slide', // perPage: 2, padding: '5rem', gap: '10px', start:..

1. 산술(Arithmetic) 연산자 +, -, *, /, % // 덧셈 연산자 console.log(1 + 2) // 3 // 뺄셈 연산자 console.log(5 - 7) // -2 // 곱셈 연산자 console.log(3 * 4) // 12 // 나눗셈 연산자 console.log(10 / 2) // 5 // 나머지 연산자 console.log(7 % 5) // 2 function isEven(num) { return num % 2 === 0 } console.log(isEvent(3)) // false console.log(isEvent(4)) // true 2. 할당(Assignment) 연산자 a = b const a = 1 console.log(a) // 1 let aa = 1 aa +=..

html, css : 모양 기반 javascript : 데이터 기반 0. ECMAScript ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 위키백과 : https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8 1. String (문자) '가나다라마바사' string은 문자열을 나타내는 데이터 타입 const string1 = "Hello" // 큰따옴표 const string2 = 'odada!' // 작은따옴표 const string3 = `Hello World! ${st..

체크리스트 웹표준 -- -- 해당서비스의 Doctype을 따르고 있는가? html5 Doctype (필수) HTML validator 통과했는가? (필수) CSS validator 통과했는가? (필수) Cross Browsing 되는가? Web(Window) FF/Chrome/Safari/Opera (최신) Web(Mac) FF/Chrome/Safari/Opera (최신) Mobile(Android) Android 14 (현재 버전) Android 13 Android 12 Android 11 Android 10 (2021년 기준 점유율 1위) Mobile(iOS) iOS 15(현재 버전) iOS 14 (2021년 기준 점유율 1위) 웹접근성 -- (필수) title 태그에 서브페이지 제목을 제공하였는가?..

회원가입, 게시판, 주문, 장바구니 등을 구현하려면 개발을 해야 하지만 사이트를 만들 때마다 백엔드 개발자의 도움을 받을 수 없기 때문에 빌드를 사용해 사이트를 만들 수 있다. 그누보드5 호스팅 준비 로컬(내 컴퓨터)가 아닌 웹서버에 설치해야 하기 때문에 호스팅을 구매해 설치한다. cafe24 https://hosting.cafe24.com/?controller=new_product_page&page=autobahn 닷홈 https://www.dothome.co.kr/web/premium/index.php (도메인 구매시 무료) https://www.dothome.co.kr/web/free/index.php (무료) 설치 1. 수동설치 그누보드 다운로드 https://sir.kr/g5_pds 그누보드 설..

DOM Dom (Document Object Modal) 이란 HTML 문서를 객체로 표현한 것으로 JS에서 HTML을 제어할 수 있게 해줍니다. Node vs Element 노트(Node) : HTML 요소, 텍스트, 주석 등 모든 것을 의미 요소(Element) : HTML 요소를 의미 DOM node 란? // 지정된 id값을 가진 요소를 반환 document.getElementById("someid"); // 지정된 클래스 이름을 가진 모든 하위 요소의 개체를 반환 document.getElementsByClassName("someclass"); // 지정된 태그 이름을 가진 요소의 HTML 모음을 반환 document.getElementsByTagName("LI"); // 지정된 class와 일..

https://brunch.co.kr/@chulhochoiucj0/8 모바일 UI·UX 디자인 시 고려해야 할 가이드라인 1 애플 iOS HIG와 Material design 가이드를 중심으로 | 모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기 device의 특성과 사용 맥락의 차이에서 기인합니다. 우선 모 brunch.co.kr https://m2.material.io/design/guidelines-overview Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams b..