전체 글59 ✨ 티스토리 입문자를 위한 주요 CSS 정리 티스토리 입문자를 위한 주요 CSS 정리 ✨초보도 헷갈리지 않게, 가독성 보정 위주로만 👋 알림(본론 전 안내) 저는 CSS 초보입니다. 블로그를 만들며 배운 내용을 **AI(하윤)**의 도움으로 정리했습니다. 정확히 쓰려 노력했지만 틀릴 수 있어요. 오류·보완점은 댓글로 알려주시면 빠르게 반영하겠습니다. (업데이트: 2025-08-09) 🧭 어디에 쓰나? (중요) 위치: 관리자 → 꾸미기 → 스킨 편집 → 사용자 CSS원칙: “전체 갈아엎기” 말고 가독성 보정 몇 줄만 📚 꼭 아는 개념 6가지 선택자(Selector) – 어디에 적용할지태그: p, h2 / 클래스: .note / 아이디: #header / 자손: .entry p박스 모델 – padding·border·margin추천: .. 2025. 8. 9. ✨ 티스토리 운영 업그레이드: 알아두면 좋은 HTML 태그 10선 1) 접이식 FAQ — details + summary 🧰언제: 길어진 설명/FAQ를 접었다 펼칠 때팁: 스킨에 따라 화살표 모양이 조금 다를 수 있어요(미리보기로 확인)예시＞ ＜details＞＞ ＜summary＞이미지 규격은?＜/summary＞＞ 본문 폭에 맞추어 720~1080px로 통일하세요.＞ ＜/details＞2) 하이라이트 — mark 🎯언제: 문단에서 핵심 단어만 살짝 강조팁: 문단당 1회만(색 남발 금지)예시: ＜p＞핵심은 ＜mark＞제목 계층＜/mark＞입니다.＜/p＞3) 약어 툴팁 — abbr 🗂️언제: 약어를 쓸 때 전체 뜻을 툴팁으로 제공예시: ＜abbr title="Search Engine Optimization"＞SEO＜/abbr＞4) 날짜·시간 — time 🗓️언제:.. 2025. 8. 9. ✨티스토리 입문자를 위한 주요 HTML 태그 정리 티스토리 입문자를 위한 주요 HTML 태그 정리 ✨초보도 헷갈리지 않게, 꼭 필요한 태그와 사용법만 쏙쏙 👋 알림(본론 전 안내) 저는 HTML 초보입니다. 블로그를 만들며 배운 내용을 AI(하윤)의 도움으로 정리했습니다. 정확히 쓰려 노력했지만 틀릴 수 있어요. 오류·보완점은 댓글로 알려주시면 빠르게 반영하겠습니다. (업데이트: 2025-08-09) 1) 텍스트·제목 🏷️h1 ~ h3 — 제목 계층언제: 큰제목(h1 1번), 섹션(h2), 소섹션(h3)규칙: h1은 문서당 1개, 순서 h1→h2→h3예시:＞ ＜h1＞오늘의 주제＜/h1＞ / ＜h2＞1. 준비＜/h2＞ / ＜h3＞1-1. 선택＜/h3＞p — 문단 ✍️2~3줄로 짧게, 문단당 핵심 1개(주의) p 안에 div/sect.. 2025. 8. 9. 레슨7 : 메타데이터 & SEO 기초(``, OG/Twitter, 파비콘) 표(table) & 접근성 기초 언제 표를 쓸까?데이터 비교가 목적일 때 표 사용.레이아웃 용도의 은 금지 (CSS로 해결). 표의 기본 구조강좌 진행 일정(예시)회차주제날짜수강생1HTML 기초2025-08-10322텍스트 태그2025-08-1229합계61 접근성 핵심열 헤더: , 행 헤더: 머리글이 2단 이상이면 id/headers로 연결 복합 머리글 표(요약 예시) 지표 6월 7월 사용자 방문 사용자 방문 UV/PV 12,300 34,900 15,120 40,210 반응형(모바일) 처리 ... 숫자 정렬 팁숫자 열은 오른쪽 정렬이 읽기 쉬움.단위는 머리글에 붙이거나 PV로 제공.미니 템플릿(바로 사용) .. 2025. 8. 8. 레슨6 : 표(table) & 접근성 기초 언제 표를 쓸까?데이터 비교가 목적일 때 표 사용.레이아웃 용도의 은 금지 (CSS로 해결) 표의 기본 구조강좌 진행 일정(예시)회차주제날짜수강생1HTML 기초2025-08-10322텍스트 태그2025-08-1229합계61 접근성 핵심열 헤더: , 행 헤더: 머리글이 2단 이상이면 id/headers로 연결 복합 머리글 표(요약 예시) 지표 6월 7월 사용자 방문 사용자 방문 UV/PV 12,300 34,900 15,120 40,210 반응형(모바일) 처리 ... 숫자 정렬 팁숫자 열은 오른쪽 정렬이 읽기 쉬움.단위는 머리글에 붙이거나 PV로 제공.미니 템플릿(바로 사용) 커리큘럼(요약) .. 2025. 8. 8. 레슨5 : 폼(form) 기초 — 입력, 검증, 접근성 1) 기본 구조 이름 보내기action: 전송 서버 주소(실서비스 시 교체)method: get(조회) / post(등록)name이 있어야 값이 전송됩니다label for ↔ input id 매칭 2) 입력 타입 모음 이메일* 전화번호 웹사이트나이약속 날짜첨부 파일 3) 선택·라디오·체크박스문의 주제 선택하세요 강좌 문의 제휴/광고 기타 수신 방식 이메일 전화 소식지 구독 4) 텍스트 영역과 검증내용 placeholder는 라벨 대체가 아닙니다. 항상 label을 사용하세요. 5) 예제 — ‘문의하기’ 폼문의하기 이름 * 이메일 * 문의 주제선택하세요강좌 문의제휴/광고기타수신 방식 이메일 전화내용 개인정보 수집·이용에 동의합니다.. 2025. 8. 8. 이전 1 2 3 4 5 6 7 8 ··· 10 다음