코딩스쿨

HTML Styles

HTML 스타일은 웹 페이지의 요소에 스타일을 적용하는 방법을 정의하는 개념입니다. HTML 자체로는 웹 페이지의 구조만을 정의하며, 시각적 디자인이나 레이아웃은 CSS(Cascading Style Sheets)를 통해 적용합니다. HTML 스타일은 다양한 방식으로 적용될 수 있으며, 그 방법에 따라 웹 페이지의 스타일링 효과가 달라집니다.

HTML 스타일 적용 방식

인라인 스타일 (Inline Style): 개별 HTML 요소에 style 속성을 사용하여 스타일을 직접 적용합니다. 페이지의 특정 요소에 간단한 스타일을 지정할 때 사용됩니다.
내부 스타일 (Internal Style Sheet): HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 스타일을 정의합니다. 특정 문서에서만 사용할 스타일을 적용할 때 사용됩니다.
외부 스타일 시트 (External Style Sheet): 별도의 CSS 파일을 작성한 후, HTML 문서에 <link> 태그를 사용하여 연결합니다. 여러 HTML 파일에서 동일한 스타일을 적용하고자 할 때 사용됩니다.

스타일 적용 방식 비교

스타일 방식	설명	장점	단점
인라인 스타일	HTML 요소에 직접 `style` 속성을 사용하여 스타일 적용	특정 요소에만 간단하게 스타일 적용 가능	재사용 불가, 유지 보수 어려움
내부 스타일 시트	HTML 문서의 `<head>`에서 `<style>` 태그 사용	문서 내 여러 요소에 동일한 스타일을 한 번에 적용 가능	외부 문서와 스타일 공유 불가, 스타일 재사용 어려움
외부 스타일 시트	별도의 CSS 파일을 작성하여 `<link>` 태그로 연결	여러 문서에서 동일한 스타일 적용 가능, 관리 용이	외부 파일이 로드되지 않으면 스타일 적용되지 않음

스타일 적용 예시

다음은 스타일 적용 방식에 대한 예시입니다.

1. 인라인 스타일

<p style="color: blue; font-size: 16px;"> 이 문장은 파란색으로 표시됩니다.</p >

2. 내부 스타일 시트

HTML 문서의 <head> 부분에 <style> 태그를 추가하여 여러 요소에 대한 스타일을 한 번에 지정할 수 있습니다.

<head>
    <style>
        p {
            color: green;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <p>이 문장은 녹색으로 표시됩니다.</p>
</body>

3. 외부 스타일 시트

외부 CSS 파일을 만들어 연결할 수 있습니다. 예를 들어, styles.css 파일을 다음과 같이 연결할 수 있습니다.

<head>
    <link rel="stylesheet" href="styles.css">
</head>

그리고 styles.css 파일에는 다음과 같은 스타일이 정의될 수 있습니다:

/* styles.css 파일 */
p {
    color: red;
    font-size: 18px;
}

자주 사용되는 사례

웹사이트 디자인: 전반적인 레이아웃, 글꼴, 색상, 여백 등을 정의하여 일관된 디자인을 제공합니다.
응답형 디자인: 다양한 장치에서 적절한 레이아웃을 적용하도록 스타일을 조정합니다.
웹 애플리케이션 인터페이스: 사용자 경험을 개선하기 위한 상호작용 스타일을 정의합니다.

코딩 스쿨 HTML