HTML, CSS 자동 완성 모음집 (zen 코딩하는 법) 흔히 zen 코딩, Emmet 코딩, 자동 완성 등의 이름으로 불리고 있는 이 기술은 긴 HTML, CSS 코드를 간단한 키 조합으로 빠르게 적는 기술입니다. 크게 어렵지 않지만, 업무가 무척 편해지니 꼭 습득하여 사용해 보시기를 권장드립니다.(백엔드에서 풀스택으로 가거나, 퍼블리셔 입문자가 보시기에 알맞은 글입니다.)이 기능은 Visual Studio Code 환경에서 사용하시기를 바라며, Visual Studio 2022에서는 자동 완성이 처참하니 HTML, CSS만 VS Code로 진행하고 코드 복사/붙여 넣기를 하시는 것을 추천드립니다. (Visual Studio 2022는 확장자 추가나 설정이 쉽지 않기에 접근성이 좋은 VS Code 위주로 적어드리겠습니다.)자주 사용하는 코드 위주로 정리하였으.. 2024. 11. 10. text-overflow: ellipsis;로 ... 처리(말 줄임 처리)되면 JS로 이벤트 발생하기 text-overflow: ellipsis;는 글이 너무 길어질 경우 마지막 부분을 ...처리할 수 있는 CSS 코드입니다.흔히 말 줄임 효과라고 합니다.PC 화면에서는 말줄임 효과가 나타나지 않지만 반응형 작업을 하다 보면 ellipsis의 효과로 말 줄임이 되는 경우가 있습니다.이때 JS로 반응형에서는 다른 모습을 보여주거나 이벤트를 발생시킬 수 있도록 코드를 정리하였습니다.아래 코드를 통해 디자이너와 상의해서 더욱 다채로운 사이트를 만드셨으면 좋겠습니다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy t.. 2024. 11. 9. PPT로 동시 통역 사용하기(PPT 벗어나도 사용가능!) 안녕하세요!오늘은 많은 분들이 생소할 수 있는 PPT 사용법을 공유해드리려 합니다.바로 PPT의 동시통역 기능입니다.이 기능은 MS AI 세미나에서 MS 부사장님이 친히 알려주신 유쾌한 기능입니다.주의 사항:이 기능을 사용하기 위해서는 윈도우에서 마이크 접근 권한을 열어주어야 합니다. 윈도우 설정 > 개인 정보 및 보안 > 마이크 접근 켬으로 설정하기.이 기능을 사용하기 위해서는 입력 장치를 통해 컴퓨터에 소리가 들어가야 합니다. 만약 발표 장소의 마이크와 컴퓨터의 소리를 연결하기 어려우시다면 컴퓨터의 기본 마이크를 입력 장치로 설정하신 후, 컴퓨터 마이크 근처에서 발표를 하시면 됩니다.이 기능을 사용하기 위해서는 인터넷과 연결되어 있어야 합니다.방법: PPT를 켭니다.새 프레젠테이션을 엽니다.탭에서 “.. 2024. 11. 8. 클릭 이벤트 발생 시 네이버 지도로 새 탭 띄워서 바로 검색하기! 아래 코드는 클릭 이벤트 발생 시 바로 새 탭을 띄우고 네이버 지도로 경로를 검색할 수 있는 코드입니다. 자동차 대중교통 Find Way주의 사항: 대중교통은 경유지를 추가할 수 없습니다. 경유지 추가 시 자동으로 자동차 경로로 검색됩니다.네이버 지도는 최대 5개의 경유지를 허용합니다. 아래 코드는 2개의 경유지만 추가하였으나 같은 방법으로 뒤에 경유지를 추가해 주시면 됩니다. 경로 검색을 위해서는 해당 주소의 경도와 위도를 알아야 합니다. 경도와 위도는 아래 링.. 2024. 11. 7. [프론트엔드] 폰트 쓰다 겪는 문제들 해결법 개발하면서 폰트를 끌어다 쓸 때 생각지 못한 다양한 문제가 생기곤 합니다.아래는 그러한 문제들의 해결법입니다.기본 폰트 뭐 쓰나요?대부분의 상황에서 기본 폰트는 "Noto Sans"와 "Pretendard"입니다.이 폰트들이 애용되는 이유는 상업적으로 사용할 수 있는 무료 폰트이면서 깔끔하고 가독성이 좋기 때문입니다.Noto Sans 사용 시 주의사항:Noto Sans의 경우 다양한 언어로 폰트가 존재합니다.국문, 영문, 중국어, 일본어 등.여기서 주의해야 하는 점은 국문의 영어와 한자가 영문의 영어와 중국어와 일본어의 한자와 다르다는 점입니다.이 점을 몰라서 디자이너와 폰트가 같네 다르네 말이 나옵니다.만약 미묘하게 영어나 한자 폰트가 다르다면 다른 언어의 "Noto Sans" 폰트를 가져와서 사용해 .. 2024. 11. 3. text-overflow 2줄 ellipsis (텍스트 2줄 이상 ...처리하기) div{ display: -webkit-box; -webkit-line-clamp: 2; /* 라인 수 */ -webkit-box-orient: vertical;}다들 바쁘시니 빠르게 갑시다.위처럼 코드를 작성 후 라인 수를 지정해 주면 됩니다.디자이너: " 여기서 모바일은 저희 한 줄로 갈까요? "하고 반응형에서는 PC 두 줄과 달리 모바일에서는 한 줄만 나오게 하는 경우가 있습니다.이때 위에 있는 코드의 라인 수를 1로 변경하면 기존의 ellipsis와는 다르게 ... 처리가 되지 않는 것을 확인하실 수 있습니다.div{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; /* 한 줄 ...처리를 위한 기.. 2024. 10. 31.
