본문 바로가기
반응형

전체 글136

부트스트랩 Layout의 시작 - BreakPoints, Container, Grid Bootstrap은 그냥 예제 코드를 가져다 복붙해서 사용하는 아주 편리한 방식을 제공합니다. 그래서 보통은 Button과 같은 엘리먼트를 먼저 사용해보면서 작동방식을 익혀나가게 되는데요, 웹사이트를 만들면서 정말 정말 중요한 것은 바로 Layout을 잡아나가는 과정이 될 것입니다. 레이아웃을 잡지 않은 상태로 버튼만 가져다가 사용하거나 하진 않을테니까요. 그래서 이번에는 부트스트랩을 사용할 때 마다 매번 반복되는, 초기 세팅방식과 레이아웃에 대한 이해를 해두기로 합니다. 부트스트랩 Layout의 시작 부트스트랩의 표어는 Build fast, responsive sites. 즉 반응형 사이트들을 빠르게 만들수 있다! 라는 것입니다. 사실 부트스트랩이 얼마나 큰 편리함을 제공하는가에 대해서는, 이미 HTM.. 2022. 12. 24.
setTimeout(), clearTimeout() 기본 동작 방식 살펴보기 setTimeout(), clearTimeout() 지난 번에 Web 애플리케이션을 만들면서 시간 차를 두고 동작하는 기능에 대한 구현이 필요했었습니다. 그래서 예전에 봐두었던, setTimeout()과 celarTimeout() 함수를 떠올리게 되었고 사용을 하려고 했는데, 돌아서면 까먹는 나이다 보니 잘 생각이 나지 않더라구요. 그래서 오늘은 실행 타이밍을 제어할 수 있는 이 기능에 대해서 정리해두려고 합니다. setTimeout() 기본 동작 방식 setTimeout()은 타이머(Timer) 기능을 한다고 보면 됩니다. 말 그대로 '타임 아웃!' 되는 순간을 세팅해두는 것이죠. 기본적인 사용문법은 다음과 같습니다. setTimeout(() => { 실행할코드 }, 지연시간); setTimeout((.. 2022. 12. 23.
방문 통계가 필요한 웹 페이지에 구글 애널리틱스 적용하기 MBTI 이상형 찾기 테스트 웹페이지를 만들고 나니, 사람들이 얼마나 방문하게 되는 지 그 수치가 궁금해졌습니다. 예전에 사용을 해봤던 구글 애널리틱스를 한번 적용해보기로 합니다. Google Analytics 구글 애널리틱스는 웹사이트 방문자의 트래픽을 추적하고 데이터를 수집해주는 서비스입니다. 보통의 일반적인 사용자들에게는 무료로 제공되고, 1000만 뷰가 넘을 때 유료로 전환하는 것으로 알고 있습니다. 구글 애널리틱스에 접속을 해보니, 예전에 다른 웹사이트에 걸어두었던 내용이 보입니다. 그렇다면, 관찰하려는 사이트를 추가해주면 되겠죠? 사이트 추가하기 애널리틱스 홈 화면에서, 좌측 하단의 톱니바퀴, 관리 아이콘을 클릭해줍니다. 이후 [+계정만들기] 버튼을 클릭하면 추가로 사이트를 등록할 수 있습니다.. 2022. 12. 22.
MBTI 이상형 여친 찾기 / MBTI 이상형 남친 찾기 App 소개 첫 개인 프로젝트로 진행해본 Web앱 입니다. MBTI 이상형 여친 찾기 / MBTI 이상형 남친 찾기 여기서 해보실 수 있어요. https://app.kincoding.com/girl/ MBTI 이상형 여친 찾기 AI가 당신의 이상형을 추천해드려요 app.kincoding.com https://app.kincoding.com/boy/ MBTI 이상형 남친 찾기 AI가 당신의 이상형을 추천해드려요 app.kincoding.com 화면구성 화면구성은 다음과 같습니다. 메인 페이지 입니다. 그냥 [시작하기] 버튼을 당장 클릭하면 끝! 남성 사용자라면 로, 여성 사용자라면 로 진행해보세요. 그러면 이렇게 성격분석을 위한 몇 가지 질문을 하게 되구요, 느낌이 빡! 오는대로 선택해주시면 됩니다. 진행하시다 하단에.. 2022. 12. 21.
여러 개의 이미지 파일들을 로테이션 해서 보여주기 - Shuffle 효과 최근에 개인프로젝트로 간단한 웹기반 애플리케이션을 만들었습니다. 크리스마스 시즌이기도 해서 신년 인사들을 메신저로 많이 주고받을 텐데요, 그때 지인들에게 보내주면 좋겠다는 생각이 들어서 간단하게 즐길 수 있는 app을 만들어보았습니다. 막상 직접 프로젝트를 진행하다보니 디테일에 점점 욕심이 났지만, 재미로 하는 작업이라 그냥 심플한 수준에서 마무리를 했습니다. MBTI 이상형 여친 찾기 / 남친 찾기 제가 이번에 만들어 본 애플리케이션입니다. 뭔가 거창한 걸 만들 시간은 없고해서 짧게 진행할 수 있는 프로젝트로 선정을 해봤습니다. 연말, 크리스마스에는 뭐니뭐니 해도 옆구리 허전한 사람들에게는 절대적으로 애인이 필요하겠죠?^^; 직접 해보는 게 가장 큰 공부 역시나 그 동안 공부해왔던 내용을 바탕으로 셀프.. 2022. 12. 20.
[AI] ChatGPT 사용해보기(ft. 코딩 초보자에 도움을?) 여러분들은 AI에 대해서 얼마나 관심을 갖고 계시나요? 자율주행차는 한번이라도 타 보셨나요? 아직까지는 현실의 생활과 밀접하게 관계를 이루는 것들이 많지는 않아서 잘 못 느끼겠지만, IT산업 분야에서는 많은 부분들에서 AI가 급진적으로 적용이 되고 있습니다. 우리들과 아주 가까운 곳에서는 Youtube에서 사용자가 좋아할만한 영상을 추천해 주는 알고리즘에 AI가 사용되고 있습니다. 넷플릭스에서 영화를 추천해주는 것도 비슷한 맥락이죠. ChatGPT 사용해보기 이번 달 초반에 OPEN AI에서 발표한 ChatGPT라는 인공지능 채팅이 IT분야에서 화제가 되고 있습니다. 그래서 오늘은 빠르게 한번 ChatGPT 3를 살펴봐두기로 합니다. 도대체 ChatGPT가 뭐길래 '구글 검색은 죽었고, 향후에는 AI 검.. 2022. 12. 19.
반응형

티스토리툴바