Atelier BiCute

# BEM이란? BEM은 Block, Element, Modifier의 약자로, HTML과 CSS를 작성하는 데 사용되는 네이밍 방법론입니다. BEM은 페이지의 컴포넌트를 작은 블록(Block)으로 나눈 다음 각 블록(Block)에 속하는 요소(Element)와 요소(Element)의 변형(Modifier)을 식별하기 위해 특별한 클래스 이름을 사용합니다. Block(블록): 독립적으로 존재하는 페이지 컴포넌트의 이름입니다. 블록(Block)은 기능적으로 독립적이며 다른 블록(Block)과 관련이 없습니다. 예를 들어, "header", "menu", "button" 등이 블록(Block)에 해당합니다. Element(요소): 블록(Block) 내부에 존재하며 블록(Block)의 일부를 나타냅니다. 요소..

#1. 비주얼 스튜디오 코드 설치하기 브라우저의 주소창에(https://code.visualstudio.com/)를 입력하여 비주얼 스튜디오 코드 홈페이지로 접속합니다. 오른쪽 위에 다운로드 페이지로 들어가는 방법도 있지만, 화면 중앙의 버튼을 이용하면 자신의 운영체제에 맞는 다운로드 버튼이 나타납니다. 이 버튼을 눌러 비주얼 스튜디오 코드 설치 파일을 다운로드합니다. 다운이 완료되면 파일을 더블클릭하여 설치를 진행합니다. (특별히 건드릴 세팅 없음) #2. 비주얼 스튜디오 코드 실행하기 처음 비주얼 스튜디오 코드를 실행하면 한글 패치부터 시작하는 것이 좋습니다. 한글 패치 외 추천할만한 플러그인들에 관한 것은 다음글을 참고해 주세요 ※ 참고: 비주얼 스튜디오 코드 확장 프로그램 추천 (12종) #3. ..

# 합자(Ligature)란? 합자(合字, Ligature)는 둘 이상의 글자를 합하여 한 글자를 만드는 것. 또는 그 글자. 자주 쓰이는 주요 합자들의 모양은 대게 비슷하며, 꼭 어떻게 해야한다고 정해진것이 아니기에 폰트에 따라 독자적인 형태를 가지고 있는것 또한 존재한다. # VS CODE에서 합자를 사용하는 방법 (1) 합자를 지원하는 폰트를 설치한다. 우선 아무 폰트나 가능한것이 아니기에, 합자를 지원하는 폰트를 설치해야합니다. 종류는 너무나 많으니 유료, 무료 등 원하는 합자를 지원하는 폰트를 설치합니다. (2) VS Code 설정 ① 설정을 열고(cmd + ,) 글꼴이라고 검색한 후, Editor: Font Family에 합자로 사용할 폰트를 가장 앞쪽에 작성해 줍니다. ② Font Ligat..

Thunder Client는 개발 하면서 API 요청과 요청에 대한 결과를 확인할수 있게 도와줍니다. # 어떻게 사용하는것인가 상황. 왼쪽과 같은 API 문서가 있고, 이메일 API가 정상적으로 작동하는지 확인을 해보자. (1) 우선 VS Code의 확장 마켓플레이스에서 Thunder Client를 설치한다. (2) 설치가 완료되면 왼쪽 메뉴 목록에 Thunder Client 아이콘이 등록되며 그 아이콘을 Thunder Client를 사용할 수 있다. (3) New Request 버튼을 눌러 테스트 하고 싶은 내용을 작성한후 Send를 보내면 끝. 아래와 같이 POST 요청은 주로 Body > Form에서, Get 요청은 Query에서 내용을 작성하면 된다. 토큰값이 필요한 경우도 있는데, api키 값을..

웹이나 앱을 만들다보면 뭔가 묘한 느낌이 올때가 생기는데, 이게 뭔가 문제가 있는거 같긴 한데... 인터넷이 빨라서 괜찮은건가...? 싶을때 의도적으로 인터넷 속도를 느리게 해서 테스트 해볼 수 있는 방법입니다. 테스트 방법은 간단! 1. 크롬 브라우저에서 개발자 도구를 실행한 후 네트워크 탭으로 이동 2. 제한 없음이라고 되어있는 부분을 클릭한 후 원하는 속도를 지정하면 끝. 3. 옆에 아이콘(더 많은 네트워크 조건)을 눌러 조금 더 세밀한 설정도 가능 이거 몇번 사용하고 갑자기 인터넷이 느려졌다고 느낀다면, 테스트 후에 속도 제대로 돌렸는지 확인해 보도록 합시다.

vscode를 사용하다보면 정렬기능이 필요하게 되는데, 기본 자동 정렬 기능(ctrl + K, ctrl + F) 말고도 확장으로 설치할수 있는 프리티어(Prettier)가 압도적으로 인기가 많다. Prettier를 처음 사용했을 땐... 처음 사용해 보았을때는 분명 정렬은 되는데... 아래와 같이 정렬이 되어버려서 이게 뭔가 싶었다. 기능 하나하나마다 줄을 내려버리는데다 따옴표(")만 있는 줄도 있고 닫는 태그만 있는 줄도 있고... 뭔가 정렬은 된거 같은데, 오히려 훨씬 보기가 불편했었다. 그래서 꽤나 오랜기간 vscode의 자동정렬 기능만 이용하게 됐는데, 갈수록 이 기능도 뭔가 조금 부족함을 느꼈었다. 그러다 뭔가 정렬을 개인화(커스텀)할 수 있을까 싶어 알아보았더니, Prettier가 다양한 설정..

Adobe가 싫어서 Figma를 이용하고 있었는데, 얼마전 Adobe가 Figma를 인수해 버렸습니다. 자신이 Figma 같은 디자인 툴을 원하지만 Adobe는 피하고 싶을 경우 이것이 도움이 되지 않을까 십습니다. Penpot Penpot은 Adobe XD 처럼 소프트웨어를 설치한다거나 사용하고있는 버전에 따라 서로 공유를 하기 힘들어지는 문제점이 없는 Figma 와 같은 웹 브라우저 기반의 협업 디자인 툴입니다. 아래는 Penpot의 메인 화면입니다. 이번 Adobe가 Figma를 인수하면서 가입자수가 전월 대비 56배 증가했다고 하며, 기존에 XD나 Figma를 사용했다면 사용하는데 크게 어려움은 없을 것입니다 (역시 Figma처럼 아직 한글지원은 안됩니다) 메인 화면에서 조금만 스크롤을 내려보면 ..

LINE Seed는 LINE의 첫 번째 글꼴입니다. 성장의 의미를 담고 있는 Seed는 지오매트릭 기반의 서체로 LINE의 편리한 사용성과 친근한 아이덴티티에서 영감을 받았습니다. 다운로드 페이지 LINE Seed KR(한글) 바로가기 > LINE Seed EN(영문) 바로가기 > LINE Seed JP(일본어) 바로가기 > LINE Seed TH(태국어) 바로가기 > 폰트 샘플 KR 웨이트 변화에 따른 비례 너비로 라틴 기준의 글자 사이 공간 밸런스에 더욱 다가갑니다. 두꺼운 웨이트는 공간이 더욱 필요하기 때문에 넓게, 얇은 웨이트는 상대적으로 공간이 충분하기에 좁게 설정됩니다. JP LINE Seed JP에는 4종류의 굵기가 준비되어 있습니다. 어떠한 굵기라도 통일된 동일한 정체성을 가지고 있습니다...

이번에 작업용 컴퓨터를 변경하다보니 Sticky Scroll 없으면 이제 도저히 못쓰겠다 싶어서 설정을 다시하다 적어보는 글입니다. VSCode의 Sticky Scroll은 2022년 07월 업데이트부터 시작하여 08월부터 정식으로 추가된 기능으로, 뷰 포트 상단에 현재의 범위를 표시하여 줍니다. 예를들면... #1. 아래와 같이 코드가 길어지면 괄호를 제대로 닫은것인지 애매할 수 있는데... #2 설정으로 이동하여 Sticky Scroll를 검색한 후 해당 항목을 활성화 해 줍니다. #3. 뷰 포트 상단에 현재 범위가 표시가 됩니다. (스크롤을 내려보다가 예상과는 다르게 먼저 범위가 끝난다던가 하면 범위 설정에 오류가 있다는 것이겠지요) 범위 확인용 이외에도 해당 라인을 클릭해서 바로 이동하는 등 익숙..

가끔 프로젝트 진행하다보면 반응형 웹앱이 아닌 모바일 전용으로 기획하고 구현할 때가 있습니다. 모바일에 맞춘 좁은 너비만 가지고 있기 때문에 웹에서 보여줄 일이 생기면 매우 보여주기 민망한 상황이 자주 발생하는데, 그러한 경우 무리해서 반응형으로 만들기보단 아래와 같이 간단한 배경만 추가해주는 정도로 꽤 깔끔한 반응형 웹앱처럼 보여줄 수 있습니다. 위와 같이 실제로 구현한 부분은 고정폭으로 하여 중간 또는 어느 한쪽에 적당히 자리만 잡아주고, 남는 부분은 관련 배경이나 내용으로 채워 미디어 쿼리 설정만 해주면 큰 노력없이 깔끔한 사이트를 만들 수 있습니다. 샘플 페이지 보러가기 >