[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 06.CSS의 기본"

My Study/서적 공부

handbefore 2024. 7. 21. 15:16

06.CSS의 기본

스타일과 스타일 시트

css 기본형

선택자 { 속성1: 속성값1; 	속성2: 속성값2; }

css 여러 줄로 표기하기

p
{ text-align: center;
	color: blue;
}

css 한 줄로 표기하기

p { text-align: center;		color: blue; }

css 주석 처리하기

/* css 주석 사용하면 편함*/
p
{ text-align: center; /* 텍스트 정렬 - 중앙 */
	color: blue;
}

스타일시트 알아보기

스타일 시트 - 1. 브라우저 기본 스타일

- 2. 사용자 스타일 - 1. 인라인 스타일

- 2. 내부 스타일 시트

- 3. 외부 스타일 시트

인라인 스타일

<p style="color: blue;"></p>

내부 스타일 시트

<head>
	<style>
		h1 {
			padding:10px;
			background-color: #222;
			}
	</style>
</head>

외부 스타일 시트

<link rel="stylesheet" href="외부 스타일 시트 파일 경로">

CSS 기본 선택자 알아보기

전체 선택자

* {속성: 값;}

타입 선택자

p {
	font-style: italic;
	}

특정 선택자

.bg{
	background=color: #ddd;
	}
/* 문서 여러번 적용 */

#container {
	width;500px;
	}
/* 문서 한번만 적용 */

출처

easyspub.co.kr