텍스트 정렬
Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 21번째.
CSS에서 text-align 속성은 HTML 요소 내에서 텍스트의 가로 정렬을 제어하는 데 사용됩니다.
text-align의 일반적인 값은 다음과 같습니다:
left: 텍스트를 왼쪽으로 정렬합니다. 이는 대부분의 텍스트에 대한 기본 정렬입니다.
right: 텍스트를 오른쪽으로 정렬합니다.center: 요소 내에서 텍스트를 가로 방향으로 중앙 정렬합니다.
예를 들어:
p {
text-align: left;
}
h1 {
text-align: center;
}
.right-align {
text-align: right;
}
챌린지
쉬움제목(<h1>), 단락(<p>), 그리고 구분(<div>)이 포함된 HTML 문서가 주어집니다. 여러분의 과제는 text-align 속성을 사용하여 이 요소들의 스타일을 지정하는 것입니다. 아래 단계를 따르세요:
<h1>요소를 대상으로 하는 CSS 규칙을 작성하세요.text-align을center로 설정하세요.<p>요소를 대상으로 하는 CSS 규칙을 작성하세요.text-align을right로 설정하세요.<div>요소를 대상으로 하는 CSS 규칙을 작성하세요.text-align을left로 설정하세요.
치트 시트
text-align 속성은 요소 내에서 텍스트의 가로 정렬을 제어합니다.
일반적인 값:
left: 텍스트를 왼쪽으로 정렬합니다 (기본값)right: 텍스트를 오른쪽으로 정렬합니다center: 텍스트를 가로 방향으로 중앙 정렬합니다
p {
text-align: left;
}
h1 {
text-align: center;
}
.right-align {
text-align: right;
}직접 해보기
<html>
<head>
<title>Text Alignment</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a heading. </h1>
<p>This is a paragraph.</p>
<div>This is a division. </div>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
