[HTML/CSS] CSS의 수평 수직 정렬구조 (float / flex)

 

 

flutter에서는 수직을 column 위젯으로, 수평을 row 위젯으로 정의해 레이아웃을 만들었다.

css에서는 flutter와 달리 float, display 등 레이아웃을 위한 다양한 방법이 있었는데 

 

그 중 display property!

대부분의 요소들이 수직으로 display되는 block 구조이고 

inline, inline-block처럼 수평으로 display되는 구조도 있다.

하지만 block 구조는 계속해서 수직으로 쌓이고 inline은 수평으로 쌓여서 

내가 원할 때 줄바꿈을 어떻게 해야할지, 다른 방법은 있는지 고민이 많았다. 

 

그래서 정리해보았다! 

---

 

float 속성을 이용한 수평 정렬 - clear property

 

float을 이용해 수평구조를 만든 후 float의 적용을 없애고 수직으로 넣고 싶은 요소가 있을 경우

해당 요소의 css에 clear property를 추가해야한다. 

clear property는 float가 적용되지 않게 한다.

 

(예시) 수평 요소들에 left 적용 

 

    <div class = "header">
        <img class = "logo" src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAclBMVEX///8AAAD19fX7+/v4+Pi7u7uXl5fs7OxZWVnj4+Orq6ufn5/W1tZ6enpPT08dHR2CgoLPz8/m5uY6Ojq0tLRmZmbd3d2UlJSNjY0SEhI0NDSFhYWlpaUZGRkJCQlxcXElJSVCQkLDw8MuLi5HR0ddXV1MTz4xAAAIAUlEQVR4nO2d12LyOgyAMZtAKaNAKRRIx/u/4iEkrHhp+PyxXX/XjSoTRZZk2W61NHTn2W74/Xo4vH5PZ9m8rfs7MIve5rg8bcX2tDxuegu2vPZ8P5uWCg532byLe3rQz0WN5fuIoU5v9VmT97nqMeSN3pd1BfP+APz4mzS8ko89TZ31i1qeeFnTBO4/1PLyN9Dj2UGjT0G/g1Zn8muQ9ztBy+v0DfK2mfX5L9P4CmA/0432yiJvhfzC3yzyDl9mfYaW58/kcHM/G4RdnrD/7HcGuV3e0PCbzQH6nAG7iI7tBZaswAPswRSc6543GfgTM5g+C5vFXzkAzWIGVbCvfn4HfR74q6/h8gTIqcIs4sKO+bwQU7s+E4w8AfCpU4w8xTtAvEGNhGdGOHnCGk+g3oDiLY6RCtm+xQFWnrDMGuBv8Mr4+XmgF33EPDFKQZWVpVGebRpU8ORR2/jnhTAFz+hfXGi8Q8WCouCjVQAmehnDj04wCWGYxlotTSBqZnh//oukkCEYOZHknbTyIKGRgnsAt6UJ0DoHtNuqGGvkkT6iM9urgD1RgHhXK9ShyhOazOWdKu+a7pEVEurEGhz9SaijrS5dwVIA0cgLNkqN6PKE21d4dRUkP1WyVSkETACUKNMWqps481E8jw2vnlA5eNLUUzFUyKNNPRUjng0IcZQVwsdrjyjyqCNHXvEd4eOrR9waqdJMWfKWLEdVIIdulIDtjhzQkwK2O12elavimnphFMdJksdw9QVzrgA5XObJk80embjWybgCJOeHqV2okOoZHNcsildgqtcC+K4rRIzib0jlzm+evF/OfH+hHkoyrV76sOlBbslH65UpoR6aUvOKK/X8gunrxWsLWtPUUc+g6GF3ST34pmZOVw5/YITxW2n8noY53ZxqCrmfLWg1nxtDZhgpl/edz/ioYr7MjF6kKZGiNq5VSaUa5ivYc61Kjrx5zvkgyWN+2F9cbywvqOjaEmC8SPJYNYjLbMZzppJClBWGB1xnwEWhJu4qRlHSZTk/VeMDx/mpVl5ZnuLimhnpiewXmGaqXLJjyCuTO8Z8oVwQ48wXyrI+I0nfc38j9dLMhixPXUNnuPtKAjkdkF07UyPNYhZ5AromKuTwXdcGQ3XPmrUsunu+GT3RN2j6clpUu1f6rQtEK3vwW6S696tWIWLd29BNRlqcyblmYGryoczSiujhBq79qOLpIyL86Lol6RJ86cBgEi1S6aBmEugcxdIUhY+XLU1RyJYoxQoIUsKPWR/8qp+h1aTkBydP8QZQ4eSHTR9sOGnu7L2ASoKUrYWIt2h9g9ghAgaIeouabwj8LQKbeuFZC7BnH/wOtG2FwJnf7EUfgHRlC0znONCjGpoKF4BMaovZQACJ33SxmooJYOr/Nu/HsaZS6vBfy8j28fwgt+JYExfrtpe28Ws8YrYilPRMJd0TfmvQwBgvzSDbN9obnSnM8OMr+NJNRFOQC5UY6FLi7Qa8PWWuyMiO1jnZoNM+l+Tle9rvVSqoeJEvSAUXb7tpZV+f01nG2bhWKdVfXVOY5arP+LkqRtlsWvV9nKa7N+J2v277DHJnn4lOIbCL3x2mxbWCiUQikUgkEolEIpH4Bwzm2bjf74+zOSO795bJ+LkJcjjGn2riMaN31TaTT9aZPj4x16/5TPnlmuaZyFW2p4pb6MbatS93vwRdSIItkwZsqtDmKORaiD/AGzJMbRgeg9kFoNr/6z24bQ4BDhHbMxScoeI70fRdcl5C2V0c1NxPahM+OFyT+t+htbxqGnJ9hNr+TzwKswFy4ghzu2g/oB9iEEqESt9SAjjKzwc4W7HCyPo5G6kwHWDNwTn6w9wK7QmkpvMbIQQ2vO3q4M7OBuFtDg8hi2INUHOemVfwtpDq91L5A/NUpgBcDW+jM/pE9AZgnmBgb2JuHNdnm/iH6/Np/CP+dxj/dxi/L+UF3iHMh/HHNPHHpX8gt4g/P4w/x2fVaT6bVh5E/LW2+Oul8de8/8C6RSsnDjCYtac/sH4Y/xow8VymkNbx4+/F+AP9NPieqJA+woro+9r+QG8ixlADNNESqLsJzsncgWXDgU0Tz3Tt0U3Yvfpn1uYTC5cBxaJa5vpjhqLYM1MwelcdMvgazb6nC5HvXauIe/9hIpFIJBKJRCKRSCTgOD+/1Cc6tTNoIxvmYCxX3JbjeDJ912dB+0bPdM77N/48b99Y54bxFeSBl4Qh122F0emlxvndCL4B78MMtDrs/I4S33B+z4xvOL8ryDec3/fkHa7v7PIO9A1bIrBzlJzfnecdtHud9fcfeofrOyy9w/k9pN7h+i5Z73B+H7B3OL/T2Ttc38vtHc7vVvcO2mx/JYRZn3zF9IUQemlZAwwhruHMFQX+zxfUPU9X/C8u8hxNCOUM7rkYWdMDsBL/2Sbxn08T/wjjt9KMOUL/PQ2u1C3j/2zBnfEDKAwzR9i0+gDw1e5HQqh8G+/1tqK92d4jeIGp/46GUy0tCKJi+ssY4G/TyoPgmGkIZZoWa75oWnUg9Kq+/2F3Ce3cj4JgtgRTX2Ior/DMiTTAU9NqI6CdFBVUwwmkY6/OrmmlceToAYZzDFYJPnYLIl57BNsUFUDmWwd3BmaQ/ZeYeob/qxVKBlvg+LYhrPyqgbW3rZpWkwOkeup/hdRI23ZY1DG4WUJiYjrzaxikD5VY65oXXgJ1oSq+jvXzkz+PIZTVUCx6m+PytBXb0/K46S3+2f/9D+7zdZ0dQYgBAAAAAElFTkSuQmCC">
            <ul class = "nav">
                <li><a href="#feed" class="active">피드</a></li>
                <li><a href="#story">스토리</a></li>
                <li><a href="#skin">스킨</a></li>
                <li><a href="#community">포럼</a></li>
              </ul>
        <img class = "alarm_img" src = "https://image.flaticon.com/icons/png/512/51/51839.png">
        <img class= "profile_img" src = "https://i1.daumcdn.net/thumb/C100x100/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fblog%2Fadmin%2Fprofile_default_00.png">   
   </div>
    <div class = "content">
    ...
    </div>

 

 

1) 수평 요소들의 끝에 clear-element 를 추가하여 clear : both 적용 

  		...
    	<img class = "alarm_img" src = "https://image.flaticon.com/icons/png/512/51/51839.png">
        <img class= "profile_img" src = "https://i1.daumcdn.net/thumb/C100x100/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fblog%2Fadmin%2Fprofile_default_00.png">   
		<div class="clear-element"></div>
</div>

.logo {
    float: left;
    padding: 14px 16px;
    width: 24px;
    height: 24px;
}

.nav{
  	float: left;
    list-style-type : none;
    margin: 0;
  	padding: 0;
}

.clear-element {
  clear: both; /* or left */
}

 

 

 

 

2) 수평이 될 요소(float 적용된) 들을 clearfix로 감싸 clear를 적용하는 방법 (권장)

<div class="clearfix">
  ...
</div>

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

 

---

Flexible Box를 이용한 수평정렬 

 

해당 요소는 flutter와 비슷했다.

flex에는 Container개념과 Container 내부에 들어갈 Items 개념으로 나뉘는데 

각각의 개념에 적용되는 요소들이 달랐다. 

 

 

Container

 

1) display (container간의 정렬)

 

- 수직 (block)

display: flex 

 

- 수평 (inline) 

display : inline-flex

 

 

Item

 

1) flex-flow (item 간의 정렬)

flex-direction : row  //왼쪽에서 오른쪽
flex-direction : row-reverse 
flex-direction : column  //위에서 아래
flex-direction : column-reverse 

flex-wrap : nowrap //한 줄 
flex-wrap : wrap // 여러 줄 

 

- 주축 (main-axis) 기준 정렬방법

justify-content : flex-start; //시작점에 정렬
justify-content : flex-end; // 끝점에 정렬 
justify-content : center; //가운데 정렬 
justify-content : space-between; // 시작점 끝점에 정렬하고 그 사이 여백 균등하게 정렬
justify-content : space-around;	//균등한 여백 포함

 

- 교차 축(cross-axis) 기준 정렬방법

 

align-content는 여러줄일 때 , align - item은 한 줄 일때

align-content: stretch; //여백없이 늘리기
align-content : flex-start;
align-content : flex-end;
align-content : center;
align-content : space-around;	

 

align-items: stretch;
align-items : flex-start;
align-items : flex-end;
align-items : center;
align-items : baseline;	//문자기준선에 맞춤

 

---

참고

(아래의 링크에 가면 각 요소별 이미지를 볼 수 있습니다)

heropy.blog/2018/11/24/css-flexible-box/