오늘의 컨디션 上!!

어제 일찍 취침을한 덕분인지(?) 오늘아침에 정말
오랜만에 개운하게 일어난 것 같다.
오늘도 열심히 달려보자!

image

오늘의 학습 목표는 페이지 레이아웃과 웹 앱 화면 설계하기.
어제는 HTML,CSS가 무엇인지? 찍먹을 해보았다면
오늘은 화면의 나누는 방법, Flexbox로 레이아웃 잡는 방법
와이어프레임 설계하기 등 공부를 진행할 예정이다!

° 화면을 나누는 방법

수직분할 : 화면을 수직으로 구분
수평분할 : 분할된 요소를 수평으로 구분

Atomic CSS 방법론

클래스 이름과 구현을 일치시켜 작은단위로 CSS를 작성하는 기법

° Flexbox로 레이아웃 잡기

display : flex; 를 이용한 사용법을 알아보려고한다.

image

우선 인텔리제이로 templates 폴더에 index.html 만들어 작업할 것이다.
별도의 css파일은 만들지않고 실습을 위한 ‘내부 스타일 시트’방법으로 css를 적용하려고한다.


우선 박스3개와 그걸 감싸고 있는 부모 박스 이렇게 총 4개의 박스로 구성했고

image

아래의 css만 적용해둔 상태이다.

main {
  border: 1px dotted red;
}

div {
  border: 1px solid green;
}

* {
  margin: 10px;
  padding: 10px;
}

이제 flex를 적용해보면서 차이를 알아가보려고한다.

flex-direction : 정렬 축 정하기

main {
  display: flex;
  flex-direction : row;
  border: 1px dotted red;
}

현재 display : flex; 적용해둔 상태.
flex-direction을 row로 설정. (가로정렬)
여기서 display : flex;만 적용해두어도 flex-direction의 Default값은 row이기 때문에
아래와 같은 모양으로 정렬이되어진다.

image


가로정렬하는법을 위에서 알아보았으니
세로정렬하는 방법이다. row -> column으로 변경하면 적용된다.

main {
  display: flex;
  flex-direction : column;
  border: 1px dotted red;
}

image


이제 박스를 반대로 표시하는 방법이다.
가로정렬을 반대로 row-reverse로 지정하면
box1이 맨오른쪽에 위치한걸 볼 수 있다.

main {
  display: flex;
  flex-direction : row-reverse;
  border: 1px dotted red;
}

image


마찬가지로 세로정렬의 반대로
column-reverse로 설정을 할 경우에
맨아래에서부터 box1이 채워지는 것을 볼 수 있다.

main {
  display: flex;
  flex-direction : column-reverse;
  border: 1px dotted red;
}

image


flex-wrap : 줄 바꿈 설정하기

줄바꿈도 동일한 방법으로 테스트 해보았다.
처음 flex-wrap을 설정하지 않았어도 nowrap이 Default상태로
줄바꿈을 진행하지 않는 값이 기본값이다.

main {
  display: flex;
  flex-wrap : nowrap;
  border: 1px dotted red;
}

적용해보면 아래와 같이 부모박스 크기보다
많은 자식박스가 들어갈 경우 벗어나는 모습이다.

image


이제 반대로 부모박스안에서 줄바꿈을 가능하게하려면
nowrap -> wrap으로 변경하면 줄바꿈이 가능해진다.

main {
  display: flex;
  flex-wrap : wrap;
  border: 1px dotted red;
}

부모박스안에 자식박스가 채워진 모습.
여기서 이제 반응형으로 화면을 줄엿다 늘렷다하면 자식박스도 같이
줄바꿈이 되는 모습을 볼 수있다.

image


줄바꿈이 되었다면 이걸 뒤집어서
wrap-reverse로하면 순서가 뒤집혀서 표시가 된다.

main {
  display: flex;
  flex-wrap : wrap-reverse;
  border: 1px dotted red;
}

뒤집히는 순서는 세로 축만 변경되는 모습을 볼 수 있다.

image


justify-content : 축 수평 방향 정렬

축 정렬관련해서는 flex-direction과 세트인 느낌이 들었다.
flex-direction이 row 혹은 column이냐에 따라 정렬되는 순서가 달라진다.
justify-content는 flex-start, flex-end, center, space-between, space-around가 있다.

  • flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
  • center: 요소들을 컨테이너의 가운데로 정렬합니다.
  • space-between: 요소들 사이에 동일한 간격을 둡니다.
  • space-around: 요소들 주위에 동일한 간격을 둡니다.

우선 flex-direction의 정렬이 가로정렬일때 부터 알아보자.

main {
  display: flex;
  flex-direction : row;
  justify-content : flex-start;
  border: 1px dotted red;
}

flex-start일 경우에는 설정을 안했을때와 동일하게 정렬되어진다.
가로정렬로 설정되어있고 수평방향에 맞게 정렬되어졌다.

image


flex-end일 경우 수평방향으로 끝에서부터 정렬되었다.

image


center일 경우

image



세로정렬의 경우 테스트를 위해 width와 height를 강제로 부여한후에
테스트를 진행해야 알아보기가 편해서 값을 넣고 진행했다.

main {
  width : 500px;
  height : 500px;
  display: flex;
  flex-direction : column;
  justify-content : flex-start;
  border: 1px dotted red;
}
div {
  width : 35px;
  height : 20px;
  border: 1px solid green;
}

flex-start일 경우 위에서부터 세로정렬.

image


flex-end일 경우 아래에서부터 세로정렬

image


center일 경우 가운데정렬이 되는 모습니다.

image

이렇게 컨텐츠 정렬방법에 대해 알아보았고 더많은 정렬 방법이 있지만
나의 학습목표는 세부사항이아닌 이런것들이 있구나? 라는 목표이기 때문에
여기까지 보려고한다.


align-item: 축 수직 방향 정렬

align-item도 동일하게 flex-direction과 세트인 느낌이다.
flex-direction이 row 혹은 column이냐에 따라 수직방향을 정렬하기 때문이다.

테스트를 위해 박스를 10개만들 었고
전부다 폰트가 다르게끔 설정을 하였다.
그리고 flex-wrap : wrap을 설정하여 잘바꿈을하여 확인하기 편하도록 설정하였다.


우선 align-items를 설정하지 않은 상태에서 보았다.

main {
    width : 400px;
    height : 400px;
    display: flex;
    flex-wrap : wrap;
    flex-direction : row;
    border: 1px dotted red;
}

박스의 크기들이 이렇게 보여진다.

image


flex-direction : row;로 가로정렬방향으로 설정했을때
align-items : flex-start를 설정할 경우
가로 정렬의 수직축이 정렬된 첫번째 위치에서 정렬된 모습을 볼 수 있다.

image


flex-end으로 설정할 경우
수직축으로 아래를 기준으로 정렬되는 모습

image


center로 설정할 경우

image


stretch로 설정할 경우

image


baseline로 설정할 경우

image


우선 위와 동일한 align-items를 설정하지 않은 상태에서 보았다.
flex-direction을 세로방향으로 설정해놓았다.

main {
    width : 400px;
    height : 400px;
    display: flex;
    flex-wrap : wrap;
    flex-direction : column;
    border: 1px dotted red;
}

세로 정렬인만큼 박스가 위에서 아래로 정렬된 모습을 볼 수있고
wrap으로 인해 다음 박스는 다음줄로 넘어간 모습이다.

image


align-items : flex-start를 설정할 경우
축이 세로방향이므로 align-item 가로방향으로 정렬이 시작되어야한다.

image


flex-end일 경우
가로로 부모박스 끝에서 부터 정렬된 모습

image


center일 경우

image


stretch로 설정할 경우

image


baseline으로 설정할 경우

image



이렇게 Flexbox의 간단한 사용 법들을 알아 보았다.
display : flex;
flex-direction(정렬 축정하기) / flex-wrap(줄바꿈) /
justify-content(축 수평정렬) / align-itmes(축 수직정렬)에

대해서 알아보았다. 사실 정확하게 전부 이해했다고 하면 거짓말이다.
어느정도 감은 잡히는데 실제 레이아웃 설계후 내가 이 기능으로 자유자재로
박스의 위치를 잡을 수 있냐?라고 묻는다면 힘들 것 같다.
이러한 기능들이 있었다. 정렬방법과 박스구성이 이렇게 된다라는 것들을 알아 보는 시간이었다.

° Flexbox 속성의 하위 속성

grow : 요소의 크기가 얼마나 늘어날 것인지?
shrink : 요소의 크기가 얼마나 줄어들 것인지?
basis : 늘어나고 줄어드는 것과 상관없이 기본 크기

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

한줄로 표현방법
flex : 0 1 auto;


여러줄로 표현방법
flex-grow : 0;
flex-shrink: 1;
flex-basis : auto;


Box1~10까지의 스타일중 box1번만
flex-grow: 1;로 설정하였다
나머지는 기본값이 0이기 때문에 box1만 크기에 맞춰서 비율이 늘어난걸 볼 수 있다.
화면을 오른쪽으로 늘릴경우 반응형으로 box1도 늘어나는 모습을 확인 가능.

image

box2의 스타일에도 1로 설정시
box1과 box2가 동시에 나눠가지는 모습.

image

*Flexbox 연습하는 귀여운 사이트* -> Flexbox Froggy

° 웹 앱 화면 설계하기

와이어프레임이란 웹 또는 앱 개발할때
뼈대를 그리는 단계를 와이어 프레임이라고 한다.

image

어떠한 것을 개발한다고하면 설계하는 것이 가장 중요하다.
내가 이전에 일을할때 기계설계에서 설계를 해주면 움직이게 해주는
자동화 프로그래밍 일을 했을 때에도… 설계가 잘못되서 다시 엎어지면
나는 그에 맞게 프로그램을 다시짜야했기 때문이다.
이처럼 웹에서도 뼈대를 잘만들고 신중하게 고려해야지
그 이후에 작업들도 원활하게 이루어질 것 같다는 생각이든다.

흔히 이제 목업(Mock-up)이라고 산업에서는 실물 크기의 모형을 뜻한다.
핸드폰만봐도 목업핸드폰은 매장에서보면 실물과 똑같지만
동작은 하지 않듯이… 웹에서도 목업을 만들 수 있다.

OvenApp.io 나는 이번에 Oven이라는 앱을 통해서
내가 좋아하는 intagram의 와이어프레임을 만들어 보려고한다.

image

확실하진 않겠지만 내가 생각한 수준에서
와이어프레임을 나누고 구성요소를 그려보았다.
이제 프론트엔드에서 열심히 화면을 만들어주면
숨을 불어넣어주는 벡엔드가 동작을 구현한다.
너무나도 재밋고 신기하지 않은가!!!

오늘은 사실상 프론트엔드의 기초 개념들을 공부하고 있다.
Flexbox라는 것으로 화면을 꾸밀 수 있다는 점과
배치하는 것이 상당히 어렵구나;; 라는 것을 느꼈고
그냥 아무런 사이트만 들어가도 무수한 텍스트,이미지,영상 등
사람이 보기 좋게 꾸며놓은일이 정말 쉽지 않구나 라는 느낌을 강하게 느꼈다.
이 얼마나 대단한 일인지!!!
뒤에서 노고하는 개발자분들에게 그랜드절을… 👍
오늘의 공부는 여기까지!


오늘의 커피량: ☕️ ☕️ ☕️ ️️
오늘의 점심: 라면,새우볶음밥,만두