본문 바로가기

전체 글

(30)
FES7 6주차, 7주차 멋쟁이 사자처럼 프론트엔드 스쿨 7기 6, 7주차 후기 새로 알게 된 것 javascript 메서드 얕은복사, 깊은복사 특이사항 js100제 2권 시작 독서 - 박미정의 깃 & 깃허브 입문 참고 Git branch 기본 사용법 및 Github 협업 방법 1. Git Branch 기본 사용법 - Git Branch 생성 - Git Branch 전환 - Git Branch 목록 확인 - Git Branch 삭제 - Git Branch 병합 2. Git Branch, Github 협업 방법 - Git으로 작성한 코드 Github에 Push하기 - Git으로 작성한 코드 Git coduking.com [GitHub] GitHub로 협업하는 방법[1] - Feature Branch Workflow - Heee's..
javascript를 이용한 D-day 계산기 만들기! (feat.수능) 수업 시간에 배웠던 기념일 계산기를 활용해 수능 D-day 안내 페이지를 만들어 보기로 했다. 일단 결과 화면! 캘린더에 디데이 남은 날이 표시되고 그 아래에 시간까지 카운팅 되도록 제작했다. 코드를 살펴보도록 하자! 변수 선언 const now = new Date(); const test = new Date('2023-11-16') // 2023 수학능력시험 날짜 우선 Data 객체를 생성자로 호출해 현재 날짜와 시험 날짜를 담는 변수를 각각 선언해 준다. ( Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정숫값을 담는다) Date - JavaScript | MDN JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타..
FES7 5주차 WIL 멋쟁이 사자처럼 프론트엔드 스쿨 7기 5주차 후기 새로 알게 된 것 이미지 최적화 이미지 파일의 크기가 초기 구동 속도에 관여하기 때문에 이미지 최적화가 중요함 모든 이미지가 100KB를 넘지 않도록 최적화해 사용하는 것이 좋음 원시타입 변수 [Javascript] 원시타입 변수, String, Number, Boolean, undefined, null, nullish, 단락회로평가 원시타입(Primitive Types)이란? 원시타입의 값은 변경 불가능하며 값을 변수에 저장하거나 전달할 때 값에 의한 전달을 한다. 따라서 원시 값을 다른 변수에 할당할 때는 값의 참조가 저장되는 것이 syeoi.tistory.com console.log()와 console.dir()차이 [Javascript] HTML ..
[Javascript] 원시타입 변수, String, Number, Boolean, undefined, null, nullish, 단락회로평가 원시타입(Primitive Types)이란? 원시타입의 값은 변경 불가능하며 값을 변수에 저장하거나 전달할 때 값에 의한 전달을 한다. 따라서 원시 값을 다른 변수에 할당할 때는 값의 참조가 저장되는 것이 아닌, 값 자체(가리키고 있는 값을 따라가서 실제 메모리에 저장된 주소)가 복사되어 저장된다. string, number, bigint, boolean, undefined, symbol, null이 원시타입에 속한다. let str1 = 'hello'; let str2 = str1; console.log(str2); // 'hello' str1 = 'world'; console.log(str2); // str2에 할당된 값은 여전히 'hello' // str1의 값이 재할당 되고난 뒤 str2의 값은 ..
[Javascript] HTML 삽입 위치, 브라우저 API console.log()와 console.dir()차이, 변수 선언 방법 1. Javascript 삽입 위치 인라인 스크립트, 내부 크립트, 외부 스크립트로 삽입 가능하다. 클릭해보세요! 인라인 스크립트는 실무에서 극히 제한적으로 사용한다. 내부 스크립트, 외부 스크립트로 삽입할 경우 script 태그의 위치는 body 태그 안 맨 하단에 위치하는 것을 권장한다. --> 문서의 DOM 구조가 완료된 시점에 실행되기 때문에 추가 설정이 필요 없다. 외부 스크립트로 삽입하는데 head 태그 안에 위치한다면, defer 속성을 추가해 마지막에 읽을 수 있게 만들어 준다. 2. 브라우저 API BOM(Browser Object Model)은 브라우저에서 제공하는 API로 자바스크립트를 통해 브라우저에서 제공하는 기능들을 사용할 수 있도록 도와주는 역할을 한다. 더보기 API란? AP..
FES7 4주차 WIL 멋쟁이 사자처럼 프론트엔드 스쿨 7기 4주차 후기 새로 알게 된 것 flex로 세로 중앙 정렬을 하면 브라우저창이 작아졌을 때 상단이 잘리는 현상 발생 margin : 0 auto; 속성을 추가로 줘서 해결 체크박스는 가상요소 사용해서 만들지 않기 input태그로 만든 후 label 태그로 감싸 그 안에서 스타일 적용을 하면 된다. 가상요소로 만들경우 동적 구현이 힘들다. IR(Image Replacement)기법 스크린 리더 사용자를 위한 기업의 CSS IR(Image Replacement) 기법 IR(Image Replacement) 기법이란? 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 넣는 방법을 말한다. 단순히 스크린 리더 사용자뿐 아니라 검색 엔진 최적 s..
[JavaScript] 로또 번호 추첨기 만들기 로또 번호 생성 알고리즘을 자바스크립트로 작성해 보자. //로또 추첨기 var lotto = []; while(lotto.length a-b); document.write(lotto); 1. 1~45개의 숫자 중 랜덤으로 1개의 숫자를 뽑는다. Math.random(); // 0보다 크거나 같고, 1보다 작은 실수를 랜덤으로 반환하는 메서드 이다. Math.random() * 45; // 45를 곱해 0보다 크거나 같고, 45보다 작은 실수를 반환할 수 있도록 만들어준다. Math.random(..
스크린 리더 사용자를 위한 기업의 CSS IR(Image Replacement) 기법 IR(Image Replacement) 기법이란? 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 넣는 방법을 말한다. 단순히 스크린 리더 사용자뿐 아니라 검색 엔진 최적화를 위해서도 필수적이다. 보이지 않는 텍스트를 넣을 때 주의해야 하는 경우는 다음과 같다. 1. visbility: hidden; , display:none; VoiceOver, Talkback 모두 읽지 못한다. 2. text-indent: -9999px; 초점이 화면 좌측 끝, 실제 콘텐츠와 다른 위치에 접근되게 되며, 터치해 탐색으로 접근이 불가능하다. 3. position:absolute; 부모 요소의 블록 따라 초점이 상단으로 튀는 현상이 발생한다. 4. fonr-size: 0; VoiceOv..