[프론트엔드] (해결중) after 요소 height 조절 (참조하는 원 요소가 2줄 이상일 때)
·
프론트엔드
목표 HTML, CSS, Javascript를 이용해 타이핑 효과를 주는 웹사이트를 https://www.youtube.com/watch?v=e56H5n1SvEs&list=PL-eeIUD86IjSyxTbGT7wY3Hie_HA5bKvg&index=1 이 영상을 참고해 만들고 있었다. 이때, 문구가 2줄 이상이 넘어가면 커서 효과도 같이 height가 늘어난다는 것을 알 수 있다. 싫다! 나는 문구(Welcome to 1006lem's Blog!)가 2줄이 넘어가면, 커서효과도 마지막 줄(2번째 줄)에만 적용되었으면 좋겠다. 즉, 내가 원하는 모습은 다음과 같다. 상황/문제 주요한 html코드는 다음과 같다. 1006lem | github 글씨는 로 지정했고, let target = document.quer..
[프론트엔드] CORS 에러 해결
·
프론트엔드
상황프로젝트 진행 중 웹사이트 구축하여, 백엔드와 프론트엔드를 연결하려 할 때 발생했다. - 프론트엔드: react로 구축 (localhost:3000)- 백엔드: go gin으로 구축 (localhost:8081) 현재, 백엔드 API와 postman 테스트는 원활하게 잘 된다 !문제에러 고르에서 설명하는 이유는 CORS (Cross Origin Resource Sharing) 에러이다. 우선 이를 알아보기 전, 비슷한 개념인 Same Origin Policy부터 알아보자.Same origin Policy (동일 출처 정책) 에러 Origin(출처)란 protocol, host(=domain), port 을 합친 것을 말한다.즉, 이 셋 중에서 하나라도 다르다면 다른 Origin 이라는 것이다  즉, ..
(맥 사파리/크롬) 웹브라우저에서 개발자모드로 요청 패킷 헤더보기
·
기타
맥북 기준으로 작성 웹 브라우저는 safari, chrome 둘 다 가능하다. safari 1. 개발자 모드 열기 option + command + i 클릭 2. 네트워크 탭 클릭 왼쪽에 나열되어 있는 것이, 네이버 접속 시 받아온 리소스이다 ! (수행된 수많은 요청의 response) 이 중 하나인 html 파일인 m.naver.com을 클릭해보면, 미리보기: m.naver.com 리소스(html) 을 볼 수 있다 ! 헤더: 웹 브라우저 -> 서버 요청 패킷 헤더 및 응답 패킷 헤더 쿠키: 서버에서 발급한 쿠키값으로, 웹 브라우저가 저장할 것 (암호화하지 않는다는 것 확인 가능) 크기: 패킷 크기 (전체, 헤더, 페이로드(리소스)), 리소스 형식 확인 가능 시간: 요청 후 ~ 응답 시간, 응답 도달 ~..
글꼴 사이트 / 티스토리 글꼴 편집
·
기타
글꼴 사이트 1. 눈누 눈누 상업용 무료한글폰트 사이트 noonnu.cc 웹폰트 사용 쉬움 (코드 복사 가능) !!!!!! (css에 적용할 때에는 주로 이 사이트 이용) 로그인 - 다운로드 시 필요 x , 폰트 질문 시 필요 다운로드 시에는 원본 사이트로 리다이렉트 (안심 다운로드 가능) 라이센스 요약표가 있어 손쉽게 적용 가능 테스트 문구 작성하고, 그 문구대로 폰트 검색 가능 웹사이트/영상물 등에서 폰트 질문도 가능 (단, 폰트 질문은 로그인 해야만 볼 수 있음) 2. 공유마당 무료폰트(목록) | 공유 마당 gongu.copyright.or.kr 로그인 x 다운로드 시에는 ZIP파일 다운로드 가능 공신력있는 사이트 (한국저작권위원회) (+ 추가로, 글꼴 뿐 아니라 이미지. 음악 등도 다운로드 가능)..
[python] list - flatten
·
python
알고리즘 문제를 접하다가, python list 중 3차원 리스트를 2차원 리스트로 변환할 경우가 생겼다 어찌저찌 구현은 했는데, 좀 더 쉬운 방법을 발견해 정리하고자 작성한다. (1) 함수 sum (간단하게 사용 가능) (2) list comprehension [1] 목표 설정 # case 1 [[1], [2, 3]] -> [1, 2, 3] # case 2 [[[(1, 1), (2, 2)], [(3, 3), (4, 4)]]] -> [[(4, 4), (1, 1), (3, 3), (2, 2)]] # case 3 ([1], [2, 3]) -> [1, 2, 3] # case 4 [([(1, 1), (2, 2)], [(3, 3), (4, 4)])] -> [[(4, 4), (1, 1), (3, 3), (2, 2)..
[python] list - 2중, 3중 리스트 생성
·
python
일단 2중, 3중 리스트 생성 시 기억해야 할 점은 1. 리스트는 for _ in range() 구문과 * 구문의 적절한 조합으로 생성 가능하다는 것, - * 사용 시 자동으로 1회 unpacking이 이루어 진다는 것 - for _ in range() 사용 시 자동 unpacking은 없으나, 타입이 generator 객체이므로 list로 형변환 할 것 2. for _ in range() 구문에서 순서 주의할 것 (column -> row 순서 ) 이 두 가지이다. 경우에 따라 나눠, 자세히 알아보자. 1. 2중 리스트 생성 [1] 목표 설정 예를 들어 다음과 같은 row = 3, column = 2인 2중 리스트를 생성한다고 가정하자. 즉, [[0, 0], [0, 0], [0, 0]]인 리스트를 생성..