기사의 내용

이 기사에서는 ”style요소내의CSS의 기술법”에 대하여 다룹니다.

기본적인 서식

일단, 간단한 샘플을 통하여 보도록 합시다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
		h1 {
			font-style: bold;
		}
		p {
			color: blue;
			background-color: red;
		}
	</style>
</head>
<body>
	<h1>
		1.자기소개
		<p>엔지니어</p>
	</h1>

	<h1>
		2.취미
		<p>게임</p>
	</h1>

</body>
</html>

완성소스

여기서는, css파일이 아니라 style요소내의 디자인에 관한 기술에대해 설명하겠습니다. 서식은 아래와 같습니다.

셀렉터 {
   속성명:;
}

셀렉터」라는 것은「어떤 스타일을 적용하는가」을 정하는 규칙이며,「속성」과「」에 대해서는 이 기사에서 설명한 속성과 같은것입니다. h1이나 p와 같은 태그명을 쓴다면, 태그에 스타일이 적용됩니다. 실제로 적용되는 속성과 그 값은「속성명:값;」이라는 형태로 기술합니다. 속성명과 값 사이네는 は「:」(콜론)으로 구분합니다.

간단한 예로 알기쉽게 설명하겠습니다. 위에서 사용한 style요소 안에 이하의 소스를 주목해 주시기 바랍니다.

h1 {
	font-style: bold;
}

이 경우는「h1」태그는「셀렉터」,「font-style」은「속성명」、「bold」는「」이 됩니다. 번역하자면「페이지내의 h1태그font-style 을 전부 bold로 설정한다.」라는 의미입니다.

속성」의 경우는 이하와 같이「복수의 설정값을 지정하는것도 가능」합니다.

셀렉터 {
   속성명1:;
   속성명2:;
}

위에 기술한 대로, 값의 위에는「;」(세미콜론)을 써서 구분합니다.

제일 상단부의 소스에서는 이하와 같은 형태로 쓰여져 있었습니다.

p {
	color: blue;
	background-color: red;
}

이렇게 쓰면 style요소 안을 수정하는것만으로도 문서 전체의 디자인을 일괄적으로 갱신하는게 가능합니다. 예를 들어, 버튼클래스의 배경색을 전부 흰색으로 지정하고 싶은 경우.

.button {
  background-color: white; 
}

와 같이 지정하는것 만으로 버튼 전체의 색깔을 변경할수 있습니다.

자주 사용되는 셀렉터의 형태

전체 선택 셀렉터「*」

문서내의 모든 요소에 속성을 적용하고 싶을때 사용됩니다.

* {
      background-color:#87CEEB
}

ID셀렉터「#id」

문서내의 특정 요소의 id를 사용하여 스타일을 적용할때 사용됩니다.

#hobby {
     color:yellow;
}

클래스 셀렉터「.클래스명」

문서내의 특정 요소의 class를 사용한 스타일을 적용하고 싶은 경우 사용합니다. id속성과 달리 class속성은 여러 태그에서 동시에 사용될수 있습니다.

.name{
   color:blue;
}

실전

지금까지 배운 셀렉터를 사용하여 이하와 같은 페이지를 만드는게 가능합니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
* {
		/*문서 전체의 색깔을 "#87CEEB"로 지정합니다.*/
		background-color:#87CEEB
	}
	.name {
		/*class="name"이란 클래스가 지정된 요소의 문자를 파랗게 만듭니다.*/
		color: blue;
	}
	#hobby {
		/*id="hobby"란 클래스 속성이 지정된 요소의 문자를 노랗게 만듭니다.*/
		color:yellow;
	}
	.game_name {
		/*class="game_name"이란 클래스 속성이 지정된 요소의 문자의 사이즈를 전부30px로 만듭니다.*/
		font-size: 30px
	}
	.social_game {
		/*class="social_game"이란 클래스 속성이 지정된 요소의 문자의 색을 녹색으로 만듭니다.*/
		color:green
	}
	h2 {
		/*h2태그 문자를 두껍게 표시합니다.*/
		font-style: bold;
	}
</style>
</head>
<body>
	<h1>제 이름은 <span class = "name">댕댕이</span>입니다.</h1>
	<p><h1>취미는 <span id="hobby">게임 </span>입니다.</h1></p>
	<p>좋아하는<span class="game_name">게임</span>목록</p>
	<ul>
		<li>몬스터헌터</li>
		<li class="social_game">그랑블루 판타지</li>
		<li class="social_game">프린세스 커넥트</li>
	</ul>
	<h2>여러분 잘 부탁드립니다.</h2>
</body>
</html>

완성소스

Web개발 – 처음하는CSS

프로그래밍 강좌 메인