[Front] 와이어프레임

안녕하세요 백엔드 개발자 홍민정입니다 🫧

와이어프레임이라고 많이 들어보셨죠 ? 오늘은 이에 대해 간단히 설명하겠습니다 !

☝🏻 와이어프레임 설계 및 목업 구현

📍 와이어프레임 (Wireframe)

  - 웹 또는 앱을 개발할 때 화면 영역 구분을 위해 레이아웃의 뼈대를 그리는 단계

  - 단순한 선이나 도형으로 인터페이스를 시각적으로 묘사

  - 피그마, 미로, 오븐 등 활용

---

📍 목업 (Mock-up)

  - 실물 크기의 모형을 실제 작동하는 모습과 동일하게 만들지만 기능적으로 동작하지 않음

---

📍 마크업 언어

  - 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어

---

📍 id

  - 고유(unique)한 이름을 붙이기 위해 사용

  - <div name = "hong">   →  div#hong

---

📍 class

  - 반복되는 영역을 유형별로 분류하기 위해 사용

  - class가 같은 값인 것은 같은 영역임을 의미

  - <li class = "main">   →  li.main