Codelab: CSS의 중앙에 배치
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
이 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단계에서 만든 맞춤 선택기를 지정합니다.
- 글리치를 트윗해 주시면 블로그 게시물에 게시하겠습니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2020-12-16(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]