아직 CSS의 많은 것을 알고 있진 않지만, 디자인적인 요소를 직접 줄 수 있어서 재밌다!!

CSS Selector

• .hs.name class명으로 hs와 name 모두 갖고 있는 엘리먼트

• ~ 인접한 형제 엘리먼트

• > 자식 엘리먼트

• + 바로 다음에 오는 형제 엘리먼트

• nth-child(n) 부모로부터 n번째 엘리먼트

• nth-last-child(n) 부모로부터 뒤에서 n번째 엘리먼트

• first-of-type 형제 엘리먼트 중 자신의 유형과 일치하는 제일 첫 엘리먼트

• [id='hs'] id가 hs인 모든 엘리먼트 선택

Flex

부모 엘리먼트에 주어지는 속성

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

자식 엘리먼트에 주어지는 속성

• order
• flex-grow 기본값 0;
• flex-shrink 기본값 1;
• flex-basis 기본값 auto;
• flex grow shrink basis 순서
• align-self

flex : grow shrink basis

• 기본값 flex : 0 1 auto;
• grow, shrink는 단위가 없고, 비례하는 값이다

html 코드

<div class="container">	
	<div class="item">item1</div>
	<div class="item">item1</div>
	<div class="item">item1</div>
</div>

CSS 코드

.item {
  flex : 1, 1, auto;
}

grow값이 전부 1이므로, 동일한 비율로 박스가 늘어난다. 각각 1/3씩을 차지하게 되는 것이다.
컨텐츠의 길이도 비율에 영향을 미친다. 그래서 일대일로 놓는다고 하더라도, 엄밀하게 나눌 수가 없다.
그래서 basis를 기본값 auto로 두지않고, 50%씩 두거나 0%로 둔다.

shrink는 grow와 반대개념으로, 차지하는 값만큼 줄어들게 하는 것이다.

basis는 무조건 보장되는 값은 아니다. grow나 shrink에 의해 늘어나거나 줄어들기 전에 갖게되는 기본적으로 갖는 크기인데, grow가 0일 때, basis 크기를 지정하면 그 크기가 지정된다.
사이드바같이 고정넓이값을 갖고 있을때, 비율을 딱 맞게 조정할때쓰면 좋다.

와이어프레임과 프로토타입

하드코딩 : 직접 다 코딩으로 짜는 것
와이어프레임 : 틀을 짜는 것
목업 : 겉보기에 완성된 것
프로토타입 : 인터렉티브가 되는 목업

추가로 알아볼 것들
float : left/right // 왼쪽 혹은 오른쪽으로 배열