CSS 중급1

 

 

• 학습 내용

 이번 시간에 학습 한 내용은 css의 좀 더 실용적이고 깊은 내용을 학습했다. 그래서 이번 시간에 기술할 내용은 레이아웃의 전체적 구조를 조정하는 방법과 웹이나 앱을 본격적으로 개발하기 전에 시행할 와이어프레임(Wireframe)과 목업(Mock-up)에 대해서 서술하고자 한다.

 

• 레이아웃 리셋

레이아웃을 본격적으로 다루기 전에 HTML 문서가 가지고 있는 기본적인 스타일을 처리할 필요가 있다. 때때로 이것으로 인해 원하는 결과가 나오지 않기 때문이다. 이것을 레이아웃 리셋이라고 하고 라이브러리(Nomalize.css)를 사용하는 것으로 할 수 있다. 그러나 좀 더 간단히 간단한 코드로도 할 수 있다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

 

• Flexbox

flex(flexible)은 "잘 구부러지는, 유연한"이라는 뜻을 가지고 있는데 flexbox는 박스를 유연하게 늘리거나 줄여 레이아웃을 잡을 때 사용한다. 사용방법은 이러하다. 먼저 html을 작성 후 css에 부모 박스 요소에는 display: flex 그리고 자식 요소에는 flex속성을 차례대로 적용한다.

<div id="outer">
  <div class="box">box1</div>
  <div class="box">box1</div>
  <div class="box">box1</div>
</div>

#outer {
  display: flex;
  border: 1px dotted red;
  padding: 10px;
}

.box {
  flex: 0 1 auto;
  border: 1px solid green;
  padding: 10px;
}

출처: 코드스테이츠

flex 속성에 적용되는 세 가지 옵션은 띄어쓰기로 구분한다.

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

 

default값은 flex: 0 1 auto이고, 자식 요소에 flex속성을 추가하지 않으면 자동으로 default값으로 적용된다. 물론 세부 속성으로도 옵션 적용이 가능한다.

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

만약 첫 번째 박스에 target 클래스를 추가하고 target속성에만 flex의 grow옵션 값을 1로 하면 어떻게 될까?

출처: 코드스테이츠

이렇게 되는 이유는 flex의 grow와 shrink의 값이 비율로 반영되기 때문이다. 위 경우는 grow가 1 + 0 + 0 = 1 이므로 1/1의 크기를 가져 100%의 비율이 된다. 다른 박스를 제외한 모든 영역을 box.target이 차지하는 것이다. 그래서 모든 박스가 동일한 grow값을 가지면 모든 박스가 100% 차지하고 박스끼리 동일한 크기로 나눠진다.

출처: 코드스테이츠

shrink속성 역시 마찬가지로 grow의 변화와 동일하게 줄어든다. 단, grow와 shrink를 함께 사용하는 것은 좋지 않다.

 basis는 grow속성과 shrink속성에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기를 의미한다.

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

.left {
  flex: 0 1 100px;
}

.right {
  flex: 1 1 auto;
}

출처: 코드스테이츠

주의할 점은 width와 flex-basis를 동시에 적용하면 flex-basis가 우선된다는 것이다. 또 콘텐츠가 많아 자식 박스가 넘치는 경우에는 flex-basis를 사용하는 것이 좋다. 왜냐하면 width는 정확한 크기를 보장해주지 못하기 때문이다. 단, max-width를 사용하면 해결이 가능하긴 하다.

 

• flex요소에 방향 지정하기

flex요소는 기본적으로 수직으로 분할한다. 그러나 방향을 설정해주면 다른 방법으로 분할하는 것이 가능하다. 사용방법은 부모 박스 요소에 flex-direction을 추가하는 것이다. 예를 들어 수평분할은 column으로 할 수 있다. MDN에서 소개하는 옵션에는 4가지가 있다. row(기본값), row-reverse(수직으로 분할하지만 오른쪽에서 분할한다), column(수평분할), column-reverse(수평으로 분할하지만 아래에서 분할한다)

#outer {
  display: flex;
  flex-direction: column;
  border: 1px solid blue;
  padding: 10px;
}

.box {
  flex: 0 1 auto;
  border: 1px solid green;
  padding: 10px;
}

 

• 콘텐츠 정렬

콘텐츠를 정렬하는 것은 수직분할을 사용할 때와 수평분할을 사용할 때가 다르다. 수평 정렬일 때는 justify-content속성을 부모 박스 요소에 추가하면 된다. 옵션에는 flex-start, flex-end, center, space-between이 있다. 수직정렬일 때는 align-items속성을 부모 박스 요소로 추가하면 된다. 옵션으로 flex-start, flex-end, center, stretch가 있다.

 

• 와이어프레임(Wireframe)

웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 말한다. 단순한 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한다. 아래의 예제는 화면의 영역을 구분하는 용도의 와이어프레임이다. 인터페이스를 그림으로 표현하는 것이 아닌 주요 태를 메모하는 형식으로 작성된 것이다.

출처: 코드스테이츠

• 목업(Mock-up)

목업은 실물 크기의 모형을 의미하는 산업현장에서 자주 쓰이는 단어이다. 웹 또는 앱에서는 HTML 문서 내에 하드 코딩하는 방법으로 작성하는 코드를 의미한다. 예를 들어,

출처: 코드스테이츠

이와 같은 화면 창을 목업하면 이렇게 할 수 있다.

<div id="writing-section">
    <div>댓글 9M</div>
    <input id="new-comment-content" type="text" placeholder="댓글을 입력해주세요">
    <button id="register">등록</button>
</div>
<div id="comments">
    <ul>
        <li class="comment">
            <div class="username">ouo0****</div>
            <div class="content">시각장애인들을 위한 지원이 정말 반갑네요 앞으로도 이러한 지원이 많았으면 좋겠어요!</div>
            <span class="createdAt">2018-03-22 23:29:22</span>
            <button class="voteUp">
                <img src="thumbup.png"> 0
            </button>
            <button class="voteDown">
                <img src="thumbdown.png"> 0
            </button>
        </li>
        <li class="comment">
            <div class="username">cake****</div>
            <div class="content">앞으로도 시각 장애인들이 일상생활에서 별다른 문제 없이 살아갈 수 있도록 많은 배려를 해주길 바랍니다</div>
            <span class="createdAt">2017-04-06 18:21:58</span>
            <button class="voteUp">
                <img src="thumbup.png"> 0
            </button>
            <button class="voteDown">
                <img src="thumbdown.png"> 0
            </button>
        </li>
    </ul>
</div>