본문 바로가기

분류 전체보기

(94)
JS async 와 defer의 차이점 async : 병렬적 head에 script 를 삽입 js 불러오는 순서 : HTML> 일단 block >다시 HTML > js파일 다운 장점 : js 파일을 병렬적으로 받아서 시간절약할 수 있지만 단점 : js가 준비되지않은 상태로 html 실행될 수 있음 defer : head에 script 를 삽입 js 불러오는 순서 : HTML 전부 불러온후> js파일 다운
Vanilla JS 기초 2 Javascript 문법 매우 중요함! ① , 빼먹지말기 ② string 쓸때 앞뒤에 꼭 "" ③ console.log로 확인해서 에러찾기 console.log(yeongInfo.favFood); ->여기서 console은 Object임. console이라는 object가 있고 log라는 키가 있다. ->*console은 yeongInfo보다 훨씬 큰 object임 * console.log(console)도 가능 -> console이란 object 안에 있는 함수! console.log()안에 메세지가 없으면 작동X function 이란? ->어떤걸 수행하려는 한 부분, 원하는 만큼 쓸 수 있음 -> 한조각의 코드, 여러개 내가 가져다 쓸 수 있는! 함수 만드는법 (함수에게 외부에 있는 데이터를 주는 방..
Vanilla JS 기초 1 변수 Variable 사용법 : 1. 만들기 let a = 5; *1과 2 동시에도 가능 2. 초기화 let b = 221 - a; 3. 사용 console.log(b); 상수 Constant const a = 221; let b = a - 5; a = 4; so yeong Boolean True or False const what = true; false; Number const num = 666; console.log(num); console > 666 Float 숫자인데 소수점 있음 const float = 55.1; 위 데이터 타입들 정렬법 1.Array : DB에서 가져온 리스트 데이터, 단지 list임 2.Object : object는 각 value에 이름을 줄 수 있음 실제 객체를 만들어줌 ..
CSS gradient background-image: linear-gradient(to 방향, 색상1, 색상2);
CSS reset 할때 신경써줄것 리셋 잘안되는 것들! a { text-decoration : none; } ,, button,textarea,input { font-family : "", sans-serif; } ,, ul,ol,li { list-style-type: none; padding-left : 0; margin-left: 0 ;}
CSS selector · 요소, class, ID선택자 : * 여러개 clss 가질때 ex) 선택법 : .box-0, .box-1, .box-2 .box-0.box-1 .box-0.box-2 .box-1box-2 .box-0.box-1.box-2 ex) 선택법 : #so .box #so.box · 자식, 자손, 형제 선택자 : * 자식선택자 : parent > child * 자손선택자 : parent descendants => 모든 자손 선택 * 형제선택자 : parent + sibling ex) .active+li = active 다음에 오는 li 한개만! 선택 parent ~ sibling ex) .active~li = active 다음에 오는 모든 li선택 가상클래스 (structural pseudo-class) : *..
CSS media-query /* ##Device = Desktops ##Screen = 1281px to higher resolution desktops ##Device = 데스크탑 ##Screen = 1281px 이상 해상도 데스크탑 */ @media (min-width: 1281px) { //CSS } /* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px ##Device = 랩탑, 데스크탑 ##Screen = 1025px에서 1280px 사이*/ @media (min-width: 1025px) and (max-width: 1280px) { //CSS } /* ##Device = Tablets, Ipads (portrait), ##Screen = B/w 768px to..
CSS transform ★다시정리