Adam Argyle
이 Codelab에서는 CSS에서 가장 좋아하는 방식으로 중앙에 배치하는 방법을 공유하고 보여줄 수 있습니다.
내 블로그 게시물인 CSS에서 중앙 정렬하기를 확인하여 CSS에서 중앙 정렬하는 내가 가장 좋아하는 5가지 방법을 알아보세요. 또는 이 동영상을 시청하세요.
설정
- 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
app/index.html열기line 23에서/* your centering CSS here /*을 CSS로 바꿉니다.- (선택사항) 중앙 배치 기법의 이름을 지정하고
<h1>의 텍스트를 바꿉니다.
스타일
app/css/폴더에 새 파일 만들기.turbo-center또는[floaty-mcfloat]과 같은 중앙 배치 솔루션을 보유하는 선택기를 만듭니다.- 새 선택기 내에서 중앙 정렬 기법을 작성합니다 (
app/css/의 다른 기법을 예로 참고해도 됨). - (선택사항) 중앙 정렬을 지원하는 스타일이 필요한 자녀를 확인할 수 있도록 '지원 스타일'을 작성합니다.
app/css/index.css를 열고 하단에 새 파일을 가져옵니다.
모두 연결하기
app/index.html다시 열기<article>를 찾아 이전 섹션의 2단계에서 만든 맞춤 선택기를 지정합니다.- Glitch를 트윗해 주시면 블로그 게시물에 소개해 드리겠습니다.