[Codestates] 2021. 4. 21

css

css selector

1. tag {} : 태그 선택
2. * {} : 전체 선택
3. div, p {} : 모든 div 태그와 p 태그 선택
4. # {} : id
5. . {} : class
6. div p {} : div 태그 안에 있는 p 태그 선택 (순서 상관 없음)
7. div > p {} : div 태그 바로 안에 있는 p 태그를 선택 (순서 중요)
8. div + p {} : div 태그 바로 뒤에 오는 p 태그를 선택

레이아웃 리셋

HTML 문서의 기본적인 스타일을 제거한다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flexbox

display: flex : 부모 박스요소에 display: flex 를 적용하면 자식 요소의 레이아웃이 변경된다.
flex-direction : 박스의 방향 설정, 부모 박스에 적용. row(기본값), column
flex : 자식 요소에 적용. flex: <grow> <shrink> <basis>
- grow : 가로 길이. 입력된 비율만큼 늘어난다.
- shrink : 입력된 비율만큼 줄어든다. grow와 반대이므로 함께 사용하지 않는다.
- basis : 기본 크기. px 혹은 auto 등 으로 입력한다.
justify-content : 콘텐츠 수평 정렬
- flex-start
- flex-end
- center
- space-between
align-items : 콘텐츠 수직 정렬
- flex-start
- flex-end
- center
- stretch

화면 설계

와이어프레임 : 레이아웃과 제품의 구조를 보여주는 용도
목업 : 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성
하드코딩 : JS 를 사용하지 않고 값을 직접 입력하는 방식
프로토타입 : 전체적인 기능을 간략한 형태로 구현한 초기 모델