본문 바로가기
반응형

전체 글136

[실무꿀팁] 반응형으로 백그라운드 이미지 넣기 1초컷 - Part 2 [실무꿀팁] 반응형으로 백그라운드 이미지 넣기 1초컷 - Part 2 초보시절 반응형 작업을 할 때, 글자들은 알아서 잘 흘러주기 때문에 비교적 다루기가 용이하지만, 이미지의 경우에는 떡하니 자리를 크게 차지하면서도 좀처럼 줄어들지 않아서 당황스러운 기억들이 납니다. 한달 전 즈음에, 웹문서에 이미지를 반응형으로 넣기 1초 컷이라는 주제로 포스팅을 했었습니다. 태그를 사용하면서 반응형으로 동작하도록 하는 아주 간단한 방법입니다. [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 아주 간단하게 이미지 반응형으로 넣기 매년 연말 연시가 되면, 고객분들로부터 신년인사 팝업 게재 요청이 들어옵니다. 매년 반복되는 시즈널한 루틴업무죠. 인사말.. 2023. 2. 4.
JS function 문법 기초 정리 JS function 문법 기초 정리 코딩을 공부하다 보면, 반드시 등장하는 게 함수(function) 일 것입니다. 많은 분들이 이미 함수에 대해서는 잘 알고 있을 정도로 유명(?)하고 익숙한(?) 존재일 수 있겠는데요, 너무 가까운 사이이다 보니 제대로 정리를 하지 않고 넘어가서 개념이 제대로 잡히지 않은 경우를 종종 보는 경우가 있습니다. 아주 쉽고 편리한 함수 문법을 이번 포스팅에서 간단하게 정리해두면서 기초를 다져놓고 가보기로 합니다. function 기본 문법 1 - 긴코드 축약해서 사용할 수 있음 함수를 사용하는 이유는 여러 가지가 있겠지만, '긴 코드를 축약해서 사용할 수 있다'는 이점으로 인해 사용됩니다. 아래의 코드를 브라우저 console창에서 실행을 해보면 어떤 결과를 표시해줄까요?.. 2023. 2. 3.
SEO 최적화를 돕는, 이미지 Alt 속성에 Hypen 자동으로 넣기 SEO 최적화를 돕는, 이미지 Alt 속성에 Hypen 자동으로 넣기 최근 ChatGPT 등의 AI에 관심이 많아져서 그런가, 왠지 반복적으로 하는 일들을 줄여볼 수 없을까? 하는 고민을 부쩍 많이 하게 된 것 같습니다. 매일 한 개 정도씩 블로그 포스팅을 하다보니 은근 반복되는 작업이 많습니다. 가장 반복하기 싫은 일은 검색엔진이 잘 읽어낼 수 있도록 첨부된 이미지의 alt 속성값을 넣어주는 일인 것 같습니다. 하기 싫지만, 검색최적화를 위한다면 반드시 해주기를 권장하는 단순반복업무. 게다가 SEO(Seacrh Engine Optimization: 검색엔진 최적화)를 맞추려면, alt 태그에 들어가는 글자들을 공백 대신에 하이픈(-)으로 이어주는 게 좋다고들 그러더라구요.(저는 잘 모르는 영역이라, 카.. 2023. 2. 2.
Chat-GPT를 AI를 이용하여 코딩에 도움 받기 ChatGPT AI를 이용하여 코딩에 도움 받기 며칠 째 주구장창 고객사 프로젝트를 진행해왔더니, 머리에 과부하가 걸린 것 같습니다. 멍~ 하니 좀비처럼 컴퓨터 앞에 앉아서 일을 하고는 있지만 좀처럼 효율이 오르지 않는 상태가 지속되고 있습니다. 웹사이트 구축 작업을 진행중인데요, Bootstrap을 사용해서 Button Group을 후다닥 적용해서 쓰면 딱 좋은 경우가 발생했습니다. getbootstrap.com에 접속해서 버튼 그룹을 찾았고 사용을 하고자 했으나... 이미 기존의 웹사이트에서, 온갖 외부 라이브러리들을 불러다가 사용하는 상태였던지라, 충돌이 나더라구요. T . T 수 많은 작업자들의 손을 거쳐가서 그런지, 연결된 CSS나 JS라이브러리 소스들이 100인 100색, 천차만별 상태였습니다.. 2023. 2. 1.
웹문서에 구글 폰트(Google Fonts) 적용하기 웹문서에 구글 폰트(Google Fonts) 적용하기 웹문서를 만들다 보면 웹문서용으로 사용할 '웹폰트(web fonts)'라는 것이 필요합니다. 물론 웹폰트를 적용하지 않더라도, Windows나 Mac 등의 시스템에서 사용하고 있는 기본 폰트를 통해 글자들이 보여질 수는 있겠지만, 디자인 의도가 적용된 폰트를 제대로 반영하지 못하게 됩니다. CSS에서 세팅한 대로 적절한 폰트가 웹문서에 적용이 되지 않는 경우에는, 폰트가 차지하는 크기가 달라서 문단의 배치 등에도 좋지 않은 영향을 받을 수도 있습니다. 이처럼 웹문서 작성 시에는 분위기와 잘 어울리는 폰트를 사용하는 게 중요할 텐데요, 구글 폰트를 사용하게 되면 이와 같은 이슈를 아주 간단하게 해결할 수 있기 때문에, 거의 전세계의 웹 제작자들이 사용하.. 2023. 1. 31.
[MBTI] ZOMBTI - 이상형 좀비 찾기 App 소개 [MBTI] ZOMBTI - 이상형 좀비 찾기 앱 소개 지난 설날 연휴에, 몰입할 수 있는 시간이 좀 남아서 예전에 만들어 두었던 , 게임 아닌 게임을 좀비 버전으로 업데이트해보았습니다. 이름은 좀비티아이(ZOMBTI)라고 지어봤습니다. 아재스러운 좀비 감성 어쩔... 이상형 남친 찾기, 여친 찾기 앱은 남자용, 여자용 각각 따로 만들었는데요, 따로 만들다 보니 소스 업데이트 하려면 꼭 2번씩 해야 하는 귀찮음이 발생하더라고요. 이번에는 각 잡고 앉아서 남자든 여자든 하나의 앱으로 분기해서 진행할 수 있도록 개선해 보았습니다. MBTI 검사를 이용하여, 좋아할 만한(?) 좀비와 매칭합니다. 사실 뭐 딱히 재미있다고는 할 수 없고, 그저 우리 집 얼라들이 코딩에 관심을 조금이라도 가지게 해 줬으면 좋겠다는.. 2023. 1. 30.
반응형

티스토리툴바