분류 전체보기
-
강의 듣다가 신기한 기능 발견해서 기억해두려고 적어본다! 프론트엔드 패키지 강의 끊어놓고 기본기부터 보고 있는데이렇게 html 파일에서 link 된 css 파일의 해당 클래스 관련 css가 뿅뿅 나오는 거다..!(오?) 무슨 기능일까? 바로 gpt 한테 물어봤다 😆 Emmet 미리보기 기능 - settings.json 을 통해 변경 VS Code 에서 Preferences: Open Settings(JSON) 실행 후{ "editor.quickSuggestions": { "other": true, "comments": true, "strings": true }, "editor.suggest.showWords": true, "edito..
html 파일에서 css 코드 미리보는 방법 [Emmet 미리보기 기능-Peek Definition]강의 듣다가 신기한 기능 발견해서 기억해두려고 적어본다! 프론트엔드 패키지 강의 끊어놓고 기본기부터 보고 있는데이렇게 html 파일에서 link 된 css 파일의 해당 클래스 관련 css가 뿅뿅 나오는 거다..!(오?) 무슨 기능일까? 바로 gpt 한테 물어봤다 😆 Emmet 미리보기 기능 - settings.json 을 통해 변경 VS Code 에서 Preferences: Open Settings(JSON) 실행 후{ "editor.quickSuggestions": { "other": true, "comments": true, "strings": true }, "editor.suggest.showWords": true, "edito..
2025.03.20 -
String() : 문자형으로 변환Number() : 숫자형으로 변환Boolean() : 불린형으로 변환 형 변환이 왜 필요할까?ex) 수학과 영어 점수를 입력받아 평균을 구하는 프로그램을 만들 경우const mathScore = prompt("수학 점수를 입력해주세요."); //90 const engScore = prompt("영어 점수를 입력해주세요."); //90const result = (mathScore + engScore) / 2; // 곱셈,나눗셈이 덧셈,뺄셈보다 먼저 계산되기 때문에 ()괄호를 넣어준다console.log(result); //결과 값 : 4545 결과 값이 4545로 나오는 이유: prompt로 입력받은 값은 무조건 문자형 "90"+"90" = 180이 아닌 "9090"9..
자바스크립트 기초(3)_형 변환String() : 문자형으로 변환Number() : 숫자형으로 변환Boolean() : 불린형으로 변환 형 변환이 왜 필요할까?ex) 수학과 영어 점수를 입력받아 평균을 구하는 프로그램을 만들 경우const mathScore = prompt("수학 점수를 입력해주세요."); //90 const engScore = prompt("영어 점수를 입력해주세요."); //90const result = (mathScore + engScore) / 2; // 곱셈,나눗셈이 덧셈,뺄셈보다 먼저 계산되기 때문에 ()괄호를 넣어준다console.log(result); //결과 값 : 4545 결과 값이 4545로 나오는 이유: prompt로 입력받은 값은 무조건 문자형 "90"+"90" = 180이 아닌 "9090"9..
2024.12.31 -
alert() : 알려줌 - 메세지를 띄우고 확인 버튼을 누르기 전까지 계속 띄워져 있음prompt() : 입력 받음 - 입력 필드 제공confirm() : 확인 받음 - true / false 값 반환 alert 활용 const name = prompt("이름을 입력하세요."); //alert("환영합니다, " + name + "님"); alert(`안녕하세요, ${name}님. 환영합니다.`); //위 코드 백틱으로 변환 console.log(name) prompt 활용 //prompt는 두개의 인수를 받을 수 있음. //인수란 함수를 실행하는 과정에서 들어가는 값 const name2 = prompt("예약일을 입력해주세요.", "2020-10-"); //두번째 인수는 입력받을 default 값..
자바스크립트 기초(2)_alert/prompt/confirmalert() : 알려줌 - 메세지를 띄우고 확인 버튼을 누르기 전까지 계속 띄워져 있음prompt() : 입력 받음 - 입력 필드 제공confirm() : 확인 받음 - true / false 값 반환 alert 활용 const name = prompt("이름을 입력하세요."); //alert("환영합니다, " + name + "님"); alert(`안녕하세요, ${name}님. 환영합니다.`); //위 코드 백틱으로 변환 console.log(name) prompt 활용 //prompt는 두개의 인수를 받을 수 있음. //인수란 함수를 실행하는 과정에서 들어가는 값 const name2 = prompt("예약일을 입력해주세요.", "2020-10-"); //두번째 인수는 입력받을 default 값..
2024.12.31 -
변수?어떠한 그릇에 값을 담아서 재사용이 가능하게 만들어 주는 것 ex) name = "Minji" // 문자형 Stringage = 29; // 숫자형 Number (숫자형은 사칙연산 가능) -> 하지만 이 경우 name 값을 아래에서 다시 할당해주면 초반에 선언했던 "Minji" 라는 값은 날아감 그래서 '변수 선언' 이라는 것을 해주어야 하는데변수를 선언하는 방법에는 let과 const가 있다. let 은 바뀔 수 있는 값let count = 0;count += 1; // count를 증가시킴console.log(count ) // -> 1; const 는 바뀌지 않는 값ex) const PI = 3.14; // 바뀌지 않는 값const SPEED_LIMIT = 50; // 최댓값const BI..
자바스크립트 기초(1)_변수변수?어떠한 그릇에 값을 담아서 재사용이 가능하게 만들어 주는 것 ex) name = "Minji" // 문자형 Stringage = 29; // 숫자형 Number (숫자형은 사칙연산 가능) -> 하지만 이 경우 name 값을 아래에서 다시 할당해주면 초반에 선언했던 "Minji" 라는 값은 날아감 그래서 '변수 선언' 이라는 것을 해주어야 하는데변수를 선언하는 방법에는 let과 const가 있다. let 은 바뀔 수 있는 값let count = 0;count += 1; // count를 증가시킴console.log(count ) // -> 1; const 는 바뀌지 않는 값ex) const PI = 3.14; // 바뀌지 않는 값const SPEED_LIMIT = 50; // 최댓값const BI..
2024.12.30 -
다시 JavaScript 공부를 제대로 하기 위해 mdn 문서를 보고 기본기를 다시 익혀보자. h1>Hello World!h1> img src="images/a.png" alt="이미지 변경"> button>Change userbutton> h1>h1> ,-
JavaScript 기본다시 JavaScript 공부를 제대로 하기 위해 mdn 문서를 보고 기본기를 다시 익혀보자. h1>Hello World!h1> img src="images/a.png" alt="이미지 변경"> button>Change userbutton> h1>h1> ,-
2024.12.20 -
의미가 있는 이미지를 사용할 때는 이미지의 대체 텍스트를 반드시 작성해주어야 한다 웹 접근성 측면에서 개발자는 이미지를 볼 수 없는 환경 혹은 시각장애를 가진 사용자를 고려해야 하기 때문 image 태그 사용시 alt="" 값에 이미지에 대한 설명을 써주지만 background에 이미지를 삽입하는 상황에서는 어떻게 대체 텍스트를 작성할 수 있을까? 또 image 태그의 alt 속성에 작성해야 할 텍스트가 너무 길어지는 상황에서는 더 시맨틱하게 의미를 전달할 방법은 없을까? IR기법이란? Image Replacement 의 약자로, 이미지를 볼 수 없는 사용자에게 이미지에 대한 설명을 제공해야 할 때 사용자에게 대체된 텍스트를 제공하는 기법. 방법 1) text-indent 활용 text-indent : ..
IR(Image Replacement)기법의미가 있는 이미지를 사용할 때는 이미지의 대체 텍스트를 반드시 작성해주어야 한다 웹 접근성 측면에서 개발자는 이미지를 볼 수 없는 환경 혹은 시각장애를 가진 사용자를 고려해야 하기 때문 image 태그 사용시 alt="" 값에 이미지에 대한 설명을 써주지만 background에 이미지를 삽입하는 상황에서는 어떻게 대체 텍스트를 작성할 수 있을까? 또 image 태그의 alt 속성에 작성해야 할 텍스트가 너무 길어지는 상황에서는 더 시맨틱하게 의미를 전달할 방법은 없을까? IR기법이란? Image Replacement 의 약자로, 이미지를 볼 수 없는 사용자에게 이미지에 대한 설명을 제공해야 할 때 사용자에게 대체된 텍스트를 제공하는 기법. 방법 1) text-indent 활용 text-indent : ..
2024.01.30