Codelab: CSS의 중앙에 배치

Adam Argyle

이 Codelab에서는 CSS에서 가운데 정렬하는 좋아하는 방법을 공유하고 보여주는 방법을 알아봅니다.

CSS에서 가운데 정렬 블로그 게시물을 확인하여 CSS에서 가운데 정렬하는 5가지 방법을 알아보세요. 또는 이 동영상을 시청하세요.

설정

  1. 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
  2. app/index.html 열기
  3. line 23에서 /* your centering CSS here /*를 CSS로 바꿉니다.
  4. (선택사항) 가운데 정렬 기법의 이름을 지정하고 <h1>

스타일

  1. app/css/ 폴더에 새 파일 만들기
  2. .turbo-center 또는 [floaty-mcfloat]와 같은 가운데 정렬 솔루션을 보유할 선택기를 만듭니다.
  3. 새 선택기 내에 가운데 정렬 기법을 작성합니다. app/css/의 다른 기법을 예로 참고하세요.
  4. (선택사항) 중앙 정렬을 지원하는 스타일이 필요한 하위 요소를 확인할 수 있도록 '지원 스타일'을 작성합니다.
  5. app/css/index.css를 열고 하단에서 새 파일을 가져옵니다.

마무리하기

  1. app/index.html 다시 열기
  2. <article>를 찾아 이전 섹션의 2단계에서 만든 맞춤 선택기를 지정합니다.
  3. Glitch를 트윗해 주시면 블로그 게시물에 소개해 드리겠습니다.