CSS의 기초

Tech-blog/CSS

CSS의 기초

ZeRami 2022. 12. 15. 21:44

앞서 블로그에서 HTML의 기초에 대해서 간략하게 설명해드렸는데 HTML로 문서를 작성하셨을꺼에요. 그 때 태그들을 사용하셨을 텐데 그 태그들을 활용?해서 내가 원하는 모습으로 꾸밀 수 있는 역할을 하는 것이 CSS입니다!

CSS 사용법

CSS사용법은 대표적으로 3가지 방법이 있습니다.

1. 인라인 스타일(Inline style)

<body>
	<h1 style="color:red;">Inline Style</h1>
</body>

태그 내에 style="font-size:40px" 이런식으로 작성합니다.

2. 내부 스타일 시트(Internal style sheet)

<head>
    <style>
        body { background-color: black; }
        h1 { color: white; font-size:22px; }
    </style>
</head>
<body>
	<h1>Internal Style Sheet</h1>
</body>

3. 외부 스타일 시트(External style sheet)

<head>
    <link rel="stylesheet" type="text/css" href="#">
</head>
<body>
	<h1>External style sheet</h1>
    <h6>외부 스타일 시트</h6>
</body>

h1 {
    font-size:22px;
    color: red;
    }
h6 {
	text-decoration: underline;
    font-weight: bold;
	}

style.css 파일을 만들고, 해당 파일에 태그 이름과 적용하고 싶은 css 스타일 코드를 작성을 하고, HTML내 head태그에 <link>태그를 사용해서 연결해주시면 됩니다.