“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
css을 표현하는 방법에는 여러가지가 있습니다.
내부 스타일 시트
내부 스타일 시트는 <head>태그 안에 <style>태그 안에 들어가는 css로 같은 파일 안에 있는 html에 적용합니다.
다른 html파일에는 적용 할 수 없으므로 따로 파일화 하여 사용하여야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css표현방법</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>내부 스타일 시트입니다.</p>
</body>
</html>
외부 스타일 시트
외부 스타일 시트는 중복되는 css를 여러 파일과 공유 할 수 있도록 css를 하나의 파일화 하여 연결한 것을 말합니다.
외부 스타일 시트로 인해 중복되는 불필요한 css을 내부스타일시트로 사용하지 않아도 됩니다.
.css라는 확장자를 가진 파일로 저장하고 <link>을 이용하여 선업합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css표현방법</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>외부 스타일 시트입니다.</p>
</body>
</html> p {
color: red;
}
@import
css안으로 다른 css파일을 불러들일 경우 사용되며 외부 스타일 시트 뿐만 아니라 내부 스타일 시트로 도 불러 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css표현방법</title>
<style>
@import url("style.css");
</style>
</head>
<body>
<p>@import 방식입니다.</p>
</body>
</html>
인라인 스타일
html에 직접 적용하는 방식으로 style =" "형식으로 기술합니다.
내부나 외부 스타일에서 기술된 속성보다 우선으로 적용되므로 우선 순위가 절대적으로 높아야 할경우에 사용 할 수잇습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css표현방법</title>
</head>
<body>
<p style="color: red;">인라인 스타일입니다.</p>
</body>
</html>