목록146 사이트 성능 측정 방법 ( 백엔드 / 프론트엔드 ) 1. 성능을 개선하려면, 먼저 “측정”이 필요하다코드를 더 잘 짜고 싶고, 사용자 경험도 좋게 만들고 싶다면무작정 최적화부터 하는 게 아니라 “현재 상태를 숫자로 측정”하는 것부터 시작해야 한다. 1) 페이지가 느린 것 같은데 얼마나 느린지2) 서버가 버거워 보이는데 얼마나 바쁜지3) 비용이 많이 나간다는데 얼마나 줄였는지 이런 것들을 전부 숫자(지표)로 말할 수 있어야 “내가 성능 개선을 했다”는 걸 증명할 수 있고,개발자 입장에서도 포트폴리오나 회고에 멋지게 써먹을 수 있는 것! 2. 왜 성능 개선이 중요한가?개발자가 성능을 개선하면, 보통 세 가지가 같이 좋아진다.1) 사용자 경험(UX) 개선화면이 빨리 뜨고, 버튼 클릭 후 응답이 빠르면 “이 서비스 잘 만든 것 같다”라는 인상을 줌.2) 비용 .. 2025. 11. 14. [CSS / Fimga / ai ] <input> 요소에 SVG 아이콘 넣기 ( SVG 아이콘 data URL로 CSS 처리하기 ) SVG에 관한 내용은 다음을 참고바랍니다. SVG란?(링크) 1. 기존 SVG로 아이콘을 적용시키던 방법아이콘을 SVG로 만들어 사용하는 여러 방법이 있지만 오늘은 CSS의 background-image 속성을 사용하여 적용시키는 법을 얘기하려고합니다.기존에는 메뉴등에 들어가는 작은 크기의 아이콘들은 svg로 만들어 html에 삽입하여 사용하거나, 이미지들은 스프라이트 형식으로 바꿔 만들어 img로 사용했는데요.반응형 등의 크기 적용이 어렵고 매번 svg의 위치와 형태를 잡기위해 래퍼(wrapper)요소가 필요하다는 번거로움이 있었습니다. 그러다 background-image로 아이콘을 적용시키는 방식을 선택하니 생각보다 정말 편하고 다른 곳에 적용시키기도 수월해 이후 간단한 아이콘들은 전부 이 방식.. 2025. 9. 26. [asp.net / js] 입력창에 포커스가 있을 때 Enter 키를 누르면 관련 버튼 연결하기 1. ASP.NET / Web Forms의 DefaultButton 사용DefaultButton 속성을 사용하여 관련 버튼을 연결하면 "패널의 기본 버튼" 으로 지정할 수 있습니다.DefaultButton="버튼ID" 형식으로 속성을 추가하면 되는데, 영역을 설정하기 위해 하단처럼 asp:Panel을 사용하였습니다. 동작 원리: 패널 내부에서 Enter를 누르면 DefaultButton에 지정한 버튼이 클릭됩니다(포스트백 발생).장점: JS 없이 서버 컨트롤 방식으로 안정적. UpdatePanel 안에서도 잘 동작.2. JavaScript / keydown 이벤트로 버튼 클릭 트리거 설정JavaScirpt의 keydown 이벤트를 통해 버튼을 연결할 수 있습니다.addEventListene.. 2025. 9. 26. [SVG] icon 은 svg? ✅ SVG 란?SVG는 Scalable Vector Graphics의 약자로, XML 기반의 벡터 그래픽 포맷을 말한다.HTML 문서 안에 2차원 벡터 그래픽을 직접 삽입하거나 외부 파일로 불러와 사용할 수 있으며,XML 코드이기 때문에 파일 크기가 작고, 사례에 따라서는 60~80% 정도 대역폭을 절감한다고 한다.CSS, JS로 제어가 가능하고, HTML 파일에 코드로 작성될 수 있기 때문에 외부 이미지를 가져오기 위해 HTTP request를 할 필요가 없으며, 확대/축소 시 품질 저하가 발생하지 않기 때문에 아이콘, 로고, 일러스트레이션, 애니메이션 등에서 자주 사용된다. 1) 장점파일 크기가 작다.PNG 나 JPG 같은 레스터 이미지보다 SVG 파일이 차지하는 용량(바이트 수)가 더 작다.레스터 .. 2025. 7. 28. [웹디자인 / 폰트] 웹디자인시 폰트는 어떻게 해야 할까? 웹사이트나 앱을 들어가면 정말 많은 정보가 한번에 모여 있는 것을 볼 수 있다.만약 모든 글자들이 같은 크기, 같은 색상, 같은 모양으로 모여 있다면 어떨까?아마, 정보가 너무 많아서 어디서부터 뭘 봐야할지 알 수 없게 될 것이다. 이를 방지하기 위해, 글자의 크기와 대비 등 여러 방법으로 계층을 나누어 독자의 시선을 유도하는 것이다.이러한 계층을 나누는 방법을 타이포그래피, 편집디자인 에서 찾아 볼 수 있었다. 타이포그래피 계층이란?타이포그래피 계층(Typography Hierarchy)은 텍스트의 정보 구조를 시각적으로 구분해 독자가 어떤 정보를 먼저 일고, 어떻게 이해할지 자연스럽게 유도하는 디자인 기법이다.쉽게 말하면, 중요한 내용을 더 눈에 띄게, 덜 중요한 내용은 작고 덜 튀게 표현해서 콘텐츠.. 2025. 4. 7. [css] 글자 밑줄 긋고 밑줄에 스타일 넣기 / text-decoration https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration text-decoration - CSS: Cascading Style Sheets | MDNThe text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.developer.mozilla.orghttps://hianna.tistory.com/679.. 2025. 4. 3. 이전 1 2 3 4 ··· 25 다음
