컴퓨터 프로그래밍 (78) 썸네일형 리스트형 피그마 1일차 - 피그마 다운로드 및 기본 활용 방법 안녕하세요 시란입니다. 이번 포스팅에서는 피그마에 대한 기초적인 설명과 활용방법에 대해서 알아보겠습니다. 1일차에는 피그마에 대한 간략한 설명과 다운로드 방법 과 실행 그리고 우리가 이미지를 편집하거나 콘텐츠를 제작하기 위해서는 어도비사의 포토샵이나 일러스트 등을 다운로드 받아서 사용하곤 했습니다. 많이들 들어보셨을꺼에요 현재까지도 아주 강력한 툴이죠. 포토샵의 경우 사진편집이나 이미지 편집하는데는 좋은툴이지만 UI디자인 쪽에는 최적화되어있지 않습니다. 특히 픽셀기반이므로 수정사항이 발생하면 모든 엘리먼트를 수정해야된다던지 시안을 공유하려면 이미지 추출을 해야된다거나 별도의 프로그램을 사용해야 하죠. 특히나 어도비 포토샵을 구매, 설치해야된다는 점이죠. 유료프로그램이라는 의미입니다. 또한 업무 프로세스를.. 자바스크립트 10일차 - 헤더 영역, 마우스휠 조절시 영역 표기, scrollTop, animate를 통한 페이지 위치 옮기기 스크롤을 올릴땐 헤더 영역이 나타났다가 스크롤을 내리면 헤더영역이 사라지는 그런 사이트들을 보신적이 있을꺼에요; 스크롤을 내리면 아래처럼 메뉴가 사라지고. 스크롤을 올리면 아래와 같이 메뉴(머릿말)이 나타나도록 만들어보겠습니다. 먼저 헤더영역을 만들어주시고요. ㅎㅎ header 헤더에 스타일을 줍시다. 백그라운드, 글씨색, 텍스트 위치 등등 조절해주시고요. 중요한점이 헤더의 위치는 고정으로 해야됩니다. (이것만 설정하면 휠을 올렸다 내렸다 하더라도 위치를 고정하고 있답니다.) 그리고 현재는 보이지 않도록 하기 위해 translateY 값을 -100%로 줍니다. 이상태를 주면 헤더는 보이는 페이지 위쪽에 우리눈에 안보이는 곳에 위치하게 됩니다. 그리고 transition 값을 0.5s줍니다. 0.5의 속도.. 자바스크립트 9일차 - jquery burgermenu, header 이번 시간은 버거메뉴와 header에 대해서 알아보도록 하겠습니다. 버거메뉴란 아래 이미지처럼 생긴 메뉴로 클릭했을때 header든 메뉴든 뜨게 하는 아이콘 입니다. 해당 버튼을 만들어보도록 하겠습니다. 저 버튼을 누르게 되면 아래와 같이 모양이 x자로 바뀌면서 오른쪽의 메뉴가 호출될 수 있도록 만들 계획입니다. 먼저 오른쪽 메뉴부터 만들어보도록 하겠습니다. HOME WORKS ABOUT 그리고 article도 이렇게 만들어봅시다. 버거메뉴 자 이번시간은 css가 정말 많이 들어갈꺼에요 전에 스크립트부터 짜봅시다. 먼저 const를 통해서 각 트리거메뉴와 메뉴를 각각 이름을 지어줍시다. 그리고 클릭이벤트를 넣어줍니다. triggerMenu는 햄버거 버튼을 의미합니다. 이 버튼을 누를경우 togglecla.. 자바스크립트 8일차 - jquery css와 클릭이벤트 저번시간에 이어 jquery에서 css와 이벤트들을 한번 넣어보도록 하겠습니다. 1. 선택자 2. 선택자 3. 선택자 마찬가지로 div class를 준비해줍니다. 그리고 나서 어제 배운 선택자를 응용해봅니다. const ex1 = $('.ex1 p') 이렇게 하면 ex1 에는 p태그들이 선택되었습니다. 원래 바닐라 스크립트 였다면 아래와 같이 썼었겠죠 ex1.style = "boarder:1px solid #f00" 하지만 jquery와 바닐라 자바스크립트는 혼용되서 쓸 수 없습니다. 따라서 jquery로 선택된 태그들에는 jquery에 맞는 문법을 사용해야합니다. 아래와 같이 써주면 됩니다. ex1.css({ 'border':'1px solid red', 'color': 'blue', }) css()안.. 자바스크립트 7일차 - jquery와 선택자 이번 시간은 jquery를 활용해서 프로젝트를 진행하려고 합니다. jquery는 다운로드 받아도 되지만 그냥 script에 포함시켜서 사용할 수도 있습니다. 구글이 이미 다운로드 해서 배포해놨고, jquery사이트에서 이 스크립트를 사용하면 다운로드 없이 사용이 가능하다. https://jquery.com/download/ Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwid.. 자바스크립트 6일차 - 함수의 매개변수 함수 실행 시 인자값을 통해 값을 전달 할 수 있다. 정의도니 함수 (매개변수)를 통해서 값을 받을 수 있다. 매개변수는 정의된 함수 안에서만 사용 할 수 있다. 먼저 div에 감소 버튼, 그리고 숫자와 증가 버튼을 만들어준다. 감소 0 증가 자 이렇게 만들어지겠죠? 그리고 나서 이번에는 저번시간에 배운 forEach를 사용해 볼 예정입니다. 자 먼저 const로 각각의 버튼과 code값들을 받아줍니다. const elBtn = document.querySelectorAll('.ex button'); const elCode = document.querySelector('.ex code'); let count=0; 참고로 querySelectorAll로 받으면 elBtn은 리스트가 될테죠? 0번버튼, 1번.. 자바스크립트 4일차 - 배열 입력 > 응용한 출석부 만들기 배열 선언 방법 let arr =[]; 배열 입력 방법 arr.push(value) 간단하죠? 이를 응용해서 출석부를 만들어 보겠습니다. 저번시간에 배운 input 태그와 queryselector, innerHtml 을 활용할 것입니다. 출석부(0) 저장 먼저 출석부 부분을 만들어줍니다. 태그들을 사용해서 이름을 입력받을수 있도록 input태그 먼저 사용 button을 사용한 저장버튼 그리고 ul태그를 사용해 출력 부분을 만들어줍니다. 그럼 이렇게 출석부(0) 인풋태그 (저장버튼)이 완성되겟죠? 이후 스크립트를 통해 원하는 기능들이 정상동작 하도록 작업해줍니다. 목표는 다음과 같습니다. 1. 인풋 태그에 입력한 값 확인 2. 저장버튼을 누를 시 인풋 태그의 입력값을 array에 저장함 3. 저장한 값을 .. 자바스크립트 3일차 - 삼항연산자, input tag, form tag와 이벤트 ( 조건 ) ? "참" : "거짓" 조건에 따라서 true면 참에 해당되는 결과를, false면 거짓에 해당되는 결과를 실행한다. 예시 (a < 0) ? a=1 : a=0 a 가 0보다 작다면, a에다가 1을 대입하고 아니라면 0을 대입하라는 의미. Input Tag input 태그는 아래와 같은 예시로 쓰인다. 이런 tag들을 인식하기 위해서 부분에서 태그들을 받아와서 값을 변경해준다. 선택자를 통해 태그들을 선택하고 데이터를 받아와서 연산을 한 후 결과값을 출력할 것이다. // 1. 언제 - 마우스 클릭시? 스크롤시? // 2. 무엇을, 어떻게 - 변수를 const elResult = document.querySelector('.result') elResult.onclick = function(){ .. 이전 1 2 3 4 5 6 ··· 10 다음
