CSS 레이아웃
레이아웃 리셋
- 박스의 시작을 정확히 (0,0)에서 시작하고 싶은데, body태그가 가진 기본스타일에 약간의 여백 존재
- width, height 계산이 여백을 포함하지 않아 계산에 어려움이 있음
- 브라우저마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다름
=> 이러한 이유로 초기화를 위한 다양한 라이브러리가 등장하게되었으나 사실 라이브러리를 사용할 필요없이 아래의 코드를 적용하면 기본스타일 제거 가능- {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
- {
dispaly: flex;
부모요소에 display: flex;를 적용해 자식박스의 방향과 크기를 결정하는 레이아웃 구성방법
기본값으로 display: flex;가 적용된 부모박스의 자식요소는 왼쪽부터 차례대로 배치
grow(팽창지수), shrink(수축지수), basis(기본크기)
자식박스에 어떠한 속성도 주지않으면 왼쪽에서 오른쪽을 콘텐츠의 크기만큼 배치되고, 자식요소에 flex속성을 추가하지 않으면, 다음과 같은 기본값이 적용
flex: 0 1 auto;
flex속성에 적용되는 세가지 값의 종류 :
flex: (grow)(shrink)(basis);
grow : 설정한 비율만큼 박스 크기가 커짐
shrink: 설정한 비율만큼 박스 크기가 작아짐
basis: grow나 shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본크기
콘텐츠 수평 정렬 : justify-content
콘텐츠 수직 정렬 : align-items
웹 앱 화면 설계
와이어프레임 : 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계, 아주 단순하게 레이아웃과 제품의 구조를 보여주는 용도
목업(Mock-up) : 대부분 산업에서 목업은 실물크기의 모형을 뜻함
무형의 웹, 앱에서는 실제 제품이 작동하는 모습과 동일하게 HTML문서를 작성
하드코딩 : 데이터를 코드내부에 직접 입력하는 것
HTML로 웹 앱의 구조 잡기
1. 큰 틀에서 영역 나누기
2. 각 영역을 태그로 표현하기
여담 : CSS 레이아웃을 하기전엔 쉬운줄 알았다..ㅎ 근데..레이아웃하니까 ㅠㅠ 내맘대로 되는게 없다..ㅠㅠㅠㅠ
.jpeg)