반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css기초1 - 선택자</title>
<style>
/*
css 문법만 사용 가능
body 태그에 사용된 모든 선택자가 모두 다 스타일이 적용된다!(즉, 선택자는 복수의 의미를 담는다!)
선택자{스타일속성:스타일속성값;스타일속성:스타일속성값;}
연속하는 스타일에서 ; 은 스타일과 스타일 속성을 구분해 주는 역할로 구분자라고도 합니다.
*/
h1{color:blue;text-align:center}
h1{color:red;}
/*css도 위에서 아래 방향으로 해석하며, 제일 마지막에 적힌 스타일로 적용된다.*/
.a{color:green} /*a라는 클래스명을 가진 태그들을 선택한다. - "태그들" - class는 중복이 되어 복수가 가능*/
#b{color:blue} /*b라는 아이디명을 가진 태그를 선택한다. - "태그" - id 는 중복이 안되어 복수가 불가능*/
</style>
</head>
<body><!-- css는 컨텐츠만 들어간 html에 스타일을 입혀주는 것이다. -->
<h1>CSS는 위에서 아래로 단계적으로 해석합니다.</h1>
<h1>TITLE</h1>
<h1 class="a">TITLE</h1>
<!-- class나 id를 사용하여 개별적인 스타일을 적용합니다. -->
<h1 id="b">TITLE</h1>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <b>commodo consequat.</b></p>
<p id="b">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [HTML] CSS 기초 - 관계선택자_족보관계를 이용(2021-09-23) (0) | 2021.11.17 |
|---|---|
| [HTML] CSS 기초 - 관계선택자_족보관계를 이용(2021-09-16) (0) | 2021.11.09 |
| [HTML] 예제풀기(2021-09-14) (0) | 2021.11.09 |
| [HTML] div 영역 나누기_예제만들기(2021-09-10) (0) | 2021.11.09 |
| [HTML] form 양식폼 만들기(2021-09-09) (0) | 2021.11.09 |