[TIL] 2021.03.15 웹 앱 모양만들기_lesson CSS , 웹 앱 화면 설계하기

Achievement Goals(학습목표)

보다 다양한 CSS 셀렉터 규칙을 이해할 수 있다.
후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다.
레이아웃을 위한 HTML을 만들 수 있다.
Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야 합니다)
방향: flex-direction
얼마나 늘릴 것인가? :flex-grow
얼마만큼의 크기를 갖는가?: flex-basis
수평 정렬: justify-content
수직 정렬: align-items

만드려는 앱을 와이어프레임으로 그려볼 수 있다.
와이어프레임만 보고 HTML로 코딩할 수 있다.
div (또는 section, header 등의 시맨틱 태그)로 영역을 구분하는 이유를 이해할 수 있다.
HTML에서 어느 때에 id, 어느 때에 class를 사용해야 하는지 이해할 수 있다.

오늘은 페어와함께 직접 내가 원하는 웹을 와이어프레임으로 그리고 실제로 html과 css를 사용해 구현하는 것을 했다 .

< 결과물 >

<와이어프레임> _ figma를 이용했다.

figma 사용후기 : 사실 figma라는 사이트는 오늘 처음 수업을 들으면서 알게되었다. 조금 버벅이기도했지만 실제 와이어프레임으로 그려본것을 수정을 통해서 예쁜 디자인으로 목업할 수 있어서 좋았다. 계속 사용하다보면 익숙해질 수 있겠지??

css selector

셀렉터
h1 { }
div { }

전체 셀렉터
* { }

Tag 셀렉터
section, h1 { }

ID 셀렉터
#only { }

class 셀렉터
.widget { }
.center { }

attribute 셀렉터 
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

후손 셀렉터
header h1 {}

자식 셀렉터 (후손 셀렉터와의 차이를 반드시 알고 있어야 합니다)
header > p { }

인접 형제 셀렉터
section + p { }

형제 셀렉터
section ~ p { }

가상 클래스
a:link { }
a:visited { }
a:hover { }
a:active { }
a:focus { }

요소 상태 셀렉터
input:checked + span { }
input:enabled + span { }
input:disabled + span { }

구조 가상 클래스 셀렉터 
p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 셀렉터
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

정합성 확인 셀렉터
input[type="text"]:valid { }
input[type="text"]:invalid { }

레이아웃 : 화면을 나누는 방법

1. HTML 구성하기
   콘텐츠는 좌에서 우, 위에서 아래의 흐름을 가진다.
   그래서 항상 수직으로분할 하고, 수직으로분할 된 div에서 height속성을 통해 수평분할을 하는게 좋다.

레이아웃 리셋

박스의 시작을 정확하게 (0,0)에서 시작하고 싶다면 기본적으로 갖고있는 body의 여백을 초기화 시켜줘야한다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flexbox로 레이아웃 잡기
flexbox 레이아웃이란? 박스를 유연하게 늘리로 줄이는 방법을 토대로 레이아웃을 잡는 방법
flex는 부모요소에 줘야한다. ex) display : flex ;
부모요소에 적용해준 flex는 자식요소의 방향과 크기를 결정하게된다.
기본적으로 flex가 적용되면 자식요소는 부모요소의 왼쪽으로 차례대로 붙는다.

#parent {
  display: flex;
  border: 1px dotted red;
  padding: 10px;
}

.chlid {
  border: 1px solid green;
  padding: 10px;
}

flex-direction

기본적으로 flexbox는 수직으로 분할되지만, 속성 값에 의해 수평으로도 분할 할 수있다.
flex-direction은 부모요소에 적용한다. 자식요소에 특별한 값을 주지않아도 자식요소에 영향을 받을 수 있다.

flex-derection : row(수직) , column(수평)

flex: (팽창지수) (수축지수) (기본크기)
flexbox 기본 크기를 바탕으로 필요에 따라 늘릴 수 있다.
기본값 flex : 0 1 auto;
단위가없고 비례하는 값이다. 단 basis로 설정된 크기는 항상 보장되지 않는다.

컨텐츠 수평 정렬 (justify-content)

바깥박스에 지정->안쪽박스 수평정렬 지정가능
flex-start
flex-end
center
space-between

컨텐츠 수직 정렬 (align-items)

바깥박스에 지정->안쪽박스 수직정렬 지정가능
flex-start
flex-end
center
stretch

위 내용을 토대로 와이어프레임, 목업 과제를 실행했고, html로 코드 구현전 꼭 와이어프레임을 짜서 어떻게 설계할지 계획을 갖는것이 중요하며, 세분화해서 프레임구간을 나눌 수 있어야 할 것 같다.