- 레이아웃
1. 개념:
- 와이어 프레임 : 레이아웃의 뼈대를 그리는 단계. 단순 선, 도형 등 화면의 영역을 구분. 구조를 보여주는 용도.
- 목업 : 실물 크기의 모형. 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성.
2. HTML 구성 : CSS로 화면을 분리하고 싶을 때는 수직분할 후 수평분할을 적용하여 작업을 진행해야 함.
-> 수직 분할 : 화면을 수직으로 구분해 콘텐츠가 가로로 배치될 수 있다록 요소를 배치.
-> 수평 분할 : 분할된 각 요소를 수평으로 구분해, 내부 콘텐츠가 세로로 배치될 수 있도록 요소 배치.
-> HTML 문서는 기본적인 스타일을 갖고 있어서 레이아웃을 잡기 전에 리셋 해주면 편함.
ex ) * { margin : 0 ; padding : 0; box-sizing: border-box; }
- Flexbox : 요소를 정렬할 수 있고, 요소가 차지하는 공간을 설정 해 줄 수 있는 속성
1. display : flex 속성 : 자식요소가 부모 요소의 height에 맞게 가로 정렬.
2. Flexbox 속성 : 각 부모 요소와 자식 요소 에 적용해야 하는 속성이 따로 있음.
-> 부모 요소 : 자식요소의 정렬 방법
flex-direction : 자식요소들을 정렬할 정렬 축을 정함. (디폴트는 가로정렬.) (ex) flex-direction : row; column; row-reverse;..)
flex-wrap : 하위요소 크기가 상위 요소 크기를 넘으면 , 자동 줄바꿈을 할것인지 결정 .
설정해주지 않으면 줄바꿈을 하지 않음.
(ex ) flex-wrap : nowrap; wrap; wrap-reberse ..)
justify-content : 정렬 축을 기준으로 자식 요소들을 각 축의 방향으로 어떻게 정렬할 것인지 정하는 속성.
( flex-start , flex-end, center, space-between, space-around ...)
align-items : 자식 요소들을 정열축의 수직방향으로 어떻게 정렬할 것인지 정하는 속성.
: 플렉스 박스가 두 줄 이상일때만 효과가 있음.
stretch : 기본 설정으로, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치됩니다.
flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치됩니다.
flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치됩니다.
center : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치됩니다.
baseline : 플렉스 요소는 플렉스 컨테이너의 기준선(baseline)에 배치됩니다.
-> 자식 요소 : 요소가 차지하는 공간을 설정.
:flex 속성 값 : flex: grow(팽창 정도) shrink(수축 정도) basis(기본 크기) (기본값: flex: 0 1 auto)
- grow를 통해 자식요소들은 부모 요소의 크기의 비율대로 공간을 차지할 수 있음.
( 특정 속성의 팽창지수 / 팽창지수 총합 => 차지하는 공간 비율)
- shrink : 설정한 비율만큼 박스 크기가 작아짐. (grow랑 함께 사용하면 크기를 예측하기 힘듦.)
- basis : grow가 0일 때 자식 박스가 가지는 기본 크기 설정. 0이 아니라면 늘어나면서 basis에 설정한 값보다 커질 수 있음.
* flex-basis 를 0으로 하면, item이 절대적이되어 flex 박스를 기준으로 크기가 결정.
auto로 하면, itme이 상대적이 되어 콘텐츠의 크기 기준으로 크기가 결정.
* width와 flex-baiss를 동시에 적용하면 flex-basis가 우선 적용됨.
< 과제를 진행하며 느낀점 >
과제 1. 박스로 영역 배치 하기
-> HTML 로 각 영역을 차지 하는 행 렬을 나눈 후 구성한다.
연습문제는 일단 3개의 세로행이 필요하므로 3개의 부모 div를 만들어 준다.
각 부모마다 필요한 자식의 div 요소가 3,3,2 이므로 각 부모 div 요소에 자식 div 요소를 3,3,2개씩 만들어 줬다.
(부모가 같은 자식요소는 문단 내 배치를 할것이므로 class 명을 같게 설정 해 주면 편하다!)
여기까지가 HTML 작업
->flex 요소를 사용해 문제에 맞게 영역을 배치해 주면 된다.
부모요소에는 flex-dirction : column등 방향을 지정하고 ,자식에는 flex : 0 1 auto 등 비율을 설정해 주었음.
영역이 보이기 편하라고 border도 설정해 주었다.!
과제 2 . pair 프로그래밍을 통해 짝꿍과 계산기 만들기.
-> 와이어 프레임 설정하기 : 와이어 프레임으로 클래스나 id 명을 모두 설정 해 준다. 배치도 대략적으로 배치 함.
과제 1에서는 와이어 프레임 작업을 따로 하지 않고 과제를 진행했다.
짝꿍이 과제에 들어가기 전에 와이어 프레임을 먼저 하자고 계속 권유했다.
처음 들었을 때는 그냥 먼저 과제를 시작하는게 낫지 않나? 라는 생각을 했다.
HTML 작업을 할 때, 와이어 프레임이 작업속도를 굉장히 올려준다는 생각을 했다.
pair 프로그래밍을 하면서 HTML과 CSS 작업을 하기 전에는 무조건 와이어 프레임! 인 걸 깨닫고 간다~
2. 역시 HTML 로 먼저 요소 만들어 주기.
와이어 프레임에 적힌대로 HTML로 각 요소 관계와 요소를 만든다.
div로 만들어줘서 한 줄 씩 출력이 됐다.
3. CSS 로 대략적 요소 위치 잡기
요소의 위치를 잡기 위해 각 요소들을 맞는 크기로 지정해 주었다.
역시 flex 속성을 사용해 배치를 해주었다.
border는 내가 작업하기 편하라고 지정해 놓은것이다~
4. CSS를 이용한 꾸미기
CSS로 이제 디자인 적인 속성을 넣기만 하면 된다.
색감은 pair와 함께 골랐다.
그래서 인지 작업은 따로 했지만 디자인은 비슷하게 나온거 같다.
'프론트엔드 블로깅 챌린지 > FE' 카테고리의 다른 글
| SEB_FE 블로깅 챌린지 _ 6일차 (JavaScript 기초 1) (0) | 2023.02.20 |
|---|---|
| SEB_FE 블로깅 챌린지 _ 5일차 (CSS와 HTML을 이용한 계산기 만들기) (0) | 2023.02.17 |
| SEB_FE_44기 블로깅 챌린지 _ 3일차 (CSS 기초와 Selector) (0) | 2023.02.15 |
| SEB_FE_44기 블로깅 챌린지 _ 2일차 (웹 개발 기초와 HTML) (0) | 2023.02.14 |
| SEB_FE_44기 블로깅 챌린지 _ 1일차 (0) | 2023.02.13 |
