CSS 적용 우선순위 - 스타일 시트끼리의 비교

CSS 적용 우선순위 - 스타일 시트끼리의 비교분명 전산학부 졸업 했는데 코딩 개못하는 조준호/Web2024. 7. 2. 15:12@팜팜이S

728x90

✨ 스타일 시트끼리의 비교 ✨

1️⃣ Inline Style (인라인 스타일)

2️⃣ Internal Stylesheet (내부 스타일 시트)

3️⃣ External Stylesheet (외부 스타일 시트)

<!-- Inline Style -->
<p style="color: red;">This text will be red.</p>

<!-- Internal Stylesheet -->
<style>
  p {
    color: blue;
  }
</style>

<!-- External Stylesheet -->
<link rel="stylesheet" type="text/css" href="styles.css">

전체 html을 보자면,,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Priority Example</title>
    <!-- External Stylesheet -->
    <link rel="stylesheet" type="text/css" href="styles.css">
    <!-- Internal Stylesheet -->
    <style>
        p {
            color: blue;
        }
        h1 {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1 style="color: green;">This is a heading</h1>
    <p>This paragraph is styled by an internal stylesheet.</p>
    <p style="color: red;">This paragraph is styled by an inline stylesheet and will be red.</p>
</body>
</html>

inline style은 body 내부의 해당 태그에 직접 쓰면 된다.

internal sheet는 head에 <style> 안에 주저리주저리 쓴다.

external sheet는 head에 <link>만 써두고 styles.css 파일을 따로 만든다.

728x90

'분명 전산학부 졸업 했는데 코딩 개못하는 조준호 > Web' 카테고리의 다른 글

네이버 오픈 API 사용해서 "검색" 데이터 긁어오기 (5)	2024.07.22
CSS 적용 우선순위 - 기타 중요한 사항 총정리 (1)	2024.07.02
CSS 적용 우선순위 - 선택자끼리의 비교 (1)	2024.07.02
[HTML] for 값과, id 값과, name 값과, value 값은 왜 똑같을까? 그래야만 할까? (0)	2024.07.02
IP 주소와 포트 번호의 차이 (0)	2024.06.26

@팜팜이S :: 팜팜은행: 한국은행 총재 조준호

한국은행 들어갈 때까지만 합니다

조만간 티비에서 봅시다

✨ 스타일 시트끼리의 비교 ✨

'분명 전산학부 졸업 했는데 코딩 개못하는 조준호 > Web' 카테고리의 다른 글

티스토리툴바