차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_align [2021/03/18 09:55]
emblim98
+++ wiki:css:css_note:css_align [2023/01/13 18:44] (현재)
@@ 줄 25: / 줄 25: @@
 </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

사용자 도구

사이트 도구

차이

문서 도구