와이어프레임(Wireframe)
웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계, 말 그대로 "와이어로 설계된 모양"을 의미,단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것
목업(Mock-up)
실물 크기의 모형, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성
하드코딩: 데이터를 코드 내부에 직접 입력하는 것, 주로 파일 경로, URL 또는 IP 주소, 비밀번호, 화면에 출력될 문자열 등이 대상
Flexbox로 레이아웃 잡기
"잘 구부러지는, 유연한"이라는 뜻이며
lexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다.
display: flex 분석하기
display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법
flex-direction : 정렬 축 정하기
부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정함. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 한다.
flex-wrap : 줄 바꿈 설정하기
하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정함. 설정해 주지 않으면 줄 바꿈을 하지 않는다.
justify-content : 축 수평 방향 정렬
자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정함. 요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성
(주요 속성값: flex-start , flex-end, center, space-between, space-around)
align-items : 축 수직 방향 정렬
자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정함. 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성
(주요 속성값: stretch , flex-start , flex-end , center , baseline)
자식 요소에 적용해야 하는 Flexbox 속성
flex 속성의 값
grow(팽창 지수): 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지, shrink(수축 지수) 는 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지, basis(기본 크기) 는 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미(자식 요소에 flex 속성을 따로 설정해주지 않으면 기본값이 적용, 왼쪽에서 오른쪽으로 콘텐츠의 크기만틈 배치) 순서와 기본값[flex: grow shrink basis, flex: 0 1 auto],팽창지수의 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지,grow(팽창 지수) 는 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것.
shrink(수축 지수): grow와 반대로, 설정한 비율만큼 박스 크기가 작아짐.flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않는다. 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장. flex-shrink 속성은 width 나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문이다.flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방함.
basis(기본 크기): 는 자식 박스가 flex-grow 나 flex-shrink 에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기,flex-grow 가 0일 때, basis 크기를 지정하면 그 크기는 유지됨.
2023-02-16
오늘은 페어와 계산기목업만들기를 했다.
너무 헷갈리고 어려웠다🥲
코드를 두세번은 새로 다시 치고 검색하고..
저녁에야 완성했다 ㅠㅠ
하루 하루가 스펙타클하다🤯
운동도 해야하는데 첫날만 하고 과제랑 공부땜에 못 하고있다. 낼이나 주말엔 무조건해야지 오운완...
내 귀여운 계산기🐱
