[HTML & CSS] 웹 앱 화면 설계하기

 

와이어프레임 설계
HTML로 웹 앱 구조 잡기
id와 class의 이해

 

---

 

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

 

🕸️ 와이어프레임(Wireframe)

레이아웃의 뼈대를 그리는 단계로, 가장 큰 목적은 화면의 영역을 구분하는 일이다

 

🖼️ 목업(Mock-up)

실제 서비스가 작동하는 모습과 동일하게 HTML, CSS을 작성

 

---

 

HTML로 웹 앱 구조 잡기

 

1. 만들고 싶은 웹 페이지 구조를 생각해 보고, 어떤 태그를 이용해야 할지 생각한다
2. 영역 별로 여러 태그를 하나의 태그(div 등)로 감싸 준다
     → form으로 감싸 줄 경우 div 요소를 사용하는 것보다 더 시맨틱한 요소 사용이다
         input, button 요소 등의 자식 요소를 감싸는 경우에 자주 사용되는데,
         페이지 전환이 되는 액션이 발생할 수 있도록 주의해야 한다 → 사용자 입력 값 제출에 사용

 

---

 

id 및 class를 목적에 맞게 사용하기

 

id: 고유한 이름을 붙일 때
class: 반복되는 영역을 유형별로 분류할 때

 

 

---

 

와이어 프레임 만들기

 

https://ovenapp.io/

📽️ 디즈니 플러스 영화 정보 페이지