그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘은 포토샵에서 캔버스 크기를 조절하는 방법을 설명해 보도록 하겠습니다. 포토샵으로 디자인 작업을 하지 않는 분들도 이미지 크기를 조절할 일이 생길 때가 있습니다. 그럴 때 어떻게 이미지 크기를 조절할 수 있는지 알아보도록 하겠습니다. 포토샵에서 이미지 크기를 조절할 수 있는 방법은 두 가지가 있습니다. 1. 캔버스 크기 조절 - 캔버스의 크기만 조절하는 방법으로, 이미지가 잘리게 됩니다. 2. 이미지 크기 조절 - 캔버스 크기와 이미지 크기를 둘 다 조절하여 이미지가 잘리는 부분 없이 조절할 수 있습니다. 그럼 순서대로 어떻게 하는지 알아보겠습니다😀 캔버스 크기 조절 1. 먼저 이미지를 포토샵으로 불러와줍니다. 2. "이미지 - 캔버스 크기"를 눌러줍니다. 단축키 [ Alt..

안녕하세요. 무택입니다 :) 오늘은 포토샵에서 커스텀 기본 모양이 사라졌을 때, 다시 불러오는 방법에 대해 써보려고 합니다. 커스텀 기본 모양이 대부분 쓸 일이 없긴 하지만 그래도 가끔 쓸만한 모양들이 있어서 쓰는 경우가 있는데 업데이트나 파일을 잘못 건드렸을 때 모양이 사라질 수 있습니다. 그래서 어떻게 하면 다시 모양을 불러오는지 써보도록 하겠습니다. 불러오는 방법 1. 이렇게 모양이 사라지는 경우가 있습니다. 2. "창 - 모양"을 눌러줍니다. 3. 오른쪽 상단에 햄버거 아이콘을 눌러서 "레거시 모양 및 기타"를 누르면 모양이 불러와집니다! 4. 위처럼 불러와지는 걸 확인할 수 있습니다. 간단하게 다시 불러올 수 있으니 위 방법대로 따라 해서 오류를 해결했으면 좋겠네요!

안녕하세요 무택입니다 :) 오늘은 focus() 함수를 사용하려고 하는데 작동하지 않을 때 사용할 수 있는 setTimeout() 함수에 대해 써보려고 합니다. codepen 예시 See the Pen Untitled by TytanLee (@TytanLee) on CodePen. 위 예시를 보면 아시겠지만 저는 버튼을 누르면 검색창을 띄워서 바로 자동으로 입력가능한 UX를 만들고 싶었습니다. 검색창을 누르고 input탭을 누르는 과정을 생략시켜 주면 사용자 입장에서는 편하기 때문에 focus 기능을 사용하려고 했는데 함수가 작동이 안 되더라구요. 그래서 대체 함수를 찾다가 setTimeout() 함수를 이용해서 구현해 봤습니다. 위 예시에서 보면 알 수 있듯이 focus()를 이용했을 때는 기능이 작동..

안녕하세요 무택입니다 :) 오늘은 HTML의 구조에 대해 설명해보려고 해요. 바로 p태그 안에는 div가 안 들어간다는 사실! 여느 때와 같이 작업을 하는 도중에 p태그 안에 div를 넣고 js에서 div를 불러오려고 하려고 하는데 기능이 안 돌아가는 거예요.. 그래서 찾아봤더니 구조상 p태그 안에는 div가 못 들어간다고 합니다. 자세한 이유는 잘 모르겠지만 구조상 불가능하다는 사실..😭 p태그 안에 div를 넣으면? 개발자 툴에서 보면 알 수 있듯이 p태그 안에 div를 넣으면 p태그가 자동으로 닫히고 그 후에 div태그가 나옵니다. 또 그 후에 p태그 하나가 자동으로 열리고 닫히는 걸 볼 수 있습니다.(이러니 js에서 p > div를 해도 찾을 수가 없지..) 구조상 p태그 안에 div를 만들 일이..

안녕하세요 무택입니다 :) 오늘은 웹퍼블리싱을 하면 거의 필수로 필요한 기능인 탭 활성화 + 나머지 탭 비활성화 코드에 대해 써보도록 하겠습니다. 사용성이 많은 기능이니 한번 보시면 좋을 거예요 동작 원리 먼저 탭을 선택하면 변화시킬 css내용을 클래스로 만들어놓고 탭을 누르면 모든 탭에서 활성화 클래스 제거, 누른 탭은 활성화 클래스를 추가하는 원리입니다. 여기서 중요한 건 클릭한 탭을 찾아줘야 하기 때문에 'this 선택자'를 사용해야 합니다. codepen 예시 See the Pen Untitled by TytanLee (@TytanLee) on CodePen. HTML 탭1 탭2 탭3 CSS * { list-style: none; margin: 0; padding: 0; } a { text-dec..

안녕하세요 무택입니다 :) 오늘은 스크롤에 따라 진행상태를 알려주는 바 만드는 코드에 대해 남겨보려고 합니다. 요즘 아티클 형식의 페이지는 거의 다 사용하고 있는 것 같은데 그만큼 웹사이트 사용성에 도움을 주는 기능이라고 생각합니다. 사람들이 페이지에 들어와서 글을 읽다가 어느 정도 남았는지 직관적으로 알 수 있기 때문에 적절한 페이지에 적용하면 좋은 기능이 될 것 같아요. 동작원리 저는 기능을 브런치 사이트의 아티클 페이지를 참조해서 만들었습니다. 그래서 기본적으로 동작 원리는 스크롤할 때마다 스크립트를 실행시켜서 현재 스크롤 위치를 파악 후 수치로 변환(0 ~ 100%), 그 수치를 진행바의 넓이로 넣는 원리입니다. codepen 예시 See the Pen 스크롤 위치 by TytanLee (@Tyt..

안녕하세요 무택입니다 :) 오늘은 수제버거 맛집 플렉스 버거에 다녀온 후기를 남겨보려고 해요. 서울과학기술대 바로 앞에 있는 곳인데 정말 맛집이어서 멀어도 갈 만큼 후회가 없는 곳이에요. 그럼 아래에서 자세한 내용을 써볼게요. 위치 위치는 공릉역에서 5분 거리에 있고 서울과학기술대 거의 바로 앞에 있어요. 주변에 가서 앤틱해보이는 간판을 찾으면 돼요! 수제버거 수제버거 맛집인 만큼 햄버거 사진 먼저 구경하세요😀 세트를 시키면 이렇게 햄버거 + 감자튀김(케챱, 치즈소스) + 탄산음료 구성으로 나온답니다. 인테리어 분명 수제버거집인데 여긴 인테리어도 너무 멋있어요.. 되게 세련된 건 아닌데 이 집만의 인테리어 분위기가 있어서 뭔가 인테리어 구경하는 재미도 있어요. 인테리어랑 어울리게 팝송위주로 노래가 나오는..

안녕하세요 무택입니다 :) 오늘은 신림 백소정에 다녀온 후기를 남겨보려고 합니다. 백소정은 원래 마제소바가 유명한데 마제소바는 다 아는 메뉴이기 때문에 이번에는 다른 메뉴를 한 번 먹어봤습니다. 최근에 거리를 돌아다녀보면 백소정이 많이 생기고 있는 것 같더라구요. 근데 먹어보면 왜 이렇게 가게들이 많이 생기는지 알 것 같은 맛이에요👍 신림 백소정 위치는 역에서 5분 정도 거리에 있어요. 역에서 가까워서 쉽게 갈 수 있고 옆에 도림천이 길게 있어서 밥 먹고 산책하기도 좋은 것 같아요. 메뉴 친구랑 둘이 같이 갔는데 친구는 새로 나온 메뉴인 '오꼬노미카츠'를 시켜서 먹었어요. 어떻게 나오나 약간 호기심에 시켜본 메뉴인데 돈까스에 오꼬노미야끼 소스가 뿌려져 있고 가쓰오부시가 올라간 메뉴였어요. 맛은 정말 그냥..

안녕하세요 무택입니다 :) 오늘 알아볼 내용은 2023년 5월 23일부로 업데이트된 포토샵 신기능을 사용해서 이미지를 편집해보려고 합니다. 바로 '제거 도구'가 새로 나왔는데 브러쉬처럼 사용하면서 간편하게 지울 부분을 자연스럽게 메꿔주는 기능입니다. 포토샵으로 이미지를 편집하는 일은 많을 텐데 어도비에서는 이런 니즈를 손쉽게 해결하기 위해 다양한 기능을 내는 것 같습니다. 그리고 이번 업데이트의 가장 큰 변화는 'text to image'기능인데 이 기능은 아직 베타여서 베타 기능을 신청하면 이용할 수 있다고 합니다. 다만 상업적인 사용이 아직은 안되기 때문에 정식 버전에는 안 넣은 것 같습니다. 어떤 기능인지 간단하게 설명하면 영역을 선택하고 텍스트로 어떤 이미지를 만들어달라고 하면 이미지로 만들어주는..

주목을 시키고 싶은 텍스트에 활용하기 See the Pen 텍스트 파도 애니메이션 by TytanLee (@TytanLee) on CodePen.