GitHub Pages에 스크래치 쿠폰 HTML 올리는 방법

스크래치 쿠폰을 HTML로 만들어서 GitHub Pages에 올리고,티스토리 블로그에 바로 삽입하는 방법을 알려드릴게요. 처음 한 번만 설정해두면,그 다음부터는 파일만 바꿔서 쿠폰을 계속 운영할 수 있어서 정말 편하답니다. 1단계. 메모장으로 HTML 파일 만들기HTML 편집기가 없어도 괜찮아요.메모장으로 index.html 파일을 만들고, UTF-8로 저장해 주세요. 쿠폰이 여기에 표시됩니다 2단계. GitHub 저장소 만들고 파일 올리기GitHub에 로그인한 뒤 New repository 버튼을 클릭해요저장소 이름은 예: scratch-coupon으로 정해볼게요저장소가 만들어지면 상단 메뉴에서 Code 탭에 있는지 확인해 주세요여기서 꼭 주의할 점!GitHub Pages는 main 브랜치 기준으로..

[HTML 실습] 스크래치 쿠폰 + 랜덤 확률 당첨 (with GitHub Pages)

프롬프트로 웹페이지에서 반응형 1×3 이미지 그리드 넣는 방법

웹페이지에 이미지를 가로로 3장 나란히 정렬하고 싶을 때,실패하지 않으려면 구성 요소를 미리 정리해두는 게 좋아요. 이 글은 나중에 복사해서 다시 쓸 수 있도록 실무 중심으로 작성했어요.1. 구조화 프롬프트 (HTML 요청용)HTML 코드를 요청할 때 아래 문장을 그대로 복사해서 붙여넣으면 돼요.웹페이지 본문에 넣을 HTML 코드를 만들어줘. 이미지 3장을 1행 3열 형태로 가로 정렬해줘. 각 이미지는 가로세로 비율이 유지되도록 설정하고, 왜곡되지 않게 만들어줘. 이미지 아래에는 짧은 텍스트 설명이 들어가도록 해줘. 반응형 디자인도 적용해서, 모바일에서는 이미지가 한 줄씩 세로로 배치되게 만들어줘. 모든 스타일은 인라인 CSS로 구성해줘. 외부 CSS 파일 없이 사용할 수 있게 해줘. 웹페이지에서 잘리지..

html 로 만든 콜라주 레이아웃

1. 가로 3장 배열 (1×3 그리드) 이미지 1 이미지 2 이미지 3 2. 세로 3장 배열 (3×1 그리드) 이미지 1 이미지 2 이미지 3 3. 왼쪽에 큰 사진 1장, 오른쪽에 작은 사진 2장 수직 배열 큰 이미지 작은 이미지 1 작은 이미지 2 4. 상단에 큰 사진 1장, 하단에 작은 사..

카테고리 클릭 시 제품 목록을 표시하는 방법

침실 거실 주방 웹페이지에서 카테고리 클릭 시 해당 카테고리의 제품 목록을 하단에 표시하고,제품 클릭 시 해당 페이지로 이동하는 기능을 구현할 수 있어요. 아래 방법을 따라 해 보세요.1. HTML 코드 작성먼저, HTML에서는 카테고리 항목과 제품 목록을 표시할 자리를 만들어야 해요. 침실 거실 주방 2. CSS 코드CSS는 카테고리 메뉴와 제품 목록을 깔끔하게 스타일링하는 부분이에요..category-menu { display: flex; justify-content: space-around; padding: 20px 0; background-color: #f1f1f1; border-bottom: 1px solid #ddd;}.category-..

[티스토리 꾸미기] 위로 올라가는 플로팅 버튼, 이렇게 만드세요

블로그 글을 읽고 나서,다시 맨 위로 올리기 귀찮았던 적 있으시죠? 그럴 때 필요한 게 바로화면 한쪽에 고정된 플로팅 버튼입니다. 오늘은 티스토리에 “Top으로 이동” 버튼을 만드는 2가지 방법을 알려드릴게요!1. 플로팅 버튼이란?스크롤해도 화면에 고정되어 있는 버튼이에요.주로 화면 오른쪽 아래에 위치해서,문의, 이동, 이벤트 참여 등을 빠르게 유도하죠.2. 플로팅 버튼 만드는 2가지 방법 구분 텍스트 버튼 이미지 버튼 코드 형태 태그 + 텍스트 스타일링 태그 + 태그버튼 디자인색상, 글꼴, 배경 등을 CSS로 꾸밈미리 디자인된 버튼 이미지를 그대로 사용자유도스타일 자유롭게 변경 가능이미지 자체는 수정 어려움활용 예빠른 구현, 반응형에 유리브랜드 통일감 줄 때 효과적3. 방법1. 텍스트형 플로..

호스팅이 필요한 HTML과 아닌 HTML, 초보자를 위한 실전 가이드

호스팅이 필요한 HTML과 아닌 HTML, 초보자를 위한 실전 가이드HTML 문서, 꼭 호스팅이 필요한 걸까?HTML을 배우다 보면 처음 드는 의문이 있습니다.HTML 만들었는데, 이제 이걸 어디에 올리지?호스팅이 꼭 필요한 건가?결론: HTML의 종류와 목적에 따라 호스팅이 필요할 수도 있고, 필요하지 않을 수도 있어요.1. HTML 문서는 단순 파일이다 .html 확장자를 가진 텍스트 문서 내 컴퓨터에 저장하면 더블 클릭만으로 브라우저에서 실행 단, 이 상태는 나만 보기 용도→ 다른 사람이 보게 하려면 호스팅이 필요!2. 호스팅이 필요한 경우 vs 필요 없는 경우 상황 호스팅 필요 여부 설명 HTML 텍스트만 복사해서 붙이는 경..

호스팅이 필요한 HTML과 아닌 HTML, 초보자를 위한 실전 가이드

호스팅이 필요한 HTML과 아닌 HTML, 초보자를 위한 실전 가이드 HTML 문서, 꼭 호스팅이 필요한 걸까? HTML을 배우다 보면 처음 드는 의문이 있습니다. HTML 만들었는데, 이제 이걸 어디에 올리지? 호스팅이 꼭 필요한 건가? 결론: HTML의 종류와 목적에 따라 호스팅이 필요할 수도 있고, 필요하지 않을 수도 있어요. 1. HTML 문서는 단순 파일이다 .html 확장자를 가진 텍스트 문서 내 컴퓨터에 저장하면 더블 클릭만으로 브라우저에서 실행 단, 이 상태는 나만 보기 용도 → 다른 사람도 보게 하려면 호스팅이 필요! 2. 호스팅이 필요한 경우 vs 필요 없는 경우 상황 호스팅 필요 여부 설명 ..

초보 마케터가 HTML을 배우면 어디에 쓰고, 어떻게 돈이 될까?

마케터도 HTML을 알아야 하는 시대입니다. 글을 예쁘게 꾸미거나, 클릭률 높은 뉴스레터를 만들고, 상세페이지를 직접 수정하려면 HTML은 필수입니다.이 글에서는 "HTML을 배워서 실무에서 어디에 활용하고, 수익까지 연결되는가?"를 정리해보겠습니다.1. 실무에서 HTML이 쓰이는 순간들상황 HTML이 필요한 이유블로그/뉴스레터/랜딩페이지 작성텍스트, 이미지, 버튼, 링크 정렬 등 정확한 레이아웃 조정 가능이메일 마케팅HTML 이메일 템플릿 수정 (텍스트 정렬, 이미지 위치 등)스마트스토어, 쿠팡 상세페이지 제작상품 설명 구성/디자인 직접 조정 가능마케팅 자동화 툴 사용이메일/폼/페이지 구성 시 코드 조작 필요개발자와 협업할 때코드 구조를 이해하면 커뮤니케이션이 수월해짐2. HTML을 알면 어떤 능력이 ..

HTML 안에 CSS를 넣어도 될까? 확장자까지 깔끔하게 정리해드립니다

처음 HTML을 배우다 보면 이런 의문이 생기기 마련입니다.“HTML 파일 안에 CSS를 써도 되나요?”“그럼 CSS는 어디에 어떻게 써야 하는 거죠?”“파일 확장자가 .html이면 CSS도 같이 써도 되는 건가요?”이번 글에서는 HTML과 CSS의 관계를확장자 중심으로 아주 쉽게 정리해보겠습니다.표 + 실습 예시로 구조만 봐도 바로 이해할 수 있도록 정리했어요!1. HTML과 CSS는 무엇이 다를까?구분 HTML CSS정식 명칭HyperText Markup LanguageCascading Style Sheets역할웹페이지의 구조와 내용 정의내용의 디자인과 스타일 지정기본 문법, , 등.box { color: red; }비유건물의 뼈대인테리어HTML은 보여줄 내용을 만든다CSS는 그 내용을 예쁘게 꾸민..