CSS

스타일 선언 방식

화이팅하자9 2023. 10. 13. 09:06
<style>
        /*2.내부 스타일 방식 <- style태그 사용해서 css 적용*/
        #no2{
            color: orange;
            background-color: black;
        }
    </style>
    
    <!--3.외부 스타일 방식 : link태그 사용해서 외부 css 적용
        특징1 : 보안 유지 위해 외부 css 적용
        특징2 : link태그가 쓰인 순서대로 css 적용
        특징3 : 병렬 다운로드(동시에 다운로드) 지원한다.-->
    <link rel="stylesheet" href="Ex19_외부스타일.css">
    
    <style>
        /*4.import 방식 : 스타일태그 내에 @import 사용해서 css 적용
            특징1 : 보안유지 위한 외부 css 적용
            특징2 : css 적용 순서가 예측 불가능
            특징3 : 병렬 다운로드(한개씩 다운로드) 지원안한다.*/
        @import url('./Ex19_임폴트방식.css');
    </style>
    
</head>
<body>
    <!--1.html태그 내에 style속성 지정-->
    <h1 style="color: red; background-color: black;">1. 인라인 방식</h1> 
    <h1 id="no2">2. 내부 스타일 방식</h1>
    <h1 id="no3">3. 외부 스타일 방식</h1>
    <h1 id="no4">4. import 방식</h1>
</body>
</html>

/*2.내부 스타일 방식 <- style태그 사용해서 css 적용*/

 

/*3.외부 스타일 방식 : link태그 사용해서 외부 css 적용
        특징1 : 보안 유지 위해 외부 css 적용
        특징2 : link태그가 쓰인 순서대로 css 적용
        특징3 : 병렬 다운로드(동시에 다운로드) 지원한다.*/

 

/*4.import 방식 : 스타일태그 내에 @import 사용해서 css 적용
            특징1 : 보안유지 위한 외부 css 적용
            특징2 : css 적용 순서가 예측 불가능
            특징3 : 병렬 다운로드(한개씩 다운로드) 지원안한다.*/