🌱 기초 프론트엔드
인라인 스타일이란?
쉽게 이해하기
옷장에서 옷을 골라 입는 대신, 옷을 만들 때부터 몸에 꿰매 붙이는 것과 비슷해요. 편하긴 하지만, 나중에 옷을 갈아입거나 같은 옷을 여러 벌 만들기는 어렵죠. 인라인 스타일도 그 요소 하나에만 바로 적용되지만, 재사용하거나 수정하기는 불편해요.
핵심 정리
HTML 태그 안에 직접 CSS 스타일을 작성하는 방법이에요.
자세히 알아보기
인라인 스타일은 HTML 태그 안에 `style=""` 속성을 써서 직접 CSS를 적용하는 방법이에요. 예를 들어 `<p style="color: red; font-size: 20px;">텍스트</p>`처럼 쓰죠. CSS 파일 없이도 바로 스타일을 적용할 수 있어서 간단해 보여요.
하지만 실무에서는 거의 사용하지 않아요. 왜냐하면 HTML과 CSS를 섞어 쓰면 코드가 지저분해지고, 같은 스타일을 여러 곳에 복사해야 해서 비효율적이거든요. 만약 빨간색을 파란색으로 바꾸고 싶다면, 모든 HTML 파일을 찾아다니며 일일이 수정해야 해요.
그럼에도 인라인 스타일이 필요한 경우가 있어요. JavaScript로 동적으로 스타일을 변경할 때나, 이메일 HTML을 만들 때는 인라인 스타일을 써야 하는 경우가 많아요. 또한 CSS 파일의 스타일보다 우선순위가 가장 높아서, 급하게 특정 요소만 다르게 보이게 해야 할 때 임시로 사용하기도 해요. 하지만 웹 개발에서는 가급적 CSS 파일을 따로 만들어 관리하는 것이 좋아요.