What is Layout?
- 레이아웃을 위한 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로 작성하는 것!
목업 없이 바로 동작하는 웹 앱을 만드는 것은, 설계도 없이 건물을 짓는 것과 같다.
.w70 { width: 70%; }
.h40 { height: 40%; }
➡ 이렇게 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법!
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
(기본 스타일링을 제거하는 CSS 코드의 예시)
졸업프로젝트를 진행할 때, CSS를 진짜 하나도 모른채로 맨땅에 헤딩했었는데... 그때도 HTML 기본 스타일이 정말 방해였던 기억이 있다. 개발자 도구에 user agent stylesheet 라고 찍히던...
당시에는 어떻게 수정하는지 몰라서 하나하나 요소의 margin:0;
padding:0;
을 넣어줬던 기억이 있다... 이후에 레이아웃 리셋이란걸 알게되어서 다시 하나하나 넣어줬던걸 다 지웠었다.
역시...개발하다가 아니다 싶으면 해결책이 있는 문제인 듯 하다...