문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Layout - Horizontal & Vertical Align======
<WRAP left notice 80%>
  * description : CSS Layout - Horizontal & Vertical Align
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-18
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/css/css_align.asp|CSS Layout - Horizontal & Vertical Align]]
\\
=====Center Align Elements=====
div와 같은 블럭 요소를 가로 방향으로 중앙 정렬 하기 위해, ''margin: auto;'' 를 사용합니다.\\
해당 요소의 너비를 설정하면 요소를 포함하고 있는 컨테이너의 가장자리까지 해당 요소가 펼쳐지지 않습니다.\\
그 후, 해당 요소는 지정된 너비만 차지하고, 남은 공간은 두 개의 마진 사이에서 균일하게 배분됩니다.\\
====예제====
<code css> 
.center {
   margin: auto;
   width: 60%;
   border: 3px solid #73ad21;
   padding: 10px;
}
</code>

**Note: ''width'' 속성을 설정하지 않거나 100%로 설정하면 중앙 정렬은 아무런 효과가 없습니다.**
\\
\\
=====Center Align Text=====
요소 내부에 텍스트를 중앙 정렬하기 위해 ''text-align: center;'' 속성을 사용합니다.\\
====예제====
<code css>
.center {
   text-align: center;
   border: 3px solid green;
}
</code>
**Note: 텍스트 정렬 방법에 대한 더 많은 예제는 CSS Text를 참조합니다.**
\\
\\
=====Center an Image=====
이미지를 중앙 정렬하기 위해서 좌측 우측 마진을 ''auto'' 로 설정하고 ''block'' 요소로 만들어야 합니다.\\
<code css>
img {
   display: block;
   margin-left: auto;
   margin-right: auto;
}
</code>
\\
\\
=====Left and Right Align - Using position=====
요소들을 정렬하는 한 가지 방법은 ''position: absolute;'' 속성을 사용하는 것입니다.\\
====예제====
<code css>
.right {
   position: absolute; 
   right: 10px;
   width: 300px;
   border: 3px solid #73ad21;
   padding: 10px;
}
</cdoe>
절대 위치 요소(absolute positioned elements)는 일반적인 배치 흐름에서 제거되고 요소들과 겹칠 수 있습니다.\\
\\
\\
=====Left and Right Align - Using float=====
요소를 정렬하는 다른 방법은 ''float'' 속성을 사용하는 것입니다.\\
====예제====
<code css>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clearfix</title>
    <style>
        div {
            border: 3px solid #4caf50;
            padding: 5px;
        }
        .img1 {
            float: right;
        }
        .clearfix {
            overflow: auto;
        }
        .img2 {
            float: right;
        }
    </style>
</head>
<body>
    <h2>Clearfix</h2>
    <p>
        In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:
    </p>
    <div>
        <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" hight="170">
        이미지가 컨테이너보다 크고 floated되었기 때문에, 컨테이너 외부로 흘러넘친다(overflow)
    </div>
    <p style="clear:right">
        이 문제를 해결하기 위해서 이미지를 포함하고 있는 요소안에 ovrflow: auto; 속성을 가진 clearfix 클래스를 추가합니다.
    </p>
    <div class="clearfix">
        <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
        이미지를 포함하고 있는 div에 clearfix 클래스를 추가하고 CSS에서 overflow: auto; 속성을 적용하였기 때문에 그림이 div안에 들어갑니다.
    </div>
</body>
</html>
</code>
\\
\\
=====Center Vertically - Using padding=====
CSS에서 요소를 수직 방향으로 중앙 정렬하는 많은 방법들이 있습니다. 상단과 하단에 ''pading'' 을 사용하는 것이 간단한 해결책입니다.\\
====예제====
<code css>
.center {
   border: 3px solid green;
   padding: 70px 0;
}
</code>
\\
수직 방향, 수평 방향 모두 중앙 정렬하기 위해서 ''padding'' 속성과''text-align: center'' 속성을 사용합니다.\\
====예제====
<code css>
.center {
   padding: 70px 0;
   border: 3px solid green;
   text-align: center;
}
</code>
\\
\\
=====Center Vertically - Using line-height=====
또 다른 방법은 ''height'' 속성과 동일한 값으로 ''line-height'' 속성을 사용하는 것입니다:\\
====예제====
<code css>
.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;
}
</code>
\\
\\
=====Center Vertically - Using position & transform=====
''padding''과 ''line-height''를 적용할 수 없는 경우, 다른 해결책은 positioning과 ''transform''속성을 사용하는 것입니다.\\
====예제====
<code css>
.center {
   height: 200px;
   position: relative;
}

.center p {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
}
</code>
\\
\\
=====Center Vertically - Using Flexbox=====
중앙 정렬하기 위해 플렉스박스도 사용할 수 있습니다. 플레스박스는 IE10과 이전 버전에서는 지원하지 않음을 명심하세요\\
====예제====
<code css>
.center {
   border: 2px solid green;
   justify-content: center;
   align-items: center;
   height: 200px;
   display: flex;
}
</code> 
{{tag>오션, CSS Align, layout, Horizontal Align, Vertical Align}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
