사용자:Bd3076/백괴게임 강좌/HCJ/1강

일단, 강좌를 시작하기 전에 말씀드립니다.

이 강좌는 미디어위키에 최적화된 강좌입니다.

따라서 표준 html 문법에 어긋나는 일이 발생할 수 있습니다.

html 컴파일러[편집 | 원본 편집]

html을 사용하다 보면 html을 실행시켜 줄 프로그램이 필요합니다.

이렇게 어떤 프로그래밍 언어를 실행시켜 주는 프로그램을 컴파일러라고 부릅니다.

저는 html 컴파일러로 JSFiddle을 사용합니다.

html, css, javascript를 모두 사용할 수 있는 아주 좋은 사이트입니다.

여러분이 백괴게임에 가입을 하면, 아이디가 생기죠?

그 아이디는 여러분을 가리키게 됩니다.

그것처럼 html의 어떤 요소를 가리킬 때도 아이디를 지정할 수 있습니다.

그런데 왜 아이디를 지정하냐고요? 아이디를 사용하면 다양한 기능을 사용할 수 있기 때문인데요, 이는 나중에 더 자세히 알아보도록 하죠.

먼저 <span> 태그에 대해 알아보겠습니다.

여기 "백괴게임"이라는 문장이 있습니다.

이 문장에 "name"이라는 아이디를 지정해 주려면, 아래와 같이 쓰면 됩니다.

<span id="name">백괴게임</span>

한 아이디는 한 곳에만 사용할 수 있습니다.

조금 어렵나요? 하지만 이건 html의 기본입니다. 익숙해져야만 더 어려운 기능을 다룰 수 있게 됩니다.

아까는 id라면, 이번엔 class입니다.

여러분이 학교에 다니면, 반이 생기게 됩니다.

반에는 여러 명이 있죠?

그 반이 몇 반인지만 알려준다면 우리는 그 반의 학생들을 알 수 있습니다.

class는 id와 비슷합니다. 단지 id는 중복될 수 없고, class는 중복할 수 있다는 것뿐이죠.

class는 주로 css와 엮이게 되는데, 이는 나중에 다루기로 하겠습니다. (id는 javascript와 주로 엮입니다.)

class는 어떻게 지정할까요?

<span class="names">백괴게임</span>
<span class="names">백괴사전</span>

와 같이 여러 개도 지정해 줄 수 있습니다.

오늘 배운 내용은 매우 중요하니 꼭 연습해야 합니다.