CSS 기초 문법

티스토리 뷰

CSS

gwni0214 2022. 2. 16. 08:52

CSS는 HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일시트 언어입니다.

{/*CSS주석*/} /*이렇게 표시합니다.*/

HTML 파일 안에 <style> 태그로 스타일을 작성하는 방식입니다. 이 방식은 번들링 하지 않는 프로젝트에서는 대부분 HTML, CSS, JS 파일을 나누어 관리하는 것이 일반적 이므로 번들링하지 않는다면 자주 사용되지 않는 방식입니다.

<!DOCTYPE html>
<html> 
<head>
<meta>
<title>CSS</title> 

<style>
스타일 {
    속성:값;
}
</style>

</head>  
<body> 
</body>
</html>

link 태그를 이용하여 외부 CSS문서를 가져와서 연결하는 방식입니다. 실무에서 주로 사용하는 방식으로 대부분의 프로젝트에서 이방식을 사용하고 있습니다.

<!DOCTYPE html>
<html> 
<head>
<meta>
<title>CSS</title> 

<link rel="stylesheet" href="CSS파일 경로">

</head>  
<body> 
</body>
</html>

요소의 style 속성에 직접 스타일을 작성하는 방식 입니다. 우선순위상 우선하기 때문에 공통기능에 대해서 따로 파일로 관리하는 경우 변경이 불가능하기 때문에 유지보수에 어려움이 있는 방식입니다. 그렇기 때문에 권장하지 않는 방식입니다.

<!DOCTYPE html>
<html> 

<head> 
<meta>
<title>CSS</title>
</head>  
<body> 

<div style="color:red; margin:20px">
...
</div>

</body>
</html>