Lesson - CSS 중급

HTML 구성하기

위 썸네일과 같은 레이아웃을 잡는다고 가정하면, 다음과 같은 레이아웃 구성이 가능할 것이다.

<div id="container">
  <div class="col w10">
    <div class="icon">아이콘 1</div>
    <div class="icon">아이콘 2</div>
    <div class="icon">아이콘 3</div>
  </div>
  <div class="col w20">
    <div class="row h40">영역1</div>
    <div class="row h40">영역2</div>
    <div class="row h20">영역3</div>
  </div>
  <div class="col w70">
    <div class="row h80">영역4</div>
    <div class="row h20">영역5</div>
  </div>
</div>

// .w70 { width: 70% }
// .h40 { height: 40% } 
// ...

레이아웃 리셋

때로는 HTML 문서가 갖는 default 스타일이 레이아웃을 잡는 데 방해가 될 수 있다.
아래의 코드를 적용시키면 이를 해결하는데 도움을 준다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flexbox로 레이아웃 잡기

Flexbox 레이아웃은, 말 그대로 박스를 유연하게 늘리고 줄이는 방법을 토대로 레이아웃을 잡는 방법이다.

Flex 코드 분석하기

flex는 display: flex 속성을 통해 자식 박스의 방향과 크기를 결정하는 레이아웃이다.
기본적으로, flex가 적용된 부모 박스의 자식 박스는 오른쪽으로 차례대로 붙는다.

//HTML
<div id="outer">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
</div>

//CSS
#outer {
  display: flex;
  border: 1px dotted red;
  padding: 10px;
}
.box {
  border: 1px solid green;
  padding: 10px;
}

flex-direction(방향)

기본적으로 flexbox는 박스가 수직으로 분할되지만, 수평으로도 분할할 수 있다. flex-direction 속성은 부모 박스에 적용하며, 자식 박스에 특별한 속성을 주지 않아도 영향을 미친다.

• flex-direction: row (기본값)
• flex-direction: column

grow(팽창), shrink(수축), basis(기본 크기)

자식 박스에 어떠한 속성도 주지 않으면, 오른쪽으로 컨텐츠 크기만큼 배치된다.
이 때, 자식 박스의 flex 기본 속성값은 다음과 같다.
(flex속성은 자식 박스에 적용한다.)

flex: 0 1 auto; // <grow> <shrink> <basis>

flex-grow: 0;  // 각각 따로 지정할 수도 있다
flex-shrink: 1;
flex- basis: auto;

grow

grow는 단위가 없으며 비례하는 값이다. 박스를 여러개로 나누었을 때, 각 자식 박스가 갖는 grow값의 총 합이 n이라고 가정한다면, 이 때의 1은 1/n의 크기를 의미하고, 2는 2/n의 크기를 의미한다.

• 첫 번째 박스(.target)의 grow를 1로 바꾼다면, 해당 박스는 가로의 남은 영역 전부만큼 늘어난다. (grow값의 합은 1+0+0이므로, .target은 1/1 = 100%이여야 하지만, .box 안에 이미 콘텐츠가 존재하므로 콘텐츠가 담긴 크기는 보장함)

.box {
  flex: 1 1 auto;
}

.target {
  flex: 2 1 auto;
  /* 자식 박스가 총 세개인데, target만 2의 비율을 가지므로, 결과적으로 가로의 50%를 차지하게 됨 */
}

• 반면 모든 박스(.box)의 grow를 1로 바꾼다면, 모든 박스가 늘어나려고(grow) 하므로, 결과적으로 동일한 비율로 박스가 늘어나게 된다. (총 grow 값 1+1+1, 각 박스는 1/3씩 크기를 가짐)

.box {
  flex: 1 1 auto;
  /*
  모든 자식 박스가 동일한 grow 값을 가질 경우, 각 박스가 동일 비율만큼 차지하므로, 다음 코드는 전부 같은 모양으로 렌더링됨.
  flex: 2 1 auto;
  flex: 3 1 auto;
  flex: 4 1 auto;
  */
}

.target {
  /* flex 값을 지정하지 않음 */
}

• .target의 grow 속성이 1, .box의 grow 속성이 1일 경우, 1+1+1로 박스가 만들어지므로, 속성 1은 1/3의 크기를 가짐
  

• .target의 grow 속성이 2, .box의 grow 속성이 1일 경우, 2+1+1로 박스가 만들어지므로, 속성 1은 1/4의 크기를 가짐
  

shrink

shrink는 grow와 반대로, 차지하는 비율만큼 박스 크기가 작아지게 만든다. 사실 비율로 레이아웃을 지정할 경우 grow를 주로 사용한다. 왜냐하면 shrink는 width나 이후 설명할 basis에 따른 비율이므로 실제 크기를 예측하기 어렵기 때문. 보통 shrink는 기본값인 1로 두어도 무방함.

basis

박스가 grow나 shrink에 의해 늘어나거나 줄어들기 전 갖게 되는 기본 크기를 의미한다. grow가 0일 때, basis 크기를 지정하면 그 크기는 보장됨.

//html
<div id="outer">
  <div class="left">메뉴</div>
  <div class="right">본문</div>
</div>

//css
.left {
  flex: 0 1 100px; /* grow를 0으로 설정해줘야 100px 이상으로 늘어나지 않음. */
}

.right {
  flex: 1 1 auto; /* 우측 박스는 grow를 1로 설정해 나머지 공간을 채워줌 */
}

justify-content(컨텐츠 수평 정렬)

그림과 같이 부모 박스에 justify-content 속성을 사용하여 자식 박스의 수평 정렬을 지정할 수 있다.

justify-content: start //flex-end center space-between left 등 수십가지

align-items(컨텐츠 수직 정렬)

그림과 같이 부모 박스에 align-items 속성을 사용하여 자식 박스의 수직 정렬를 지정할 수 있다.

align-items: stretch //center start end baseline revert 등 수십가지

Lesson - 웹 앱 화면 설계하기

와이어프레임

와이어프레임(wireframe)은 골격이라고도 표현할 수 있다. 말 그대로 "와이어로 설계된 모양"을 의미하며, 비교적 단순한 도형만을 사용하여 제품의 인터페이스를 시각적으로 묘사한 것.

와이어프레임은 전환 효과나, 애니메이션, 사용자 테스트처럼 UX를 판단하는 것이 아니라. 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도다.

목업

실제 작동되는 모습처럼 HTML 코드를 하드코딩하는 것.

실제 생명력을 가진 웹 앱을 만든다면, HTML에는 작성자, 내용 등에 변수의 값이 동적으로 담겨야할 것이다.

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

하드코딩은 <div>태그 안쪽에 변수를 담는 것이 아닌 아래와 같이 HTML 출력을 하나하나 입력하는 것을 의미한다.

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