본문 바로가기

개발(Development)273

[HTML] a 태그 하이퍼링크 비활성화(disable) 방법 a 앵커 엘리먼트 자체는 disable 옵션을 제공하지 않는듯 하지만, href 속성 조정을 통해 하이퍼링크를 비활성화 시킬 수 있다. a 태그의 하이퍼링크 비활성화 시키는 법 href = "#" 설정 링크는 걸리지만, 이동을 안 함 href 속성 자체를 제거 링크 자체가 안 걸림 동적 비활성화: 자바스크립트로 a 태그를 취득해서, href속성을 제거하면 된다. 링크 토글 document.querySelector(".disableLink").removeAttribute('href'); 추가 팁 비활성화 상태를 표시하기 위해 글자색을 변경하려면, a태그에 클래스를 설정해두고, CSS를 통해 조정해두면 된다. (물론 자바스크립트로 태그.style.color 값을 조정해도 된다.) 링크 비활성화.. 2021. 1. 4.
[CSS] HTML: 이미지 태그 img 여백 뜨는 문제 해결방법 img 엘리먼트에 공백 생기는 현상 및 해결 방법 a 엘리먼트 내에 img 삽입시 여백이 발생하는 현상 img, a태그 자체는 패딩도 마진도 없는데, 이미지가 뜨는 현상이 발생할 때가 있다. 자세히 보면 이미지 아랫부분이 미세하게 떠있다. 해결방법 아래의 두가지 방법중 하나를 적용하면 된다.(상황에 따라 선택 필요) img 태그의 CSS vertical-align 속성을 bottom으로 설정. img 태그의 CSS display속성을 block으로 설정. /* 첫번째 방법 */ img { vertical-align: bottom; } /* 두번째 방법 */ img { display: block; } 해결 완료 후 모습 a태그 내부에 떠있던 이미지가 여백 없이 꽉 찬다. 해결 완료! 2021. 1. 3.
맥(Mac) Homebrew, Git 설치 오류 해결 방법: /usr/local/share/man/man7, xcode-select --install Homebrew 와 Git이 설치도 안 되고, 사용도 안되는 문제가 발생. 맥 OS의 보안 강화 조치로 발생하는 이슈라고 하는데, 해결방법은 간단하다. # 에러 로그 Error : The following directories are not writable by your user: /usr/local/share/man/man7 You should change the ownership of these directories to your user. sudo chown -R $(whoami) /usr/local/share/man/man7 Error : Git must be installed and in your PATH! Error : The following formula git cannot be insta.. 2020. 12. 21.
[자바스크립트] 반복문 총정리: for in, for of, forEach 등 자바스크립트의 반복문을 정리해본다. # 자바스크립트 반복문 종류 1. for : 고전적인 for문 2. for in : 객체의 프로퍼티 키 열거 전용 3. for of : 이터러블 순회 전용 4. forEach(): 배열 순회 전용 메서드 5. while : 고전적인 while문 6. do while : 고전적인 do...while문 7. Object 객체 메서드: 객체 순회 전용 8. Array.prototye 메서드 : 배열 전용 하나씩 코드와 함께 정리해본다. # 자바스크립트 반복문 총정리 1. for 문: 고전적인 for문 => for(let i = 0; i < 10; i++){...반복 수행 코드...} for (let i = 0; i < 10; i++){ console.log(i); // 0~.. 2020. 12. 12.
[자바스크립트] 대소/동등/일치 비교 연산자와 Object.is() # 동등/일치 비교 연산자 1. 동등 비교 연산자 : ==, != 1) '값'만 비교 한다. 2) '타입' 일치 여부는 체크하지 않는다. => 암묵적 타입 변환이 발생해서 결과를 예측하기가 힘들다. console.log(1 == '1'); // true console.log(0 == ''); // true console.log(true == 'true') // false console.log(NaN == NaN); // false // 경우에 따라 숫자는 타입이 변환 되고, 불리언은 안되고, 실수하기 쉽다. 2. 일치 비교 연산자 : ===, !== 1) '값'과 '타입'까지 일치해야만 true를 반환한다. 2) NaN은 체크하지 못한다. isNaN(값) 함수로 체크 필요. console.log(1 ==.. 2020. 12. 11.
[자바스크립트] 실행 환경 ECMA Script, Web API, Node.js 예전에 node.js를 처음 다룰 때, document.getElementById()나 XMLHttpRequest가 왜 안되지... 하면서 헤매곤 했었다. 반대로 브라우저 환경에서 __dirname 등이 안 먹어서 어리둥절 했었다. 이는 자바스크립트는 실행환경에 따라 제공되는 API가 다르기 때문이다. # 자바스크립트 실행 환경 : 자바스크립트라고 하면 아래의 4가지가 연상된다. 1) ECMA Script의 문법 기준을 따르는 프로그래밍 언어 : 변수, 객체, if문, for문 등 2) 브라우저 전용 Web API : BOM, DOM, XMLHttpRequest 등 3) Node.js API(키워드, 객체, 모듈 등) : __dirname, process, path, fs 등 4) 기타 라이브러리 API.. 2020. 12. 10.
[자바스크립트] 문자열 여러번 반복 생성 방법 2가지 "a" 라는 문자를 여러개 이어붙여서 만들고 싶을 때가 있다. "aaaaaaaaaa" 라고 쳐도 되지만, a가 1000개쯤 되면 직접 타이핑하는건 개발자스럽지 못하다. (아닌가? 오히려 개발자스러운가?) 다른 언어에서는 "a" * 100을 해도 되는 경우가 있지만, 자바스크립트는 안 된다. 아래 두가지 방법으로 문자열을 n 개로 반복 생성할 수 있다. # Javascript 문자 n번 반복 생성 방법 1. String.prototype.repeat(n) : 문자열.repeat(n) => 문자열을 n번 반복 연결한 문자열 반환 * n은 반복할 횟수(정수) * n을 생략하거나, 0으로 지정시, 빈 문자열 "" 반환 "a".repeat(3); // "aaa" 반환 "abc".repeat(3); // "abca.. 2020. 12. 4.
[자바스크립트] 논리연산자(&&, ||) 단축평가 # 단축평가란? ||(논리합), &&(논리곱) 연산자는 왼쪽부터 오른쪽으로 평가를 진행하는데, 중간에 평가 결과가 나오면 오른쪽 끝까지 가지 않고 평가 결과를 반환해 버린다. 이를 '단축 평가(short circuit evaluation)'라고 하며, 피연산자의 타입을 변환하지 않고 그대로 반환한다. 단축평가를 활용하면 아래와 같은 코드가 가능해진다. "apple" || "banana"; // "apple" "apple" && "banana"; // "banana" 하나하나 차근차근 살펴 보자. 1. ||(논리합) 연산자의 단축 평가 || 의 경우, 둘 중 하나만 true면 true로 평가되므로 왼쪽 피연산자가 true이면 바로 true를 반환한다. true || false; // true(오른쪽의 fa.. 2020. 10. 15.
[자바스크립트] 변수 선언 방식 차이: var / let / const 자바스크립트의 변수 선언은 var로만 가능했으나, ES6(ES2015)부터 let과 const가 추가 되었다. 옛날의 var가 최신의 let(변수), const(상수)로 분리되었다고 생각할 수 있으나, 내부 사정은 상당히 다르다. (참고로 여전히 var도 함께 사용이 가능하다) var와 let, const가 어떻게 다른지 상세하게 정리해본다. # var, let, const 차이점 5가지 1. 중복선언 가능 여부 2. 재할당 가능 여부 3. 변수 스코프 유효범위 4. 변수 호이스팅 방식 5. 전역객체 프로퍼티 여부 #1. 중복선언 1. var : 중복 선언이 가능하다. // 첫번째 변수 선언+초기화 var a = 10; console.log(a); // 10 // 두번째 변수 선언+초기화 var a = .. 2020. 10. 14.

티스토리툴바