반응형
<결과 화면>
이번 예제에서는 스타일을 적용하는 3가지 방법을 짧게 알아볼 것이다. (외부, 내부, 인라인)
우선 내용이 있을 html파일을 만든다.
내용은 엄청 짧다. 텝 이름이 Test이고, 화면에 Hello world 글자가 보인다.
이제 여기에 스타일을 적용할 css파일을 만들자.
내용은 p요소에만 색을 파란색으로 적용하겠다. (p요소는 Hello world 임)
그리고 head 안에 link로 연결해주면 된다.
<결과 화면>
내부로 스타일을 적용할 수도 있다. css파일 없이
<결과 화면>
인라인으로도 적용이 가능하다. 글씨를 쓸때 그때 스타일을 주는 방식 [우선순위 제일 높음]
<결과 화면>
<복붙용 코드>
02_test.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<head>
<meta charset="uth-8">
<title>Test</title>
<!-- 스타일 적용 방법 3가지 -->
<!-- 1. 외부 (body에도 쓸 수 있지만 권장하지 않음.)-->
<!-- 1. 내부 (body에도 쓸 수 있지만 권장하지 않음.)-->
<style>
p{color: red;}
</style>
<!-- 1. 인라인 -->
</head>
<body>
<!-- 3. 인라인 스타일 : 요소의 속성으로 스타일 적용 -->
<p style="color: green; font-weight: bold;">Hello world</p>
</body>
</html>
|
02_test.css
|
1
|
p{color: blue;}
|
반응형
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+ CSS' 카테고리의 다른 글
| HTML+CSS (기초) 링크, 이미지, 리스트 스타일 적용[배경색, 이미지 적용, ] (0) | 2019.12.06 |
|---|---|
| HTML+CSS (기초) 경계선 및 배경색 스타일 적용 1-2 (0) | 2019.12.06 |
| HTML+CSS (기초) 경계선 및 배경색 스타일 적용 1-1 (0) | 2019.12.06 |
| HTML+CSS (기초) font 적용과 text 스타일 속성 적용 (0) | 2019.12.05 |
| HTML+CSS (기초) style 적용, [내부, 외부 스타일 시트 적용] (0) | 2019.12.05 |
댓글