[ 검색 엔진 최적화 ] CSS 초기화 변동성 제거와 레이아웃의 안정화

CSS 초기화

레이아웃 변동을 줄이기 위해서는 CSS 초기화 (CSS Reset)는 중요한 작업중 하나 입니다. 그 이유는 각기 다른 인터넷 브라우저들이 기본적으로 설정해 놓은 스타일이 서로 다르기 때문입니다. 이로 인해 웹 페이지의 레이아웃이나 디자인이 브라우저마다 다르게 표시될 수 있습니다.

CSS 초기화 작업은 여러 종류의 인터넷 브라우저가 기본적으로 설정된 스타일이 서로 틀리기 때문에 발생할수 있는 불일치를 제거하고 기본적으로 설정된 CSS스타일을 CSS초기화를 통해 일관되고 의도된 방향으로 적용하는 방법입니다.

CSS 초기화를 하지 않게 되면 기존의 설정된 브라우저의 기본 CSS요소가 적용될수 있고 CSS요소가 적용되는 과정에서 이미 설정한 CSS와 충돌 및 레이아웃의 변형이 발생할수 있습니다.

CSS초기화를 하지 않으므로서 발생할수 있는 CSS의 변형과 충돌은 전체 페이지의 렌더링에 시간이 더 소요될수 있고 검색 엔진 최적화의 CLS(커뮤티티 레이아웃 측정)점수에 부정적 요소로 작용할수도 있습니다.

CSS 초기화 필요성

• 브라우저간의 일관성을 유지하며 기본적인 스타일을 적용해서 브라우저가 변경되더라도 기본 스타일을 적용할수 있습니다.
• 초기 디자인 작업시 예측할수 없는 오류와 계획하지 않은 디자인적 문제를 파악하고 조치할수있습니다.
• 디자인 재사용이 쉬워지고 프로젝트마다의 호환성에 긍정적인 효과가 있습니다.
• 랜더링시 발생할수 있는 변형과 충돌을 방지해서 안정적인 레이아웃과 속도향상을 유도할수 있습니다.

CSS 초기화 방법

모든 요소에 기본 여백과 패딩 폰트를 적용하고 박스 크기 계산방식을 통일하며 기본 리스트와 테이블의 스타일을 제거합니다.

✔ 초기와 예시

/* 모든 요소의 기본 여백과 패딩을 제거 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    line-height: 1;
    box-sizing: border-box;
}

/* HTML5 요소를 블록 요소로 설정 */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

/* 본문에 기본 line-height와 폰트 설정 */
body {
    line-height: 1;
    font-family: sans-serif;
}

/* 리스트 스타일 제거 */
ol, ul {
    list-style: none;
}

/* 인용구의 기본 스타일 제거 */
blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* 테이블의 기본 스타일 제거 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

위에 코드처럼 작성해서 기존 CSS를 적용하기 전에 먼저 적용시키면 됩니다. 주로 HEAD부분에 기존 CSS순서보다 먼저 로딩되게 배치해주시면 됩니다.

cls 최적화