플렉스를 이용한 실전예제 만들기 그저 배우기만 하는 것은 재미가 없죠? 플렉스를 이용해서 실전예제를 만들어보면 좀 더 재밌고 더 이해도 가실겁니다. 무엇을 만들지는 다음시간부터 다루기로 하고 이번 포스팅은 본격적으로 만들기 전에 미리 알아두셔야 할 것들을 설명드리겠습니다. 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;이라..
오늘 배울 것은 마진과 보더 그리고 패딩입니다. 테두리는 직관적으로 쉽게 이해가 가실테지만 마진과 패딩에 대해서는 헷갈리는 분들이 많으실 겁니다. 우선 마진은 엘리먼트와 엘리먼트의 사이 여백을 뜻합니다. 마진에 값을 주면 그 만큼의 거리만큼 다른 엘리먼트와의 거리가 멀어지는 것입니다. 그리고 테두리는 말 그대로 엘리먼트의 경계선을 나타냅니다. 컨텐츠는 우리가 실제로 태그 사이의 쓴 글 등이 나타나는 부분입니다. 그리고 패딩은 테두리와 컨텐츠 사이에 있는 여백을 나타내는 말입니다. 한 개의 엘리먼트가 있어도 바깥쪽부터 안쪽까지 마진-보더-패딩-컨텐츠라는 네 부분으로 구성됩니다. 코드를 작성하면서 어느 공간을 넓히거나 좁힐 때 그 부분이 정확히 어느 부분인지 파악하는 것이 중요합니다. 다른 엘리먼트와의 거리..