DAY 2. HTML/CSS 활용

justice·2023년 6월 29일
0

와이어프레임(wireframe): 웹 또는 어플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계
목업(Mock-up): 실제 제품이 작동하는 모습과 동일한 HTML 문서
하드코딩: 변수를 이용할 수 없어 하나하나 입력하는 방식

Flexbox: 박스를 유연하게 느리거나 줄여 레이아웃을 잡는 방법
display:flex : 부모 박스에 적용

부모에 지정

  • flex-direction: 정렬 축 정하기
  • flex-wrap: 줄 바꿈 설정
  • justify-content: 축 수평 방향 정렬

  • align-items: 축 수직 방향 정렬

자식에 지정
flex: <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)>
✔ 순서: flex: grow shrink basis
✔ 기본값: flex: 0 1 auto

flexbox 연습: https://flexboxfroggy.com/#ko

0개의 댓글