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

Notice

Recent Posts

Tags more

Archives

관리 메뉴

게으른 나에게

My Study/서적 공부

handbefore 2024. 7. 21. 15:16

스타일과 스타일 시트

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

[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 08.레이아웃을 구성하는 CSS 박스 모델" (0)	2024.07.21
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 07.텍스트를 표현하는 다양한 스타일" (0)	2024.07.21
[코딩 자율학습 HTML + CSS + 자바스크립트] 1. HTML로 웹 구조 설계하기 - "3장 HTML 실무에서 자주 사용하는 HTML 필수 태그 다루기" (2)	2024.07.20
[코딩 자율학습 HTML + CSS + 자바스크립트] 1. HTML로 웹 구조 설계하기 - "2장 HTML 문서 작성을 위한 기본 내용 살펴보기" (0)	2024.07.20
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "5장: 마무리 문제" (3)	2024.07.20

'My Study/서적 공부' Related Articles