Lpla 개발 블로그

JavaScript/기초

[JavaScript] startsWith, endsWith, includes

string.startsWith(matchString) matchString이 string의 문자로 시작하는지 여부 확인 string.endsWith(matchString) matchString이 string의 문자로 끝나는지 여부 확인 string.includes(matchString) matchString이 string의 문자를 포함하고 있는지 여부 확인 1. startsWith() matchString이 string의 문자로 시작하는지 여부 확인 (true/false) let str = "hello world!" let matchstr1 = "hel" console.log(str.startsWith(matchstr1)); //true 2. endsWith() matchString이 string의 문..

일상

글씨가 사라지는 기화펜 사용 후기

인터넷 커뮤니티를 보다 시간이 지나면 글씨가 사라지는 펜이 있다는 글을 봤다. 최근 공시생, 수험생들에게 핫하다고 한다. n회독을 하는 사람들은 책에 적힌 낙서를 지우고, 지우개똥을 치우는 것까지 귀찮은 일인데 그런 사람들에게 정말 좋은 아이템이 아닐까 싶다. 원래 펜에 약간 관심이 있어서 만년필이나 붓펜도 써봤기 때문에 이번에도 호기심에 구매해봤다. 네이버에 기화펜으로 검색하니 여러 업체가 보였는데 가격이나 제품에 큰 차이가 없어 상단에 있는 업체로 주문했다. 펜 + 리필심 10개가 870원으로 배송비까지 합쳐서 3,370원이었다. 검정색 잉크를 사고 싶었지만 검정색은 도무지 찾을 수 없었다. 알아보니 기화펜에는 검정색이 없다고 한다. 가장 검정색에 가까운 것이 바로 이 흑청색이다. 가격이 워낙 저렴한..

일상

아이폰12 키보드 어플 Slyder

얼마 전 아이폰12 pro를 사전예약으로 구매했다. 10년을 안드로이드폰만 쓰다가 처음으로 아이폰을 구매했는데 그 이유는 다음과 같았다. 1. 맥북을 사용하고 있어 애플 생태계를 경험해보고 싶었다. 2. 웹 퍼블리싱을 할 때 ios에서 테스트가 필요했다. 3. 새 폰을 사는 느낌을 받고 싶었다. 많은 사람들이 안드로이드에서 ios로 넘어가면, 혹은 반대로 ios에서 안드로이드로 넘어가면 적응하는데 시간이 걸린다고 하는데 우려와는 달리 하루 정도 사용하면서 금방 적응할 수 있었다. 다만 아이폰의 한영전환버튼은 절대 적응할 수 없고 용납할 수 없는 위치에 자리잡고 있었다. 도대체 어떤 생각으로 저 위치에 한영전환버튼을 만들었는지 모르겠다. 미국인들은 언어변환할 일이 잘 없으니 저 위치가 좋다고 판단한걸까? ..

HTML&CSS

[CSS] 3D 카드 효과(transform, perspective)

사이트를 제작하면서 한 가지 난관에 부딪혔다. 첫번째 움짤과 같이 트랜스폼(Transform)으로 3D 카드 효과를 만들려고 했다. 하지만 두번째 움짤처럼 3D 효과가 적용되지 않고 평면적으로 카드가 넘어가버렸다. 여기에 적용된 코드는 아래와 같다. FAKER FAKER SANGHYEOK LEE - 미드MAY 7, 1996 - SOUTH KOREA 자기소개 FAKER IS ONE OF JUST TWO PLAYERS, ALONG WITH HIS FORMER TEAMMATE BENGI, TO HAVE WON THE LEAGUE OF LEGENDS WORLD CHAMPIONSHIP THREE TIMES. body { background-color: #000; margin-top: 100px; } .team_p..

일상

웹퍼블리셔 - 첫 직장에서의 퇴사

2020년 10월 30일부로 퇴사를 했다. 나에게 첫 직장이 좋았는지 물어본다면 그렇다고 대답할 것이다. 비록 내가 원했던 웹에이전시는 아니었지만 중소기업 인하우스 중에서 나름 체계있고, IT 쪽으로도 막 사업을 뻗치고 있는 회사였고 직원들의 말에 귀 기울일 줄 아는 좋은 마인드를 가진 사장이 있는 직장이었다. 그런데 내가 퇴사한 이유는 내가 좋아하는 코딩을 집중해서 할 수 있는 환경이 아니었기 때문이다. 여기서 말하는 환경은 공간 환경과 업무 환경 모두 말한다. 업무를 할 때 자주 들락날락하는 택배 기사님, 윗층에서 나는 층간소음, 환기가 잘 되지 않는 공간... 코딩만 하기에는 부족한 업무 내용, 내 분야가 아닌 전혀 무관한 업무 담당, 협업이 없는 업무... 그 무엇보다 결정적으로 내가 가고자 하는..

HTML&CSS

[CSS] border와 outline의 차이

어떤 요소에 테두리 효과를 주기 위해서 일반적으로 border를 사용한다. border는 실제로 그만큼의 공간을 차지하게 되어 레이아웃에 영향을 끼친다. div:hover{ border: 2px solid #e2012d; } 반면 outline은 레이아웃에 영향을 끼치지 않는다. div:hover{ outline: 2px solid #e2012d; outline-offset: -2px; } 이렇게만 보면 outline이 더 좋아 보인다. 다만 outline은 border-top, border-right 처럼 특정 부분만 효과를 줄 수 없으며, border-radius 같은 효과도 쓸 수 없다. 상황에 따라 잘 선택해서 사용해야 한다. border를 사용하고도 간단한 눈속임을 쓴다면 레이아웃을 유지한 채 ..