전체 글
-
React. 쉬운 시작. 마인드 셋.JavaScript 2024. 4. 27. 19:55
html 파일에 직접 짜지 않고 html 요소를 javascript에서 작성해서 html파일에 넣어주는 것의 일종인데 이렇게 작업하는 이유는 관리의 유용함. 재사용성을 높이기 위함. 순수 자바스크립트로는 매번 queryselector 함수와 innerHtml 함수의 파티로 복잡해간단하게 작성 할 수 있게 해준 것이 vue니 react니 하는 프레임워크들이려나.. jquery도 간단하게 작성해주는 도구. html을 javascipt파일에 작성하다 보니 아래와 같은 충돌이 생겨 규칙이 생겨남! 1. 태그에 class="" 를 쓰면 자바스크립트 class랑 같아 className=""으로 작성할 것.2. 변수를 {} 중괄호 안에 넣어 데이터를 전달 할 수 있다.3. 태그에 className 대신 인라인 스타..
-
sass로만 랜덤한 크기의 원을 랜덤한 포지션에 위치시키기카테고리 없음 2024. 4. 21. 21:34
$min-radius: 10px; $max-radius: 50px; $container-width: 100px; $container-height: 100px; @for $i from 1 through 10 { $random-x: random($container-width); $random-y: random($container-height); $random-radius: random($max-radius - $min-radius) + $min-radius; .circle-#{$i} { width: $random-radius; height: $random-radius; border-radius: 50%; background-color: blue; position: absolute; top: $random-y..
-
구글 검색 시 내 사이트가 노출 안되게 하기HTML/<meta> 2024. 4. 9. 12:35
내 포트폴리오에 검색엔진 최적화를 잘 해둔 덕일까, 내 이름 석자와 포트폴리오만 치면 내 사이트가 상단에 노출되어 있다. 판매사이트나 회사사이트, 이벤트 페이지라면 너무 좋겠지만 포트폴리오는 내가 지원한 회사만 접근가능 할 필요성을 느꼈다. 처음 시도 해 본 방법은 head 태그에 아래의 메타 태그를 추가하는 방법. 페이지의 색인 생성을 차단하는 방법이라는데 얼마나 걸릴지도 모를 일. 두번째 시도한 방법은 구글 서치 콘솔에서 사이트 소유자 인증을 받고 6개월간 URL 삭제를 요청해 검색이 안되게 신청했다. 한시간 동안 확인해보아도 처리 중이어서 헬스하고 저녁에 집에 돌아와 확인해 보니, 요청 처리 중에서 일시적으로 삭제됨으로 상태가 변경 되었고 이제 구글링해도 나의 포트폴리오가 검색되지 않는다! 성공
-
Tamper Proofing자격증/정보처리기사 2023. 7. 26. 01:31
Tamper 1.쓸데없는 참견을 하다, 간섭하다 ((with)) 2.손대다, (원문의 글귀 등을) 함부로 변경하다 ((with)) 3.뇌물을 주다, 매수하다; 부정 수단을 쓰다 ((with)) Proofing 1.[U] (방수 등의) 가공, 보강; 가공 약품 위변조 보강 기술. 검출 시스템을 통해 위/변조를 감지, 이상 시 프로그램을 오작동되게 하여 악용되지 않게 하는 기술. 감지하여~기술 이란 키워드에 꽂혀 IDS라고 적어서 틀린 정처기 23년도 2회 실기 문제.. DRM이라고 쓴 오답러도 꽤 있었다. IDS는 네트워크 침입 감지고 Tamper proofing은 콘텐츠의 위변조 감지라는 차이가 있다. 뭔가 각각의 개념을 외우기기만 했는데 헷갈리는 개념을 묶어서 차이를 분명하게 짚고 정리하는 식으로 정처..
-
mouseenter/leave border-bottom dropdown 덜덜거림 해결CSS 2022. 11. 24. 12:45
헤더 영역에 보더바텀이 있고 로고 메인메뉴 etc 이렇게 헤더에 3개가 있는 상황! 메인메뉴 영역과 서브메뉴 영역에 css hover가 아닌 js mouseenter/leave로 동일한 효과를 주고 있었는데 header의 보더바텀이 1px영역을 차지하다 보니 메인메뉴의 요소가 아니라 판단해서 마우스 커서가 이 문제의 1px영역을 미지의 공간으로 인식해 서브메뉴가 사라지는 이슈가 있었다. 그래서 outline으로 대체했다. outline은 영역을 차지하지 않는 간섭이 없는 선이라 말끔히 해결됐다. 대신에 outline-bottom. top left 이렇게 한면 한면에 지정할 수 없다. 하지만 헤더가 기본적으로 top left right에 맞닿아 있어 1px은 브라우저 밖에서 그려지기 때문에 눈속임을 하면서..
-
면접 질문에 대한 내가 했던 아리송 개념정리CSS 2022. 11. 20. 14:45
1. 상하 요소에서의 마진 겹침. 해결책은? 나의 답변 : 마진끼리 겹치는 첫번째 요소에 .clearfix를 준다! .clearfix::before, .clearfix::after { content: ''; clear: both; display : block; } 하지만 이건 float 속성을 쓸때 레이아웃이 빠끄러질 때 쓰는 것! .parent::before, .parent::after { content: ' '; display: table; } 테이블 가상요소를 넣어주는게 보편적이고 overflow: hidden 처리를 해주는 등 다른 방법이 있으나 그에따른 마이너한 이슈를이 생긴다. 평소 flex를 사용하다보니 마진 겹침 현상을 겪어 보지 못했고 clearfix는 기능사를 준비할때 많이 썼기에 뭔가..
-
Background-clip과 flex 속성을 같이 사용시 작동 안됨(a.k.a Bug)CSS 2022. 9. 19. 10:14
나의 개발환경은 윈도우 intel CPU 조립식 컴퓨터 크롬브라우저이다. Cross browsing을 위해 iphone 디바이스에서 safari로 더블체크를 한다. 이 환경에서 아래의 코드는 문제가 없었다. (strong태그에 그라데이션 텍스트 스타일링을 해줬다.) &-content { @include text-style(14, $dark); .blog { strong { @include inline-flexbox(start); overflow: hidden; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient( 180deg, #f5e2b0, #f5b5b5 10%,..