HTML 작성하기!
안녕하신가영
캬캬캬 이제 며칠만인지..
이전에 공부한거 다 까묵게 생겻음 ㅋㅋㅋㅋㅋㅋ
기말고사를 끝내고..
3일은 신나게 쉬었다지여 ㅋㅋ
겨우 html공부한거 하나 올려놓고..ㅋㅋ이게 뭐하는 건지..ㅠㅠ
게다가.. 방학동안의 계획이 엄청나게 많아져서!!!!!!!!!!!!!!!!!!! 걱정입니다ㅠㅠ
중간에 분명 포기하겟지.. ㅠ하..ㅠㅠ
그래도 일단은 도줘어어언!! ㅋㅋ
오늘은 html작성하는 법을 좀 볼까해요 ㅋ
작성하는게 뭐 메모장에 하면 되죠 뭐 ㅋㅋ 겁나 쉬워요 잉?ㅋㅋ
나름 블로그 올린다고 한글파일에 요약해 둔 글을 가져와서 붙여 넣을 꺼에요 ㅎㅎ
자 먼저 메모장에 저장시 .html또는 .htm으로 저장해주시면 html파일로 인식이 됩니다!
제가 책보면서 만든 기본적인 코드부터 봅시당!
|
-basic.html- <html> <head> <title> 현꼬맹의 소소한 이야기 </title> </head> <body> <!-- 이것은 주석을 표시하는 기호입니다. --> <h1> 현꼬맹의 기본적인 html 이야기 </h1> <p> 지금부터 이제 막 html을 시작한 현꼬맹의 html 이야기를 펼쳐보겠습니다. 많은 분들에게 도움이 될까 모르겠네요. 전 제 공부용이므로.. 태클은 사양합니다. 그럼 잘 부탁 드립니다.</p> <h2> 현꼬맹이 공부하고 있는 책 </h2> <p> 제가 공부하고 참고하는 책은 <em> ‘Head First HTML and CSS’ </em> 입니다. </p> </body> </html> |
브라우저는 작성한 html을 읽으면서 텍스트 주위에 있는 모든 태그들을 해석합니다!!
여기서 '태그'란?
꺽새 '<, >'사이에 오는 단어나 문자를 말합니다! 태그는 작성한 텍스트의 구조와 의미에 관해 알려주기 때문에
텍스트의 어느 부분이 제목이고 문단인지, 강조해야할 텍스트는 무엇인지 등을 브라우저에게 알려주게 된다죠!
전 멍청이라 캡쳐를 어떻게 하면 잘 나오는지 모르겠네여.....ㅠㅠ
그냥 보이니까 보세요.. 궁금하면 그냥 직접 만들보면 됩니다!!! 그게 젤 실력 향상에 좋은 듯.. ㅋ
위에 있던 코드의 결과화면 되겠습니다!! 각 코드의 줄이 무엇을 의미하는지는.... 뭐 잘하시는 분은 다 알겠죠 ㅋㅋ
하지만 전 처음부터 배우는 사람으로서.. 차근히 기초부터 탄탄히 하고자 합니다 ㅎㅎ
|
<!-- 이것은 주석을 표시하는 기호입니다. --> <html> <!-- html의 시작을 알림 --> <head> <!-- 페이지의 제목 시작 --> <title> <!-- 페이지의 타이틀 이름 --> </head> <!-- 제목의 끝 --> <body> <!-- 페이지의 본문 시작 --> <h1> <!-- 큰 제목 --> <p> <!-- 문단(내용)의 시작 --> </p> <!-- 문단의 끝 --> <h2> <!-- 하위 제목 --> <em> <!-- </em>까지의 텍스트 강조 --> </body> <!-- 본문의 끝 --> </html> <!-- html의 끝을 알림 --> |
위에 있는 태그들은 html을 사용하는데 있어서 아주 간단한 태그들로 개인적으로 한번씩 예제를 만들어 보면서 연습하면
머리속에 쏙쏙 기억에 남는 답니다.. ㅎㅎ 때마침 기말고사때 html기초부분이 시험에 나와서 완전 잘 풀었다죠..캬캬
핵심적인 것들을 다시한번 자세히 보게되면..
|
<html>, </html> : 브라우저에서 파일을 html파일이라고 인식함. <haed>, </head> : 제목은 타이틀과 같은 웹페이지에 관한 정보를 포함함. <title>, </title> : 타이틀은 브라우저 화면의 맨 위에 표시됨. <body>, </body> : 본문을 구성하며 웹 페이지의 모든 내용과 구조를 포함.(브라우저에서 보이는 웹페이지의 주 내용) *html작성 시 제목과 본문을 반드시 분리하여 작성합니다. |
태그에 대해 좀 더 자세히 살펴보면 태그들은 시작태그와 종료태그로 되어 있으며 코드 보면 알겠지만 종료태그는 '/'를 포함하고 있습니다. 시작태그와 종료태그는 한 쌍으로 보시며 될 것 같군요!!!!
예를 들어 살펴보면 <h1>처럼 생긴 것이 제목의 시작이 되는 시작태그 입니다. </h1>은 제목이 끝나는 종료태그가 되겠죠??
종료태그는 콘텐츠의 뒷부분에 위치하고 있으며 콘텐츠는 시작태그와 종료태그 사이에 들어있는 내용을 의미하게 됩니다.
다시 예를 들면, <h1> 현꼬맹의 기본적인 html 이야기 </h1> 파란색이 시작태그와 종료태그가 되고 초록색이 콘텐츠!!!!!
이 세가지를 모두 합쳐서 요소라고 부르게 됩니다. 따라서 요소 = 시작태그 + 콘텐츠(내용) + 종료태그 를 의미하게 됩니다.
여기까지 만들면 기본적인 html작성은 끄읕!!!!!!!!!!! 저렇게만 하면 기본스타일을 가진 웹페이지가 만들어지게 된 것입니다!!ㅎ
근데 막 다른 홈페이지 같은 거 보면 이쁘게 꾸며져 있잖아요!?
그게 바로 CSS의 힘이랍니다!! 담번의 요약은 CSS의 간단한 시작을 알릴까 해요 ㅎㅎ
저도 입문이라................................................... 책에도 엄청 간단히 입문을 넣어 놨더라구요 ㅎㅎ
뭐 뒤로 갈수록 CSS에 대해서도 더 자세히 배우게 되겠지만..
제가 완벽 이해하는 날까지.... ㅋㅋㅋㅋㅋ 여기에 올릴 일은 없겟죠... 그 부분까지 공부나 할 수는 있을까요ㅠㅠ ㅋㅋ
그럼 이만 전.. 잠을 청해야 겠습니당...ㅠㅠㅋ ㅋㅋㅋ
'공부 > html&css' 카테고리의 다른 글
| CSS의 기초!! 완전 쌩 기초!!! (2) | 2014.06.25 |
|---|---|
| HTML 시작하기전에!! (0) | 2014.06.04 |
