선택자와 CSS 적용방식 - 1.내장형 방식

2022. 8. 8. 10:42

헤드 안에 들어갈 값은 정해져있다.

제목표시줄에 표시될 문서의 제목,

한글 인코딩.

그리고 css 사용시 css 블록.

css를 사용할 때에는 head 괄호 사이에 먼저 css블록을 만든다.

<style>
	h1 { color: red; }
</style>

주석은 /* 다음과 같이 */ 처리한다

h1 : 선택자

color : 스타일 속성

red : 스타일 값

선택자 h1 안에 여러가지 속성을 담아 헤드에 선언을 해두고 본문에서 필요한 곳에

<h1> 괄호로 둘러싸주면 해당 속성이 적용된다.

<html>
<head>
<meta charset="UTF-8">
<title>css사용 예제</title>
<style>
h1 {
	font-family: 굴림;
	font-size: 18pt;
	color: red; }
</style>
</head>

<body>
	<h1>
		css에 대한 예제
	</h1>
</body>
</html>

여러 선택자를 한 속성에 쓸 수도 있다.

아래와 같이 h2, p를 사용하면 h2와 p는 같은 속성을 담고 있는 선택자가 된다.

h2, p {
	font-family: "arial black";
	font-size: 18pt;
	color: gold; }

공백을 많이 벌릴 때에는   를 소문자로 작성하면 간격이 한 칸씩 생긴다.

응용해서 다음과 같은 코드를 작성해본다.

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
h2, p {
	font-family: "arial black";
	font-size: 18pt;
	color: gold;
}
</style>
</head>

<body bgcolor="#990099">
	<center>
		<h2>
			css에 대한 예제
			<hr>
		</h2>
		<h2>The              Fun              Corner</h2>
		<br>
		<p>The &nbsp;&nbsp; Street &nbsp;&nbsp; Fair</p>
	</center>
</body>

스페이스로 간격을 많이 벌린 the fun corner와

 로 공백을 준 the street fair의 단어 간격 사이에 차이가 있다.

css에도 부모와 자식 개념이 있다. 상속과는 다르다.

h3 {
	color: #ff1aff
}
h5 {
	color: skyblue
}
h5 em {
	color: white
}

h5, h5 em 이 두 가지 선택자가 중에서

h5 가 부모, em이 h5의 자식이라고 할 수 있다.

부모와 자식이라는 용어를 쓰지만 상속과는 조금 다른데,

이 em 은 <h5></h5> 괄호 안에서만 적용되는 태그이다.

아래 코드를 보면

폰트 색깔을 흰색으로 변경해주는 내용을 담은 em 선택자는 총 두번 사용된다.

그러나 적용되는 것은 <h5> 블록 안에 사용된 <em> 뿐이다.

<h3>
	개봉 앞둔 애니메이션 <em>"포켓몬 3“</em>
</h3>
<hr>
<h5>
	애니메이션 영화<em>“포켓몬 3”</em>의 홍보 인쇄물에 등장한 애쉬, 피카츄 그리고 미스티의 모습입니다
</h5>

' . ' 으로 정의하는 선택자

.으로 지정된 선택자를 불러올 때에는 class 속성으로 불러와야 한다.

클래스 속성으로 불러온다는 것은 아래와 같은 것이다.

<head>
	<style>
    	.pink{color: pink}
    </style>
</head>
<body>
	<h1 class=pink> 핑크 </h1>
</body>

' # ' 으로 정의하는 선택자

id 속성으로 불러온다.

id 속성 고유한 식별을 목적으로 할 때 (자바스크립트) / css를 적용하기 위해서 (css)

class 속성 재사용을 목적으로 할 때

name 속성 form 컨트롤 요소의 value를 서버로 전송하기 위해 필요

<head>
	<style>
    	#pink{color: pink}
    </style>
</head>
<body>
	<h1 id=pink> 핑크 </h1>
</body>

'웹표준 > CSS' 카테고리의 다른 글

부트 스트랩 템플릿에 회원가입, 로그인, 게시판.html 적용해보기 (0)	2022.08.10
CSS 적용방식 - 3.인라인 방식 (0)	2022.08.08
CSS 적용방식 - 2.외장형 방식 (0)	2022.08.08

기록