TIL 7/15 text-align : center

6126 단어 TILTIL

학습내용

기본적인 부분이지만 헷갈렸던 부분이었다. CSS에서 가운데 정렬을 하는 방법이 여러가지가 있는데 여기서 많이 사용하는 text-align 에 대해서 살펴 봤다. 일반적으로 flexbox를 많이 사용하고 잘 활용하면 정말 강력한 정렬 기능이기 때문에 꼭 알아둬야 할 부분이다. 하지만 오늘은 flexbox를 사용하지 않고 가운데 정렬을 할 수 있는 text-align에 대해서 알아봤다. 

text-align: center

text-align은 모든 상황에서 가운데 정렬을 하는 기능은 아니다. 특정한 부분에서는 제한이 되는 부분이 있다. 

<style>
  .outbox { // 4번
    width: 200px;
    height: 100px;
    text-align: center;
  }
  
  .title {  // 1번
    text-align: center;
  }
  
  .inbox {  // 2번
    width: 200px;
    height: 100px;
    text-align: center;
  }
  
  .btn {    // 3번
    text-align: center;
  }
</style>

<body>
  <div class='outbox'>
    <h1 class='title'>hello</h1>
    <div class='inbox'>world</div>
    <button class='btn'>click</button>
  </div>
</body>

각각의 경우가 적용되면 어떻게 될지 살펴보자
1번만 적용되면 이때는 h1 엘리먼트의 hello가 가운데 정렬이 된다.
2번만 적용되면 world의 글자가 inbox안에서 가운데 정렬이 된다. 박스 자체는 가운데 정렬되지 않는다.
3번만 적용되면 아무런 변화가 없다.
4번에 적용하면 hello가 정렬되고 world가 정렬되고 button 자체가 가운데로 정렬된다.

text-align : center 가 부모엘리먼트 css 속성에 있으면 되면 자식들에게 모두 적용이 된다. 이것은 많은 css 속성이 그렇다.
이런 전제로 살펴보면 text-align은 div와 같이 margin으로 꽉 차있는 block 레벨의 엘리먼트 정렬할 수 없다. 이유는 block 레벨의 엘리먼트는 한줄에 하나의 요소가 있게 구성되어 있어서 브라우저에서 나머지 공간에 margin을 자동으로 채워놓는다. 그래서 꽉 차있는 상태가 된다. text-align은 margin이 꽉 차있으면 정렬되지 않는다. 그래서 block이 아닌 inline block은 여백을 브라우저가 채우지 않기 때문에 공간이 있어서 가운데 정렬이 가능하다. 그래서 2번 박스 자체는 정렬되지 않는다. div는 정렬되지 않는다.
text에 대해서 살펴보면 text는 양 옆에 margin이 잡혀있지 않다. 그래서 정렬이 가능하다. 모든 textContent는 정렬이 가능 한 것이다. 여기서 h1도 마찬가지로 block 이긴 해도 h1은 가로로 margin이 가득 찬 상태가 안라 textContent 공간으로 차있기 때문에 정렬이 가능하다.
3번 button이 변화가 없는 이유는 버튼을 만들때 이미 click은 가운데 정렬이 되어 있기 때문이다. 그리고 3번은 버튼을 가운데 정렬하는 것이 아니다.
4번은 div를 제외한 것은 모두 가운데 정렬이 된다. button도 inline 이기 때문에 부모의 text-align:center는 적용된다.

느낀점

생각보다 많이 헷갈렸다. 어디는 적용이 되고 안되고를 명확하게 알수 없었기 때문에 더 어렵다고 생각했던 것 같다. 여러번 시도해보고 왜 안될까를 고민하면서 공부했다. 아직 다 정리가 안되었고 다 알지 못해서 더 공부해야겠지만 정렬을 잘해야 깔끔해일 수 있기 때문에 꼭 정리해서 잘 사용하고 싶다. CSS 연습을 더 많이 해봐야겠다. 이제는 프로젝트니 대비를 해야겠지

Dev-tools
파이썬 정규표현식 기초1 메타문자

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage