코드스테이츠_2주차_월

윤뿔소·2022년 8월 29일
0

CodeStates

목록 보기
6/47

레이아웃

웹 사이트에 목적에 맞게 화면을 만드는 작업, 콘텐츠를 원하는 위치에 배치해 웹사이트의 본질을 추구하자!

와이어프레임(Wireframe)

  • 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계, 레이아웃과 제품의 구조를 보여주는 용도
  • 위 그림은 특정 목적을 가진 프로그램의 와이어프레임을 나타낸다. 보면 어떤 프로그램인지 알 수 있을 만큼의 뼈대를 그린 모습이다.
  • 말그대로 뼈대이기에 전환 효과나 애니메이션, UI, UX 등 스타일 요소를 다 뺀 상태를 의미

목업(Mock-up)

  • 실물 크기의 모형을 뜻함
  • 무형의 웹, 앱에서 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성하는 것을 뜻함!
  • 예를 들어 하드코딩이 있음

하드코딩

JS의 변수를 이용하지않고 HTML에 하나하나 입력해보는 것

// JavaScript 어딘가에는 tweet 내용이 담긴 객체가 존재
let tweet = { user: '김코딩', content: 'SNS는 인생의...' }

=

<!-- 실제로는 어떤 로직에 의해서 적절한 위치에 값이 들어감 -->
<div class="writer">김코딩</div>
<div class="content">SNS는 인생의...</div>

결론

고수들은 와이어프레임과 목업을 작성하는 단계를 건너뛰고, JavaScript로 동작하는 애플리케이션을 만들어도 된다.
그래서 초보는 와이어프레임과 목업을 작성하는 단계를 반드시 진행해 HTML 문서를 통해 화면을 다 그려야 한다.
그러지 않으면 JS를 적용한 완성본이 어떤 형태를 가질지 상상하기 어렵다. 마치 설계도 없이 건물을 짓는 것과 같다.

화면 분할 방법

보통 웹은 좌 ➡️ 우, 위 ➡️ 아래로 콘텐츠가 흐르기 때문에 수직, 수평분할을 적용해 흐름 따라가자!
1. 수직 분할: 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치
2. 수평 분할: 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치 수평으로 구분된 요소에 height 속성을 추가하면, 수평 분할을 보다 직관적으로 할 수 있습니다.

리셋 방법

  1. reset.cdn에 입력 - 이거 많이 씀 나는
  2. css에 직접 입력하기
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}

플렉스

  • display: flex; 를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해
  • flex-direction 을 이용하여 요소를 정렬할 방향을 결정
  • justify-contentalign-items 를 이용하여 수평-수직 정렬을 결정
  • flex-grow 를 이용하여 요소를 얼마나 늘릴 것인지 결정
  • flex-basis 를 이용하여 요소의 기본 크기를 결정
  • VSCode의 레이아웃을 Flexbox를 이용하여 구현

작성 방법

부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있었다면
자식 요소에게 적용해야 하는 속성인 flex는 요소가 차지하는 공간과 관련

부모요소에 도입하는 flex 속성

display: flex;

  • display: flex;를 부모요소에 도입, 자식 박스의 방향과 크기를 결정
<main>
  <div>box1</div>
  <div>box2</div>
  <div>box3</div>
</main>
main {
  display: flex;
  border: 1px dotted red;
}
div {
  border: 1px solid green;
}
* {
  margin: 10px;
  padding: 10px;
}

flex-direction

  • row 기본값
  • 자식 요소의 정렬할 축을 설정, 수직이냐 수평이냐
  • row, column, r,c-reverse
main {
  display: flex;
  flex-direction : column;
} /* 수직으로 정렬 */

flex-wrap

  • nowrap 기본값
  • 요소들이 넘치면 줄바꿈 할 지 안할 지

⭐️justify-content, align-items

  • 잘 헷갈리는 개념
  • flex-directionrow인지 column인지 나뉨
  • justify-content의 설명
  • align-items의 설명

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

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

flex

  • flex: <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기: px, em...)>
  • growshrink는 배수를 나타냄 위 사진은 growth가 6:3:1이므로 box1은 부모 박스의 10분의 6을 차지한다는 의미
  • growshrink는 같이 안쓰는 것이 좋음
  • basis : 자식 박스가 늘어나거나 줄어들기 전에 가지는 기본 크기, 즉, grow가 0이라면 basis의 크기만큼 유지됨

플렉스 개념 익히기

  • 개구리를 이동시켜주세요 ㅠㅠ 게임!
  • flex는 basis, shrink, grow부터 시작임, 이 개념들을 빠삭하게 익혀 진짜배기 flex를 활용하자!
  • 아래는 vsc의 와이어프레임이다. flex를 통해 이렇게 만들어보자

정답(대충한거임)

<div id="container">
  <div class="i_container">
    <div class="icon">아이콘 1</div>
    <div class="icon">아이콘 2</div>
    <div class="icon">아이콘 3</div>
  </div>
  <div class="s1">
    <div class="row1-1">영역1</div>
    <div class="row1-2">영역2</div>
    <div class="row1-3">영역3</div>
  </div>
  <div class="s2">
    <div class="row2-1">영역4</div>
    <div class="row2-2">영역5</div>
  </div>
</div>
#container {
  width: 100%;
  height: 100vh;
  margin: 10px;
  display: flex;
}
.i_container {
  width: 10%;
  border: 2px solid red;
  flex-direction: column;
}
.icon {
  width: 60px;
  height: 60px;
  border: 1px dotted red;
  margin: 20px auto;
}

.s1 {
  width: 20%;
  border: 1.5px solid red;
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 0 5px;
}
.s1 > * {
  border: 1px dotted blue;
}
.row1-1 {
  flex: 4;
}
.row1-2 {
  flex: 4;
  margin: 5px 0;
}
.row1-3 {
  flex: 2;
}

.s2 {
  width: 70%;
  border: 1.5px solid red;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.s2 > * {
  border: 1px dotted blue;
}
.row2-1 {
  flex: 4;
  margin-bottom: 5px;
}
.row2-2 {
  flex: 1;
}
profile
코뿔소처럼 저돌적으로

0개의 댓글