(SEB_FE) Section1 Unit4 레이아웃

1. 레이아웃을 위한 HTML을 만들 수 있다.

What is Layout?
각각의 요소를 목적에 맞게 배치하는 것

⭐와이어프레임(Wireframe)

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

• 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사
• 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도 (스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아니다!)

⭐목업(Mock-up)

실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성(HTML 문서 내에 하드코딩)

하드코딩이란?

// 하드코딩의 예
console.log('2 x 1 = 2')
console.log('2 x 2 = 4')
console.log('2 x 3 = 6')
console.log('2 x 4 = 8')

즉, 역동적인 웹 앱을 만들기 위해서는, JS를 이용해서 동적인 처리를 해 주어야 하는데, 그것들 없이 모든걸 HTML로 작성하는 것!

목업 없이 바로 동작하는 웹 앱을 만드는 것은, 설계도 없이 건물을 짓는 것과 같다.

⭐HTML 구성하기

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

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

Atomic CSS 방법론

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

➡ 이렇게 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법!

⭐레이아웃 리셋

HTML 문서가 갖는 기본 스타일이, 레이아웃을 잡는 데 방해가 되기도 함

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

(기본 스타일링을 제거하는 CSS 코드의 예시)

---

졸업프로젝트를 진행할 때, CSS를 진짜 하나도 모른채로 맨땅에 헤딩했었는데... 그때도 HTML 기본 스타일이 정말 방해였던 기억이 있다. 개발자 도구에 user agent stylesheet 라고 찍히던...

당시에는 어떻게 수정하는지 몰라서 하나하나 요소의 margin:0; padding:0;을 넣어줬던 기억이 있다... 이후에 레이아웃 리셋이란걸 알게되어서 다시 하나하나 넣어줬던걸 다 지웠었다.

역시...개발하다가 아니다 싶으면 해결책이 있는 문제인 듯 하다...