웹 디자인에서의 타이포그래피와 디버깅 기법

카테고리

디자인

서브카테고리

UX 디자인

대상자

웹 개발자, UX/UI 디자이너

난이도: 중급 (CSS 기초 및 디버깅 기법 포함)

핵심 요약

• 타이포그래피 핵심 속성: font-style, font-weight, font-size, line-height, text-align 등의 CSS 속성으로 가독성 향상
• 디버깅 도구 활용: Chrome/Firefox DevTools 사용법 (예: Ctrl + Shift + I 또는 Cmd + Shift + I)
• Flexbox 레이아웃: display: flex를 통해 반응형 디자인 구현 가능

섹션별 세부 요약

1. 타이포그래피 핵심 속성

• font-style은 italic 또는 normal로 텍스트 스타일 변경
• font-weight는 bold로 글자 두께 조절
• line-height를 1.5로 설정해 줄 간격을 조절
• text-align은 center로 텍스트 정렬 가능
• text-shadow로 텍스트에 그림자 효과 추가 (예: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5))

2. 디버깅 기법

• 런타임 오류: 코드 구문은 맞지만 결과가 예상과 다를 때 발생
• CSS 디버깅: DevTools에서 border 추가로 요소 경계 시각화
• DevTools 사용법:

- 원소 클릭 후 Inspect으로 HTML/CSS 확인

- Ctrl + Shift + I 또는 Cmd + Shift + I로 빠른 접근

- 실시간으로 HTML/CSS 수정 가능

3. CSS 적용 방법

• 인라인 CSS: 단일 요소에 style 속성 적용 (예:
  )

- 장점: 빠른 수정 가능

- 단점: HTML 파일 정리 어려움, 재사용성 부족

• 내부 CSS: