Clearfix

====== CSS Layout - Horizontal & Vertical Align====== * description : CSS Layout - Horizontal & Vertical Align * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-18 \\ =====Source of the article==== * [[https://www.w3schools.com/css/css_align.asp|CSS Layout - Horizontal & Vertical Align]] \\ =====Center Align Elements===== div와 같은 블럭 요소를 가로 방향으로 중앙 정렬 하기 위해, ''margin: auto;'' 를 사용합니다.\\ 해당 요소의 너비를 설정하면 요소를 포함하고 있는 컨테이너의 가장자리까지 해당 요소가 펼쳐지지 않습니다.\\ 그 후, 해당 요소는 지정된 너비만 차지하고, 남은 공간은 두 개의 마진 사이에서 균일하게 배분됩니다.\\ ====예제====

 
.center {
   margin: auto;
   width: 60%;
   border: 3px solid #73ad21;
   padding: 10px;
}

**Note: ''width'' 속성을 설정하지 않거나 100%로 설정하면 중앙 정렬은 아무런 효과가 없습니다.** \\ \\ =====Center Align Text===== 요소 내부에 텍스트를 중앙 정렬하기 위해 ''text-align: center;'' 속성을 사용합니다.\\ ====예제====


.center {
   text-align: center;
   border: 3px solid green;
}

**Note: 텍스트 정렬 방법에 대한 더 많은 예제는 CSS Text를 참조합니다.** \\ \\ =====Center an Image===== 이미지를 중앙 정렬하기 위해서 좌측 우측 마진을 ''auto'' 로 설정하고 ''block'' 요소로 만들어야 합니다.\\


img {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

\\ \\ =====Left and Right Align - Using position===== 요소들을 정렬하는 한 가지 방법은 ''position: absolute;'' 속성을 사용하는 것입니다.\\ ====예제====


.right {
   position: absolute; 
   right: 10px;
   width: 300px;
   border: 3px solid #73ad21;
   padding: 10px;
}

절대 위치 요소(absolute positioned elements)는 일반적인 배치 흐름에서 제거되고 요소들과 겹칠 수 있습니다.\\
\\
\\
=====Left and Right Align - Using float=====
요소를 정렬하는 다른 방법은 ''float'' 속성을 사용하는 것입니다.\\
====예제====



**Note:** 한 요소가 자신을 포함하고 있는 요소보다 더 크고, float 속성이 적용된 경우, 요소를 포함하는 컨테이너 외부로 넘칠 수 있습니다. 이것을 해결하기 위해 **"clearfix** hack를 사용할 수 있습니다.(하기 예제 참조)\\
\\
\\
=====The clearfix Hack=====
하위 요소를 포함하는 상위 요소에 ''overflow: auto;'' 속성을 추가하여 해결합니다.\\
====예제====





    
    
    
    Clearfix
    


    Clearfix
    
        In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:
    
    
        
        이미지가 컨테이너보다 크고 floated되었기 때문에, 컨테이너 외부로 흘러넘친다(overflow)
    
    
        이 문제를 해결하기 위해서 이미지를 포함하고 있는 요소안에 ovrflow: auto; 속성을 가진 clearfix 클래스를 추가합니다.
    
    
        
        이미지를 포함하고 있는 div에 clearfix 클래스를 추가하고 CSS에서 overflow: auto; 속성을 적용하였기 때문에 그림이 div안에 들어갑니다.
    



\\
\\
=====Center Vertically - Using padding=====
CSS에서 요소를 수직 방향으로 중앙 정렬하는 많은 방법들이 있습니다. 상단과 하단에 ''pading'' 을 사용하는 것이 간단한 해결책입니다.\\
====예제====

.center {
   border: 3px solid green;
   padding: 70px 0;
}

\\
수직 방향, 수평 방향 모두 중앙 정렬하기 위해서 ''padding'' 속성과''text-align: center'' 속성을 사용합니다.\\
====예제====

.center {
   padding: 70px 0;
   border: 3px solid green;
   text-align: center;
}

\\
\\
=====Center Vertically - Using line-height=====
또 다른 방법은 ''height'' 속성과 동일한 값으로 ''line-height'' 속성을 사용하는 것입니다:\\
====예제====

.center {
   line-height: 200px;
   height: 200px;
   border: 3px solid green;
   text-align: center;
}

.center p {   /* 여러 줄의 텍스트인 경우 이 내용을 삽입하세요*/
   line-height: 1.5;
   display: inline-block;
   vertical-align: middle;
   border: 3px dotted crimson;
}

\\
\\
=====Center Vertically - Using position & transform=====
''padding''과 ''line-height''를 적용할 수 없는 경우, 다른 해결책은 positioning과 ''transform''속성을 사용하는 것입니다.\\
====예제====

.center {
   height: 200px;
   position: relative;
}

.center p {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
}

\\
\\
=====Center Vertically - Using Flexbox=====
중앙 정렬하기 위해 플렉스박스도 사용할 수 있습니다. 플레스박스는 IE10과 이전 버전에서는 지원하지 않음을 명심하세요\\
====예제====

.center {
   border: 2px solid green;
   justify-content: center;
   align-items: center;
   height: 200px;
   display: flex;
}
 
{{tag>오션, CSS Align, layout, Horizontal Align, Vertical Align}}