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>