이모지 픽커

이모지를 탐색, 검색, 즉시 복사하세요. HTML 엔티티, 유니코드 코드 포인트, CSS 코드를 제공합니다. 9개 카테고리 300개 이상의 이모지.

이모지 픽커는 무엇인가요?

이모지 픽커는 다양한 환경에서 사용하는 데 필요한 모든 기술 코드와 함께 이모지에 즉시 접근할 수 있는 참조 및 복사 도구입니다. 이모지는 소셜 미디어 게시물, 메시징 앱, 이메일 제목, 웹사이트 UI 카피, 제품명, 마케팅 자료, 커밋 메시지, README 파일, 코드 주석에 나타나는 보편적인 커뮤니케이션 레이어가 되었습니다. 그러나 이모지를 프로그래밍 방식으로 사용하려면 문자 자체 이상을 알아야 합니다. HTML 개발자는 문자 인코딩 문제 없이 HTML에 안전하게 임베드하기 위한 숫자 엔티티 코드(😀)가 필요합니다. CSS 개발자는 의사 요소(content: '\1F600')의 content 속성에서 유니코드 이스케이프 시퀀스를 사용합니다. React와 JavaScript 개발자는 JSX 문자열에 이모지 문자를 직접 붙여넣거나 유니코드 리터럴(\u{1F600})을 사용할 수 있습니다. 각 이모지에는 유니코드 코드 포인트, Unicode Consortium이 정의한 공식 이름이 있으며 카테고리에 속합니다. 키워드로 특정 이모지를 찾는 것이 운영 체제 이모지 패널을 스크롤하는 것보다 훨씬 빠릅니다. 이 도구는 한 번의 클릭으로 문자와 모든 기술적 표현을 제공합니다.

이모지 픽커 사용 방법

상단 카테고리 탭을 사용하여 그룹별로 이모지를 탐색하세요: 얼굴 표정, 사람 및 몸, 동물 및 자연, 음식 및 음료, 여행 및 장소, 활동, 사물, 기호, 국기. 또는 검색 상자에 키워드를 입력하여 이름으로 이모지를 찾으세요. '별', '하트', '체크', '경고', '로켓' 또는 설명적인 용어를 검색해 보세요. 이모지 그리드가 즉시 결과를 보여줍니다. 이모지 문자를 클릭하여 선택하고 한 번의 동작으로 클립보드에 복사하세요. 나타나는 상세 패널에는 이모지 문자와 공식 유니코드 이름, 유니코드 코드 포인트(예: U+1F600), HTML 마크업에서 사용하기 위한 HTML 엔티티 코드(예: 😀), CSS 의사 요소를 위한 CSS content 값(예: '\1F600'), Slack과 GitHub 같은 플랫폼에서 사용하는 이모지 단축 코드 이름(예: :grinning_face:)이 표시됩니다. 각 개별 코드 형식 옆의 복사 아이콘을 클릭하여 해당 특정 표현만 복사하세요.

자주 묻는 질문

HTML에서 인코딩 문제 없이 이모지를 안전하게 사용하려면 어떻게 하나요?

HTML에서 가장 안전한 방법은 숫자 문자 참조(NCR)를 사용하는 것입니다: 웃는 얼굴 이모지에는 😀. HTML 파일의 문자 인코딩에 관계없이 작동합니다. 두 번째 방법은 이모지 문자를 HTML 파일에 직접 붙여넣는 것입니다. 파일이 UTF-8로 저장된 경우(모든 현대 편집기가 기본으로 사용) 완벽하게 작동합니다. 이모지에 HTML 명명 엔티티를 사용하는 것은 표준화되어 있지 않으므로 피하세요.

키워드로 이모지를 검색할 수 있나요?

네. 검색 바에 키워드를 입력하면 결과가 즉시 업데이트됩니다. 검색은 공식 유니코드 이모지 이름과 일반적인 동의어를 포함합니다. 설명적인 검색을 시도해 보세요: 'happy'는 😊😄🥰를, 'fire'는 🔥를, 'check'는 ✅☑️✔️를, 'warning'은 ⚠️🚨를, 'star'는 ⭐🌟💫✨를 찾습니다. 검색은 정확한 이름 일치에 한정되지 않으며 개념과 카테고리로 관련 이모지도 찾습니다.

CSS 의사 요소에서 이모지를 어떻게 사용하나요?

::before 또는 ::after 의사 요소의 content 속성에 CSS 유니코드 이스케이프 구문을 사용하세요. 예: .icon::before { content: '\1F680'; }는 로켓 이모지 🚀를 표시합니다. CSS에서 유니코드 이스케이프는 백슬래시와 코드 포인트(U+ 접두사 없이)를 사용합니다. 이 기법은 이미지 파일이나 아이콘 폰트 없이 장식용 글머리 기호, 아이콘, 레이블에 일반적으로 사용됩니다.

모든 기기에서 이모지가 동일하게 표시되나요?

아니요. 각 운영 체제는 자체 시각적 스타일로 이모지를 렌더링합니다. Apple의 이모지 세트(iPhone, Mac, Safari에서 사용)는 Google(Android, Chrome), Microsoft(Windows, Edge), Samsung, WhatsApp의 디자인과 다르게 보입니다. 동일한 이모지 코드 포인트는 동일한 개념을 나타내지만 플랫폼마다 다른 아트워크로 표시됩니다. 특정 대상을 위해 디자인할 때 그들의 likely 플랫폼에서 이모지를 미리보세요.

웹사이트에서 :fire: 같은 이모지 단축 코드를 어떻게 사용하나요?

이모지 단축 코드(:fire:는 🔥, :tada:는 🎉)는 GitHub, Slack, Discord에서 대중화된 규칙으로 웹 표준이 아닙니다. 웹사이트에서 단축 코드를 사용하려면 변환하는 라이브러리가 필요합니다: React/JavaScript용 emoji-mart나 emoji.js, Ruby용 gemoji, Python용 python-emoji. 또는 많은 Markdown 프로세서가 적절한 플러그인으로 구성되면 단축 코드를 지원합니다. 픽커는 참조를 위해 각 이모지의 일반적인 단축 코드 이름을 보여줍니다.