전체 글 240

[JavaScript] 비교 연산자인 동등연산자(==)와 일치연산자(===)

안녕하세요 :) 무택입니다🧔 오늘은 동등연산자(==)와 일치연산자(===)의 비교입니다.처음에 보면 헷갈리는 부분이 있기 때문에 정리해보려고 합니다. #동등연산자(==) - 두 피연산자의 값이 같으면 true반환 - 피연산자의 타입이 서로 다르면 강제로 타입을 같게 변환 [10 == '10'] // true [true == 1] // true [true == '1'] // true [true =='true'] // false [null == undefined] // true [10 == '10'] 하나가 숫자형이고 다른 하나가 문자열이면 문자열을 숫자로 변환 후 비교 [true == 1] 피연산자 중 불리언 값이 있으면 불리언 값을 0&1로 변환 후 비교(false=0, true=1) [true == '..

[JavaScript]팝업 레이어 적용 + 배경 블러효과, 배경 클릭 시 팝업 닫기

안녕하세요 :) 무택입니다🧔 이번에는 웹페이지에서 빠질 수 없는 팝업 적용하는 코드에 대해 기록하도록 하겠습니다. 일반적인 팝업에 배경 블러효과+팝업 활성화 시 배경 클릭 시 닫히는 기능도 같이 구현했습니다. 배경 블러효과를 주면 팝업에 더 집중되는 효과를 줄 수 있습니다. See the Pen popup Layer(배경 블러 효과 + 외부 클릭시 닫기) by TytanLee (@TytanLee) on CodePen. 추가로 사용된 문법들에 대한 정리는 아래를 참고해 주세요. [jQuery] mouseup() mouseup() 메서드는 선택한 요소에서 마우스를 눌렀다가 떼었을 때 이벤트가 발생합니다. #문법 $("선택자").mouseup(); [JavaScript] classList.add() class..

[포토샵기능]동물, 머리카락 누끼 따기

안녕하세요 :) 무택입니다🧔 오늘 알아볼 기능은 누끼따기의 업그레이드 버전 동물이나 머리카락같은 누끼따기 힘든 부분을 어떻게 작업하는지 알아보려 합니다. 포토샵이 아직 익숙하지 않으신 분들은 털 부분을 누끼따려고 하면 막막하기만 하죠. 아래 순서대로 따라하면 쉽게 따실 수 있으니 보고 따라해 보세요! 오늘의 주인공 귀여운 아기 댕댕이 입니다. 01. 먼저 '개체 선택'툴을 선택해 주세요. OR 02. 첫번째 사진처럼 드래그로 감싸도 되고 피사체가 잘 보이는 사진이면 두번째 사진처럼 '피사체 선택'을 선택하면 자동 선택이 됩니다. 03. '선택' 툴이 활성화 된 상태에서 오른쪽 위 '선택 및 마스크'를 눌러줍니다. 04. 오른쪽에 '보기 모드 - 오버레이'를 선택해줍니다. 누끼 따는 작업을 잘 확인하기 위..

[포토샵기능]자동으로 선택 영역을 채우기(내용 인식 채우기)

오늘 공유할 기능은 이미지 편집 기능으로 엄청 자주 쓰이는 '내용 인식 채우기' 기능을 설명하려 합니다. 포토샵에서 워낙 쓰임새가 많이 기능이기 때문에 한 번의 포스팅으로 설명하긴 힘들지만 기본적인 내용 위주로 다루려고 합니다. 오늘의 작업을 위한 이미지입니다. 위 이미지에서 창문 부분을 지워보려 합니다. 01. 먼저 '영역 선택 툴'을 클릭합니다. 02. 지우려고 하는 부분의 영역을 선택합니다. 03. '편집 - 칠' or 'shift + F5'를 눌러 칠 메뉴를 열어줍니다. # 참고로 위 이미지처럼 '배경레이어'에서 작업하거나 레이어 선택이 안되어 있는 경우는 작업 진행이 안되니 레이어 선택이 잘 되어있나 확인해주세요. 04. '내용 > 내용 인식'을 선택해서 확인을 눌러줍니다. 좌: 작업 전 / 우..

[포토샵기능]배경을 자유롭게 크기조절하기

오늘은 포토샵에서 이미지 편집 기능인 '내용 인식 비율' 기능을 설명해보려 합니다. 가로로 긴 이미지나 세로로 긴 이미지가 필요한데 이미지 소스가 원하는 크기로 되어 있지 않을 때 자주 사용하는 기능입니다. 배경과 피사체가 명확하게 구분되어 있는 이미지가 기능을 사용하기 가장 좋습니다. (애매한 사진이면 어떻게든 살리겠지만 이미지를 다른걸로 바꾸는 게 더 나을지도...) 오늘의 이미지 소스인 귀여운 댕댕이입니다. 앞서 소개한 디자인 소스 사이트인 Unsplash에서 가져왔습니다. 01. 먼저 피사체를 선택해줘야하므로 '개체 선택 도구'를 선택합니다. 02. 피사체를 드래그로 감싸서 선택해줍니다. 배경과 피사체가 애매한 경우 선택이 잘 안 되기 때문에 추가로 다른 선택 툴을 활용하여 누끼를 따줘야 합니다...

상업적 무료 이미지 사이트 공유

오늘은 디자이너로써 북마크에 저장해 놓으면 좋을만한 이미지 사이트를 공유하려 합니다. 아래 사이트들은 출처 표기 없이 상업적 사용이 가능합니다.(2023-03-06 기준) 01. https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash 어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다. unsplash.com 무료 이미지 찾을 때 가장 많이 사용한다고 할 정도로 많은 이미지들을 갖고 있고 해외 이미지들이 주이기 때문에 잘 사용하면 좋은 디자인을 만들 수 있습니다. 02. https://www.pexels.com/ko-kr/ 무료이미지, 저작권 없는 이미지, 무료 이미지 사이트 | P..

[포토샵기능]패스따라 텍스트 쓰기

위 이미지처럼 라인을 따라서 텍스트가 쓰여진 디자인 보신 적 있으신가요? 오늘은 이 기능에 대해 써보려 합니다. 먼저 이미지와 비슷한 타원을 그리고 면은 제외하고 선만 살려줍니다. 그리고 'ctrl + 레이어 왼쪽 마우스 클릭'을 하면 해당 레이어 부분이 선택되면서 라인이 선택됩니다. 타원은 그대로 크기를 키우게 되면 본 형태 그대로 커지는 게 아니라 비율 변형이 생겨 다른 방법으로 크기를 늘려줘야 합니다. '선택 - 수정 - 확대'를 클릭해서 확대하려고 하는 픽셀 수만큼 입력해 줍니다. 저는 6픽셀을 설정했습니다. 그러면 픽셀수만큼 확대된 영역을 볼 수 있습니다. 영역이 선택된 상태에서 '패스 - 패스 만들기'를 하면 선택영역대로 패스가 생성이 됩니다. '텍스트' 툴을 선택하고 패스 근처에 마우스를 올..

[포토샵기능]고급개체 레이어 레스터화 단축키

실무를 하다 보면 디자인 소스를 가져와서 작업을 많이 하게 되는데 보통 화질 손실을 막고 편집을 편하게 하기 위해 고급개체로 가져오게 됩니다. 하지만 고급개체로 가져와서 작업하고 저장하면 파일 용량이 커지기도 하고, 클라이언트 측에 전달할 때 고급개체 상태로 전달하게 되면 클라이언트 측에서 사용할 수 있어서(라이센스 문제가 발생) 고급개체는 레스터화해서 관리하는 게 좋습니다. 그래서 오늘은 빠르게 레스터화할 수 있는 단축키 설정을 알아보려 합니다. 01. '편집 - 바로 가기 키' 메뉴 선택 02. 레이어 항목 선택 03. 레스터화를 보면 바로 가기 키가 설정이 되어있지 않는 게 기본값입니다. 여기를 눌러서 본인이 사용하기 편한 키를 누르면 입력이 됩니다. 저는 'Ctrl+Alt+F'가 편하다고 생각해 ..

[라이브러리]티스토리 코드블럭 스킨 적용(highlight.js) + 적용오류 해결

티스토리 블로그에 코드 블럭 스킨 적용하는 방법 (highlight.js) ?. 코드블럭이란 게시글에 코드를 넣을 때 최적화 시켜주는 툴이다. 여기서 여러가지 언어를 선택할 수 있다. 스킨을 사용하지 않으면 평범한 코드블럭 형태가 나온다. 하지만 평범한 스킨이 싫다 싶은 사람들은 코드 스킨을 사용하면 자신만의 블로그 색깔을 만들 수 있다. 아래 순서대로만 따라오면 쉽게 적용할 수 있다. 01. 블로그 설정에서 '플러그인 - 코드 문법 강조' 선택 02. 적용 클릭 03. '스킨 편집' 클릭하고 창 먼저 띄워두기 04. https://highlightjs.org/ highlight.js Version 10.7.2 This is a patch release. The only change is that dep..