본문 바로가기

분류 전체보기235

css 버튼 (토글) 토글버튼은 모달에 닫기가 따로 있을경우 열기 , 닫기 링크로 다른페이지 이동, 포커스이동, 한페이지에서 위아래 이동 검색창 클릭시 뜨는 검색창에 X 는 버튼이다. 열고닫고 한번에 할때는 button 2022. 10. 13.
JavaScrip 04_조건문- switch / 삼항연산자 // prompt 로 숫자를 입력받아 짝홀수를 판단하고 숫자형식이 아닐경우 alert을 띄우기(switch 조건문 사용) 0이면 홀수 / 1이면 짝수 var num = prompt('숫자를 입력하세요'); switch (num % 2) { case 0: console.log('짝수'); break; case 1: console.log('홀수'); break; default: alert('숫자를 입력하세요'); } // 하나의 케이스를 실행후 break; 로 종료하고 다음 케이스로 넘어가라. // 스위치 조건문은 값이 딱 떨어질때 사용할수있다 (이상이하 사용불가) 값이 정해져있을경우 사용 성별. 혈액형 등등 default 에 break가 없이 순서가 위로 올라간다면 짝수를 넣어야하지만 순서상 default.. 2022. 10. 13.
제이쿼리 자동완성기능 설치하기 제이쿼리 작성 자동완성기능 1. node.js 파일을 설치해야 자동완성 패키지를 사용가능 ( 용어 : 설치는 패치지/ 연결은 라이브러리) https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다운로드 후 설치! 2.TERMINAL 셋팅 Visual Studio code > TERMINAL 에서 node -v 입력후 v16.18.0 버전뜨는것확인 npm init -y 작성시 에러 뜨면 한글 폴더이기 때문 이럴땐 npm init 로 입력 jquery 넣고 엔터엔터엔터 끗 3. 확인 폴더 안 패키지 폴더 설치 확인 이곳에 자동완성 패키지가 저장된다 5. nod.. 2022. 10. 13.
제이쿼리 기초,연결, ready 함수 jQuery 파일명 뜻 min (minify 축소하다 의 줄임) 코드압축을 얘기함 코드가 몇천줄이기 때문에 압축된 파일을 사용한다. 파일명 프로그램 버전의 뜻 jquery-3.6.1.min 3 - 메이저 업데이트 6 - 마이너 업데이트 1 - 버그fix 2버전에서 쓰이던 메서드가 3버전에 없음. 사용불가 1버전만 사용해야하는경우 솔루션일 경우 대표적인 경우 카페24 10~15년전 제이쿼리1로 이미 홈페이지가 많이 만들어진 상황으로 업데이트된 버전을 사용할수 없다. 제이쿼리 연결 확인하기 자바스크립트 시트에 코드작성 후 크롬으로 콘솔 확인 제이쿼리 함수는 $ console.log($); 자동완성 기능 설치후 확인 .찍어보면 확인가능 제대로 적용완! 근데 html header 작성후 확인했더니 헤더가 찍히지.. 2022. 10. 13.
비주얼스튜디오 코드 셋팅하기 [환경설정] File>Preferences>Settings(F1 > settings검색) Tab Size: 2 - 탭키 누르면 두칸 들여쓰기, 에디터마다 기본 탭사이즈가 다르므로 두칸으로 통일시키기 위해 Word Wrap: on - 텍스트가 화면보다 길경우 아래로 내려줌 Bracket Pair Colorization: 허용 - js에서 중괄호 컬러링 [extension] live server새로고침없이 저장후 바로확인 beautify: html, css formatter, beautify selection 단축키지정(alt + b), join lines 단축키지정(alt + j) prettier 코드 formatter - default formatter > prettier로 변경 - settings > .. 2022. 10. 13.
html 상단 용어정리 " data-og-url="https://guide-page.dothome.co.kr/404.html" data-og-image="https://scrap.kakaocdn.net/dn/Vn0Po/hyP74j9Cmm/zpn4RWRgTbTjskDxwrWMj0/img.png?width=700&height=700&face=0_0_700_700">" target="_blank" data-source-url="http://hyojin7794.dothome.co.kr/subway/images/subway_og.png">"> 닷홈 | 페이지를 표시할 수 없습니다. 도메인 25% 할인쿠폰 제공 최대 할인가! 13,500원 닷홈 도메인 연결시 무제한 웹호스팅 무료제공 guide-page.dothome.co.kr 2022. 10. 12.
퍼블리싱_기본공식 필수숙지! - width는 밖에서 높이는 안에서 (li는 밖에서 width , 높이는 a 에서) - 부모를 이동, 안에서 좌우간격 (ul 부모를 잡고 li 는 안에서 좌우간격 및 내용채우기) - 메인섹션 main_사용, 안에선 사용하지않음 - 메인섹션은 100%로 두고 .inner에서 가로잡고 margin:0 auto; (inner는 가운데 크기잡고 정렬하기 위해서) - 특별한 경우가 아니면 높이지정 금지(알아서 내용만큼 잘늘어나므로) (헤더 제외 높이 잡기 금지) - 안쪽에 높이 있을경우 밖에선 빼줌 - 토글은 이동은 - 이동은 : 다른페이지로 이동, 한페이지에서 위아래이동, 포커스 이동 모두 - 좌우 레이아웃은 float, sns아이콘 좌우는 인라인블럭(내용이 버튼밖에 없을경우) - 페이지네이션등 가변요소일 경.. 2022. 10. 12.
[퍼블리싱 코딩 컨벤션] - 형태 의미 순서 상태 (네이버 컨벤션기초) [퍼블리싱 코딩 컨벤션] - 폴더,파일은 스네이크 문법 (언더바 _ 사용) ex. /product_images sns_login.js, main_products.html - id, 클래스는 스네이크 ex. #header, #header_wrap - html기본구조 id를 쓰는이유 : 스킵네비게이션 접근성 때문 (tap키로 id 영역으로 enter 사용시 바로 넘어간다.) [공통클래스 코딩 컨벤션] 클래스 명명방식 형태 의미 순서 상태, _(언더바)로 구분, 숫자는 두자리 언더바없이 연결 형태가 중요한 경우 버튼(btn_), 테이블(tbl_), 탭메뉴(tab_), 게시판(board_) 순서가 중요한 경우 위치는 뒤에 .header_top, .header_mid, .header_bottom, .service.. 2022. 10. 12.
JavaScrip 04_조건문 if 1. if 조건문 if - 가장 일반적으로 사용되는 조건문 - 조건은 불린 표현식을 이용함 예제 ) 만 나이를 입력받아 19미만이면 미성년자, 아니면 성인입니다를 출력하시오 관련된 조건은 if else로 이어준다. 예제 입력받은 정수가 짝수인지 판단하시오 var int = prompt('정수를 입력하세요'); if (int % 2) { console.log('짝수입니다.'); } else { console.log('홀수입니다.'); } 나이를 입력 받아 10대(10살미만도 포함), 20대 , 30대 이상으로 출력하시오 var age = prompt('나이를 입력하시오'); if (age >= 30) { console.log('30대이상'); } else if (age >= 20 && age < 30) {.. 2022. 10. 12.
JavaScrip 03_변수와 자료형 변환2 변수란 ? 데이터를 보관하는 용도이다. (값 입력시 렘에 생성 ) _ 언더바를 쓰는이유? 유니크한 이름이 아닌 이미 사용하는 키워드를 사용할때 활용 기존에 이미 있는 키워드를 변수명으로 사용할 경우 _ 붙여줌 var_scrollTop = 100; console.log(var_scrollTop); 식별자 // 제이쿼리로 요소선택시 $ 붙이는 경우 있음 var $el = $('#wrap'); console.log($el); 위의 코드를 입력했을때 오브젝트가 형성됨을 알수 있다. 결론 식별자 구별시 $ 붙이기 비추천 var wrap = $('#wrap'); console.log(wrap); 아이디 선택자로도 선택이 가능하기 때문에 번거롭게 $사용 비추 변수명을 여러개 사용할때 이런식으로 한줄 사용하면 선언한건.. 2022. 10. 12.
JavaScrip 03_변수와 자료형 변환 (제이쿼리적용) 1. 파일생성 js 파일 생성 comme은 백엔드에서 쓰이므로 ui 붙여줌 2.html 에 스크립트 지정을해줌 브라우저에서 화면을 보일때, 브라우저가 파일을 다운로드 받아 캐시파일을 읽음 근데 사용자가 재접속시 캐시가 남아있으면? 브라우저가 다운받지않고 기존 파일을 보여줌 캐시에 저장된걸 보여주지않고 최신으로 파일로 다운받아 보여주기 위해서 '타임스탬프' 코드 삽입 타임스탬프 ?v= 제이쿼리모든 파일에 다 타음스탬프를 붙여야할까? jquery-3.6.1.min.js 제이쿼리 매서드 라이브러리파일 이파일은 제이쿼리를 사용하기 위한 매서드함수만 들어가있으므로 ui_common.js 읽어들이기위한 파일이다. 수정하지않는 기본파일이기 때문에 타임 스탬프를 안붙여도됨 때문에 2022. 10. 11.
JavaScript 02_기본용어와 자료형 (기본자료형 데이터타입) 1. 기본용어 1) 표현식과 문장 - 표현식 • 값을 만들어내는 것 • 예 : 546, 20 + 34 *2 , “TestOne” - 문장 • 하나 이상의 표현식이 모인 것 • 문장 끝에는 세미콜론(;)을 적어서 문장의 끝을 알림 • 예 : 546; , 20 + 34 *2; , var test=“Test”+”One”; , alert(“Hello JavaScript !!”); 일반적으로 카멜 표개발자들 간의 규칙 → 알파벳을 사용 → 생성자 함수의 이름은 항상 대문자로 시작 → 변수, 속성, 함수, 메서드의 이름은 항상 소문자로 시작 (카멜표기법) → 여러 단어로 이뤄진 식별자의 각 단어의 첫 글자를 대문자로 표시기법 userName 변수 괄호없음 = 대입연산자 - 오른쪽 데이터를 변수에 대입하는 연산자 대.. 2022. 10. 11.

티스토리툴바