unit5[html/css]활용

레이아웃

각각의 요소를 목적에 맞게 배치

 

와이어프레임

레이아웃의 뼈대를 그리는 단계

목적 : 화면의 영역 구분

 

목업

실물 크기의 모형

실제 작동 모습과 동일하게 html문서 작성 

*하드코딩 : html문서에 하나하나 입력 

 

Atomic CSS 방법론

클래스 이름과 구현을 1:1로 일치 시킴 ,

아주 작은 단위로 css를 작성하는 기법

.so{ height:50%; }

 

레이아웃 리셋

*{

    box-sizing:border-box;

 }

body{

    margin : 0;

    padding: 0;

     }

 

display:flex 부모요소에 적용

 

부모요소에 적용해야하는 flexbox 속성들

 

flex-direction : 정렬 축 정하기

아무것도 설정 X : 기본적으로  자식요소들을  가로 정렬

row(기본값) : 가로 정렬

column : 세로 정렬

row-reverse

column-reverse 

 

flex-wrap :자식 요소들을 줄바꿈 설정

아무것도 설정 X : 기본적으로 줄바꿈X

nowrap(기본값) : 줄바꿈X

wrap : 줄바꿈 O

wrap-reverse

 

justify-content : 축 수평 방향 정렬

가로로 정렬 되어있슴 -> 가로방향으로  자식요소들을  어떻게 정렬 ?

세로로 정렬 되어있슴 -> 세로방향으로  자식요소들을  어떻게 정렬 ?

flex-direction : row or column

flex-start

flex-end

center

space-between :item들을 사이에 균일한 간격을 만들어줌

space-around:item들의 둘레에 균일한 간격을 만들어줌

spacce-evenly:item들의 사이와 양 끝에 균일한 간격을 만들어줌

 

align-items : 축 수직 방향 정렬

가로로 정렬 되어있슴 -> 세로방향으로 자식요소들을 어떻게 정렬 ?

세로로 정렬 되어있슴 -> 가로방향으로 자식요소들을 어떻게 정렬 ?

flex-direction : row or column

stretch

flex-start

flex-end

center

baseline

 

justify-cent ,align-inems이 모두 center이면 한가운데 놓을수 있다.

 

align-content : 여러행 정렬 아이템들의 행이 2줄이상일때 수직축 방향 정렬을 결정 

 

 

자식요소에 적용해야하는 flexbox 속성들

flex- grow(팽장지수) : 요소의 크기가 얼마나 늘어날 것인지

총합의 비율로 빈공간 차지 

 

flew-shrink(수축 지수) : 요소의 크기가 얼마나 줄어들 것인지

총합의 비율로 빈공간 차지 

 

flex-basis (기본크기): 늘어나고 줄어드는 것 상관 X , 기본크기가 얼마인지

flex-direction이 row일때 너비

flex-direction이 column일때 높이

flex-grow:0인경우에 basis 크기 지정 -> 크기 유지 

 

flew: 0 1 autol (기본값)

          grow shrink basis

 

*width < flex-basis 우선

*자식 박스 많으면 width 크기 보장 X

*flexbasis 사용 X -> 자식박스 넘치는 경우 대비해 max-width를 쓴다.

 

실습 

* {

  box-sizing: border-box;

}

body {

  margin: 0px;

  padding:0px;

}

#container{

  display:flex;

  flex-direction: row;

  flex-wrap:no-wrap;

  justify-content:center;

  align-items: stretch;

 

}

.col {

  border: 1px solid red;

  height:500px;

}

.w10{

  flex-grow:0.3;

 

}

.w20{

  flex-grow:3;

}

.w70{

  flex-grow:6;

  display: flex;

  flex-direction:column;

  flex-wrap: nowrap;

  justify-content:center;

  align-items: stretch;

}

.h80{

  flex-grow:3;

}

.h20{

  flex-grow:4;

}

.h40{

  flex-grow:6;

}

.w20{

  display:flex;

  flex-direction:column;

  flex-wrap: nowrap;

  justify-content:flex-start;

  align-items: stretch;

}

.icon {

  border: 1px dotted orange;

  height:60px;

  width:60px;

  margin: 10px;

  padding:10px;

  justify-content:center;

}

.row {

  border: 1px dotted blue;

  margin: 10px;

  padding:10px;

}

레이아웃 영역 나누기

부모요소와 자식요소를 구분하고 난 다음 그에 맞게 속성들(flex-box)을 적용하면 무난하게 풀수 있었다.

계산기 구현

목업을 짰어요

Oven - HTML5-Powered Web/App Prototyping Tool (ovenapp.io)

OvenApp.io

https://www.figma.com/files/recent?fuid=1188004082261402768 

Figma

적용한 개념

폰트적용

googlefont 검색

원하는 폰트 생각하고 css에 @import 복붙

*{

    font-family적용

  }

 

box-shadow 

inset 넣어주면 그림자안쪽에 생김

그다음

a 그림자가 오른쪽으로 얼마나 이동

b 그림자가 아래로 얼마나 이동

c 그림자의 부드러운 정도

d 그림자의 확장량

e 그림자의 색상

 

rba(0,0,0) 검정

box-shadow: 10px 10px 10px 3px rgb(0 0 0 / 25%); 투명도

 

outline:테두리의 외곽

input 외곽선이 사라짐

 

 

.row button {

 transition: all 0.3s; 속성을 서서히 변화

 property : 속성 정함

 timing-function : 진행속도

 duration :총시간

 delay :시작연기

 inittial :기본값 설정

 inherit :부모 요소의 속성값 상속

 cursor:pointer

}

 

.row button:active {

    transform: translate(3px, 3px); 

    element를 변경시킬때 사용(위치 이동,회전,크기조절)

                                                 translate,rotatescale 사용

    box-shadow:none;

}

 

버튼누르는 효과

.row button:active {

    transform: translate(3px, 3px);

    box-shadow:none;

}

x,y축을 이동하여 누르는 효과가 나게함

 

https://neumorphism.io/#e0e0e0

Neumorphism/Soft UI CSS shadow generator

뉴모피즘 그림자효과를 넣어봤더니 입체적으로 살아났다.