[HTML/CSS] 레이아웃

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

---

와이어프레임

• 와이어로 설계된 모양
• 단순하게 레이아웃과 제품 구조를 보여주는 용도, 화면전화와 같은 스타일요소나 UX를 판단하는 것이 아님

목업

웹과 앱에서 실제 제품과 같은 작동을 하는 HTML문서를 작성하는 것

와이어 프레임과 목업은 건물의 설계도와 같은 역할이니 중요하다

HTML 구성하기

콘텐츠의 흐름에 따라 위에서 아래로, 좌에서 우로 흐른다.
css로 화면을 구분할 때 수직분하로가 수평분할을 적절하게 적용하여 흐름에 따라 작업을 합니다.

• 수직 분할 : 화면을 수직으로 구분하여 가로로 배치
• 수평 분할 : 화면을 수평으로 구분하여 세로로 배치

레이아웃 리셋

브라우저의 환경에 따라 여백 글꼴과 같은 기본 스타일이 다르다.
이는 개발자가 레이아웃을 잡는데 어려움을 줄 수 있다.
박스 시작 위치를 정확하게 (0,0)에 위치해두고, margin과 padding값을 0으로 둡니다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

새로 배운 내용

와이어 프레인과 목업과정을 통해 레이어의 설계도를 만들고 자바스크립트와 같은 툴을 사용하면, 바로 자바스크립트로 머리에 있는 내용을 구성하는 것보다 훨씬 계획적이고 결과가 좋을거라 기대가 된다.