티스토리 뷰
반응형
<style></style>
스타일 태그를 사용하여 웹문서의 디자인을 변경할 수 있습니다.
스타일의 형식
선택자{ 속성:값;}
p{color:black;} 형태로 사용합니다. 선택자는 한번에 여러개도 적용 가능합니다. p,h1{color:black;}
모든 선택자에 적용하고 싶을경우 *{속성:값;} 을 사용하시면 됩니다.
특정 태그가 아닌 특정 클래스이름에 스타일을 적용하고 싶을 경우 .클래스이름{속성:값};
특정 id 이름에 스타일을 적용하고 싶을 경우 #아이디이름{속성:값};
스타일은 헤드태그 사이에 넣어도되고 css파일을 따로 만들어 적용하거나 태그에 직접 하는 방법들이있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>취미코딩</title>
<style type="text/css">
p {
color: red;
}
</style>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p style="background-color: black;">스타일을 적용해 볼께요.</p>
</body>
</html>
style.css 파일
@CHARSET "UTF-8";
p{
margin: 200px;
}반응형
'HTML, CSS' 카테고리의 다른 글
| HTML5 구조 및 시맨틱 요소 알아보기 (0) | 2017.06.23 |
|---|---|
| HTML 폰트 또는 웹 폰트 간단히 적용해 보기 (0) | 2017.06.15 |
| HTML 폼태그 간단히 알아보기 (0) | 2017.06.11 |
| HTML 현 페이지 특정위치로 이동하기 (0) | 2017.06.11 |
| HTML 링크관련 a태그 간단히 알아보기 (0) | 2017.06.10 |
댓글
최근에 올라온 글
최근에 달린 댓글