채니의 개발일기

css선언방식(내장방식,인라인방식,링크방식 본문

카테고리 없음

css선언방식(내장방식,인라인방식,링크방식

윤채니챈 2023. 7. 16. 11:39
728x90
반응형

style 속성 작성법

 

1. 인라인방식 -> 유지보수에 어려움이 있음 

<p class =' title1 title2 title3', id ='title', style="color: red;">문장을 작성</p>

 

2. 내장방식: head에 style 속성 추가

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title1{
            color:yellow
            
        }
        .title2{
            font-size: 150%;
        }
    </style>
</head>
<body>
   <p class =' title1 title2 title3', id ='title', style="color: red;">문장을 작성</p>
</body>

 

.title1, title2 각 클래스 속성에 css style부여

 

3. 링크방식: 외부에 파일 link태그를 활용하여 불러오기

<link rel="stylesheet" href="./main.css">

-> 외부에서 파일 불러오는 속성

 

4. import방식

 

CSS import는 다른 CSS 파일을 현재 CSS 파일에 가져오는 방법.

이 방법을 사용하면 CSS 파일을 여러 파일로 분리하여 관리할 수 있습다.

@import url('파일명');

예) main.css 파일에서 style.css 파일을 가져오려면 다음 CSS 코드를 사용

<link rel="stylesheet" href="./main.css">

<main.css파일>

@import url(style.css);

 

728x90
반응형