끝까지 처음처럼

오전기본 노드 검색 item1 item2 item3 item4 item5 item6 item7 item8 //swiper 가운데 아래 List 버튼 //swiper 이전 버튼 //swiper 다음 버튼

오전키보드 eventkeydown: 모든 키가 눌렸을 때 실행, 눌린 키의 코드 제공keypress: 문자, 숫자, 기호 등 출력 가능한 키가 눌렸을 때 실행keyup: 눌렸던 키가 놓아졌을 때수업 들으면서 헷갈린 함수,속성 정리innerHTML : innerText 와는 달리 요소(element) 안의 HTML 을 가져옴innerText : 요소 안의 text 값들만을 가져온다.element.value : value값을 불러올 수 있다..target : 이벤트가 발생한 요소를 반환해준다Array.from() : 유사배열을 배열로 형변환 시켜서 만들어준다// 1. 문자열을 배열로 만드는 예시console.log(Array.from("Hello"));// [ 'H', 'e', 'l', 'l', 'o' ]/..

오전삼항연산자 :(조건) ? value1 : value2조건이 참인경우 value1 이 실행되고 거짓(false)인경우 value2 가 실행된다.if문var score = 96;if (score >= 90){ console.log("점수 : A"); // 해당문 실행}else if (score >= 80){ console.log("점수 : B");}else if (score >= 70){ console.log("점수 : C");}else if (score >= 60){ console.log("점수 : D");}else { console.log("점수 : F");} //if문 예시. 점수에 따라 등급이 나오게 되어있다.for문for(let i = 0; i // 행열값은 prompt로 받음 ..

오전javascript 배열우선 자바스크립트 배열은 한 배열안에 여러 종류의 자료형을 같이 쓸 수 있다.arr = [1,2,3,'대해',123123.12414,'ㅂㅇ']그리고 java에서는 배열에서 없는 인덱스 값을 입력하면 오류가 나는데 js는 지정 인덱스에 값이 없다면 그 값을 새로 생성한다.const arr = [1,2,3]console.log(arr[2]) //가능arr[5] = 'a' //5번 째 인덱스에 'a' 값이 생성됨//그러나 그 사이에 값은 undefined로 지정됨이를 “동적 처리” 라고 함.콜백함수란? :다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수 를 말한다. 그리고, 함수를 만들때, parameter 를 함수로 받아서 쓸 수 있는데 그 함수를 “콜백 함수” 라고..

오전부트스트랩 사용법 배우는 중 부트스트랩 만으로 레이아웃 만들어보기 하는 중 tr td테이블 생성오전 마지막 시간 자바스크립트 시작오후javascriptundefinednull둘의 차이 *** : undefined은 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. 즉, undefined는 자료형이 없는 상태이다.변수이름 선언할 때 보통 카멜표기법 많이씀 , 함수 이름도(첫글자 소문자. 단어 시작할 때 대문자)defer :defer 속성defer 속성은 스크립트를 '백그라운드'에서 다운로드한다.그리고 defer 스크립트는 일반 스크립트와 마찬가지로, 순서를 지키며 실행되므로 앞선 script가 무겁고 뒤의 스크립트가 가볍다고 해도 순서대로 실행된..

오전클론코딩 계속 작업중.. 오늘 클론코딩을 js(자바스크립트) 없이 css만 사용해서 만들기를 하고 있는데 하면서 깨달은 점이 있다.css 만으로도 웹페이지 기능들을 구현가능하지만 너~~~무 오래걸린다.(선생님조차도 배너 하나 만드는데 몇시간이 걸렸음..) css만으로 웹페이지를 만드려고 하면 선택자를 일일히 다 지정해주어야 하기 때문에 일이 너무 복잡해지고 힘들어진다.이럴 때는 js를 사용해서 변수로 작업해야 작업이 수월해짐..banner>.slide-block>#s2:checked~.slide-wrapper{ left:-1160px; opacity: 1;} // id s2가 체크 됐을 때 .slide-wrapper 클래스가 -1160px 만큼 이동.banner>.slide-block>#s..

오전미디어쿼리 : 반응형 웹을 제작하고자 할 때 사용한다.사용법은@media screen and (min-width:375px) and (max-width: 400px) { /*코드 작성*/} //가로너비 375 이상 400 이하일 때 미디어 쿼리 안의 css 를 적용한다는 뜻이다. 분기점 : 스마트폰 세로: 0px ~ 480px스마트폰 가로, 태블릿 : 481px ~ 768px태블릿 가로, 노트북 : 769px ~ 1279px데스크탑 : 1280px ~ (1920px 까지 보통 많이 사용함)이에 맞게 미디어 쿼리를 작성한다면/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/@media all and (min-width:1024px) and (max-width:1279px) { //..

오전현재 TransForm 배우는중 요소가 부드럽게 변하는 효과 주기sitemenu체크박스 만든후에밑에다가 block 속성의 span 태그 3개 만듬 여기서 오른쪽 위 막대3개를 클릭하면 wrapper의 background 색이 바뀐다.visibility : hidden ; 은 말 그대로 요소를 숨기는 것 뿐이기 때문에display: none ; 과 다르게 공간을 여전히 확보중이기 때문에 레이아웃에 영향을 미치고 있는 상태이다.Transform3Dperspective : 뷰어와 요소와의 거리transform-style : 요소의 표현 방식 a{text-decoration: none; color:black;} .top-header>ul{ display: flex; ..

오전display : flex박스안의 요소들을 가로로 배치하는 속성.여기에 보통 같이 많이 사용하는게justify-content : 축 수평방향 정렬flex-start : flex 방향 시작점 기준 (기본값)flex-end : flex 방향 끝점 기준center : 중앙 정렬space-between : flex 방향 양 끝점 기준 (양 끝에 붙혀서)space-around : flex 방향 중앙점과 양 끝 기준 (양 끝과도 간격을 둠)align-items : 축 수직 방향 정렬stretch : 수직 방향에 최대한 늘려서 (기본값)flex-start : 수직 방향에 위쪽flex-end : 수직 방향에 아래쪽center : 수직 방향 가운데baseline : 컨테이너의 기준선에 배치flex-wrap자식 요소들..

오전체크박스체크박스를 만들어주는 속성이메일 수신 동의//id를 지정해서 속성을 주도록 자주 사용한다.css style 에서 선택자input[type=’checkbox’]{}a 태그a:hover{ //a태그에 마우스 커서를 갔다 댔을 때a:active{ //a태그를 클릭(active)했을 때a:visited{ //a태그를 한번이라도 사용(클릭)하고 났을 경우.position **(중요)position : box의 위치를 지정할 때 사용하는 속성static(Default) :box요소가 문서 흐름에 따라 배치(순차적)relative :box요소가 문서 흐름에 따라 배치(순차적)요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다.absolute :상위 box요소롤 기준으로 위치 지정가능..