오늘보다 더 나은 내일

개인작업 및 프로그래머스 문제풀기 programmers.co.kr/learn/courses/3 Hello, JavaScript: 자바스크립트 입문 ## Hello, JavaScript! 관련 키워드: JavaScriptHTMLCSS웹프론트엔드입문문법 * 자바스크립트와 처음 만나는 분들을 위한 강의! * 부담가질 것 없이, 하루 최소 20분씩만 짬내도 배울 수 있는 강의!(약 7일 소 programmers.co.kr

1. return console.clear(); function plus(a, b) { var num = a + b; return num; } var minus = function(a, b) { var num = a - b; return num; }; function multiply(a, b) { var num = a * b; return num; } var divide = function(a, b) { var num = a / b; return num; }; var num1 = plus(10, 20); var num2 = minus(10, 20); var num3 = multiply(10, 20); var num4 = divide(10, 20); console.log("num1 : " + num1); ..

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..

※ html 형식 ※ container를 화면 크기에 맞추는 방법 - height:100% 지정=body 높이 기본값이 auto 라서 불가능 - min-height:100vh;로 지정하여야한다. 1. flex-grow : 기본값 0 한정된 컨테이너 내에서 아이템이 차지하는 부분을 나눠가지는 비율 2. flex-shrink : 기본값 1 한정된 컨테이너 내에서 아이템이 줄어들때 줄어드는(양보하는) 비율

Home About Products Contact body, ul, li { margin:0; padding:0; list-style:none; } a { color:inherit; text-decoration:none; } .block { display:block; } .flex { display:flex; } .flex-jc-e { justify-content:flex-end; } .bg-red { background-color:red; } .top-bar { background-color:deepskyblue; color:white; } @media ( max-width:1000px ) and ( min-width:601px ) { .top-bar .menu-box-1 { width:100%; } ..

1. justify-content : 가로 선상 정렬 - flex-start : 요소들을 컨테이너 좌측 정렬 - flex-end : 요소들을 컨테이너 우측 정렬 - center : 요소들을 컨테이너 중앙 정렬 - space-between : 요소들 사이에 동일한 간격 - space-around: 요소들 주위에 동일한 간격 2. align-items : 세로 선상 정렬 - flex-start : 요소들을 컨테이너 상단 정렬 - flex-end : 요소들을 컨테이너 하단 정렬 - center : 요소들을 컨테이너 세로선상 중앙정렬 - base-line : 요소들을 컨테이너 시작위치 정렬 - stretch : 요소들을 컨테이너에 맞도록 늘린다. 3. flex-direction : 컨테이너 내의 요소들의 정렬방..