3가지 CSS 스타일

삼전·2023년 5월 22일

external스타일 inline스타일 internal 스타일 style태그

CSS

목록 보기

2/14

1.inline 스타일: 태그에 직접사용

2.internal 스타일: style태그를 이용하여 적용, 현재 페이지에만 적용할 때

3.external 스타일: 외부파일(css)로 민들어 적용

⭐선택자{속성: 속성값; 속성:속성값; ...}

이번 시간에는 인라인 스타일 및 내부 스타일에 대해 알아 보도록 하자!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- internal 스타일 --> 
<style>
	
	/*태그 선택자*/
	div, li{
		color:blue;
		/*선위두께, 실선, 색상*/
		border: 1px solid green; 
		/*상하좌우 마진 10*/
		margin: 10px; 
		padding: 20px; 
	}
	/*아이디 선택자*/
	#d1{
		font-size:30px; 
	}
	/*클래스 선택자*/
	.c1{
		background:red;
		color: white; 
	}
</style>
</head>

<body>
 <!-- inline stylesheet -->
	<div id="d1" class="c1">스타일시트 연습중</div>
	<div>스타일시트는 html태그에 디자인하기</div>
	<ul>
		<li class="c1">11111</li>
		<li style="color:red">22222</li>
		<li>33333</li>
	</ul>

</body>

</html>