devil cat everdevel character

프로그래머가 아니던 시절 만들기 시작한 에버디벨 !
첫 오픈 한달과 최근 한달의 방문자수를 비교해보니 무려 190배 이상 증가했습니다.
그 사이 어느새 1년 9개월의 경력을 갖고 있는 프로그래머가 되었습니다.
실무의 경험을 담아 더 많은 내용으로 올해 언젠가 에버디벨이 책으로 나옵니다.
{HTML5, CSS3, jQuery, MySQL5, PHP7(PDO, OOP, MVC)}
아무것도 몰라도 컴퓨터만 있다면 하나부터 학습하며 발전해 나가는 자신을 보는 감동을 드리겠습니다.

disney Teyon kin

스타일 적용하기

그럼 어떻게 CSS를 적용하는지 한번 배워 봅시다.

왼쪽메뉴에 연습장을 이용할경우에는 문서 내부에 CSS를 지정해 주셔야 합니다. ^^

그렇지 않고 컴퓨터에서 직접 에디터를 사용하여 테스트 하시는 경우에는 외부문서로 지정을 하셔도 되고 맘대로 하셔도 됩니다. 단 경로는 지켜 주셔야 합니다.

외부문서 설정시에는 ../ 는 한단계 폴더 위로 올라가는 것입니다.

즉 현재 여러분의 작업 폴더가 c:\apmsetup\htdocs\html\ 이라고 한다면

현재 테스트 중인 html의 같은 폴더에 CSS 파일을 놓는다고 하면 아래와 같이 폴더 지정을 하지 않아도 되지만

					<link rel="stylesheet" type="text/css" href="style.css" />

위와 같지 않고 상위 폴더에 있다고 한다면 즉 c:\apmsetup\htdocs\style.css 에 있다고 한다면

					<link rel="stylesheet" type="text/css" href="../style.css" />

위와 같이 작성 합니다. ../ 는 상위 폴더로 한번 가는 것을 말합니다. ../../ 한다면 2번 상위 폴더로 가는 것 입니다.

그렇다면 다음과 같이 같은 선상의 다른 폴더에 있다고 한다면 즉 자신의 위치는

c:\apmsetup\htdocs\html\

이 폴더에 있지만 css파일이

c:\apmsetup\htdocs\css\ 라고 한다면

					<link rel="stylesheet" type="text/css" href="../css/style.css" />

위와 같이 한번 상위 폴더로 가고 나서 /를 누르고css(폴더명)을 쓰고 /를 다시 쓰고 파일 이름을 작성해 주시면 됩니다.

그럼 이제 본격적인 스타일 지정을 해봅시다.

어떤 태그에 만을 전체적으로 스타일을 지정 할 수 있고, 특정 태그만 스타일을 지정할 수 있으며, 상속 또한 가능 하답니다.

글로만 설명을 하면 제가 머리가 나빠서 설명을 못하기 때문에 소스를 보면서 해보겠습니다.



p태그의 텍스트 칼라를 빨강으로 지정해 보도록 하겠습니다. 이부분에서 우리가 배울것은 동일 태그에 대한 스타일을 적용시키는 것입니다.

					<!DOCTYPE html>
					<html>
					<head>
					<title></title>
					<style>
					    p{color:red}
					</style>
					</head>
					<body>
						<p>hello world</p>
						<p>hello usa</p>
						<p>hello korea</p>
						<p>hello japan</p>
						<p>hello germany</p>
						<p>hello france</p>
						<h1>hello france</h1>
					</body>
					</html>
					

위의 소스를 에디터 또는 에버디벨 연습장(왼쪽 메뉴 상단)에서 복사 붙여넣기 혹은 직접 작성(추천)해보시면 결과를 p태그로 감싸진 텍스트의 칼라가 전부 빨강으로 되신것을 보실 수 있습니다.

text red

위의 이미지 처럼 p 태그로 선언한 텍스트의 색은 빨강으로 표현됩니다. 반면h1태그는 적용되지 않는걸 보실 수 있습니다.

위의 소스와 똑같은데 hello korea만 빨강으로 표현되게 해봅시다.

즉, 같은 태그라도 그 중에 특정 태그만 스타일을 적용시키는 방식인데요 그렇게 할려면 그 특정태그에 별도의 이름을 부여 해야 합니다.

class="이름" 해야 하는데요. 앞으로 이것은 굉장히 많이 사용 합니다. 그리고 어렵지도 않습니다.

						<p class="red">hello korea</p>
					

위처럼 시작하는 p태그 안에 클래스를 지정하고 이름을 지정 해주면 끝입니다. 위처럼 클래스명을 red로 지정 하였습니다.

그럼 클래스 선언을 했을경우 스타일 시트에는 다음과 같이 선언 하면 됩니다.

.클래스명{css값}

					.red{color:red}
					
즉 점을 찍고 클래스명 그후 {스타일 시트 요소}

아래의 소스를 작성하여 테스트 해보도록 합시다.

					<!DOCTYPE html>
					<html>
					<head>
					<title></title>
					<style>
						.red{color:red}
					</style>
					</head>
					<body>
					<p>hello world</p>
					<p>hello usa</p>
					<p class="red">hello korea</p>
					<p>hello japan</p>
					<p>hello germany</p>
					<p>hello france</p>
					<h1>hello france</h1>
					</body>
					</html>
					

결과는 아래와 같이 hello korea만 색상값이 빨강으로 표현되었습니다.

text red2

html 태그는 한정되어 있지만 그 태그를 써야 하는 일은 문서량에 따라 엄청나게 달라집니다. 하지만 같은 태그에 똑같은 스타일을 적용한다면 자유도가 많이 떨어지므로 같은 태그라도 클래스명을 따로 선언해 주어 각자 위치와 기능에 맞게 해주어야 합니다.

즉 css에서 클래스를 사용하는 경우는 굉장히 많습니다. 일단은 지금은 클래스를 설명하는 것이 아니기 때문에 넘어 가고 다음 설명을 해보도록 하겠습니다.

이번엔 상속된 태그만 선언되게 하는 방법을 설명하겠습니다.

리스트 태그 안에 h1태그를 선언하고 리스트 태그 밖에 h1태그를 선언해서 리스트 안의 태그만 선언되게 해보겠습니다.

그 방법으로는 띄어 쓰기로 자식 요소에 접근이 가능 합니다.

아래와 같은 소스 에서는 h1태그는 li태그에 상속되어 있습니다. 그리고 띄어 쓰기로 구분을 해주므로 li h1{css} 하면 됩니다.

					<ul>
						<li><h1>hello world</h1></li>
					</ul>
					<h1>hello world</h1>
					

그럼 소스로 배워봅시다. 구동해 봅시다.

					<!DOCTYPE html>
				<html>
				<head>
				<title></title>
				<style>
					li h1{color:red}
				</style>
				</head>
				<body>
					<ul>
					<li><h1>hello world in list </h1></li>
					</ul>
					<h1>hello world in h1</h1>
				</body>
				</html>
					
list_h1

위의 결과와 같이 리스트 안의 h1은 텍스트 칼라값 레드가 적용 되었고 리스트 태그 밖에 있는 h1태그는 그렇지 않습니다.

li h1{color:red} 이런 방식으로 스타일을 적용시켜 줄 수 있습니다.

이번시간에는 css속성 적용법에 대해서 배워 봤습니다. ^^

다음강좌는 3강.text 꾸미기 입니다. 클릭하면 다음 강좌로 이동합니다.