[프론트엔드] 폰트 쓰다 겪는 문제들 해결법 개발하면서 폰트를 끌어다 쓸 때 생각지 못한 다양한 문제가 생기곤 합니다.아래는 그러한 문제들의 해결법입니다.기본 폰트 뭐 쓰나요?대부분의 상황에서 기본 폰트는 "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. 프론트엔드 개발자에게 추천하는 사이트 모음 (특히 뉴비) 방가링입니다!아래 사이트를 통하여 좀 더 빨리 일을 끝내시거나 적더라도 도움이 되었으면 좋겠네요.제가 그랬던 것처럼.개발 관련Codepen 세트 CodePenAn online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.codepen.io PugHtml - Pug and HTML online converter in realtime pughtml.com SCSS to CSS Online Converter - Json2CSharp Toolkit json2csharp.com Ba.. 2024. 10. 20. 프론트엔드 개발자가 알아야 하는 피그마 사용법 (기초) "혹시 피그마 사용할 줄 아세요?"요즘 면접 질문 때 프론트엔드나 퍼블리셔들에게 자주 들어오는 질문일 것입니다.디자이너랑 협업할 때 다양한 툴(포토샵, 일러스트레이터, 어도비 XD, 피그마)로 작업하니 다 조금씩은 사용할 줄 알면 좋습니다. 이중 최근 트렌드는 피그마입니다. 트렌드 때문이 아니서라도 여러 디자이너와의 협업에서 피그마가 가장 사용 경험이 좋았기에 개발자의 피그마 간단 사용 방법을 꼭 공유하고 싶었습니다.피그마의 장점필수 기능 무료.피그마 개발자 모드는 유료입니다. 무료여도 충분히 사용하는데 이상없었습니다.개발자 모드에서는 CSS를 좀 더 편하게 가져오거나, 간격 확인을 마우스 호버로만 할 수 있습니다.Drafts에 작업물 무한 저장 가능. (Drafts는 메모장 같은 개념입니다.)All p.. 2024. 10. 20. 개인정보보호를 아십니까? "뭘 당연한 소리를." 하고 넘길 수 있는 질문입니다.그러나 내가 이에 대해서 명확히 잘 알고 있는가?내 개발에 개인정보보호에 관한 지식이 even 하게 녹아들어 있는가?이러한 생각을 하니 저는 그만 자신을 잃어버리고 말았습니다.이런 저에게 KISIA(한국정보보호산업협회)에서 주관하는 '개인정보보호 기초 과정'에 참여할 수 있는 기회가 주어져 열심히 교육을 듣고 왔습니다.많은 개발자가 관련 교육이 없는 상태로 선배들의 발자국을 쫓아 개발을 이어나가고 있을 것입니다.사수가 없는 경우에는 더욱 막막하겠지요.이러한 분들에게 미약한 도움이 되어드리면 좋겠다는 생각에 교육 내용을 정리하여 공유하니 필요하신 분은 참고 부탁드립니다.만약 왜곡된 정보가 있다면 댓글로 알려주세요.빠르게 수정하겠습니다!주의사항:저는 법률.. 2024. 10. 16. 00님, 저희 페이지 검색해도 안 나오는데요?[5] (H tag 작성하는 법) 생각보다 사이트 제작 시 많은 사람들이 놓치는 부분이 H tag입니다.H tag는 SEO의 근본이라고 볼 수 있기 때문에 각 사이트와 페이지에 맞게 H tag를 올바르게 넣어줘야 합니다.H tag의 특징H tag의 H는 heading을 의미합니다.h1 ~ h6까지 있으며 구획 제목을 나타냅니다.H tag는 h1 ~ h6까지 있습니다.h1이 높고 h6이 낮습니다.가급적 내용의 순서와 중요도에 맞게 h1 다음에 h2, h2 다음에 h3을 적습니다.H1 태그는 한 페이지에 하나만 존재해야 합니다. 보통은 H1 태그 안에 logo를 넣은 뒤 H1 태그 클릭 시 Home으로 갈 수 있도록 합니다.이는 시각 장애인이나 다른 제한 사항이 있는 분들을 위해 대부분의 웹페이지에서 준수하는 웹 표준 규칙입니다. 웹 접근성.. 2024. 10. 14.
