본문 바로가기

전체 글7

css 초기화코드 css 초기화코드 css 초기화코드입니다. 출처: https://cssdeck.com/blog/scripts/eric-meyer-reset-css/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, .. 2023. 3. 22.
ChatGPT를 이용하여 적정 체중 구하는 코드 구현하기 자바스크립트 수업을 준비하는중입니다. 초반 수업이라, 변수의 개념, 연산자 부분이 진행되고 있습니다. 수업내용 중 연산자를 활용하여 적정체중을 구하는 코드가 있습니다. 그런데 코드가 조금 옛날것이라 수정하고 싶어 ChatGPT에게 적정체중을 구하는 코드를 물어보았습니다. 쨔잔~~~~ 아주, 잘 가르쳐 줍니다. 자비스가 따로 없습니다. BMI가 무엇인지도 친절하게 알려줍니다. 무서운 인공지능입니다. 문득 제 몸무게의 적정여부가 궁금해졌습니다. 요새 다이어트를 하고 있으니까요. 26일차 다이어트중인데 2kg을 뺐습니다. 수업준비도 할 겸, 제 몸무게도 확인할 겸 비주얼스튜디오코드를 열고, 코드를 통해 몸무게를 확인합니다. 코드는 다음과 같습니다. ChatGPT는 콘솔을 통해 결과를 확인하는 코드였습니다. 저.. 2023. 3. 18.
Emmet을 이용한 빠른 코드 작성하기 Emmet을 들어보았나요? Emmet은 html 코드를 축약기능을 활용하여 빠르게 작성할 수 있는 매우 유용한 기능입니다. 비주얼스튜디오코드에서는 Emmet이 내장되어 있어 바로 사용할 수 있습니다. 처음 익숙해지는데만 좀 번거롭지, 익숙해지면 엄청 빠른 속도로 코드를 생성할 수 있습니다. ChatGPT에게 Emmet 물어보기 오늘도 열일하는 ChatGPT에게 물어봅니다. 정말 똑부러지게 설명을 잘 해줍니다. 물론, 틀린 설명도 있습니다. 저는 요새 ChatGPT가 정말 잘 대답해주는지 확인하는 차원에서 활용하고 있습니다. 오픈소스 Emmet 가이드 사이트 살펴보기 다음의 사이트에서 Emmet 에서 대하여 살펴볼 수 있고, 문법도 살펴볼 수 있습니다. https://emmet.io/ 비록 영어지만 친절한.. 2023. 3. 6.
자바스크립트 변수 ChatGPT에게 물어보다! 자바스크립트를 처음 공부하면 변수에 대해 배우게 됩니다. 오늘도 ChatGPT가 뭐라고 하는지 궁금해서 물어보겠습니다. ChatGPT를 사용하려면 먼저 로그인해야 합니다. 저는 구글로 가볍게 로그인했습니다. https://openai.com/blog/chatgpt "자바스크립트 변수에 대해 설명해줘" 라고 말을 겁니다. 똑똑한 ChatGPT는 잘 대답해줄 것입니다. 역시나 기대를 저버리지 않습니다. 아주 잘 설명해줍니다. var, let, const 이렇게 중요한 부분을 다 잘 설명해줍니다. 이제 어떻게 활용하면 되는지 물어보겠습니다. "변수를 활용한 코드를 알려줘" ChatGPT가 알려준 코드를 비주얼스튜디오코드에서 html 문서를 만들고 작성해봅니다. 브라우저에서 확인합니다. prompt( ) 를 통.. 2023. 3. 6.
비주얼스튜디오코드 확장프로그램 추천 10가지 비주얼스튜디오코드를 사용하는 데 있어 유용한 확장프로그램 추천 10가지를 추천합니다 * Bracket Pair Colorizer 2 - 내장됨 Bracket Pair Colorizer 2의 경우 이제는 별도로 설치할 필요가 없습니다. 내장되어 있거든요. Bracket Pair Colorizer 2의 경우 다음과 같이 { }의 짝을 손 쉽게 확인할 수 있어 매우 편리합니다. 1. css-compact css-compact의 경우 Shift + alt + f 키를 통해 css를 한줄로 정렬할 수 있습니다. css가 어느정도 실력이 늘다보면 한줄로 코드를 작성하는 편이 가독성이나 관리면에서 좋습니다. 이 기능은 오직 css 파일에서만 가능합니다. 다음과 같이 코드가 한줄로 정열되어 편리합니다. (Shift +.. 2023. 3. 6.
ChatGPT 활용해 자바스크립트 상단으로 이동하는 코드 만들기(스크롤탑) ChatGPT 활용하면 코드를 짜는 시간이 엄청 단축됩니다. ChatGPT를 활용하여 자바스크립트 상단으로 이동하는 코드를 만들어 보겠습니다. 유튜브영상으로 2분 30초만에 코드를 완성하는 영상도 참고해보세요~ https://www.youtube.com/watch?v=OV_QRa7tgoc 1. ChatGPT 자바스크립트 코드 검색하기 구글검색을 통해 ChatGPT사이트로 이동합니다. ChatGPT에게 잘 물어봐야 시간이 단축됩니다. 같은 질문이라도 다시 질문하면 다른 코드를 알려줍니다. "자바스크립트 상단으로 올라가는 코드 알려줘" 라고 물어보았습니다. ChatGPT가 다음과 같이 코드를 알려줍니다. 엄청 똑똑한 비서, 자비스를 둔 느낌입니다. 코드를 다시 물어보았습니다. "더 간단하게 해줘" 라고 요청.. 2023. 3. 5.
ChatGPT를 통한 자바스크립트 날짜 계산기 만드는 법 자바스크립트를 다루다보면 카운트다운 코드가 필요할 때가 있습니다. 그럴때 우리는 구글을 열고 여기 저기 돌아다녀서 정보를 얻습니다. 오늘 저는 구글을 먼저 열지 않고, ChatGPT를 먼저 열었습니다. 그리고 말을 걸었지요. "100일 카운트하는 코드를 알려줘바" 그리고 ChatGPT는 정말 기가막히게 제게 답변을 주었습니다. 나의 검색시간과 공부시간을 3배 이상 단축시켜주는 느낌입니다. 다음의 코드는 ChatGPT에게 물어본 결과 화면입니다. 기가 막히네요. 자바스크립트를 아무것도 모르는 사람은 사용할 수 없겠지만, 어느 정도 지식 있는 사람은 정말 신세계입니다. 아주 고맙습니다. ChatGPT에게 코드를 물어볼 생각을 하게 된 경위는 이렇습니다. 개인적인 기록을 적는 공간이 있습니다. 나름의 목표를 .. 2023. 2. 28.
반응형

티스토리툴바