본문 바로가기

전체 글137

[코딩 공부_93] JS 라이브러리, JQuery import 및 적용방법 JQuery를 하기 전!! 알아야 할 부분이 있다 JQuery는 언어가 아니고!! JS를 편하게 쓸 수 있는 라이브러리이다!! 절대절대 착각하면 안된다!! JQuery는 호로록 사라져가고 있는 추세임을 꼭 알고 가야한다 !! (이녀석을 의지하고 있으면 안된다는 것!) ** jQuery를 사용하려면 import 먼저 해야겠죠? import 방식은 2가지! 😁 #1 - CDN 사용하기(추천) ① 'jqury CDN'을 검색해서 들어간다. (아래의 링크를 타고 들어가도 무관 👌) jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ens.. 2021. 6. 11.
[코딩 공부_92] 마우스 커서 이미지 변경하기 1. Custom Cursors - 커서 모양을 이미지로 바꿀 수 있다 * 모바일용 브라우저 / 오페라 / 익스플로어 버전 6미만 적용이 되지 않음! 2. 마우스 커서 이미지 변경 * 첫번째 이미지를 가져오지 못하면, 두번째 이미지를 가져오게 되고 그 또한 가져오지 못한다면 auto 즉 기본값이 적용된다. 브라우저 호환성을 위해서 url을 먼저 나열한 후, 키워드 값을 입력하도록 한다. * 이미지 크기는 128px 까지 허용되지만 32px가 가장 적당하다 ** 반투명한 이미지는 윈도우 xp이전 버전에서 적용되지 않으며, 익스플로러에서는 gif나 jpg, png 등은 적용되지 않으며 cur와 ani파일만 적용된다. 반면, 파이어폭스에서는 ani파일이 적용되지 않는다 *** cur 파일은 포토샵에서 사용하지.. 2021. 6. 9.
[코딩 공부_91] accordian 실습하기(pure js) close all About Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nostrum magni ex aspernatur. Modi mollitia in aliquid earum, placeat, odio voluptas perspiciatis alias nihil commodi quos praesentium sint officiis! Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nostrum magni ex aspernatur. Modi mollitia in aliquid earum, placeat, odio voluptas perspiciati.. 2021. 6. 8.
[코딩 공부_90] DOM 1. BOM : 웹 서비스 개발은 브라우저와 밀접한 관련이 있다. 모든 서비스는 웹 브라우저를 바탕으로 실행된다. 이 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM: Browser Object Model)이라 부른다. BOM을 이용해서 Browser와 관련된 기능들을 구성한다. DOM은 BOM 중 하나이다. ** BOM의 차상위 객체는 window라는 객체이다. DOM은 이 window 객체의 하위 객체이기도 하다. 2. DOM : Document Object Model의 약자로, 문서 객체 모델이다. - 더 쉽게 풀어 이야기하자면, 넓은 의미론웹브라우저가 HTML 페이지를 인식하는 방식을 의미하고, 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있다. - D.. 2021. 6. 7.
[코딩 공부_89] for in 반복문, 배열(Array) 1. for in 반복문 : 객체 안의 property를 제어할때 사용한다, 소스 코드를 입력한 배열 혹은 객체의 속성에 맞게 반복하여 실행하는 역할을 한다 2. 배열(array): 순서가 있는 여러 값(data)의 묶음 - 순서가 있는 데이터들 or 순서가 없는 데이터들도 가능 - 배열은 [] 대괄호로 나타낸다 (객체는 {}) ** 배열도 object다 3. length : 문자열의 길이를 반환하는 속성이다 - 예를 들어 'abcd'.length 인 경우 4(문자열의 길이)를 반환하게 된다. 4. forEach 반복문 : 배열의 요소들을 반복하여 작업을 수행할 수 있다 (array에서만 사용가능하다.) - forEach구문의 인자로 callback 함수를 등혹할 수 있고, 배열의 각 요소들이 반복될 때.. 2021. 6. 4.
[코딩 공부_88] 객체(object), 프로퍼티(property), 메소드(method) 1. 객체(Object) : 여러값을 한번에 저장한 형태를 뜻한다(JS는 모든 것이 다 객체로 이루어져있다) 2. 객체의 구성 3. 객체의 표현 - key에 따옴표 생략 가능하다. - key에 _, $ 문자로 시작하기 - value에는 모든 자료형 추가 기능 - 객체 안에 객체도 삽입가능 4. 객체에 접근하기 - 점 표기법 > .으로 접근 - 대괄호 표기법 - 객체 안에 객체에 접근 2021. 6. 3.
[코딩 공부_87] for문, switch문 * 증가/감소 연산자 : 숫자 1을 증가시키거나 감소시킨다 1) 증가연산자 2) 감소 연산자 1. for문 : 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문이다.(쉼표 연산자를 사용하면 동시 사용가능) - 초기화 부분은 처음 한번만 실행된다 - 조건 부분은 boolean으로 판단, false가 될때까지 실행된다 - 조건 부분이 한번 실행되고 추가 동작 부분이 한번 실행된다 * if문은 한번만 실행되지만 for문은 조건만큼 계속 반복된다 - i = 0; (i를 0부터 시작한다) - i 2021. 6. 3.
[코딩 공부_86] scope, const, 연산자, if문(조건문) 1. scope :변수에 접근할 수 있는 범위 - 지연 변수는 블록문 내에서만 유효하다 ** scope는 global(전역)과 local(지역) 2가지의 타입이 있다. - global scope : 전역에 선언되어 어느곳이든 해당 변수에 접근할 수 있다 - local scope : 함수 내부에만 영향을 주며, global scope처럼 전역에 접근 할 수 없다! 2. const : 변하지 않는 값 1) var, let, const의 차이점 - var는 함수 레벨 스코프이고, let, const는 블럭 레벨 스코프이다. - var로 선언한 변수는 선언 전에 사용해도 에러가 나지 않지만, let, const는 에러가 발생한다. - var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나.. 2021. 6. 1.
[코딩 공부_85] Return에 대하여 Return에 대해 배웠다 여전히 긴가민가한 그녀석 ..이다 하하 1. Return : 반환하다, 값을 돌려준다 - 함수가 실행된 자리에서 값을 돌려준다 - 함수 내에서 어떤 값을 최종적으로 돌려주는 것 ** return 뒤에 오는 함수는 즉시 종료 된다 (dead code) - function 함수이름(파라미터) {return 반환할 값;}; 이 기본이다. (위 내용 해석 : firstNum + secondNum = 300, return하여 300 * 2를 해줌으로써, 600의 값이 나온다. (헷갈리는 것?) return과 console.log - console.log : 값을 출력해 주는 것 - return : 함수 내에서 어떤 값을 최종적으로 돌려주는 것 2021. 5. 30.
[코딩 공부_84] function과 parameter function과 parameter에 대해 배웠다 참 복잡미묘한 친구들인 거 같다 어려운 거 같기도 하고 아닌 거 같기도 하고! 잘모르겠당,, 1. function(함수) : 명령들의 모임, 함수를 선언하고 실행할 수 있다 - 반복을 줄여준다 - 재사용 가능하다 - 일관성 유지 - 버그 발생률이 떨어진다 - 추상화다 2. Parameter(파라미터) : 값을 전달한다 쉽게 설명하자면, 믹서기(function)는 과일(parameter)을 입력받아 주스를 출력하는 함수와 같다. 1. 과일 값 계산하기 - 알파카는 퇴근길에 마트에 들러 오랜만에 장을 봤습니다. 아래와 같이 감자, 복숭아, 사과를 구입하였습니다 - 감자 5개, 복숭아 10개, 사과 2개 - 감자 : 2000원, 복숭아 3700원, 사과 : 5.. 2021. 5. 27.
[코딩 공부_83] JS 첫걸음, 기초 공부 드디어 JS 문을 열어버렸다!! 😨 근데 아직 처음이라 그런가!! 아직 어려운 느낌은 안든다..! 이랬는데 또 담날 되면 울고 있을 나의 모습이 보인다 하핫 그래! 처음부터 힘들면 누가 하겠나 싶다!! 오늘은 JS 변수 선언하는 방법에 대해 배웠다 js는 코드에 따라 다르지만 통상적으로 제일 밑에 자리를 차지하고 있다. 왜냐?! css 또는 html 문서가 다 읽히고 난 후에 적용 되는 부분이 많기 때문에 제일 밑에 자리하는 경우가 많다고 한다. 그 이야기를 역으로 해보면 js가 먼저 결과가 나와야할 경우엔 위에 위치해야한다는 말이 된다! 이 부분을 잘 기억해둬야할 거 같다!!😏 1. JavaScript - netscape사에서 개발(브랜든) - 동적인 웹사이트를 만들기 위해 개발됨 - 개발 언어는 누군.. 2021. 5. 26.
[코딩 공부_82] flex 게임을 해보자 오늘은 flex 게임을 해보았다 개구리를 이동 시켜서 개구리와 똑같은 색상의 잎에 이동시키는 단순한 게임이다 Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 위 사이트를 들어가서 게임을 하면 된다! 귀여운 개구리들이 반겨줄 것이다!! 총 24단계까지 있다! 위에 힌트 슬쩍슬쩍보면서 했더니 금방금방 깬거 같다 ㅎㅎ.. 근데 마지막이 너무 어려워서 지웠다가 썼다가 계속 반복했다 후우... 시간이 쪼금 걸렸지만 완성하니 뿌듯하다 나는 또 뭐든 자랑하는 타입이기 때문에 냅다 캡처 해버렸다 찰칵찰칵 뿌듯 2021. 5. 25.
[코딩 공부_81] flex에 대해 알아보자 hanbom 사이트를 클론코딩하며 가장 많이 봤던 부분이 flex였다! 그 당시엔 float만 배워서 float만 사용했다 ㅎㅎ.. 호환성이 float이 더 좋아서 float을 자주 사용하지만 flex가 더 최신이고 사용법이 쉽다는 점! 나는 flex를 선호하지만 한가지만 사용하면 안된다!! 사이트에 따라 사용해야한다!! 1. flex : layout 배치 방식 - flexbox가 웹 개발자들의 관심 받게 된 이유 중 하나는 웹 최초로 적절한 정렬 기능을 제공했기 때문이다. - 가로/세로 중앙 정렬을 쉽게 할 수 있다!! - flex 속성은 부모와 자식이 꼭 필요하다(부모는 container, 자식은 item) 2. flex 사용하기 - 부모 요소에 display : flex;로 시작 - 가로 배치 - .. 2021. 5. 24.
[코딩 공부_80] github를 활용해보자 드디어 github에 대해 배웠다 ! 처음하면 너무너무 생소한 그 녀석.. github... github는 분산 버전 관리를 위한 git프로젝트를 지원하는 영리적인 웹 호스팅 서비스이며, 오픈소스를 위한 무상 서비스를 제공하는 곳이다! 전세계 5,600만명의 개발자들이 참여하여 소프트웨어 개발 및 협업을 위해서 커뮤니티를 형성하고 있다한다 그래서 개발자들은 알고 있는 커뮤니티 중 하나이다! 1. git과 github를 다운로드한다 Git www.git-scm.com GitHub: Where the world builds software GitHub is where over 65 million developers shape the future of software, together. Contribute t.. 2021. 5. 23.
[코딩 공부_79] hanbom-project 클론코딩 완성 일주일동안 개인 프로젝트를 하였다! 자신이 하고 싶은 사이트를 골라 클론코딩 하는 시간이었다 선생님께서 예전에 영자닷컴?을 하라고 하셨었는데 새카맣게 까먹고 새로 찾아본 사이트가 hanbom studio였다 (열심히 찾았는데 안하기 쫌 모해서 고집 부렸다 ㅎㅎ... 다 배우고 난 뒤에 해볼 예정이다 허허) 한봄스튜디오 Digital Creative Group -The belief of the Mastership hanbom.com 뭔가 기능이 많아서 공부에 도움되겠구만!하고 했는데 구석구석 파헤쳐보니 온통 자바스크립트 천지였다 .. 자바스크립트로 구현할 수 있는 부분이 5개?였다.. 하지만 자바스크립트를 배우지 않았기 때문에 꼼수 몇개를 부렸다 ㅎㅎ 자세한 내용은 코드를 보여준 후 이야기하도록 하겠다! .. 2021. 5. 22.
[코딩 공부_78] transform-origin? transform-origin은 회전 중심을 지정하는 속성이다. hover나 animation 등 움직이는 모션을 줘야할 때 또는 content 눕히기 등 필요한 속성이다!! 나는 content를 눕혀 나열하기 위해 transform-origin 사용하였다! 1. transform-origin : CSS transform 속성과 함께 사용되는 속성으로서, 회전 중심(원점 기준점)을 지정한다. - 초기값은 50% 50%이다. 백분율(%) 키워드 0% 0% top left 0% 50% left / left center 50% 0% top / top center 0% 100% bottom left 50% 100% bottom / bottom center 100% 50% right / right center 1.. 2021. 5. 21.
[디자인_23] 샌드데이 웹 메인페이지 리디자인하기 샌드데이 웹 홈페이지 리디자인을 해보았다!! 정말 많이 고쳐서 나온 디자인이다 처음에는 내 머릿속에 있는 부분으로 했는데 너무 이상해서 새로 싹 고쳤다 많이 깔끔해져서 기분 좋다! 선생님께서 구현도 하는 시간을 가진다고 하셨다! 얼른 했으면 좋겠다,, JS하면 할 거 같다 ㅎㅎ 너무너무 두려운 JS시간.............. 2021. 5. 19.
[코딩 공부_77] 파비콘 적용하기 1. 파비콘 : Favorites icon의 줄임말로 즐겨찾기 아이콘이다! 웹 브라우저상에서는 주소창 옆에 작은 아이콘으로 표시된다. (형식) .ico가 기본적이지만 png의 확장자로도 가능하다. 사이즈는 16X16 또는 32X32로 표현가능 2. 실습 2021. 5. 14.
[코딩 공부_76] css 스크롤바 스타일 변경하기 ** 프로젝트를 진행하면서 어려웠거나 막혔던 부분에 대해 포스팅하는 시간을 가져보도록 하겠다!! 첫번째는 스크롤바 스타일을 변경해보았다! css 스크롤바 스타일을 변경해보았다!! 위 내용을 복사 붙여넣기해서 변경하기만 하면 된다!! 너무 쉽게 바꿀 수 있어서 "엇 정말 이렇게 하면 되는건가!!"하는 생각이 들었다 ㅎㅎㅎ 2021. 5. 14.
[코딩 공부_75] 한화 솔루션/케미칼 클론코딩(완성) 회사소개 회사개요 걸어온길 중앙연구소 지속가능경영 글로벌 네트워크 사업영역 전체사업분야 PO PVC CA TDI ASR 인재채용 인재상 직무소개 인사제도 제품검색 view more . 대한민국 대표 석유화학 기업, 한화솔루션/케미칼을 소개합니다. 회사소개 삶의 가치를 높이는 기술기업, 한화솔루션/케미칼 more 회사소개 설립 이래 한결 같은 자세로 기술 개발에 전념해 오고 있습니다. more 회사소개 세상을 더욱 풍요롭게 하고 지속가능한 내일을 만들기 위해 노력하고 있습니다. more . 끊임없는 기술 혁신으로 미래 성장 동력을 지속 발굴합니다. 01Chlorinated Polyvinyl Chloride CPVC 한화솔루션/케미칼은 국내에서 처음으로 자체 기술로 CPVC를 생산하는데 성공하고 2017년 .. 2021. 5. 13.
[디자인_22] 포토샵, 홀로그램 만들기 2021. 5. 12.