회고록(3)

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

와이어 프레임 때문인지 오늘은 푹 잘수 있을거 같아 기분이 좋다. 최근 수면 영상글을 읽었는데 아래에 적을 수면에 좋은 두가지는 꼭해야겠다는 생각이 든다.

1. 오전, 점심에 햇빛보기(멜라토닌 호르몬 분비 유발)
2. 취침 4시간 전에 운동하기(간단한 유산소)

내일 페어와 함께 첫 트위틀러 목업을 구현한다. 오늘은 무조건 푹자고 페어와 좋은 커뮤니케이션을 했으면 하는 바램이다.

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

페이지 레이아웃

• flexbox,수직분할, 수평분할, flex container(부모), flex items(자식), Main axis, Cross axis, flex-direction:, justify-content:,flex-wrap:,flex:(grow,shrink,basis)

웹 앱화면 설계하기

• wireframe, mockup(목업?)

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

페이지 레이아웃

• CSS에서는 display: flexbox 속성을 통해 해당 tag요소의 박스를 flexbox로 바꿀 수 있다.
• flexbox는 기본적으로는 수직분할로 정렬 후 수평분할로 정렬시킨다.
• 여러 속성들로 flex items들의 정렬기준을 만들어줄 수 있다.(이때flex-direction: 로 설정하는 Main axis가 어디쪽인지의 영향을 받는다.)
• flexbox container(부모)의 속성들이 items정렬에 영향을 끼친다면, flexbox items의 속성은 items요소의 크기에 영향을 끼친다.
  • flex: 0 1 auto 가 default값이다.
  • flex-basis: 0과 auto는 절대적/상대적 flex item을 만든다는 점에서 차이가 존재한다.

웹 앱화면 설계하기

• 와이어 프레임은 애니메이션이나 다른 동작이 없이 제품의 레이아웃과 구조를 단순하게 보여주는 용도로 사용된다.
• 목업은 실제 웹의 기능적인 부분(애니메이션, javascript의 동적기능)은 구현하지는 않지만, 작동하는 동작모습과 동일하게 정적인 HTML과 CSS만 만드는 것을 말한다.

4. 설명하기 어려운 단어가 있다면, 그 이유는 무엇인가요?

수직/수평 분할

• 원래의 의미와 반대로생각한다.
• 이유 : 수직상태에서 분할하고 , 수평상태에서 분할한다고 생각해서
• 실제 정의 : 화면을 수직/수평으로 분할해서 정렬한다.

5. 그 단어를 스스로 설명할 수 있기 위해서 누군가에게 질문을 한다면, 어떤 질문을 해야 할까요?

• 수직/수평분할은 화면을 어떻게 분할해서 정렬한다는 걸까요?