이래저래 검색해보다가 배운 걸 정리하는 것과 TIL을 쓰는 건 확연히 다른 거라고 한다. 생각해보니 이렇게 정리하는 건 내가 한 번 더 정리해서 기억하려고, 내가 찾기 편하게 하려고에 가깝다. 앞으로는 TIL을 따로 쓰는 방법도 생각해야겠다. 하긴 정리하는데 갑자기 앞에 사담이 튀어나오는게 조금 이상하긴 하네🤣
Chapter 1. 레이아웃
학습 목표
- 레이아웃을 위한 HTML을 만들 수 있다.
각 요소의 위치가 목적에 맞게 배치하는 것을 레이아웃이라고 한다.
1-1. 와이어 프레임
와이어프레임(Wireframe)
웹 또는 애플리케이션을 개발할 때, 레이아웃의 뼈대를 그리는 단계
인터페이스를 그림으로 표현하는 와이어프레임뿐만 아니라, 각 영역에서 사용할 주요 태그를 메모하며 와이어프레임을 작성할 수 있음
목업(Mock-up)
대부분 산업에서 목업은 실물 크기의 모형을 뜻함
웹 또는 앱을 제품이라고 하면, 목업은 실제로 작동하는 것과 동일하게 HTML문서를 작성
ex) 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드 코딩-
하드 코딩
변수의 값을 전달하는 방법을 배우지 않았을때, 변수를 이용할 수 없기 때문에, HTML 문서에 하나하나 입력해야 하는 방식<!-- 실제로는 어떤 로직에 의해서 적절한 위치에 값이 들어가게 된다. --> <div class="writer">김코딩</div> <div class="content">SNS는 인생의...</div>
1-2. 화면을 나누는 방법
HTML 구성하기
대부분의 콘텐츠는 좌에서 우, 위에서 아래로 흐른다.
CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용하여 진행한다.
- 수직 분할 : 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소 배치
- 수평 분할 : 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소 배치
- 수평으로 구분된 요소에
height속성을 추가할 경우, 수평 분할을 직관적으로 할 수 있음
- 수평으로 구분된 요소에
+) 클래스 이름과 구현을 1:1로 일치시키는 CSS 작성 기법을 Atomic CSS 방법론이라고 함([참고](https://www.sitepoint.com/css-architecture-block-element-modifier-bem-atomic-css/))레이아웃 리셋
HTML 문서는 기본적인 스타일을 가지고 있어서, 때때로 레이아웃을 잡을 때 방해가 되기도 함.
- 박스의 시작을 (0,0) 위치에서 시작하고 싶지만,
<body>요소가 가진 기본 스타일에 약간의 여백이 존재 width,height계산이 여백을 포함하지 않아 계산에 어려움이 있음- 브라우저(크롬, 사파리 등)마다 여백이나 글꼴과 같은 기본 스타일이 다름
따라서, 초기화(리셋)을 위한 다양한 라이브러리(Normalize.css)가 등장하였으나, 굳이 사용할 필요는 없고, 몇 줄의 코드를 적용하여, 기본 스타일링을 제거하여 구현한다.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
감성있는 개발자를 꿈꿔요