이 Codelab을 통해 CSS에서 자주 사용하는 중앙 집중화 방법을 공유하고 선보일 수 있습니다.
제 블로그 게시물(CSS Centering(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단계에서 만든 맞춤 선택기를 지정합니다.- 글리치를 트윗해 주시면 블로그 게시물에 게시하겠습니다.