HTML/CSS 첫 포스팅을 시작하며...
블로그스팟 블로그를 처음 시작하면서, HTML과 CSS를 모르면 도저히 안되겠다는 생각이 자꾸 들어서, 더도말고 덜도말고 딱 '최소한의 기본소양만 갖추자!' 라는 목표로 본 기초 HTML/CSS 포스팅을 시작합니다.
비전공자로서 혼자 독학으로 공부하는 처지라, 전문적이고 깊은 내용은 없습니다.
여기저기 인터넷 검색과 책을 통해 혼자 공부한 내용을 따로 최대한 쉽게 그림으로 정리하는 수준이며, 나중에 필요할 때 다시 꺼내보는 용도의 수첩, 메모장으로 사용할 예정입니다. (본인 혼자 볼 목적!)
물론 HTML, CSS 몰라도 다 알아서 해주는 네이버 블로그나, 절반만 알아서 해주는 티스토리 할 때가 좋았지만, 블로그스팟에 어느 정도 익숙해진 요즘, 블로그에 HTML/CSS 코드 하나씩 추가할 때마다 벌어지는 그 무한한 확장성과 유연함에 놀라 자빠지고 있습니다. 새로운 지식을 알게 됐다는 짜릿한 쾌감도 들고요. (아~ 이게 이렇게 되는구나!!)
네이버의 폐쇄성과 티스토리의 불안정에 실망해, 이곳 구글 블로거에 새 둥지를 트고 양다리를 걸치고 있지만, 어느 정도 HTML과 CSS의 기본기만 갖춘다면 기존 블로그들과 비교할 수 없는 한층 더 발전된 블로그를 만들 수 있을 것으로 기대합니다.
일단 썰은 여기까지..
〓
HTML은 'HyperText Markup Language'의 약자입니다.
결국은 일종의 '언어'라는 뜻이죠.
CSS는 'Cascading Style Sheet'의 약자입니다.
'style'이라는 단어가 들어가는 것을 보니, 뭔가 시각적으로 보여지는 '멋'에 대한 내용인 것 같네요.
제가 책을 보고 나름대로 파악한 'HTML의 기본구조'를 아래와 같이 이미지 개념도로 그려보았습니다.
 |
| HTML 기본구조 개념도 |
HTML 소스 코드의 맨 처음에는 '<!DOCTYPE html>'를 통해 현재 문서에서 사용하는 HTML 버전을 정의합니다. 보라색 박스 부분입니다. 'HTML5'를 기준으로 작성된 것을 뜻합니다. 일종의 선언문이죠.
과거 1.0부터 계속 버전업이 되면서 지금의 HTML 5까지 오게되었는데, 뭐 역사까지는 알 필요가 없을 것 같고요.
위의 이미지에서 가장 큰 노란색 박스가 보이죠? <html>과 </html>은 각각 HTML 문서의 시작과 끝을 의미합니다. 큰 컨테이너 박스와 같네요.
그 큰 <html> 박스안에 대가리와 몸통이 들어가는데, 대가리는 <head>, 몸통은 <body>라는 태그로 각각 묶어 줍니다. 물론 각각의 마지막에는 </head>와 </body>로 경계를 만들어 줍니다. 항상 밑이 막힌 항아리를 만들어 주는 것이죠. 경계가 절대로 겹치면 안됩니다.
<head>안의 <meta charset='utf-8'>은 'utf-8'이라는 문자셋을 사용할 거라고 웹 브라우저에 알리는 역할을 합니다. 이게 잘못 설정되면 한글을 제대로 인식하지 못해서 글자가 깨질수도 있다고 그러네요.
그리고, 웹 페이지의 글꼴과 색상, 크기 등을 지정하고 배경 색상, 배경 이미지를 삽입하고 글자나 이미지 등의 요소를 배치하여 아름답게(?) 꾸며주는 역할을 하는 'CSS' 코드는 바로 대가리 <head> 박스안에 들어가게 됩니다. CSS는 <style>과 </style>로 앞뒤를 묶어줍니다. 사람들이 보통 미용실에 가서 파마나 커트 등 머리(head)를 꾸미는 것과 같이, 바로 그 꾸밈 역할을 하는 CSS 코드는 <head> 박스에 들어가는 것이죠.
HTML의 대략적인 기본구조는 이정도에서 마무리를 합니다.
실제 제 블로그의 전체 HTML 소스 코드를 보면 3000줄 가까이 되는데, 이제 최소 Head, Body, CSS의 위치 정도는 구분 할 수 있게 되었네요.
인터넷의 정보를 토대로 블로그스팟에 이런저런 코드를 추가하다보면, '<head> 바로 밑에 추가해라', '</body> 위에 붙여 넣어라'는 등의 안내가 많은데 이제 그 의미를 어느정도 파악할 수 있을 것 같습니다. :)
⚠
본 콘텐츠의 저작권은 「꿈:틀, In Space」에 있습니다.
아이디어 도용, 무단복제와 인용을 금합니다.
댓글 없음:
댓글 쓰기