본문 바로가기

반응형

전체 글

(362)
[node.js] node.js 서버 환경에서 css 파일 적용하는 방법 노란색으로 표시된 파일들을 기준으로 index.html 파일에 css를 적용한다고 가정 //server로 쓰이는 js 파일로 와서 상단에 아래와 같이 작성 app.use('/public',express.static('public')); //ㄴ 앱(app)에서 사용한다(use) /public 경로에 있는 모든 파일을 정적(static) 파일로, // 정적 파일: 수정이 거의 없는 파일
[html] 비디오 태그에서 자동 플레이가 안 될 경우 해결책 보호되어 있는 글입니다.
Cross-Origin Read Blocking(CORB) 관련 내용 링크 프로젝트를 만드는 중 video 태그에 src 속성으로 유튜브 영상과 연결토록 지정한 후 영상을 불러오는데, 아래와 같이 CORB 문구가 뜨면서 네트워크 요청은 성공했지만, 사이트와 연결은 차단되는 아이러니한 문제가 발생했다. Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.youtube.com/watch?v=46x7PRyNL3Q with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details. 일단 이게 뭐지 싶어서 파파고에 해석을 부탁했더니 교차 출처 읽기로 차단되었다는 것을 알게 되었다. 더 정확히..
[CSS] box-shadow 참고용 box-shadow "태그에 그림자 효과 넣음" /* x축 | y축 | 번짐정도 | 그림자 크기(퍼짐정도) | 그림자 색상 | 옵션(inset 등) */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2) inset; 'x축, y축' : 수평축과 수직축을 의미한다. 음수 값을 사용할 수 있다. '그림자 번짐(번짐정도)' : 그림자의 퍼짐 정도를 나타낸다. 값이 커질수록 그림자의 테두리가 흐려지면서 밝아진다. '그림자 크기': 그림자의 크기를 의미한다. 값이 커질수록 그림자 사이즈가 커지고, 반대는 작아진다. '그림자 색상' : 그림자의 색상을 결정한다. 'inset'(옵션) : 그림자를 적용하는 태그의 내부에 그림자 효과를 넣는다. 적용 color1 color2 color..
[javascript] 프로토타입과 상속, 그리고 프로토타입 체인, 최상위 프로토타입 공부한거 정리용 작성순서 1. 프로토타입이란? 2. 프로토타입의 상속 3. 프로토타입 체인(및 프로토타입 체이닝) 4. 최상위 프로토타입(모든 프로토타입의 뿌리) 1. 프로토타입(Prototype) 이란? 프로토타입은 한글로는 '원형' 을 의미한다. 원형은 어느 대상의 근본이 되는 형태라고 이해할 수 있다. 이 원형을 우리 신체적 특성으로 가져온다면, '유전자' 라고 이해할 수 있다. 이러한 유전자에는 우리 신체를 이루는 모든 정보들이 저장되어 있다. 이를 기반으로 자바스크립트가 프로토타입을 기반으로 하는 객체 지향 언어라고 했을 때, 우리가 사용하고 있는 array, function 등의 객체의 모든 관련 정보들이 프로토타입 이라는 유전자에 저장되어 있다는 말로 이해할 수 있다. 즉, 프로토타입은 우리..
[javascript] webpack 기초 공부 정리 미완성 | 입맛대로 공부하며 정리중(공부가 목적이므로 환경설정 가이드 라인이 아님) 번들링의 필요성 0. npm init 으로 package.json 파일 생성하기 1. webpack 설치 "의존성 패키지들을 하나의 코드로 압축해주는 유명 번들러 중의 하나" 2. webpack.config.js "웹팩의 부수적인 기능 설정을 위한 파일" 3. entry , output "의존성의 시작점과 번들 파일이 생성될 경로" 4. package.json 의 script 속성에 웹팩 실행 빌드 명령어 만들기 5. [터미널] - npm run build 입력해서 웹팩 실행하기 6. HTMLWebpackPlugin 설치 후 설정 "자동으로 번들 파일이 스크립트로 첨부된 html 파일 생성해준다" 7. webpack-de..
[javascript] 모바일에서 터치 이벤트 구현 보호되어 있는 글입니다.
[javascript] 드래그 이벤트로 형제 태그 끼리 위치 교환 하기 보호되어 있는 글입니다.

반응형