분류 전체보기 68

23-02-24 JS

4-4) concat - 2개이상의 배열을 하나의 배열로 결합 (자바의 addAll) 4-5) slice() - 4-6)sort() - 배열에 문자형 데이터 있는경우 오름차순 정렬 - arr = [ {name:'김', score:50}, {name:'이', score:70}, {name:'박', score:90}, {name:'최', score:30}, {name:'정', score:1}, {name:'전', score:11}, {name:'양', score:12} ] arr.sort(function(a, b){ return b.score - a.score }); arr.reverse arr=[1, 13, 10, 5, 6, 4]; // 문자타입으로 인식해 문제발생 arr.sort(function(a, b..

23-02-23 JS

1. 함수 - 특정 작업을 여러번 반복해야 하는경우 해당작업을 재사용 가능한 구주로 만들게 되는데 이때 사용하는게 함수 - 특정 기능을 수행하는 일련의 코드 블록을 하나의 실행 단위로 만든것(사전적 정의) 1-1) 함수 선언식 - 함수 선언 키워드, 함수명, 파라미터(옵션), 코드블록, 반환 값(옵션) - 함수가 정의되었다고 자동으로 실행되는것이 아닌, 함수명을 사용해서 호출했을때 실행됨 - 함수명을 사용해서 입력 파라미터에 대응되는 인수(arguments)를 전달하면 함수에 작성된 코드블록이 실행되고 그 결과를 반환함 예제) function sum(p1, p2) { let sum = p1+p2; return sum; } let sum1 = sum(21, 24); let sum2 = sum(7, 16);..

23-02-22 JS

※ 자바스크립트 node.js : 종합적인 프로그램 관리 도구 ※ 개발 환경 구성 1. vscode 설치 2. Node.js 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. vscode에서 node.js 설치 확인 터미널 클릭 node -v npm -v 입력 후 제대로 설치됐는지 확인 3. vscode Extention 설치 ※ 자바스크립트 기본 문법 1. 자바스크립트 작성 위치 - head, body 의 마지막쪽에 작성 (효율적인 관리를 위해) - head에 작성하면 2. HTML파일 실행 2-1) 콘솔 * ..

23-02-21 CSS3 (position, transition, transform, FlexBox, 미디어 쿼리, seletor)

1. position - 기본값 static - static을 제외한 속성은 위치지정값을 사용 가능 - absolute, fixed는 static보다 앞에온다 1-1) 상대 위치 지정 요소 1-2)절대 위치 지정요소 - absolute, fixed - 세로축 포지션은 top, bottom 가로축 포지션은 left, right - absolute는 스크롤바의 영향을 받음 2. transition - 전환효과가 적용되는 css속성의 이름을 지정 - 저장된 css 속성이 변경되면 전환효과가 시작됨 3. transform - scale(x, y, z), rotate(x, y, z), skew(x, y, z), translate scale translate rotate 텍스트 skew * transition과 a..

23-02-20 css3

1. margin(외부 여백), pading (내부 여백) - 테두리와 다른 컨텐츠와의 거리 - margin만 음수 허용 - 텍스트 영역 상하 margin일때는 큰쪽 margin을 따라감 텍스트 영역 텍스트 영역 텍스트 영역 텍스트 영역 텍스트 영역 텍스트 영역 1-2) 여백을 4개로 설정하는 방법 - 순서가 가장 중요함 (위 부터 시계방향) margin: 30px auto 50px auto; ※ 4방향을 주는 속성은 모두 설정하는 방법이 같다. body {border: 1px solid blue; padding: 20px 30px 40px;} - 3개로 설정하는 방법 (기입하지 않은곳은 맞은편을 바라본다. / 2개 쓸때도 같음 / 1개는 4방향 전체) margin: 30px auto 50px; - pa..

23-02-17 CSS3

※ 복습 네이밍 규칙 class : 'camel을 사용하지 않는다' 라는 점을 꼭 기억해두자 (형태)(의미)(순서)_(상태) 순으로 작성 Block, Element, Modifier css우선순위 ※ 1. font-family 스타일 - 텍스트의 글꼴모음 1-1) 사용방법 - 글꼴 이름이 두 단어 이상이면 "" 따옴표로 묶어야 한다. - 둘 이상의 글꼴을 사용하고자 할 경우 쉼표로 구분합니다. - 적용한 폰트가 없을경우 기본폰트가 적용됨 * 웹폰트 1. .eot : ms 전용(표준에 가까움) 2. woff : 비ms - 구글폰트 사용 : https://fonts.google.com/?subset=korean&noto.script=Kore - Google Fonts Making the web more be..