레이아웃

웹 사이트 각각의 요소를 목적에 맞게 배치하는 것.

와이어프레임

웹이나 애플리케이션을 개발 할 때 레이아웃의 뼈대를 그리는 단계이며 말 그대로 “와이어로 설계된 모양”을 뜻함.

단순한 선, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한다

아주 단순하게 레이아웃과 제품의 구조를 보여주는 용도

전환 효과, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX를 판단하는 것이 아님

목업(Mock-up)

대부분의 산업에서 목업은 실물 크기의 모형을 뜻하는 것 처럼, 웹이나 앱에서는 HTML 문서로 실제 제품이 작동하는 모습과 동일하게 하드코딩하는 것을 뜻함.

HTML 문서를 통해 목업을 먼저 제작하지 않으면 JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어렵다. 반드시 와이어프레임과 목업 작성을 진행 할 것.

❓

하드코딩이란? 역동적인 웹 어플리케이션을 만들기 위해서는 HTML 문서에 출력되는 정보를 변수로 관리하여 값을 동적으로 담아야 하지만 아직은 활용 할 수 없기 때문에 임의의 내용을 직접 입력하는 것을 의미함.

HTML 구성하기

대부분의 경우 콘텐츠는 좌에서 우(⏩), 위에서 아래(⏬)로 흐르기 때문에 CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행한다.

수직 분할 (Vertical) : 화면을 수직으로 구분, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치

수평 분할 (Horizontal) : 분할 된 각각의 요소를 수평으로 구분, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치
- 수평으로 구분 된 요소에 height 속성을 추가하면 보다 직관적인 수평 분할 가능

<div id="container">
  <div class="col w10"> <!--수직으로 1차 분리-->
    <div class="icon">아이콘 1</div>
    <div class="icon">아이콘 2</div>
    <div class="icon">아이콘 3</div>
  </div>
  <div class="col w20">
    <div class="row h40">영역1</div> <!--수직으로 분리한 영역을 수평으로 다시 분리-->
    <div class="row h40">영역2</div>
    <div class="row h20">영역3</div>
  </div>
  <div class="col w70">
    <div class="row h80">영역4</div>
    <div class="row h20">영역5</div>
  </div>
</div>

.w70 { width: 70%; }
.h40 { height: 40%; }

❓

Atomic CSS 방법론 위와 같이 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법을 뜻 함.

레이아웃 리셋

HTML 문서는 기본적인 스타일을 가지고 있으며, 때론 이 기본 스타일이 레이아웃을 잡는데 방해되는 경우가 발생함.

박스의 시작을 정확히 (0, 0) 의 위치에서 시작하고 싶으나, <body> 의 기본 스타일에는 약간의 여백이 포함됨

width, height 계산이 여백을 포함하지 않아 계산에 어려움이 있음 (box-sizing: border-box; 관련 내용)

브라우저(크롬, 사파리 등) 마다 여백/글꼴 등 기본 스타일이 조금씩 다름

이런 수요에 따라 초기화(리셋)을 위한 다양한 라이브러리(Normalize.css, Reset.css 등)가 있지만 필요성에 대한 문제 역시 대두되고 있음. 몇 줄의 간단한 코드를 통해 레이아웃에서 발생하는 기본 스타일 문제를 해결 할 수 있고, 너무 많은 리셋은 다른 문제를 야기시킬 수 있기 때문.

Uploaded by N2T

티스토리툴바

레이아웃 (와이어 프레임, 목업)