/// html
-- 인라인 스타일
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> 인라인 스타일 적용하기 </title>
</head>
<body>
<!-- stlye CSS -->
<h2 style="font-family:돋움;font-size:14pt">인라인 스타일 적용하기</h2>
인라인 스타일은 하나의 태그에 스타일 정보를 적용할 때 사용함.<br>
<span style="color:green;font-weight:bold">사용하기는 편리</span>하지만 스타일 정보를<br>
수정하려면 일일이 스타일이 적용된 태그를 찾아다니면서 수정해야 하는 <br>
<span style="color:red;font-weight:bold">불편</span>이 있다.
</body>
</html> -->
-- HEAD태그 스타일 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> head 태그에 스타일 추가하기 </title>
<style type="text/css">
body{
line-height:170%;
}
h2{
font-family:돋움;
font-size:14pt;
}
span{
color:Green;
font-weight:bold;
}
</style>
</head>
<body>
<!-- stlye CSS -->
<h2>인라인 스타일 적용하기</h2>
인라인 스타일은 하나의 태그에 스타일 정보를 적용할 때 사용함.<br>
<span>사용하기는 편리</span>하지만 스타일 정보를<br>
수정하려면 일일이 스타일이 적용된 태그를 찾아다니면서 수정해야 하는 <br>
<span>불편</span>이 있다.
</body>
</html>
-- 문서에 css 파일 연결
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> html 문서에 css 파일 연결하기 </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- stlye CSS -->
<h2>html 문서에 css 파일 연결하기</h2>
스타일 정보를 <span> 외부의 css 파일에 작성</span>한 후<br>
이것을 html 문서에 연결할 수 있다.<br>
외부 스타일시트 문서의 연결은 <span> <"LINK"> 태그를 <br>
이용 </span> 한다.
</body>
</html>
-- 문서에 css 파일 포함
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> html 문서에 css 파일 연결하기 </title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<!-- stlye CSS -->
<h2>html 문서에 css 파일 포함하기</h2>
스타일 정보를 <span> 외부의 css 파일에 작성</span>한 후<br>
이것을 html 문서에 포함할 수 있다.<br>
외부 스타일시트 문서를 포합할 때는 <span> <"STYLE"> 태그를 <br>
이용 </span> 한다.
</body>
</html>
-- css 중복사용시 적용 순서
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> html 문서에 css 파일 연결하기 </title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
h2{
color:Red;
font-family:궁서;
}
</style>
</head>
<body>
<!-- stlye CSS -->
<h2>html 문서에 css 파일 포함하기</h2>
스타일 정보를 <span> 외부의 css 파일에 작성</span>한 후<br>
이것을 html 문서에 포함할 수 있다.<br>
외부 스타일시트 문서를 포합할 때는 <span> <"STYLE"> 태그를 <br>
이용 </span> 한다.
</body>
</html>
-- id로 스타일 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> ID로 스타일 적용하기 </title>
<style type="text/css">
#title,#positive{
font-size:14pt;
color:Blue;
}
#negative{
color:Red;
font-size:14pt
}
</style>
</head>
<body>
<!-- stlye CSS -->
<h2 id="title">ID로 스타일 적용하기</h2>
스타일시트에 태그의 ID특성값을 이용해서 스타일을 정의하면<br>
HTML 문서의 태그들에 개별적으로 스타일이 적용된다.
<h2 id="positive">장점</h2>
동일한 태그라 하더라도 서로 다른 스타일을 적용할 수 있다.
<h2 id="negative">단점</h2>
ID는 유일한 값이므로 같은 스타일을 다른 태그에 적용할 수 없다.
</body>
</html>
-- 클래스로 스타일 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> 클래스 스타일 적용하기 </title>
<style type="text/css">
.title{font-size:14pt;}
.bold{font-weight:bold}
.red{color:red;}
.blue{color:Blue;}
.green{color:Green;}
.subtitle{font-size:12pt;}
</style>
</head>
<body>
<!-- stlye CSS -->
<h2 class="title bold red">클래스로 스타일 적용하기</h2>
스타일시트에 HTML 태그의 클래스 특성값을 이용해서 스타일을 정의하면<br>
태그의 종류에 관계없이 같은 클래스를 가지는 모든 태그에 스타일이 적용됨.
<h2 class="subtitle blue">장점</h2>
스타일을 매우 유연하게 적용함.
<h2 class="subtitle green">단점</h2>
너무 많은 CSS클래스가 정의되지 않도록 주의
</body>
</html>
// CSS
body{
line-height:170%;
}
h2{
font-family:돋움;
font-size:14pt;
}
span{
color:Green;
font-weight:bold;
}
반응형
'자바과정 > HTML' 카테고리의 다른 글
| HTML 실습 : 회원가입 양식 만들기 (0) | 2021.02.25 |
|---|---|
| HTML 실습 : 테이블 합치기 (0) | 2021.02.25 |
| HTML 기초 2일 (0) | 2021.02.25 |
| HTML 기초 1일 (0) | 2021.02.24 |
댓글