
명령행에서 UnauthorizedAccess 오류 발생시 해결하는 법 Sass를 설치하고 버전을 확인하려고 sass --version을 실행하였는데, 이것이 CMD 명령프롬프트에서는 잘 진행되는 반면 VS code 터미널에서는 "이 시스템에서 스크립트를 실행할수 없으므로 어쩌고..."붉은 글씨로 계속 오류만 발생했다. 그래서 찾아보니 이러한 문제는 보안상의 이유로 발생하는 에러이고, 해결하기 위해서는 관리자 권한으로 실행정책을 변경해주면 된다고 한다. 1. 윈도우 시스템의 파워셀 앱을 관리자 권한으로 실행한다. 2. ExcutionPolicy명령어를 실행한다. =>현재의 정책이 Restrcted로 되어 있다. !! 이것이 문제 3. 정책 변경을 위해 Set-ExecutionPolicy Unrestrice..

[css] 트랜지션 (Transition) 트랜지션은 css 프로퍼티의 값이 변화할 때, 그 변화가 일정시간(duration)에 걸쳐 일어나도록 하는 것. div { width: 100px; height: 100px; background: red; /* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */ transition: all 2s; } div:hover { border-radius: 50%; background: blue; } 원래 div요소가 hover상태가 되면 border-radius와 background 프로퍼티의 값이 즉시 변경되는데, transition: all 2s 를 추가함에 따라 2초에 걸쳐 변경이 된다. - transition은 자동으로 발동되지 않는다. :hov..
브라우저의 렌더링 원리 *파싱: 구분 분석 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷이나 게코 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTM,CSS, JavaScript로 렌더링할 때 CRP(ctritical rendering path)라는 프로세스를 사용하며 다음 단계들로 이루어진다. 1. html 파싱 후, Dom트리 구축 2. css 파싱 후, CSSOM트리 구축 3. javascript 실행 주의 ! html 중간에 스크립트가 있다면 html파싱이 중단된다. 4. DOM과 CSSOM을 조합하여 렌더트리 구축 주의! display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다. 5. 뷰포트 기반으로 렌더트리의 각 노드가 가..
차례대로 html -> css -> javaScript 코드이다. Log In .hidden { display: none; } const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); function onLoginSubmit(event) { event.preventDefault(); loginForm.classList.add("hidden"); const username = loginInput.value; localStorage.setItem("user..

수평 / 수직 중앙 정렬 1. 수평 정렬(Horizontal Align) 1.1 inline / inline-block 요소 정렬 대상요소(텍스트 또는 링크 등의 inline 레벨 요소 또는 inline-block레벨 요소) 의 부모 요소에 text-align: center; 를 지정한다. .container { text-align: center; } 1.2 block 요소 정렬 대상 요소에 너비를 명시적으로 지정하고 margin-right와 margin-left 프로퍼티에 auto를 지정한다. 정렬 대상 요소에 너비를 명시적으로 지정하지 않으면 너비는 full width가 되므로 중앙 정렬이 필요없다. .item { width: 200px; margin: 20px auto; } 1.3 복수의 block..
1. display 프로퍼티 - layout정의 에 자주 사용되는 중요한 프로퍼티다. block - block 특성을 가지는 요소로 지정 inline - inline 특성을 가지는 요소로 지정 inline-block - inline-block 특성을 가지는 요소로 지정 none - 해당 요소를 화면에 표시하지 않는다. (공간조차 사라진다.) 모든 html 요소는 아무런 css를 적용하지 않아도 기본적으로 브라우저에 표현되는 디폴트 표시값을 가진다. html요소는 block또는 inline 특성을 가진디. 1.1 block 레벨 요소 항상 새로운 라인에서 시작한다. 화면 크기 전체의 가로폭을 차지한다. width, height, margin, padding 프로ㅍ티 지정이 가능하다. block 레벨 요소 ..
- 타입변환이란? 자바스크립트의 모든 값은 타입이 있다. 값은 다른 타입으로 개발자에 의해 의도적으로 또는 자바스크립트엔진에 의해 암묵적으로 변환할 수있다. 개발자에의해 의도적 = 명시적 타입 변환 / 타입 캐스팅 자바스크립트 엔진에의해 = 암묵적 타입 변환 / 타입 강제 변환 var x =10; // 암묵적 타입 변환 // 숫자 타입 x의 값을 바탕으로 새로운 문자열 타입의 값을 생성해 표현식을 평가. var str = x + ''; console.log(typeof str, str) // string 10 // 변수 x의 값이 변경된 것은 아니다. console.log(x); //10 암묵적 타입 변환은 변수 값을 재할당해서 변경하는 것이 아니라 자바스크립트 엔진이 표현식을 평가하기 유ㅣ해 기존 값을..
- Total
- Today
- Yesterday
- 환테크 #엔화투자 #환전수수료 #토스
- CSS
- spread operator
- HTML #폰트태그 #이미지태그
- React #React기초 #Reactdocs
- DeepDive
- ㅊC
- 개구리게임
- Internet
- git #github #코딩애플
- flex
- dns
- html
- 자바스크립트 #
- ip address
- network
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |