191130_TIL_(instargram Login page - clone)

jotang·2019년 11월 30일
0

1. instargram Login page - clone

1.1 HTML / Css Selector

1. layout

  • flex를 이용하여 layout 구성

2. Css Selector

tagNamg {
} /* tag는 tag이름으로 */
#idName {
} /* id는 id이름 앞에 #을 이용 */
.className {
} /* class는 class이름 앞에 .(dot)을 이용 */

1.2 flex

1. flex 속성

  • justify-content

  • flex-start : 왼쪽 / flex-end : 오른쪽

  • center : 가운데 / space-between : 요소들 사이에 동일한 간격

  • space-around : 요소들 주위에 동일한 간격

  • align-items

  • flex-start : 꼭대기 / flex-end : 바닥

  • center : 세로선 상의 가운데 / baseline : container의 시작위치

  • stretch : container에 맞도록 늘림

  • align-content

  • flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.

  • flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.

  • center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.

  • space-between: 여러 줄들 사이에 동일한 간격을 둡니다.

  • space-around: 여러 줄들 주위에 동일한 간격을 둡니다.

  • stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

  • flex-direction

  • row : text의 방향과 동일하게 정렬

  • row-reverse : text의 반대 방향으로 정렬

  • column : 위에서 아래로 정렬

  • column-reverse: 아래에서 위로 정렬

  • order : 기본 값은 0, 양수나 음수로 설정하여 순서 정렬

  • align-self

  • 개별요소에 적용

  • align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용

  • flex-wrap

  • nowrap : 모든 요소 한 줄 정렬

  • wrap : 여러 줄에 걸쳐 정렬

  • wrap-reverse : 여러 줄에 걸쳐 반대로 정렬

  • flex-flow : flex-direction과 flex-wrap 두 값을 인자로 받는다.

.flow { 
  	display: flex;
  	flex-flow: column wrap;
}

https://flexboxfroggy.com/#ko (FLEXBOX GROGGY)-개구리로 배우는 flex속성

1.3 Problems

1. 페이지 크기 조절

  • problems
  1. flex 속성이 적용 안 될 때가 있음
  2. page사이즈 조절시 footer가 겹쳐지는 현상(살짝)
  3. page사이즈 조절시 login box가 viewport 맨 윗줄 보다도 더 올라간다..
  • solution
  1. flex
  • flex 속성을 적용 시키려면 위 부모요소에 작성
<div class="container">    <!--BOX 4개 를 flex로 정렬하려면 이곳에 flax-->
  	<div>I'm BOX1</div>
  	<div>I'm BOX2</div>
  	<div>I'm BOX3</div>
  	<div class="mother">   <!--Box 3개와 img를 flex로 정렬하려면 이곳에 flex-->
    	<div>I'm BOX1-1</div>
    	<img src="" alt="">
    	<div class="father">   <!--img를 flex로 정렬하려면 이곳에 flex-->
      		<img src="" alt="">
      		<img src="" alt="">
      		<img src="" alt="">
    	</div>
    	<div>I'm BOX1-2</div>
  	</div>
</div>
  1. page height size
* mainpage / footer height size -> **%** 와 **vh** 단위에서 **px**로 변경
* position relative로 설정한 footer position 설정 해제
* 코드리뷰 / 검색 등 학습을 한 후 다시 블로깅
profile
Jotang's velog

0개의 댓글