정의 : 웹페이지 내 적용하고 싶은 스타일을 HTML태그 안에 개별로 속성을 적용하여 사용하는 것을 의미합니다.
인라인(Inline) CSS 이해하기
인라인 CSS는 〈p style='background-color:#000000; color:#eeeeee'〉안녕하세요!처럼 태그 내 style 속성으로 css를 사용하는 것을 말합니다. 그러면 인라인 소스의 문제점은 무엇일까요?
① HTML 파일 크기
HTML 코드가 더 커지면 최근 가장 이슈가 되고 있는 페이지속도 최적화에 마이너스가 되고 코드 대 글의 비율이 낮아져서 SEO에 악영향을 끼칠 수 있습니다.
HTML 코드가 더 커지면 최근 가장 이슈가 되고 있는 페이지속도 최적화에 마이너스가 되고 코드 대 글의 비율이 낮아져서 SEO에 악영향을 끼칠 수 있습니다.
② 크롤링 방해
웹페이지 내 비슷한 Inline CSS의 반복 사용은 검색엔진의 크롤링*에 방해가 됩니다.
웹페이지 내 비슷한 Inline CSS의 반복 사용은 검색엔진의 크롤링*에 방해가 됩니다.
③ 어려운 코드 유지 관리
파일 전체에 똑같은 종류의 코드를 변경하는 것보다 중앙 집중화 된 위치에 코드를 두는 것이 훨씬 바람직합니다.
파일 전체에 똑같은 종류의 코드를 변경하는 것보다 중앙 집중화 된 위치에 코드를 두는 것이 훨씬 바람직합니다.
위와 같은 이유 때문에 Inline CSS를 제거해야 하는 것이 좋습니다.
그럼 검색엔진도 쉽게 크롤링 할 수 있고, 사용자도 접속 시 로딩이 빨라지므로 방문률이 높은 웹페이지가 되겠죠!
그럼 검색엔진도 쉽게 크롤링 할 수 있고, 사용자도 접속 시 로딩이 빨라지므로 방문률이 높은 웹페이지가 되겠죠!
SEO(검색엔진최적화)를 위해서는 웹페이지 내 스타일을 적용할 경우 외부CSS나 내부CSS 형식 사용을 권장합니다.
*크롤링: 웹페이지의 컨텐츠를 가져와서 검색엔진의 결과를 보여주기 위한 데이터를 추출해 내는 행위를 말합니다.
크롤링을 기반으로 검색결과를 제공하는 구글, 네이버가 대표적입니다.
크롤링을 기반으로 검색결과를 제공하는 구글, 네이버가 대표적입니다.
SEO Friend의 등급체크
| SEO 등급 | 설명 |
| Good | Inline CSS 속성을 사용하지 않음 |
| Bad | Inline CSS 속성을 1번 이상 사용함 |
태그 예시
〈p style="font-weight: bold; font-style: italic; color: gray"〉이 문단의 글씨를 굵게 표현하고 이탤릭 채 형태로 구성하며 색상은 회색으로 지정됩니다.
