이제는 약간 감을 잡게된 text-align:center;와 margin:0 auto;의 차이에 대해 정리해보려고 한다. 1. text-align 블럭요소에 text-align속성을 사용하면 그 안에있는 인라인 요소들이 정렬된다. 속성값: start/end/left/right/center/justify/march-parent 2. margin:0 auto; inline 요소에 margin:0 auto;를 주면 인라인요소는 width가 자기크기만큼이고 자동margin이 생성되지 않아서 그 값은 auto로 나누라는 선언은 아무 의미가 없다. 상속여부:상속안됨 margin:0px auto;라고 쓰다가 깨닳게된것. 다음글에서 em/rem에대해 더 알아보려고한다. CSS 좌우 정렬하기 (text-align or margin: 0 auto)TEXT의 경우 "text-align: center"로 가운데 정렬을 쉽게 처리할 수 있다.
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>study</title> </head> <body> <div class="a"> <div class="b"></div> </div> </body> <style> .a{ background: black; width: 100%; height: 100px; text-align: center; } .b{ background: red; width: 30%; height: 100px; } </style> </html> 하지만 아직까지 빨간박스는 가운데로 이동하지 않는다. 이유는 text-align 은 블록안의 인라인요소에만 적용되기 때문이다. 즉 빨간색 박스는 블록속성이기 때문에 적용이 되지 않았다. 그래서 방법은 빨간박스에 "display: inline-block" 속성만 부여해주면 된다. // (1) text-align .a{ background: black; width: 100%; height: 100px; text-align: center; } .b{ background: red; width: 30%; height: 100px; display: inline-block; } // (2) margin 활용 .a{ background: black; width: 100%; height: 100px; } .b{ background: red; width: 30%; height: 100px; margin: 0 auto; } 그러면 왜 text-align보다 margin값으로 조정하는 방법이 많이 사용되는가? 그것은 text-align 을 활용한 첫번째 방법은 text-align속성이 빨간박스까지 상속되기
때문이다. 빨간박스에 글자를 입력되어 있다면 가운데정렬이 된다. 의도한 효과라면 상관없지만 다른 요소에 영향을 주지 않는 것이 더 좋다고 판단하기 때문이다. 가운데 정렬을 하는 방법은 여러가지가 있는데 나는 그 중에서도 text-align:center; 와 margin: 0 auto;를 가장 많이 사용하는 편이다. 그런데 간혹 margin:0 auto;를 적용해도 가운데 정렬이 되지 않을 때가 있다. 이러한 상황에서 체크해 볼 수 있는 세가지 방법에 대해서 소개하도록 하겠다. margin: 0 auto; 가운데 정렬이 되지 않을 때 해결방법1. 가장 첫번째로 해야 할 일은 <!Doctype ~>선언이 제대로 되었는지 확인해보아야 한다. 2. auto는 자동으로 사이즈를 설정해주는 것이다. 그러므로 가로폭의 사이즈를 정확하게 인식할 수 있어야 정렬이 가능하다. margin: 0 auto; 가 반응하지 않을 때에는 해당 영역의 가로 사이즈가 제대로 설정되어 있는지 확인해보고, 만약 되어 있지 않다면 width 태그를 이용해서 가로 사이즈를 지정해주도록 한다. 3.margin: 0 auto; 는 inline 속성에서는 적용되지 않는다. inline 속성은 자기 자신 만큼의 영역값(width, height)을 갖기 때문이다. 이러한 경우에는 inline 속성의 태그가 아닌 block 속성의 태그로 바꾸어 사용하거나 - 예를 들자면, span 태그 대신에 div 태그를 사용함 - 해당 요소의 display 속성을 block으로 바꾸어 주는 것도 해결방법이다. 프로그래머스의 css 강의 시청 후 정리하는 글이다. https://programmers.co.kr/learn/courses/4521/lessons/14635 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 무료 강의라서 유튜브에서도 시청이 가능하다. https://www.youtube.com/channel/UCvx57s_ZBt5VG4fvlStiq2g
빔캠프 VEAMCAMP 빔캠프는 여러분들에게 영감을 줄 수 있는 창의적인 컨텐츠 또는 누구든지 따라 할 수 있는 튜토리얼 영상을 제공합니다 www.youtube.com 가운데 정렬 -웹페이지 디자인에서 가장 먼저 해야 할 것은 레이아웃을 설정해주는 것으로 그 중에서도 가운데 정렬이 중요하다. -css 에서는 블록단위로 페이지 일부를 할당 받는다. 따라서 아래와 같이 이미지에 background 색(흰색)과 크기를 조정해도 해당 좌우에 할당된 빈 공간은 해당 블록이 가진다. →아래 이미지에서 동일 코드를 두 번 붙여넣고 확인했을 때 첫 번째 이미지 옆 빈공간에 이미지가 바로 나타나는 것이 아니라 아랫줄에 나타나는 이유이다. 블록에 아래 코드 입력 Margin-left: auto; 블록에 아래 두줄 코드 입력 Margin-left: auto; Margin-right: auto; margin auto 처리→박스(div)를 가운데 정렬 해주는 가장 보편적인 방법 Margin-left:
auto; 내용물 가운데 정렬 Text-align: center; →박스 자체는 영향이 없고 박스 내의 모든 인라인 요소가 text align center (상속이 되는 요소) 위와 같이 Box 자체를 text-align center를 하면 인라인 요소가 text align center 되는 것이지 내부 블록이 center가 되는 것이 아님 →해당 블록의 background(배경색)나 border bottom(밑줄)을 center로 정렬 하려면 width 따로 설정해야한다. → 단점 : margin 은 글자 크기나 길이가 바뀌면 가운데 정렬이 깨진다. 즉, 유지보수가 어렵다. → 가변 길이, 크기 텍스트에 대해서는 유지보수가 쉬운 가운데 정렬을 고민해 보아야 함. |
Margin auto 하면 왜 center
저작권 © 2024 estudarpara Inc.
