티스토리 뷰
플렉스를 이용한 실전예제 만들기
그저 배우기만 하는 것은 재미가 없죠? 플렉스를 이용해서 실전예제를 만들어보면 좀 더 재밌고 더 이해도 가실겁니다. 무엇을 만들지는 다음시간부터 다루기로 하고 이번 포스팅은 본격적으로 만들기 전에 미리 알아두셔야 할 것들을 설명드리겠습니다.
flex에 관한 보충설명
아이템에 flex라는 속성은 flex-grow와 flex-shrink, flex-basis의 축약형이라고 이전 시간에 다뤘습니다. 그럼 3개가 다 나오지 않고 1개나 2개의 값이 나온다면 무엇을 나타낼까요? flex: 1;(또는 다른 양수)가 온다면 flex: 1 1 0;과 같습니다. 그리고 flex:1 1;이라고만 적혀있다면 flex: 1 1 0;과 같습니다.
flex: 양수;라면 flex: 양수 1 0;이라는 뜻이고 flex: 양수 양수;라면 flex: 양수 양수 0;이라는 뜻과 같습니다.
flex에서 또 하나 알아두셔야 할 것은 margin값을 auto로 설정하는 것입니다. 엘리먼트를 가운데에 두기 위해 margin값을 auto로 설정합니다만 플렉스 안에서는 무슨 일이 일어날까요?
<head> <title>예시11</title> <style> ul{ display: flex; border: 2px solid green; list-style-type: none; } li{ border: 2px solid black; padding: 4px; } </style> </head> <body> <ul class="container"> <li>1번</li> <li>2번</li> <li>3번</li> <li>4번</li> <li>5번</li> </ul> </body>
위의 소스코드를 복사해서 실행해주세요.
다른 설정은 하지 않았기 때문에 flex-grow는 0이고, flex-shrink는 1, flex-basis는 auto 상태입니다. 여기에서 <style>태그에 li:first-child{margin-right: auto;}를 추가한다면 어떻게 될까요?
첫번째 리스트의 margin-right에 auto값을 넣으면 플렉스 컨테이너 안에 있던 여유 공간이 margin값을 auto로 설정한 곳으로 이동한 것이 보이시나요?
flex의 아이템에 왼쪽이나 오른쪽 또는 양쪽 모두에 margin을 auto로 설정하면 컨테이너에 있는 여유공간이 설정한 방향으로 이동합니다. 단 이것을 활용할 경우 justify-content속성은 더 이상 사용할 수 없습니다.
의미론적인 태그 이해하기
영어로는 semantic elements라고 합니다. 의미론적인 태그라는 게 무엇일까요? 간단하게 설명하면 무슨 의미를 지닌 것인지 브라우저와 개발자에게 알려준다고 생각하시면 됩니다. <div>나 <span>태그의 경우엔 단순히 태그만 보아선 무슨 역할을 하는 것인지 알 수 없습니다. 그런 태그만 반복된다면 코드만 봐서는 어떻게 구성되어 있는지 알 수가 없죠. 예전에는 <div>태그에 id나 class 값으로 header나 nav같은 값을 주면서 홈페이지에 어느 부분인지를 설명하기도 했습니다. 지금은 <header>나 <nav>같은 의미론적 태그가 추가되서 홈페이지에서 어느 부분을 나타내는지 표시하도록 하고 있습니다.
html5에는 위와 같은 semantic element들이 있습니다. 잘 기억해두세요!
의미론적 태그는 브라우저나 개발자에게 해당 부분이 어떤 역할을 하는지 알려주는 태그입니다.
쓰다보니 설명이 너무 길어졌네요. 다음 포스팅부터는 플렉스를 활용해서 실전예제를 만들어 보겠습니다.
공감은 제작자에게 큰 힘이 됩니다.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| 플렉스를 활용한 네비게이션 바 만들기 3 (0) | 2018.01.11 |
|---|---|
| 플렉스를 활용한 네비게이션 바 만들기 2 (1) | 2018.01.10 |
| flex의 아이템 (0) | 2018.01.07 |
| flex의 컨테이너 (0) | 2017.12.31 |
| display 속성과 flexbox (1) | 2017.12.28 |