인라인 CSS
Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 6번째.
인라인 CSS는 style 속성을 사용하여 HTML 요소에 직접 CSS 스타일을 추가하는 방법입니다. 이 방식은 외부 또는 내부 스타일시트 없이도 개별 요소에 고유한 스타일을 적용할 수 있게 해줍니다. 인라인 스타일은 단일 요소에 빠르고 구체적인 스타일 변경을 적용할 때 유용합니다.
인라인 CSS를 사용하기 위한 기본 구문은 다음과 같습니다:
<element style="property: value;"></element><element>: 스타일을 적용하려는 HTML 요소입니다.style: CSS 선언을 포함하는 속성입니다.
property: 설정하려는 CSS 속성 (예: color, font-size).value: 속성에 설정하려는 값 (예: blue, 16px).
예를 들어:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>이 예제에서 단락 요소는 텍스트 색상을 파란색으로, 글꼴 크기를 16픽셀로 설정하는 인라인 스타일을 가지고 있습니다. 이 스타일은 이 특정 단락 요소에만 적용됩니다.
챌린지
쉬움단락 요소가 포함된 HTML 문서가 주어집니다. 인라인 CSS를 사용하여 다음 속성으로 단락의 스타일을 지정하세요:
- 텍스트 색상을 red로 설정하세요.
- 글꼴 크기를 18 pixels로 설정하세요.
지침은 레슨의 예제를 확인하세요!
치트 시트
style 속성을 사용하여 HTML 요소에 CSS를 직접 적용합니다:
<element style="property: value;"></element>여러 속성을 사용하는 예시:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>직접 해보기
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
