min's devlog

[CSS] HTML 문서에 CSS 적용 본문

til/Front

[CSS] HTML 문서에 CSS 적용

값진 2022. 5. 25. 15:45

        CSS, Cascading Style Sheets

        - 스타일 시트, 디자인 작업
        - HTML에 서식을 지정하는 언어
        - 독립 실행이 안된다. 반드시 HTML 문서가 있어야 CSS 실행이 가능하다.
        - CSS1, CSS2, CSS3(+HTML5)
        - HTML 서식 기능 > CSS 서식 기능(풍부, 발전, 생산성 등)

 

 

        HTML 문서에 CSS를 적용하는 방법

        1. 인라인 스타일 시트, Inline Style Sheet
            - style 속성: HTML의 속성, CSS 성질의 영역을 제공
            - 서식을 태그에 직접 적용
            - 장점: 가독성이 높음
            - 단점: CSS 재사용 불가능, 한 번 설정된 스타일을 변경하기 어렵다

<body>
    <h2 style="color:green; text-decoration:underline">
        인라인 스타일
    </h2>
</body>



        2. 내부 스타일 시트, Embeded Style Sheet
            - <style> 태그내에 서식을 명시
            - 문서내의 여러태그를 한번에 서식을 적용할 수 있다.
            - 장점: CSS 재사용 가능
            - 단점: 가독성 낮음

<head>
    <style>
        body { background-color: lightyellow; }
        h2 { color: red; text-decoration: underline; }
    </style>
</head>



        3. 외부 스타일 시트, External Style Sheet
            - *.css 파일에 서식을 명시
            - <link> 태그를 사용해서 참조
            - 장점: CSS 재사용 높음
            - 단점: 가독성 낮음

<head>
    <link rel="stylesheet" href="/examples/media/expand_style.css">
</head>

위에서 사용된 expand_style.css

body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }

 

  - 위의 스타일 적용 방법이 혼합되어 사용될 경우 우선순위

     1. 인라인 스타일

     2. 내부/ 외부 스타일 시트

     3. 웹 브라우저 기본 스타일

'til > Front' 카테고리의 다른 글

[CSS] reset, normalize  (0) 2022.05.30
[CSS] Block,Inline  (0) 2022.05.27
[CSS] 박스 모델(Box Model)  (0) 2022.05.27
[HTML] HTML 구성 요소  (0) 2022.05.25
[HTML] HTML 기초  (0) 2022.05.23
'til/Front' Related Articles more
Comments