오늘의 CSS

자식 요소를 가운데 정렬 시키는 법 2가지

<div class="parent">
  <div class="child"></div>
</div>

1. display:flex 이용

부모 요소에 display: flex를 주고, justify-content와 align-items를 center를 주면 자식 요소가 가운데로 정렬된다.

.parent{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:200px;
  height:300px;
  background: #000;
}

.child{
  width:50px;
  height:50px;
  background: pink;
}

2. position 이용

자식 요소에 position:absolute를 주어 부모 요소를 기준으로 top,left를 50%를 준다. 이 때 가운데로 가는 것은 자식 요소의 꼭지점에 해당하는 부분이기 때문에 완전히 가운데로 가게 하려면 translate을 이용해 x축,y축으로 자식의 크기의 반만큼 움직여야 자식 요소가 완전히 가운데로 오게 된다.

.parent{
  position:relative;
  width:200px;
  height:300px;
  background: #000;
}

.child{
  width:50px;
  height:50px;
  position:absolute;
  top:50%;
  left:50%;  
  transform:translate(-50%, -50%);
  background: pink;
}

---

웹 접근성 포커스 처리

버튼이나 링크 태그 안에 들어간 이미지 태그의 위치를 잡을 때 이미지 태그에 하지 않고 버튼이나 링크 태그에 스타일을 줘서 포커스 놓치지 말기!
:focus를 이용해 포커스가 없는 곳은 포커스 주기

회고

웹 접근성을 고려하려면 마크업과 css가 생각보다 오래 걸리고 할게 많다.
어제 클론 코딩한 코드 리뷰를 받았는데 웹 접근성을 고려하지 않은 부분도 있어서 아직 확실히 고쳐야할게 너무너무너무 많다. 주말동안 리뷰를 토대로 리팩토링 해서 다시 올려야겠다.