Today's record

CSS 기초 1편 - 적용 본문

프로그래밍/Frontend

CSS 기초 1편 - 적용

방구석 발악 2025. 10. 6. 21:02

CSS(Cascading Style Sheets)란?

CSS는 HTML로 만든 내용을 사용자가 보기 좋고 편리하게 꾸미고 배치할 때 사용하는 언어입니다. 즉, 디자인적인 요소를 담당합니다. 예를 들어, 글꼴, 색상, 정렬, 배치 방식 등을 결정하며, HTML로 만든 구조가 어떻게 보일 지를 지정합니다. 

 

 

 

CSS를 적용하는 3가지 방법

1. 인라인 스타일 시트 (Inline Style)

태그에 직접 style 속성을 사용하여 적용하는 방식입니다. 간단한 방법이지만 코드가 복잡해지고 유지보수가 어렵다는 단점이 있습니다.

<태그명 style='속성:속성값';>

 

 

예시 - '안녕하세요.' 문장에만 빨간색 글씨, 노란색 배경 적용해보기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color: red; background-color: yellow;">안녕하세요.</p>
    <p>반갑습니다.</p>
</body>
</html>

 

 

 

 

2. 내부 스타일 시트(Internal Style Sheet)

HTML의 <head></head> 태그 안에 <style> 태그를 사용하여 문서 안의 모든 태그에 동일한 스타일을 적용하는 방식입니다.

<head>
    <style>
    	태그 {
        	속성:속성값;
            }
    </style>
</head>

 

 

예시 - 모든 p태그에 빨간색 글씨, 노란색 배경, 글자 크기 25pt 적용해 보기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
            background-color: yellow;
            font-size: 25pt;
        }
    </style>
</head>
<body>
    <p>안녕하세요.</p>
    <p>반갑습니다.</p>
</body>
</html>

 

 

 

 

3. 외부 스타일 시트(External Style Sheet)

별도의 파일(. css)을 만들어 관리하고 HTML에서 <link> 태그를 통해 연결하는 방식입니다. 여러 웹페이지에서 같은 스타일을 공통으로 사용할 수 있어 가장 많이 사용되는 방법입니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="2.css">
    <!--href="외부 스타일 시트 파일 경로"-->
</head>
<body>
    <p>안녕하세요.</p>
    <p>반갑습니다.</p>
</body>
</html>
p {
  color: white;
  background-color: black;
  font-size: 25pt;
}

 

 

 

스타일 시트에 대해 알아보았습니다.

 

 

 

'프로그래밍 > Frontend' 카테고리의 다른 글

CSS 기초 2편 - 선택자(Selector)  (0) 2025.10.06
HTML 기초 1편 - 태그와 속성  (0) 2025.10.04
'프로그래밍/Frontend' Related Articles more