[개발공부] HTML/CSS 독학하기 (6) [FINAL]

Column with flexbox

지금까지 우리가 본 basic layout 의 box 들은 서로의 위 아래에 위치하고 있었다. 그런데 많은 경우에 우리는 단순히 위 아래 stack 이 아닌 옆으로 나열된 column 을 보고 싶을 수 있다. 그럴 때 사용하는 것이 flex 이다. display: flex; 를 스타일에 추가함으로써 child boxes 를 column 형식으로 나열할 수 있다. 다음 HTML 코드를 보자.

 

<div class="columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

 

columns div 의 child 로 세 개의 column div 들이 있다. Default 값으로는 처음 column div 아래에 다른 column div 가 오는 방식으로 layout 이 생성될 것이다. 이를 column 형식으로 만드려면 다름과 같은 CSS 코드를 사용하면 된다.

 

.columns {
    display: flex;
}

 

이 간단한 코드를 추가해줌으로써 columns 의 child box 들을 column 형식으로 바꿀 수 있다.

---

이렇게 HTML / CSS 기본 강의는 끝이 났다! 원래 같으면 JS 강의로 넘어가려 했으나 같이 프로젝트를 하기로 한 친구의 팁을 받아 바로 React 강의를 보기로 했다. JS 없이 React 공부가 잘될지는 모르겠지만, 어찌 됐건 그 React 강의 또한 초보자들을 위한 것일테니 큰 어려움을 없을거라 생각한다. 빨리 마무리하고 프로젝트에 뛰어들고 싶구먼.

 

그럼 HTML / CSS 공부 기록은 여기까지 하고 React 에서 다시 만나길..!

 

이전 이야기:

[개발공부] HTML/CSS 독학하기 (5)