728x90
웹디자이너는 디자인만 잘하면 될까요?
이제는 “코드도 이해하는 디자이너”가 경쟁력입니다.
특히 Figma로 작업한 시안이 실제 웹에서 어떻게 구현되는지 이해하면,
- 개발자와의 협업 효율이 높아지고
- 실현 가능한 디자인을 만들 수 있으며
- 개인 포트폴리오 사이트까지 직접 만들 수 있습니다.
그래서 오늘은 디자이너에게 꼭 필요한 HTML/CSS 핵심 개념을 요약표 형태로 정리해드릴게요.
👩💻 비전공자·초보 디자이너도 쉽게 이해할 수 있도록 구성했습니다.
🧱 1. HTML 요약표 – 구조를 만드는 언어
태그의미 및 용도
| <div> | 콘텐츠 묶음 (레이아웃용 기본 박스) |
| <span> | 인라인 요소 (글자/문장 강조 시 사용) |
| <h1>~<h6> | 제목 태그 (숫자가 작을수록 큰 제목) |
| <p> | 문단 (paragraph) |
| <a href=""> | 링크 삽입 (텍스트나 이미지에 링크 연결) |
| <img src=""> | 이미지 삽입 |
| <ul> / <li> | 순서 없는 리스트 / 항목 |
| <ol> / <li> | 순서 있는 리스트 / 항목 |
| <button> | 버튼 요소 |
| <form> | 입력 폼 전체 감싸기 |
| <input> | 텍스트, 체크박스 등 입력 필드 |
| <section> | 페이지 내 구획 구분 |
| <header> | 상단 영역 (타이틀, 네비게이션 등) |
| <footer> | 하단 영역 (저작권, 링크 등) |
| <main> | 페이지의 주요 콘텐츠 |
| <article> | 독립적인 콘텐츠 블록 (뉴스, 카드 등) |
💡 팁: div만 남용하지 말고, 의미 있는 시멘틱 태그를 활용하면 SEO와 접근성에 유리해요.
🎨 2. CSS 요약표 – 디자인을 입히는 언어
✅ 텍스트 관련
속성설명
| font-size | 글자 크기 |
| font-weight | 굵기 (normal, bold, 숫자) |
| color | 글자 색상 |
| line-height | 줄 간격 |
| text-align | 정렬 (left, center 등) |
| letter-spacing | 자간 (글자 간격) |
✅ 박스 모델 (Box Model)
속성설명
| width / height | 너비 / 높이 |
| padding | 안쪽 여백 |
| margin | 바깥 여백 |
| border | 테두리 (두께, 스타일, 색상) |
| box-sizing | border-box로 설정하면 여백 포함한 전체 크기 계산 |
✅ 레이아웃
속성설명
| display | 박스 성격 (block, inline, flex, grid 등) |
| position | 위치 지정 (static, relative, absolute, fixed) |
| top, left, right, bottom | 위치 조정 값 (position이 있어야 작동) |
| z-index | 쌓임 순서 |
| flex | 유연한 정렬에 필수 (가로정렬, 세로 가운데 정렬 등) |
| gap | 요소 사이 간격 (Flex/Grid 사용 시 유용) |
✅ 색상과 배경
속성설명
| background-color | 배경색 |
| background-image | 배경 이미지 설정 |
| color | 텍스트 색상 |
| opacity | 투명도 (0~1) |
✅ 반응형 디자인
속성 및 기술설명
| @media (max-width:) | 화면 크기에 따라 스타일 변경 |
| %, vw, vh, rem | 상대 단위로 크기 설정 |
| flex-wrap, min-width, max-width | 레이아웃 대응력 강화 |
💡 디자이너가 꼭 알아야 할 CSS 개념 Top 5
- Flexbox – 가로/세로 정렬, 가운데 정렬, 간격 조정에 유용
- Position – 요소를 겹치게 하거나 고정시킬 때 필수
- Box Model – 여백/테두리 계산을 정확히 이해해야 UI가 무너지지 않음
- Media Query – 반응형 웹 설계할 때 핵심
- z-index – 모달, 퀵메뉴 등 앞뒤 요소 제어 시 필수
👩💻 퍼블리싱을 처음 배우는 디자이너에게 드리는 팁
- 🎯 Figma → HTML/CSS 구조 변환 연습을 해보세요.
- 🎯 실제 웹사이트의 **DevTools(검사기)**를 열어 CSS를 관찰해보세요.
- 🎯 작은 프로젝트부터 직접 코딩해보는 게 가장 빠른 실력 향상법입니다.
🧭 마무리하며
웹디자인은 ‘보이는 것’이 전부가 아닙니다.
화면 아래 숨어있는 구조와 코드의 원리를 이해하면
더 논리적이고, 구현 가능하며, 협업에 강한 디자이너가 될 수 있습니다.
HTML/CSS를 완벽하게 외우지 않아도 괜찮아요.
**"이럴 땐 어떤 속성이 필요할까?"**를 감각적으로 떠올릴 수 있는 이해력과 구조감각이 중요합니다.
이 글의 요약표는 저장해두고
실무 디자인 시 자주 참고해 보세요.
💪 디자인의 깊이가 달라질 겁니다.
728x90
'★공유하는_디자인정보 > 디자인_퍼블리싱' 카테고리의 다른 글
| "Figma로 만든 상세페이지 시안, 직접 HTML/CSS로 퍼블리싱해보기 | 실전 예제 완벽 가이드" (0) | 2025.05.24 |
|---|