전체 글(107)
-
[macOS] Xcode 시뮬레이터를 이용한 웹 페이지 디버깅 방법
Xcode 시뮬레이터를 이용한 웹 페이지 디버깅 방법에 대해서 알아보겠습니다. Xcode 시뮬레이터를 활용한 웹 페이지 디버깅반응형 웹 디자인의 중요성이 점점 커지면서, 다양한 기기에서 웹 페이지를 테스트하는 것은 필수적입니다. 하지만 모든 물리적 기기를 준비하는 것은 비용과 시간 면에서 비효율적일 수 있습니다. 이때 Xcode 시뮬레이터는 실 디바이스를 대신하여 다양한 iOS 환경에서 웹 페이지를 테스트하고 디버깅할 수 있는 강력한 도구입니다. 이 글에서는 Xcode 시뮬레이터를 이용해 웹 페이지를 디버깅하는 방법에 대해서 알아보겠습니다. Xcode 시뮬레이터 실행우선, Xcode 앱이 없다면 App Store에서 설치해 주세요. 그리고 Xcode가 설치된 Mac에서 Simulator 앱을 실행합니다...
2024.08.06 -
[Safari] 사파리 브라우저로 iPhone 웹 페이지 디버깅하는 방법 (feat. 웹 인스펙터)
사파리 브라우저로 iPhone 웹 디버깅하는 방법에 대해서 알아보겠습니다. 웹 페이지 디버깅웹 개발을 하다 보면 데스크탑 브라우저뿐만 아니라 실제 모바일 디바이스에서의 동작을 확인하고 디버깅해야 할 때가 많습니다. 사파리(Safari) 브라우저는 iOS 디바이스와의 연결을 통해 이러한 작업을 가능하게 합니다. 이 글에서는 실제 디바이스를 USB로 연결하여 사파리에서 웹 인스펙터를 사용하는 방법에 대해서 알아보겠습니다. 사파리(Safari) 브라우저와 iOS 디바이스 설정웹 인스펙터를 사용하기 위해서는 먼저 사파리 브라우저와 iOS 디바이스에서 설정을 완료해야 합니다.사파리 브라우저 설정1. 사파리 브라우저를 열고 왼쪽 상단의 Safari 메뉴를 클릭한 후, 설정(Preferences)을 선택합니다. ..
2024.08.05 -
[Git] GitHub에서 Squash Merge로 프로젝트 히스토리 깔끔하게 정리하기
Git의 다양한 병합(merge) 방법 중 하나인 Squash Merge에 대해 알아봅시다.Squash Merge (스쿼시 머지) 란?여러 커밋을 하나의 커밋으로 압축(squash)하여 병합하는 Git의 기능입니다. 이를 통해 개발 브랜치에서 작업한 여러 개의 작은 커밋을 한 번에 메인 브랜치에 병합할 수 있습니다. 이 방법은 깔끔한 커밋 히스토리를 유지할 수 있게 합니다.다이어그램을 통해 Squash Merge 이해하기기본 main 브랜치에서 feature 사본 브랜치를 생성하여 작업을 시작합니다. feature 브랜치에서 여러 개의 커밋을 생성합니다.main: A---B---C \feature: D---E---F feature 브랜치의 모든 커밋을 하나의 커밋..
2024.07.07 -
[CSS] @font-face 디자인에 맞춘, 맞춤형 폰트 적용 방법
웹사이트에 맞춤형 폰트를 적용하는 방법에 대해서 알아보겠습니다.@font-face 란?@font-face는 CSS 규칙으로, 외부 폰트를 불러와 웹페이지에서 사용할 수 있게 해 줍니다. 이를 통해 디자이너와 개발자는 웹브라우저에 기본으로 설치된 폰트 외에도 다양한 폰트를 활용할 수 있습니다. - font-family : 폰트의 이름을 정의- src : 폰트 파일의 경로를 지정- font-weight, font-style : 굵기와 스타일 설정다양한 폰트 파일 형식웹에서 사용되는 주요 폰트 파일 형식은 다음과 같습니다. - TTF (TrueType Font): 가장 일반적인 폰트 형식으로, 대부분의 운영 체제에서 지원됩니다.- OTF (OpenType Font): TTF와 유사하지만, 더 많은 타이포그래피..
2024.07.04 -
[macOS] macOS에서 다양한 문자 입력하기: 이모티콘, 특수문자, 한자
이번 포스팅에서는 macOS에서 특수문자와 한자를 쉽게 입력하는 방법에 대해서 알아보겠습니다. 특수문자 및 이모티콘 입력 방법macOS 운영체제를 사용하면서 다양한 특수문자와 한자를 입력해야 할 때가 종종 있습니다. 특히 문서 작성이나 메시지 전송 시 더욱 그렇죠. 다행히 macOS는 이러한 문자를 쉽게 입력할 수 있는 기능을 제공하고 있습니다. 먼저 특수문자 및 이모티콘을 입력하는 방법에 대해서 알아보겠습니다. 1. 오른쪽 상단에 있는 메뉴바에서 문자 한을 클릭하여 드롭다운 메뉴를 열어봅시다. 메뉴에서 이모티콘 및 기호 보기를 클릭합니다.단축키로는 키보드에서 control + command + space 키를 클릭하면 이모티콘 및 기호 뷰어가 열립니다. 2. 원하는 문자를 찾아 클릭하면 됩니다...
2024.06.28 -
[Figma] 디자인 협업의 핵심 팁(Tip) : 피그마를 활용한 효율적인 공유 전략
피그마를 통해 팀원들과 효과적으로 협업하고 공유할 수 있는 몇 가지 주요 기능들에 대해서 알아봅시다. 공유 링크상단 메뉴바 우측을 보시면 Share(공유하기) 버튼을 클릭해 주세요. Copy link(링크 복사하기) 버튼을 클릭하시면, 공유할 수 있는 링크가 복사됩니다. 또 Email(이메일)을 통해, 디자인 파일 링크를 쉽게 공유할 수 있습니다. 공유하려는 사람의 권한을 설정할 수 있어 편집 가능(can edit), 보기 전용(can view)의 권한을 부여할 수 있습니다. 이메일 입력창에 초대하려는 팀원들의 주소를 입력하고 invite(초대하기) 버튼을 클릭하여 디자인 파일을 공유해 보세요. 공유된 링크가 누구나 접근 가능(Anyone with the link)하도록 기본 설정되어 있습니다..
2024.05.18