Section 1 - 13일차

1. CSS

• +는 인접한 형제 엘리먼트를 선택
• ~는 인접한 형제 엘리먼트를 모두 선택
• [속성] 을 갖는 모든 엘리먼트를 선택
• :nth-last-childe(n) 마지막에서 n번째 엘리먼트 선택
• :first-of-type 형제 엘리먼트 중 처음 등장하는 엘리먼트 선택
• :last-of-type 형제 엘리먼트 중 마지막 엘리먼트 선택
• :nth-of-type(n) 형제 엘리먼트 중 n번째 엘리먼트 선택
• :not(#id) id가 아닌 엘리먼트 선택
• 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법 Atomic CSS 방법론
• flex-direction - flex 자식요소들의 방향 지정
• 자식 요소에 flex 속성을 추가하지 않으면 0 1 auto 값이 기본값
• flex:
  • flex-grow
  • flex-shrink 위 두 속성은 단위가 없고 비율에 따라 결과가 나타남
  • flex-basis
    와 같이 따로 지정도 가능하다
• grow 속성은 부모 요소의 가로 길이 중 남은 영역의 (1/자식요소들의 총 grow)값만큼 비율로 차지
  • ex) 박스 3개의 grow값이 각각 2 1 1이면 각 2/4 1/4 1/4 만큼의 비율로 남은 가로길이를 차지
• shrink는 grow와 반대로 설정한 비율만큼 크기가 작아짐, grow와 shirnk 속성을 함께 사용하는 것은 추천하지 않음, flex-grow값으로 크기를 설정한다면, shrink는 기본값인 1로 설정
• shrink는 flex-basis 속성에 따른 비율로, 실제 크기를 예측하기 어려움
• basis는 grow나 shrink로 크기가 변하기 전 가지는 기본 크기
• width와 flex-basis가 동시 적용된다면, basis가 우선
• 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 적용 가능
• justify-content 자식 박스 수평 정렬
• align-items 자식 박스 수직 정렬

2. 웹 앱 화면 설계

• 와이어프레임(Wireframe) : 단순한 선이나 도형으로 인터페이스를 시각화한 것
• 목업(Mock-up) : 실제 제품이 작동하는 모습과 동일하게 HTML을 하드코딩 구현
• 프로토타이핑 : 개발 초기에 모형을 만들어 기능의 요구사항을 파악 후 반영하는 개선 방식

3. Twittler 목업 구현