Chrome DevTools의 position-area 시각 편집기를 확인해보세요

먼저 어떤 요소를 선택하지?

개발자 도구의 Elements 패널은 DOM 트리와 선택한 요소에 적용되는 CSS를 함께 보여 준다. Chrome의 기본 안내대로 페이지의 요소를 검사하고 Styles 탭을 연다. 선택한 요소에 position-area 선언이 있으면 그 옆 표시를 눌러 편집기를 열 수 있다.

시각 편집기가 보이지 않으면 먼저 선택한 요소와 적용된 선언을 확인한다. 브라우저 버전과 해당 기능의 지원 여부도 본다. Chrome 업데이트 안내가 155와 156의 변경을 묶어 소개하기 때문에, 이 글에서는 기능별 최초 버전을 따로 정하지 않는다.

격자에서 무엇을 바꿀 수 있지?

공식 안내에 따르면 편집기에서 앵커를 둘러싼 격자 영역을 고를 수 있다. 두 축을 함께 또는 각각 설정하고, self 키워드를 전환하는 기능도 있다고 안내한다. 앵커 기준 위치가 텍스트만으로 잘 읽히지 않을 때 배치를 눈으로 비교하는 데 도움이 된다.

1. 페이지에서 배치를 확인할 요소를 검사한다.
2. Elements의 Styles 탭에서 position-area 선언을 찾는다.
3. 선언 옆의 표시를 클릭하고 격자에서 영역을 고른다.
4. 화면에서 결과를 확인한 뒤 필요한 값을 프로젝트 소스에 반영한다.

이 절차는 Chrome의 CSS 검사 문서와 업데이트 안내를 조합한 것이다. 실제 화면과 표시 이름은 브라우저 버전이나 언어 설정에 따라 달라질 수 있다.

앵커 연결도 확인할 수 있나?

같은 업데이트는 팝오버 표시에서 연결된 암시적 앵커를 확인하는 동작도 소개한다. DOM 트리의 팝오버 표시를 우클릭하면 암시적 앵커가 여러 개일 때 연결된 요소를 골라 볼 수 있다. 앵커 위치를 설명하는 오버레이에는 관련 상자의 여백과 테두리 같은 영역도 표시된다.

DevTools에서 CSS를 바꾸는 일과 저장된 프로젝트 파일을 고치는 일은 서로 다른 작업이다. 원하는 배치를 찾았으면 소스에 옮기고, 화면 크기를 바꿔 보거나 다른 브라우저에서도 레이아웃이 맞는지 확인하는 편이 좋다.