2. HTML & CSS, 어떻게 하지? (1/2) - 어떻게든 뭐든 만들어보자

*HTML과 CSS^[각주:1]의 작성법 및 주요 태그^[각주:2]를 다룰것입니다. 아시는 분은 넘어가주세요

티스토리 스킨은 일반적인 웹문서와 같이 정해진 언어(HTML,CSS)로 쓰여집니다.
언어라고 적어뒀지만 사실은 문법이에요, 문법.

HTML
html 문서에서는 문서의 실질적인 내용이 들어있습니다. 그리고, 이 문서는 "태그"라는 것들로 이루어져있죠.

태그 TAG

홀로 쓰이는 태그와 열고 닫는 태그 두종류가 있습니다.

태그의 사용법

보시다시피 <와 >로 둘러싸여 있으며, <> 사이에 그 태그의 명칭이 나옵니다.
여는 태그와 닫는 태그로 이루어진 태그는 닫는 태그의 <태그이름>의 <다음에 /를 붙여 </태그이름 같이 씁니다.

홀로 쓰는 태그는 html이라면 그냥 <태그이름> 같이 쓰면 되지만, 보통 티스토리 스킨의 html은 xhtml 1.0 문법을 따르니 <태그이름 /> 처럼 혼자 쓰더라도 반드시 닫음 표시를 해줘야합니다.

예제
<p>내용</p> <!-- p : 단락 paragraph 태그, 여는 태그와 닫는 태그 안에 표시될 내용을 넣습니다.-->
<br /> <!-- br : 개행 line break 태그, 홀로 쓰이므로 반드시 닫아줍니다. -->

<!-- 아참, 이렇게 생긴건 주석이죠. 실제 화면에 안나오는 메모용 태그에요. -->

어떤 태그들이 있는지는 차차 가면서 살펴보도록 하고요, 태그에 속성을 부여해보도록 합니다.

* w3school에서 검색해봐도 됩니다. 단, 예제들이 후지다는 말을 본 적이 있어서... 예제는 참고로만 봅시다.

<태그이름 속성1="속성1의 값" 속성2="속성2의 값">내용</태그이름>
<태그이름2 속성1="속성1의 값" />

정확한 명칭은 모르지만 일단 속성^[각주:3]이라고 하겠습니다.

태그에 특성을 부여할 때, 여는 태그의 태그이름 다음에 한칸 띄우고 저기 형식대로 적으면 됩니다. 닫는 태그에는 쓸 필요 없고요. 쓰면 어떻게 되는지가 궁금하긴 하지만, 넘어가죠.
홀로 쓰이는 태그도 똑같이 하면 됩니다.

쌍따옴표를 쓰던 그냥 따옴표를 쓰던 상관은 없는것으로 기억하지만 다들 쌍따옴표 쓰니^[각주:4] 필요한 경우에만 홀따옴표(?)를 쓰기로 하자구요. (javascript^[각주:5] 표현 등?)

<!-- 간단한 CSS 스타일지정입니다. 설명은 나중에. -->
<style type="text/css">
#article{background:rgb(255,255,240);}
.articleStyle{color:red;}
.articleStyle{color:blue;}
</style>

<div id="article" style="border:1px solid black; opacity:.5;" onclick="alert('누르지맛!')"> 내용</div>

<!-- div : 구획 나눔 division 태그. 상자로 많이 쓰입니다. 진짜 별거 없고 그냥 상자,, -->
<!-- 속성  id : ID(이름)을 붙입니다. 한 페이지에 동일한 ID가 있으면 안됩니다. 유일무이.
                    CSS나 자바스크립트에서 이 태그를 선택하는데 쓰입니다. -->
<!-- 속성 style : 그 태그에 한해서 CSS로 모양을 정합니다. 인라인 inline 방식의 CSS죠. CSS 작성법은 아래에서 설명하고요... CSS로 스타일 지정하는데 익숙해지면 font 같은 속성은 더이상 안쓰게 되더라구요. 다 까먹어버리고 말이죠. -->
<!-- 속성 onclick : 자바스크립트 이벤트 핸들러 라고 하는 녀석인데, 그 태그를 클릭하면 적혀있는 자바스크립트를 수행합니다. 이번엔 클릭하면 누르지맛! 이라고 적혀있는 경고창이 나올거에요. -->

<hr class="articleStyle" />
<!-- hr : 가로줄 horizontal line 긋는 태그입니다. -->
<!-- 속성 class : id랑 똑같이 이름을 지정하는 거긴 한데, 단지 다른점은 한군데만이 아니라 여러군데 지정이 가능하다는 거죠. 이렇게요. -->

<p class="articleStyle">같은 색으로 나와야 한단다.</p>
<hr class="articleStyle" />

<!-- 클래스 이름짓는 규칙은 여기서 확인하시고요, 스페이스바로 구분해서 두개 이상도 적을 수 있던걸로 아는데 몇몇 브라우저에서 두개 이상의 스타일을 못읽는 경우가 있다고 했던 것 같으니 한개씩만 하시길 부탁드릴께요. 여기에 따르면 IE6에서 안된다고 하네요,, -->

<p class="articleStyle articleStyle2">두개의 클래스 적용.</p>
<p class="articleStyle2 articleStyle">두개의 클래스 적용. 순서를 바꿔서..</p>

<!-- 급 어떤 클래스가 먼저 적용되는지 궁금해서 연습장에서 알아봤는데, 그건 상관없고 CSS 작성순서에 관계있더라구요. 나중에 써놓은 CSS가 최종 반영됩니다 -->

* 위 내용을 복사해서 태그 연습장에 붙여넣고 보기를 눌러보세요!
* 아니면 메모장이나 Notepad++ 같은걸 열어서 붙여넣은 뒤 확장자를 html이나 htm파일로 저장하고 열어보시던가요. 위에께 더 쉽죠?

HTML 문서를 쓰는 기본적인 틀이 있는 것 같지만, 그건 skin.html을 진짜로 작성하기 시작할 때부터 알아보자구요. 대부분의 분들이 정컴 시간에 배우셨겠지만...

슬슬 길어지는 것 같으니 CSS는 다음번에.

ps. 사실 태그 이름의 원래 영어는 w3school에서 검색해서 알아보고있음. 태그가 의미하는 바는 아는데 영어 원래말은 뭔지 몰라서...

1. 는 다음에 [본문으로]
2. 는 태그 등장할 때마다 설명. 잘 봐두세요 [본문으로]
3. w3school 보니까 Attribute라고 하는듯. 영어사전에 검색해보니... 속성 맞네요. ㅋㅋㅋ [본문으로]
4. 아마도? 설마 나만 그런겨? [본문으로]
5. 이 연재물에서는 자바스크립트는 안가르칩니다. 무엇보다 제가 거의 할 줄 모름 [본문으로]