HTML,CSS,JavaScript 썸네일형 리스트형 🎯 심심풀이 코인 투자 오늘의 운세 웹사이트 만들기 (GPT, CoinMarketCap) 심심풀이 코인 투자 운세 웹사이트 만들기안녕하세요! 오늘은 제가 직접 개발한'코인 투자 운세 웹사이트' 제작 과정을 소개하려고 합니다.사용자가 입력한 정보를 기반으로 그날의 투자 운세를 보여주는 웹서비스이며,GPT 도움을 받아 JavaScript로 제작된 프로젝트입니다 💪🧠 프로젝트 개요항목내용🎯 목적투자자 대상의 재미 요소 + 심리 안정 + 트래픽 수익🧙 기능성별, 생일, 태어난 시각, 코인 선택 → 맞춤 운세 출력🔮 특징하루 동안 고정된 운세, 길고 구체적인 결과, 광고 삽입 가능💰 수익화Google AdSense 응용📱 UI모바일 최적화, 반응형 웹 구성🗂️ 데이터 구성총 1000개 이상의 운세 문구매 순간 GPT를 사용하면 여러가지 조합이 나오지만 API를 사용하지 않음사용자의 성별.. 더보기 [HTML] 이것만 알아도 실수를 줄일 수 있다. "HTML? 간단하다며 시작했는데, 왜 이렇게 자꾸 꼬이지?"웹 개발 입문자라면 꼭 한 번쯤 겪는'도대체 뭐가 문제인지 모르겠는 상황들'...사실 그 시작은 [사소한 HTML 실수]에서 비롯됩니다.이번 글에서는 HTML을 배우면서많은 사람들이 반복하는 10가지 실수를실전 예제와 함께 디테일하게 짚어볼게요. 🤓오늘 배울 태그 & 실수 포인트 💡 각 실수마다 "잘못된 코드"와 "수정된 코드"를 비교하며,왜 그 실수가 문제인지 구체적으로 이해할 수 있게 구성했어요. 1. 생략→ 한글이 깨지는 가장 흔한 원인입니다. 메타 태그는 문서의 문자 인코딩을 알려줘요.이게 없으면 특히 한글이 깨져서 보일 수 있어요.반드시 브라우저 탭에 표시되는 제목인 은반드시 내부에 위치해야만 해요. 8~10. 사소하지만.. 더보기 [HTML] JavaScript 연결은 해야 쓰지! "HTML만으로도 괜찮다고요? 그럼 지금 누르고 있는 이 버튼은 어떻게 반응하죠?" HTML은 구조이고, CSS는 스타일입니다. 하지만 웹에 생명을 불어넣는 건 JavaScript죠. 단순한 연결을 넘어, 이제는 이건 가장 기본적인 방식입니다. src 속성을 사용하면 외부 JavaScript 파일을 연결할 수 있습니다.코드 분리, 캐싱, 관리 효율성 등 모든 면에서 이 방식이 낫습니다. 특히 코드량이 많아질수록 JS는 HTML에서 분리하는 것이 모범 구조입니다. defer는 HTML 파싱이 끝난 후 스크립트를 실행하라는 의미입니다. 안에 JS를 넣을 때 자주 사용되며, DOM이 준비되지 않은 상태에서 실행되는 문제를 예방할 수 있습니다. async와의 차이도 중요하니 아래에서 살펴볼게요. .. 더보기 [HTML] label 왜 쓰냐고?? “label? 그냥 텍스트 붙이는 거 아닌가요?” 그렇게 단순하게 생각했다면, 이번 글이 당신의 HTML 시야를 바꿔줄지도 모릅니다. 폼 UX의 핵심이자, 접근성과 상호작용의 교차점에 있는 태그. 잘 쓰면 친절한 웹이 되고, 못 쓰면 사용자와 자주 충돌합니다. label, 그 이름 이상의 역할을 보여드릴게요.오늘 배울 태그는 입니다.아이디 가장 기본적인 사용 예입니다. for="username"은 id="username"을 가진 input과 연결되어 있어 라벨을 클릭하면 자동으로 해당 input에 포커스가 갑니다. 작은 상호작용 같지만, UX를 부드럽게 만드는 핵심이죠. 이메일 은 input을 감싸는 방식으로도 사용할 수 있어요. 이 방식은 for와 id를 생략할 수 있고, 코드가 짧아지며.. 더보기 [HTML] Hidden 활용으로 숨기기 "이 요소는 왜 안 보일까?" 브라우저에서 요소가 사라졌다고 무조건 display: none;일까요? 그럴 수도 있지만… HTML만으로도 콘텐츠를 숨길 수 있다면? 그게 바로 오늘 이야기할 hidden 속성입니다. 간단해 보이지만, 활용하기에 따라 UX, 접근성, SEO까지 좌우하는 태그 알아두면 꽤 유용합니다.오늘 배울 건 HTML의 hidden 속성입니다. 이 문장은 사용자에게 보이지 않습니다. hidden 속성은 HTML 요소를 브라우저 화면에서 감추는 표준 속성입니다. CSS 없이도 요소를 숨길 수 있으며, DOM에는 남아 있지만 사용자는 볼 수 없습니다. 기본적으로 display: none;과 유사하게 동작합니다. 다만, HTML 레벨에서 선언되므로 가독성과 유지보수에 유리한 경우가 많죠. .. 더보기 [HTML] CSS 추가하기 HTML만으로도 괜찮다고요? 디자인 안 입힌 HTML은 그냥 밋밋한 뼈대일 뿐입니다. 눈에 보이는 건 결국 CSS가 만들어주는 거예요. 버튼 하나, 간격 하나, 폰트의 질감까지. 그런데 아직도 CSS를 어떻게 연결할지 모르겠다면, 이번 글이 꽤 실용적일 겁니다. 오늘은 HTML에 CSS 파일을 연결하고 제대로 활용하는 방법에 대해 정리해 보겠습니다. 오늘 배울 건 HTML에서 CSS 파일 추가하는 법입니다. HTML에 외부 CSS를 연결하려면 태그를 사용합니다. rel="stylesheet"는 이 파일이 CSS임을 나타내고, href="styles.css"는 연결할 CSS 파일의 경로입니다. 이 태그는 반드시 안에 넣어야 브라우저가 문서를 로딩하면서 스타일을 바로 적용할 수 있어요. // sty.. 더보기 [HTML] Slot 아주 유연해~ [HTML] Slot 아주 유연해~이 태그 안 쓰고 웹 컴포넌트 만든다고요? 진심으로 묻습니다. 괜찮으신가요? 커스터마이징은 하고 싶고, 구조는 유지하고 싶고, 그런데 방법을 모른다면 오늘 이 글이 해답이 될지도 몰라요. HTML에서 slot 태그는 웹 컴포넌트의 유연함을 완성하는 마지막 퍼즐입니다. 조용하지만, 강력한 존재. 그게 바로 . 오늘 배울 태그는 입니다. // HTML 컴포넌트 정의 (예: my-card.html) 기본 텍스트 태그는 웹 컴포넌트 내부에서 외부 콘텐츠가 삽입될 위치를 정의합니다. 위 예시에서는 슬롯이 비어 있으면 "기본 텍스트"가 출력되고, 외부에서 삽입한 내용이 있으면 그것이 우선 적용됩니다. 이런 방식은 컴포넌트 재사용성과 유연성을 크게 높여줍니다. //.. 더보기 [HTML] Table 아직 살아있다.. "테이블은 옛날 기술이라며?" 그렇게 생각하는 순간, 데이터가 흐트러지고, 정렬이 엉망이 됩니다. HTML 테이블, 단순해 보여도 표현 하나 잘못하면 사용자 눈에 ‘엉망진창’으로 보여요. 중급자도 종종 헷갈리는 부분이니까, 이번 기회에 정리 제대로 해보는 거 어때요? 오늘은 기초부터 실전까지, HTML Table을 다룹니다.오늘 배울 태그는 입니다. 이름 직업 나이 홍길동 개발자 29 HTML 테이블의 기본 구조는 로 시작해서 행(), 열(/)로 구성됩니다. 는 헤더 셀, 는 일반 셀입니다. border="1"은 테두리를 추가하기 위한 HTML 속성인데, 실제로는 CSS로 스타일링하는 게 더 일반적이에요. 시멘틱 구조를 유지하면서도 시각적으로 정돈된 표를 .. 더보기 이전 1 2 3 4 다음 목록 더보기 > 오늘의 코인 운세 보기 <
