티스토리 뷰

HTML

[HTML] <style>

<style>

<style> 태그는 웹 문서에 스타일 정보를 설정할 수 있습니다. 웹 문서에 스타일을 표현하는 방법은 인라인 스타일 (inline style), 인터널 스타일 (internal style), 익스터널 스타일 (external style) 방법이 있으며, 상황에 맞게 쓸 수 있습니다.

<style> 태그는 <head>나 <body>에 사용할 수 있지만 <head> 태그 영역 안에 설정 하는 것이 좋으며, 외부 스타일로 설정하는 것을 추천합니다.


<style>

<style> 태그는 웹 문서에 대한 스타일 정보를 정의합니다.

정의(Definition)

  • <style> 태그는 웹 문서에 대한 스타일 정보를 정의합니다.
  • <style> 태그는 한 문서에서 여러번 사용할 수 있습니다.
  • 스타일을 표현하는 방법
    • 인라인 스타일(inline style) : 태그에 직접 사용하는 방법
    • 인터널 스타일(internal style) : head에 사용하는 방법
    • 익스터널 스타일(external style) : 외부 파일로 연결하는 방법

속성(Property)

속성 값(예) 설명 버전
media media = "screen" 미디어 유형을 설정합니다. -
type type = "text/css" 스타일 유형을 설정합니다. -
title title = "name" 간단한 제목을 설정합니다. -
scoped scoped 부모와 자식요소의 관계를 설정합니다. html5

Sample1

인라인 스타일(inline style) : 태그에 직접 사용하는 예제입니다.

결과

스타일을 표현하는 방법

  • 인라인 스타일(inline style)
  • 인터널 스타일(internal style)
  • 익스터널 스타일(external style)
html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML Reference</title>
</head>
<body>
    <h3>스타일을 표현하는 방법</h3>
    <ul>
        <li style="background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d; padding: 4px 6px 2px 6px;">인라인 스타일(inline style)</li>
        <li>인터널 스타일(internal style)</li>
        <li>익스터널 스타일(external style)</li>
    </ul>
</body>
</html>

Sample2

인터널 스타일(internal style) : head 태그 안에 사용하는 예제입니다.

결과

스타일을 표현하는 방법

  • 인라인 스타일(inline style)
  • 인터널 스타일(internal style)
  • 익스터널 스타일(external style)
html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML Reference</title>
    <style>
        .rLine {
            background-color: #f9f2f4; 
            border-radius: 4px; 
            border: 1px dashed #a51a3d; 
            padding: 4px 6px 2px 6px;
        }
    </style>
</head>
<body>
    <h3>스타일을 표현하는 방법</h3>
    <ul>
        <li class="rLine">인라인 스타일(inline style)</li>
        <li>인터널 스타일(internal style)</li>
        <li>익스터널 스타일(external style)</li>
    </ul>
</body>
</html>

Sample3

익스터널 스타일(external style) : 외부 파일로 연결하는 예제입니다.

결과

스타일을 표현하는 방법

  • 인라인 스타일(inline style)
  • 인터널 스타일(internal style)
  • 익스터널 스타일(external style)
html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML Reference</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h3>스타일을 표현하는 방법</h3>
    <ul>
        <li class="rLine">인라인 스타일(inline style)</li>
        <li>인터널 스타일(internal style)</li>
        <li>익스터널 스타일(external style)</li>
    </ul>
</body>
</html>

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<style> 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
media 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
type 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
title 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
scoped 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨

참고(Reference)

  • MDN
  • HTML5

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼