텍스트와 타이포그래피
제목, 문단, 강조 등 HTML 텍스트 태그의 역할부터 크기, 줄간격, 대비 등 읽기 편한 스타일링 규칙까지 한번에 배웁니다.
테헤란로 123
우편번호: 06234
요소를 선택하세요
다이어그램에서 영역을 클릭하면
자세한 설명을 볼 수 있습니다.
블록 요소 vs 인라인 요소
블록 (Block) 요소
택배 상자처럼 쌓이는 요소예요.
다음 상자는 무조건 아래로 내려가요.
인라인 (Inline) 요소
손글씨처럼 옆으로 이어지는 요소예요.
줄 안에서 나란히 배치돼요.
본문 가독성 조절기
슬라이더를 움직여서 가장 읽기 편한 조합을 찾아보세요. 한국어 본문은 16px 이상, 줄간격 1.6~1.8이 편해요.
좋은 타이포그래피는 읽는 사람이 '디자인'을 의식하지 못하게 만드는 것입니다. 글을 읽다가 "글자가 너무 작다", "줄이 너무 빽빽하다"고 느낀 적이 있다면, 그건 타이포그래피가 실패한 거예요. 반대로, 편하게 쭉 읽혔다면 그 뒤에는 적절한 글자 크기와 줄간격이 있었을 거예요.
바이브코딩 팁
AI에게 "본문 줄간격을 1.7로 설정하고, 최소 글자 크기를 16px로 해줘"
문장 길이 시뮬레이터
한 줄이 너무 길면 눈이 다음 줄을 찾기 힘들고, 너무 짧으면 시선이 자주 끊겨요. 슬라이더로 확인해보세요.
좋은 타이포그래피는 읽는 사람이 '디자인'을 의식하지 못하게 만드는 것입니다. 글을 읽다가 "글자가 너무 작다", "줄이 너무 빽빽하다"고 느낀 적이 있다면, 그건 타이포그래피가 실패한 거예요. 반대로, 편하게 쭉 읽혔다면 그 뒤에는 적절한 글자 크기와 줄간격이 있었을 거예요.
바이브코딩 팁
AI에게 "블로그 본문의 최대 너비를 680px로 제한하고 가운데 정렬해줘"
강조 규칙
모든 걸 강조하면 아무것도 강조되지 않아요. 최소한으로, 전략적으로 사용하세요.
과한 강조의 예
바이브코딩은 정말 혁신적인 방법이에요. AI에게 자연어로 요청하면 코드를 자동으로 만들어줍니다. 놀랍지 않나요? 지금 바로 시작해보세요!
문제점
- 모든 문장에 볼드 - 뭐가 중요한지 모름
- 5가지 색상 사용 - 산만하고 통일감 없음
- 밑줄 + 기울임 + 볼드 혼용 - 읽기 피로
바이브코딩 팁
AI에게 "이 텍스트에서 가장 중요한 한 문장만 볼드로 강조해줘. 나머지는 일반 텍스트로"
텍스트 대비 검사
글자가 배경에서 잘 보이려면 대비율 4.5:1 이상이 필요해요 (WCAG AA 기준). 다양한 조합을 클릭해서 확인해보세요.
안녕하세요, 바이브코딩!
바이브코딩으로 웹사이트를 만들 때, 텍스트가 잘 읽히게 만드는 것이 가장 중요해요. 아무리 멋진 디자인도 글을 못 읽으면 의미가 없으니까요.
바이브코딩 팁
AI에게 "본문 텍스트와 배경색의 대비율이 4.5:1 이상인지 확인하고, 부족하면 조정해줘"