728x90

분류 전체보기 241

자바스크립트, 제이쿼리에서 사용하는 타이머 함수 setTimeout(), setInterval(), clearTimeout(), clearInterval()

원하는 시간 후에 알람을 해주는 타이머도 구현이 가능하고, 호출을 원하지 않을때에도 타이머를 통해 그 기능을 제거 할 수도 있다. 한번의 호출만을 할 수 도, 지정한 시간마다 호출할수도 있다. setTimeout()과 clearTimeout() setTimeout(callback, delay) callback에는 함수가, delay에는 시간이 들어간다.delay에는 1/1000초 단위를 쓰며, 해당 시간 뒤에 매개변수 callback 함수가 호출된다. 예를들어 setTimeout(function(){ alert(‎'1초 후 호출 된다.'); }, 1000); 위 코드를 실행하면 1초 후 alert(‎)함수가 호출 된다. 이때 setTimeout() 함수는 고유의 index 값을 반환해주며, 함수를 생성할..

STUDY/programing 2019.04.24

내 인생의 숙제 no2 영어

업무시간에 필수인 구글링.확실히 느껴지는 한국어자료와 영어자료의 갭 ㅠㅠ어찌어찌 찾아도 영어로 읽으면 얼마나 답답한지구글 번역을 돌려 읽는게 더 빠르다. 후하 영어권에 태어나지 않았다는 이유로,영어를 편하게 구사하지 못한다는 이유로,겪는 정보의 불평등 ㅠㅠ.. 스트레스가 쌓이고 쌓이다보니내 모국어가 나의 한계가 될 수 있겠다 싶었다.내 미래의 한계를 무한히 확장시키기 위해서는 잉글리시는 필수였어...-_-(실은 학창시절부터 늘 필요했었겟지 ㅋㅋㅋ진작 좀 할걸) 영어랑 좀 친해지기. 헬로우톡 어플에 짧은 일기를 올리고 있다.각국의 원어민들에게 마구마구 고쳐짐 당할 수 있다. Friday's lunch with co-workers.I love Ramen. This was especially super goo..

Diary 2019.04.21

자바스크립트, jQuery 의 기초 (변수, 함수, return, 객체, 프로퍼티 등)

자바스크립트로 개발하면 각각 브라우저 별로 코드를 다르게 작성해야하고 결과도 각각 확인해야한다. 이런 크로스브라우징의 어려움 때문에 그 부분이 해결된 jQuery를 사용한다. 제이쿼리 언어는 자바스크립트에서 파생된 언어이기 때문에 자바스크립트를 어느정도는 알아야 jQuery 공부를 할 수 있다. 변수 변수는 이름을 정하고 그 이름을 통해 값을 저장하거나 읽어들일 수 있다. 선언했던 변수에 다른 값을 저장하면 기존 값은 사라지면서 대체 된다. var a ; var은 변수를 선언, a는 변수의 이름 이고 ; 세미콜론을 붙여 구문의 끝이라는 표시를 해주어야 한다. a = 10; 변수에 값이 할당 된다. 10이라는 값을 할당해 주기 전까지는 undefined라는 초기값을 갖는다. var b = "april"; ..

STUDY/programing 2019.04.18

나를 닮은 내 첫 캐릭터 그리기 ♡

수업때 그린 그림 중 제일 마음에 드는 그림이 생겼다. 제공된 밑그림이랑 크게 다를게 없는데도 내 옷을 입고 있다는 이유로 좀 특별해보인다. 작년 여름 잘 입고 다녔던 노란 나시를 입히고 2019년의 봄 아우터를 담당한 분홍색 체크 남방을 어설프게 그려주고 나의 만년 요가복 두세트 중 하나로 마무리를 지었다. 물론 많이 연습을 해야겠지만부작용이...... 저 자세가 아닌 사람은못 그린다 ㅋㅋㅋㅋ 머리랑 몸통 팔 다리 그리는 방법도 좀 알려주셨으면 좋으련만 ㅠㅠ

Diary 2019.04.16

JUST 쇼핑몰 문제풀이 5. footer (2019 웹디자인 기능사 실기 공개문제)

이제 남은 footer의 스타일을 잡아준다. 푸터는 로고랑 주소가 그대로 입력되고, 아이콘 3개를 추가하여 간단하게 10분이내로 끝낼 수 있다. 구조짤때 미리 입력해둔 html을 보고 스타일을 입힌다. footer의 height는 100px으로 시험지에 명시되어 있기때문에 꼭 지정해준다. 그 이외는 내 마음대로 css를 꾸민다. 문득 드는생각인데 CSS에 자율성을 준다는것은 아무렇게나 해도 점수를 딸 수있다는 말은 아닌듯하다. 독창성 가독성 등을 고려하라고 애매하게 쓰여있지만, 시험 채점 기준이 명확하게 공개되어 있지 않고 채점과정 이의제기도 불가능한 상황에서는 최대한 성의를 보여야 조금이라도 채점관들의 가산점이라도 얻을 수 있지않을까 싶다. 서로다른 아이콘을 넣어주기 위해 클래스를 추가해준다. sns ..

STUDY/자격증 2019.03.30

JUST 쇼핑몰 문제풀이 4. 슬라이더/ 탭메뉴/ 배너/ 바로가기 (2019 웹디자인 기능사 실기 공개문제)

Header는 완료 되었고 이제 헤더 아래부분의 슬라이더의 CSS를 입력한다. 가로길이 1200px의 이미지 3장이 옆으로 스르륵 흘러가야 하기때문에 3600px의 슬라이더 창을 만들어 준다. 슬라이더가 완성되었고, 아래 컨텐츠 부분에는 크게 세부분으로 나뉘어 진다. 시각적으로 보여주기 위해 background-color를 임의로 주어봤다. 이렇게 CSS가 먹히고 있다. 나는 아래 컨텐츠 부분이 위 슬라이더랑 너무 딱 붙어있는것 같아서 나중에 MARGIN값을 주었다. 한 공간안에 탭 메뉴 형식으로 공지사항과 갤러리 두가지의 li 메뉴가 있다. li.notice , li.gallery로 구분하여 CSS를 사용 하고 notice 스타일을 잡을동안 gallery는 display:none; 을 임시로 걸어두었다..

STUDY/자격증 2019.03.28

아이패드 프로3로 그린 세번째 그림 : 수채화 벚꽃 (프로크리에이트 앱 활용)

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​..

Diary 2019.03.23

JUST 쇼핑몰 문제풀이 3. Header (2019 웹디자인 기능사 실기 공개문제)

하루 1시간 공부가 이렇게나 지키기 힘들다.갖은 이유들로 인해 이미지 만들고 나의 열정은 파사삭 식어버렸지만이제 정말 몇 일 안남았으니 차근차근 해본다. html도, 이미지도 준비되었고 이제 CSS 옷을 입힌다. 시험지에서 명시하고 있는것은 전체 width 1200px와 각각 영역의 height 값이다.나는 body영역으로 전체를 싸준다고 생각하고 1200px의 width 고정값을 주고margin: 0 auto; 를 주어 브라우저 크기에 맞게 가운데 정렬을 한다. header에는 크게 로고부분과 메뉴부분 두가지로 나뉜다.로고부분 과 메뉴부분 을 float 속성을 주어 나란히 배치한다. 그리고 메뉴(.gnb_wrap) 내부의 1차메뉴 탑, 아우터, 팬츠, 액세서리도 나란히 배치하기 위해 float 속성을 ..

STUDY/자격증 2019.03.19

JUST 쇼핑몰 문제풀이 2. 포토샵 웹용 이미지 만들기 (2019 웹디자인 기능사 실기 공개문제)

공개문제를 풀려고하는데 문제지만 딸랑 있고 이미지를 제공해주지 않는다..^^;그냥 빈 이미지로 하려다가 한문제라도 제대로 풀어보자 싶어서지시사항을 따라서 만들어본다. 실제 시험장에서도 제공되는 이미지와 텍스트를 활용하여이미지를 만들어야된다고 하니 연습삼아 포토샵을 켠다. 로고, 슬라이더 부분의 이미지를 읽어보면 특별한 제약은 없고 자유롭게 만들면 되는듯 하다. 로고 만들기 가로 200px 세로 40px 의 상단에 쓰일 로고와조금 축소된 버전의 footer에 사용될 로고 두개가 필요하다. 심벌없이 로고명을 포함한 워드타입으로 디자인하라고 지시되어있다.대충 JUST 쇼핑몰 이라고만 적고 Ctrl+Alt+Shift+S 4개를 동시에 눌러 웹용이미지 저장을 한다. 제공된 이미지도 텍스트도 없이 무언갈 만드는게 ..

STUDY/자격증 2019.03.14

JUST 쇼핑몰 문제풀이 1. 요구사항 분석 및 HTML 구조짜기 (2019 웹디자인 기능사 실기 공개문제)

큐넷 웹디실기 공개문제 풀어보기 : 저스트쇼핑몰 우선 실기시험에 앞서 미리 필기구로 시험지에 중요한 부분을 체크해가며 요구사항을 숙지하는것이 중요하다. 요구사항 분석 잘 못 이해했다가 나중에 코드를 전부 수정해야하는 경우가 생길 수도 있으니 문제지 읽는 시간을 아까워하지말고 충분히 주어야한다. ↓요구사항 체크 문제지 파일↓ 요구사항을 보며 HTML 구조 먼저 짜기 HTML과 CSS를 동시에 진행하는것 보다 머릿속으로 어떻게 구조가 짜여질지 상상하면서 HTML코드를 우선 짜놓고 나중에 스타일을 입히는것이 속도면에서 더 빠르다. (수정할 일이 줄어든다.) 캐릭터셋을 utf-8로 설정하고 css에서 텍스트 색을 #222328로 기본지정을 하고 시작했다. css를 링크해준다. 시험장에서 제공하는 jquery 파..

STUDY/자격증 2019.03.13

인강으로 배우는 취미, 그림 그리기

가위질, 칼질, 각종 손으로 섬세하게 하는것에는 자신이 없다. 했다 하면 내가 피를보거나 대상이 망가진다. 이 시대 대표 똥손인 나도 좋아해왔던게 있다.낙서다. (색칠안하는 그림) 빠르게 흘러가는 세월을 머릿속에서라도 잡아보기 위해 ㅠㅠ사진을 많이 찍어왔는데, 다른방법으로도 기록을 남겨보고싶다는 마음으로요즘들어 그림이랑 캘리그라피에도 관심이 생긴다. 나의 반복적인 일상부터 의미 있는 물건,기억에 남는 사건 등을 내 손으로 기록을 남겨보고싶다.또 책을 읽다가 마음에 드는 구절을 사진으로 찍거나 타이핑 해 놓는거 보다,캘리그라피로 써놓으면 너무 멋질거같다. 꿈은 창대하나 사실 아무것도 할 줄 모른다. ㅋㅋㅋㅋ 그래서 지금이라도 배워본다. 내 낙서랑 비슷한 느낌의 그림체의 작가를 찾았다.인터넷 강의로 동영상을..

Diary 2019.03.10

웹디자인 기능사 실기 벼락치기2. 사진 슬라이드

↓새로운 공개문제 (JUST 쇼핑몰) 사진슬라이드 js코드 보기↓ 2019/05/07 - JUST 쇼핑몰 문제풀이 6. JS, 제이쿼리 - 메뉴, 슬라이더 효과 (웹디자인 기능사 실기 공개문제) $(function(){ var now = 1; var max = 3; var w = 960; var slide; //slideitem3을 맨 앞으로 위치 이동 처음 시작 $('#slide .container').prepend($('#slide .container .slideitem3')); slide = setInterval(function(){ $('#slide .container > div:nth-child(1)').animate({ 'margin-left':(w*(-1))+'px' },600,functio..

STUDY/자격증 2019.03.06

웹디자인 기능사 실기 벼락치기 요점정리

급하게 컴퓨터 그래픽스 필기와 과목이 비슷하다는 말에웹디자인 기능사 필기도 응시했고, 어렵지 않게 합격할 수 있었다. 어느덧 미루고 미루던 실기시험 날짜가 오고있다.시험신청은 지난달에 했는데, 역시나 미루고~ 미루다~ 공부를 하나도 안하고오늘 처음으로 공개문제를 다운 받는다. 하루에 1시간씩 일주일만 봐보자!! 웹디자인 기능사 실기시험문제 너무 길어서 중요한것만 요점 정리를 해보았다. 벼락치기용 유의사항 1. HTML, CSS, JavaScript 총 파일 3개를 만든다. (이미지랑 jQuery 리소스는 제공된다)2. charset utf-8 으로 설정한다. 1) HTML : 2) CSS : @charset "utf-8";3. 전체영역 960px X 1200px 및 Header, Main , Conten..

STUDY/자격증 2019.03.05
728x90