04_페이지 레이아웃과 와이어 프레임_22.08.24

HTML 구성

: 수직분할과 수평분할 적용

>Atomic CSS 방법론

: 클래스명을 CSS에서 구현할 방법으로 지정하는 것.
: 이름과 구현을 1:1로 매칭할 수 있어서 직관적으로 파악하기 쉽다.
//예시
HTML - <div class="col w10">
CSS - .w10 { width : 70%; }

 

레이아웃 리셋

: HTML의 기본 스타일을 초기화시키는 것.
: default 설정한다고 생각할 것.

<!--주요 설정-->
*{ <!--박스 크기 측정 기준 설정-->
	box-sizing: border-box;
}

body {
  <!--박스의 시작을 (0,0) 에서 시작하게 설정-->
  margin: 0;
  padding: 0;
}

Flexbox

: flexbox를 이용하면 요소의 정렬, 요소가 차지하는 공간을 설정할 수 있다.
: 부모에게 적용하는 속성은 자식 요소들의 정렬과 관련있음.
: 자식에게 적용하는 속성은 요소가 자치하는 공간과 관련있음.

selector {
	display: flex;
	// flexbox 이용 선언
	// 부모 박스에 적용해야하는 선언

	//추가 속성 조정
	justify-content : flex-end; // Main Axis 연관
	align-items: center; // Cross Axis 연관
	flex-direction: row; // 축 변환, default=row
	}

>사용 요건

1. 부모-자식 관계의 태그 구조가 있을 때 사용 가능하다.
: 부모 태그(Flex container)에 선언하여, 자식 태그(Flex items)를 정렬시킨다.
2. 가로축(Main Axis), 세로축(Cross Axis)을 활용함.
: 고정축은 아니다. (flex-diretion)

>flexbox 속성과 속성 값 (부모 요소 적용)

• flex-direction
  : 정렬 축 정하기
  : 자식 요소들을 정렬할 정렬 축을 설정
  : row(default), column, row-reverse, column-reverse
• flex-wrap
  : 줄 바꿈 설정하기
  : 하위 요소가 상위 요소의 크기를 넘었을 때, 줄 바꿈 여부 설정
  : nowrap(default), wrap, wrap-reverse 
• justify-content
  : 축 수평 방향 정렬
  : 미리 설정된 축의 방향에 따라 요소들을 정렬할 방법을 설정.
  : row-(수평 정렬), colume-(수직 정렬)
  : flex-strat, flex-end, center, space-between, space-around
• align-items
  : 축 수직 방향 정렬
  : 미리 설정된 축 방향의 수직 방향으로의 컨텐츠 정렬 방법을 설정. (글 맞춤 상, 중, 하 느낌)
  : row-(수직 정렬), colume-(수평 정렬)
  : stretch , flex-start , flex-end , center , baseline

 

>flex 속성 값 (자식 요소 적용)

• flex : grow shrink basis;
  : flex 속성 값으로 세 가지(grow shrink basis)가 존재.
  : 개별적으로 설정도 가능하다.
  : defualt 값 // { flex : 0 1 auto; }
• flex-grow, 팽창 지수
  : 요소의 크기를 얼마나 늘릴지에 대한 요소
  : 주어진 부모 요소를 내에서 자식 요소 간에 공간 차지 비율의 의미
  : (각 자식 요소들의 grow 값) / (총 자식 요소들의 grow 값) 만큼 차지한다.
  : grow default = 0
  // 예시
  // box1(grow: 6), box2(grow: 3), box3(grow: 1)
  // box1=6/10, box2=3/10, box3=1/10 차지
• flex-shrink, 수축 지수
  : 설정한 비율만큼 크기가 작아지는 요소
  : grow만 설정하고 shrink는 1(default)로 둔다고 생각하자. 예측이 힘듬
• flex-basis, 기본 크기
  : 자식 요소에 변화하지 않는 공간 값을 주는 것.
  : grow = 0(default)일때만 적용됨.

 

와이어프레임, Wireframe

: 선, 도형따위로 단순하게 웹(앱)의 인터페이스를 시각적으로 표현한 것.
: 화면의 영역을 구분하고 어떤 기능의 웹인지 파악할 수 있게 나타내는 것이 목적
: 각 영역에 태그를 달아 구분할 것.

 

목업, Mock-up

: HTML과 CSS로만 이루어진 웹페이지
: JS가 없기 때문에 상호작용이 없는 깡통페이지(껍데기)
: 실제 웹이 시각적으로 어떻게 구현될지 파악하는 것이 목표