Achievement Goals

• 다양한 CSS Selector 규칙을 이해할 수 있다.
• 레이아웃을 위한 HTML을 만들 수 있다.
• Flexbox를 이용해 레이아웃을 만들 수 있다.
• flex-direction : 방향
• flex-grow : 얼마나 늘릴 것인가?
• flex-basis : 얼마만큼의 크기를 갖는가?
• justify-content : 수평 정렬
• align-items : 수직 정렬

앱, 웹 화면 설계하기

Achievement Goals.

• 만들고 싶은 앱의 와이어프레임을 그려볼 수 있따.
• 와이어프레임만 보고 HTML로 코딩할 수 있다.
• div 태그 또는 section, header 등의 시맨틱 태그로 영역을 구분하는 이유를 이해할 수 있다.
• HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.

id 및 class 목적에 맞게 사용하기

id : 고유한 이름을 붙일 때
class : 반복되는 영역을 유형별로 분류할 때

css는 cascading 문법이므로 우선순위가 다르다. 부모-자식-자손 우선순위.
.col .40{ -> 클래스 두개 동시 적용

2. a.hover를 쓸 수있니?

3. 원하는 레이아웃을 와이어프레임으로 그리고, HTML으로 그릴 수 있나?
   -> pigma, sketch

4. 박스를 나눌 때는 부모속성에 display : flex로 한다. (외워!!!)

5. 

   

• 단 flex-direction 속성이 row 즉 기본값일 때만 적용되고
  column이면 두 역할이 바뀜
• 유어클래스 컨텐츠 정렬 방법 다시보기!! 프론트엔드 기술면접!! pigma - wireframe
  zeplin
  개발자가 프로토타입, 디자이너가 목업을 주로 담당한다!!
  하드코딩 :
  codepen 유용하게 써봐라!!
  https://codepen.io/oyeon-kwon/pen/GRrwGYa px : 절대단위
  em : 상대단위 (부모박스에서부터 어떻게 설정하냐)
  rem : 상대단위 (루트에서부터 해당하는 박스 크기를 어떻게 설정하냐) 다양한 크기의 화면을 쓰기 때문에 반응형 웹을 사용하게 됨 따라서 상대단위의 중요성이 커짐!! flexbox froggy 게임사이트 해봐라
  https://codepen.io/oyeon-kwon/pen/GRrwGYa
  부모 자식 이해하기 좋은 사이트 boostrap 사이트!!