오늘보다 더 나은 내일

1. 함수 - 값의 종류 : 실행할 수 없는 계열 - Number 숫자 - String 문자열 - Boolean 논리값(true/false) - Object 객체 실행할 수 있는 계열 - Function함수 console.clear(); // 자판기(함수)를 만드는 행위 // 아래 중괄호({})의 의미 : 함수의 시작과 끝을 정의 // 아래 변수의 이름은 say를 함수명이라고도 한다. var say = function() { console.log("== 함수 시작 =="); console.log("안녕하세요."); console.log("반갑습니다."); console.log("== 함수 끝 =="); }; // say() => say 라는 변수안에 들어있는 데이터를 실행한다. // 자판기(함수)를 실행..

문제 1. 변수없이 a,b값 교체하기 console.clear(); var a = 10; var b = 5; b = 10; a = 5; console.log("a : " + a); // 출력 => a : 5 console.log("b : " + b); // 출력 => b : 10 문제 2. 숫자와 사칙연산 없이 a,b값 교체하기 console.clear(); var a = 10; var b = 5; var c = a; a = b; b = c; console.log("a : " + a); // 출력 => a : 5 console.log("b : " + b); // 출력 => b : 10 ※ 조건문 if 개념 console.clear(); var age = 5; console.log("== 1단계, 아주 어..

※ 개인 모작 작업시 단계별로 위키 업로드! 시작전 fork 습관화! https://codepen.io/papiliofly/pen/abZrdYq abZrdYq ... codepen.io

※ 배경사진비율 유지하며 크기조절 - 내용없는 div요소 만들어 준다 div { width:500px; height:500px; background-image:url(https://i.picsum.photos/id/255/500/700.jpg?hmac=PLRCGHdClY_GLysZ3b70mZXd1ZhIQgbwwbBN_9P2x4I); background-position:center; background-repeat:no-repeat; background-size:cover; } 이미지를 배경이미지로 지정하여 일정크기 이상으로 키우면 바둑판 배열이 되는데, 이때 background-repeat:no-repeat;속성값을 주면 바둑판배열되지 않는다. 다만 이미지가 부분 잘려서 나오는데 background-po..

※ 상단 로고와 검색바 레이아웃 잡기 - 부분 모작 시 섹션별로 구획 나누어주기 ex) - 검색바의 form 요소 기본형태 ★외우세요 ※ 101로고 ctrl + shift + c 로고박스 클릭 - SGV요소 찾기(좌측방향키 눌러 준다) - SGV복사- copy outerhtml- 붙여넣기 SGV형식이란 ? 일러스트 벡터형식 파일로 jpg와 달리 이미지에 변형을 줘도 깨지지 않는다. ※ 검색박스의 은은한 그림자 - box-shadow:10px(x축) 10px(y축) 10px(그림자 번짐 정도) rgba(0,0,0,0.5) 그림자 색 - 예제는 b..

※ 상단 광고배너 높이 지정, 텍스트 수직중앙 정렬 - 부모요소가 커지면 자식요소들도 같이 커지게 만드는방법 : 라이브러리 height-100p{height:100%}를 만들어준다 - 텍스트의 수직중앙정렬 : align-items: center; ※ 닫기버튼만 수직중앙 정렬 만드는 방법 - 부모 요소 align-items:center; - 자식요소 align-slef: center; ※ 닫기버튼 세부 디자인 조정 - 아이콘을 감싸는 부모 선택자 span을 만들어 역할분배 시켜준다. 지금 알림 신청하면 백화점 상품권 당첨! /* 노말라이즈 */ body, ul, li { margin:0; padding:0; list-style:none; } a { color:inherit; text-decoration:n..

※ 크롬 개발자 단축키 : ctrl +shift + c ※ codepen 코드업 동작 재실행: ctri + shift + 7 ※ 고정형 사이트 만들기 : 너비를 조절해주는 라이브러리 .con이 있다면 자식을 감싸는 부모요소에 자식너비만큼의 라이브러리 .con-min-width를 만들어준다 ※ 폰트적용 : 구글폰트에서 Noto Sans KR 다운가능 (가독성 좋고 무료 폰트) 용량 감안하여 필요한 크기선택하여 오른편 링크를 html에 붙여넣기, font-family를 css붙여넣기 ※ 아이콘 적용 : 이미지를 삽입하여도 되지만 색, 크기조절 등 자유로운 디자인은 위해 폰트어썸 font awesome이용 - 무료아이콘검색 - 적절한 아이콘 선택 및 주소 복사 - html 마크업 - cdnjs사이트에서 fon..

※ make with top obj (ctrl+alt+C) :상단에 준비된 도형에 맞춰 하위 물체를 변형시킬 수 있는 기능 - 조건 : 가장 상단에 필요한 모양 가지고 있는 도형이 위치해 있어야 한다. - 해당 기능 들어간 오브젝트를 수정하기 위해서는 더블클릭하여 그룹 격리모드 진입하면 된다. 1. 패턴 : 특정한 물체가 면이나 스트로크 위에서 반복적으로 배치되어 비춰지는 것을 말한다. - 면, 배경, 인테리어 벽지, 옷감 패턴 , 팬시 디자인 - 필요한 툴로 패턴으로 등록시킬 도형 자유롭게 만들어준다. - 만든 도형을 스와치 패널에 등록하면 패턴으로 사용할 수 있다. 등록된 패턴은 언제든 자유롭게 수정할 수 있다. (1) appearance (shift + F6) - 선택된 도형의 속성을 파악하거나, ..

1. text type tool (T) - 포인트 타입 기재방식 : 타입툴로 마우스 클릭하여 커서 생성 후 글자 제작할 수 있는 방식 변형이 자유롭기 때문에 짧은 문구 즉 제목, 장식글자 기재 시 사용하는 방법이다. - 패러그래프 타입 기재방식 : 클릭 드래그하여 생성된 텍스트 박스 안에서만 제한적으로 글자 관리할 수 있다. 장문의 글을 수정하는 데 굉장히 용이하다. ※ ctrl+T : 캐릭터, 패러그래프 패널 꺼낼 수 있다. (1) area type tool : 도형을 텍스트 박스로 전환해줄 수 있는 기능 말한다. - 성분표, 스티커 등 - 커서가 활성화되면 도형의 속성은 사라진다. - ctrl+ente r: 커서 비활성화 - ctrl+C : 복사 - ctrl+F : 복사된 물체 앞에 붙여넣기 - ct..

1. pen tool (P) : 포인트 생성하여 직선부터 곡선을 생성할 수 있는 툴 (1) add anchor point tool (+) :고정점을 추가생성하여 변형하는 데 도움줄 수 있는 툴 (2) delete anchor point tool (-) : 고정점 삭제하여 불필요한 면적 제거할 때 사용하는 툴 (3) anchor point tool (shift+C) : 핸들 제거 및 생성하는 데 사용할 수 있는 툴이다. - 펜툴 제작 시 핸들은 웬만하면 강제로 삭제하지 않는다. - 포인트마다 양쪽으로 핸들이 유지 되어있어야만 작업물 수정 원활해지는 경향이 있다. - 펜툴 작업 중 알트(앵커 포인트 툴 호환 됨) 작업 중 앵커포인트 툴 호환하여 핸들 조절하며 작업하면 된다. - 도형 수정 위해서 포인트는 적..

1. Align (shift+F7) : 정렬 및 분배 (1) distribute objects : 분배 기능 - 선택된 물체가 각각 다른 사이즈를 가지고 있을 때 기능에 따라 간격이 달리 두어지는 것을 볼 수 있다. - 하지만 선택 물체 사이즈가 동일할 시 어떠한 버튼 눌러도 변화 없음. - 각각의 물체가 가장 안정적인 간격 가졌을 때 시각적인 판단아래 적용하면 되는 기능이다. (2) distribute spacing : 등간격 분배 - 물체가 한 번 더 클릭이 되어, align to key object 기능이 활성화되면 수치란을 사용할 수 있다. - 원하는 간격 만큼 물체 분배하는 데 사용할 수 있다. - 선택 물체 잠금 : ctrl +2 - 잠금 해제 : ctrl + alt+2 - 선택 물체 숨김 :..

1. Reshape tool : 패스에 새로운 고정점을 추가하여 곡면형태 변형 툴 2. Add anchor point tool ( + ) : 패스에 새로운 고정점 생성 가능, 핸들 없는 포인트 생성되어 뾰족한 면적 변형 가능 3. Width tool (shift + W) : 열린패스의 두께를 부분적으로 관리할 수 있는 툴 4. Free transform tool - CS 버전에서는 단축키 이용하여 원근 왜곡을 시켜야만한다. - 단축키 사용 먼저하지 않는다 (클릭드래그 변형상태 먼저 만들어야 함 ) 5. 컬러 단축키 - 색상칩 선택 : X (일러스트는 선택된 색상칩 기준으로 관리할 수 있다.) - 색상 제거 : ? , / - shift +X : 색상 위치 반전 - 색상 초기화 : D - 색상 속성 : , ..