wab
07_HTML_태그소개_스타일 지정 방식
Do룡
2023. 3. 11. 22:24
이번 글에서는 스타일 지정 방식에 대해 알아보도록 하자
스타일 지정 방식은 3가지가 있습니다.
* 우선순위 : 인라인 방식 > 내부방식 > 외부방식 입니다..
1. 인라인 방식 : html 태그 내에 속성으로 지정하는 방식입니다.
<h3 style="background-color:gray;">인라인 방식의 스타일 적용하기</h3>
<p style="color:blue;">
HTML 태그에 속성으로 적용하는 방식
</p>인라인 방식의 스타일 적용하기
HTML 태그에 속성으로 적용하는 방식
2. 내부 방식 : head 태그 내에 style 태그를 정의하는 방식입니다.
<!DOCTYPE html>
<html>
<head>
<title>::: 07_HTML_태그소개_스타일지정방식 :::</title>
<style>
body {background-color : lightgrey;}
h3 {color:red;}
p {color:green;}
</style>
</head>
<body>
<h3>내부 방식의 스타일 적용하기</h3>
<p>
head 태그 영역에 style 태그를 이용하여 적용하는 방식 <br/>
- 내부 방식의 경우 스타일을 지정할 특정 태그를 지정해야 합니다.
</p>
</body>
</html>
저번 스타일때의 배경색처럼 이 창의 전체가 영향을 받아버려
캡쳐본으로 올려 놓도록 하겠습니다 ㅎ...
3. 외부 방식 : style 파일을 외부에 저장해 놓고 불러들이는 방식으로
외부 파일을 만들때 확장자는 **.css 로 합니다.
외부 파일을 먼저 만들어 봅시다.
새파일을 하나 만들어 줍시다. 저는 이름을 09_css.css라고 만들어보도록하겠습니다.
body {
background-color : lightgrey;
}
h3 {
color:red;
}
p {
color:green;
}알아 보기 쉽게 한줄한줄 작성한거지 p{ color : green;} 이렇게 한줄로 적어도 상관없습니다.
그리고 위에 내부방식과 겹칠거기 때문에 html파일도 새로 하나 만들어 줍니다.
<!DOCTYPE html>
<html>
<head>
<title>::: 08_HTML_태그소개_스타일지정방식 :::</title>
<link rel="stylesheet" href=".\css\09_css.css">
</head>
<body>
<h3>외부 방식의 스타일 적용하기</h3>
<p>
09_css 에 따로 만들어서 불러 들여서 적용한거임
url에 연결해서 할수도 있음 href요기에 소스코드 넣어주면됨
안된다면 .을 그 홈페이지 주소로 바꿔주면됨
</p>
</body>
</html>