[HTML, CSS] Layout & Wireframe

05 Jan 2023 in Study on Study, JavaScript

• 와이어프레임(Wireframe)
  • 목업(Mock-up)
    • 와이어프레임의 목적?
  • 와이어프레임 그리기
    • HTML 구성하기
    • 레이아웃 리셋

와이어프레임(Wireframe)

웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계 -> 와이어프레임

• 단순한 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것. (화면의 영역을 구분함)
• 아주 단순하게 레이아웃과 제품의 구조를 보여주는 용도.
  • 전환 효과, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX까지 표현하는 것이 아님

목업(Mock-up)

‘실물 크기의 모형’이라는 뜻을 가진 목업.
무형의 웹, 앱에서는 실제 제품이 작동하는 모습과 동일하게 HTML문서를 작성하여목업을 만든다

와이어프레임의 목적?

HTML문서작성을 통해 영역을 구분하고 구조를 그려보지 않으면 JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어려워진다.

와이어프레임 그리기

HTML 구성하기

대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐른다.
CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용해 콘텐츠의 흐름을 따라 작업을 진행한다.

레이아웃 리셋

HTML문서는 기본적인 스타일을 가지고 있다. -> 기본 스타일이 레이아웃잡는데 방해가 될 때가 있다.

• 박스의 시작을 정확히 (0, 0)의 위치에서 시작하고 싶은데 body요소가 가진 기본 스타일에 약간의 여백이 있다.
• width, height 계산이 여백을 포함하지 않아 계산이 어렵다.
• 브라우저마다 여백이나 글꼴과 같은 기본 스타일이 다르다

이럴 때는 아래의 코드를 CSS에 적고 시작하자.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}