인라인 스타일
HTML에서 요소의 모양을 직접 변경해 보세요
인라인 스타일은(는) CoddyKit의 무료 HTML for Kids 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML for Kids 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML for Kids 강의에는 총 4개의 강의가 포함되어 있습니다.
배경색 추가하기
background-color 속성을 사용하면 요소를 눈에 띄게 만들 수 있습니다.
예시:
<p style="background-color: yellow;">This text has a yellow background.</p>
인라인 스타일: HTML에 간단한 스타일 추가하기
인라인 스타일 레슨에 오신 것을 환영합니다! 오늘은 style 속성을 사용하여 HTML에서 요소에 직접 스타일을 지정하는 방법을 배워 보겠습니다.
인라인 스타일이란 무엇인가요?
인라인 스타일을 사용하면 style 속성을 통해 HTML 태그에 CSS를 직접 추가할 수 있습니다. 페이지에 스타일을 지정하는 가장 간단한 방법입니다.
예시:
<p style="color: red;">This is red text!</p>
color: red;는 텍스트 색상을 빨간색으로 변경합니다.
글꼴 크기 변경하기
font-size 속성을 사용하여 텍스트 크기를 변경할 수 있습니다.
예시:
<p style="font-size: 24px;">This text is 24 pixels large.</p>
여러 스타일 결합하기
인라인 스타일을 사용하면 여러 CSS 속성을 결합할 수 있습니다. 각 속성은 세미콜론 ;으로 구분합니다.
예시:
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles!
</p>
다른 요소에 스타일 지정하기
인라인 스타일은 제목, 버튼, 이미지와 같은 모든 HTML 요소에서 사용할 수 있습니다.
예시:
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: coral; color: white; padding: 10px;">
Styled Button
</button>
직접 해 보기
인라인 스타일을 사용하여 웹 페이지를 만들어 보겠습니다. 시작하는 데 도움이 되는 예시는 다음과 같습니다:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Styled Page</h1>
<p style="color: gray; font-size: 16px;">
This is an example of inline styling.
</p>
<button style="background-color: lightblue; padding: 10px; border: none;">
Click Me!
</button>
</body>
</html>
훌륭합니다!
축하합니다! 인라인 스타일을 사용하여 HTML 요소에 간단하고 효과적인 스타일을 추가하는 방법을 배웠습니다. 인라인 스타일은 빠르게 변경할 때 유용하지만, 웹 페이지가 커지면 더 고급 스타일 지정 기법이 필요합니다. 다음 레슨에서는 CSS의 기초를 살펴보겠습니다. 전문적인 웹 페이지를 디자인할 준비를 하세요!
style 속성 사용하기
인라인 스타일이란 무엇인가요?
인라인 스타일을 사용하면 style 속성을 통해 HTML 태그에 CSS를 직접 추가할 수 있습니다. 페이지에 스타일을 지정하는 가장 간단한 방법입니다.
예시:
<p style="color: red;">This is red text!</p>
color: red;는 텍스트 색상을 빨간색으로 변경합니다.
<p style="color: red;">This is red text.</p>
자주 묻는 질문
“인라인 스타일” 강의는 무료인가요?
네 — “인라인 스타일” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML for Kids 강의 전체를 잠금 해제할 수 있습니다. HTML for Kids 강의에는 총 4개의 강의가 포함되어 있습니다.
“인라인 스타일”에서 뭘 배우나요?
HTML에서 요소의 모양을 직접 변경해 보세요 브라우저에서 직접 실행하는 실습 코드로 HTML for Kids을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML for Kids을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML for Kids은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“인라인 스타일” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML for Kids 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML for Kids 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.