전체 글(90)
-
[Chrome] 웹 개발자 도구 활용 가이드 - 기본편
크롬 웹 개발자 도구(Chrome DevTools)를 활용하는 법에 대해서 알아봅시다크롬 웹 개발자 도구 (Chrome DevTools)크롬 웹 개발자 도구는 구글 크롬 브라우저에 내장된 강력한 도구로, 웹 페이지를 실시간으로 검사하고 디버깅하며 성능을 분석할 수 있게 해 줍니다. 웹퍼블리셔와 개발자 모두에게 유용하며, 웹 페이지의 HTML, CSS, 자바스크립트 등 다양한 요소를 실시간으로 수정해 보고 테스트할 수 있습니다.개발자 도구 열기가장 빠르게 개발자 도구를 여는 방법은 키보드 단축키를 사용하는 것입니다. macOS 기준으로 단축키 option + cmd + i를 눌러 개발자 도구를 열 수 있습니다. ( windows 기준은 ctrl + shift + i )모바일 모드 전환모바일 디바이스 모드는..
2024.08.07 -
[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