Deve.haeri

[CSS/기본] Style 방식 본문

HTML-CSS

[CSS/기본] Style 방식

hhaeri 2020. 11. 8. 21:59


1. Inline style
 1) 태그에 style 속성으로 직접 적용하는 방식이다.
 2) 무조건 반영되는 방식이다. (우선순위가 가장 높다.)

<body>
	 <h1 style = "color : red; bacground : yellow;">안녕하세요</h1>
</body>

 

2. Internal style
 1) <style> 태그를 이용해서 적용한다.
 2) <style> 태그는 <head> 태그의 자식 태그이다.
 3) 작성 형식
 적용 대상 { 속성 : 값; 속성 : 값; }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	/*type = "text/css" 는 생략할 수 있다.*/
	/*개발 중일 때 \*/
	h1{
		color : red;
		background : yellow;
	}
	
	/*개발 끝 (공백 때문에 파일 크기가 커져서 개발이 종료되면 아래와 같이 바꾼다.)*/
	h1{color : red;background : yellow;}
	
</style>
</head>
<body>
	<!--
		internal style
		1. <style> 태그를 이용해서 적용한다.
		2. <style> 태그는 <head> 태그의 자식 태그이다.
		3. 작성 형식
		 적용 대상{ 속성 : 값; 속성 : 값;

	  -->
	  
	  <h1>안녕하세요</h1>
</body>
</html>


3. External style
 1) 별도의 css 파일에 작성한다
 2) <link> 태그의 href 속성에 css 파일의 경로를 작성한다.
 3) <link> 태그는 <head> 태그의 자식 태그이다. 

/*외부에 저장 된 css 파일*/
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');

h1{
	color : red;
	background : yellow;
}
<!-- External 방식 html 파일-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type = "text/css"  rel="stylesheet" href="../assets/style/external.css">
</head>
<body>

	<h1>안녕하세요</h1>
 
</body>
</html>
저작자표시

'HTML-CSS' 카테고리의 다른 글

[CSS/기본] Unit  (0) 2020.11.08
[CSS/기본] Color 속성  (0) 2020.11.08
[HTML/기본] Form 태그  (0) 2020.11.06
[HTML/기본] Table 태그  (0) 2020.11.06
[HTML/기본] ImageMap 태그  (0) 2020.11.06
'HTML-CSS' Related Articles more
Comments