■비전문가의 궁금한 티스토리 꾸미기
안녕하세요 작은턱수염 입니다.
티스토리 블로그를 시작하면서 어떤 주제로 어떤 양식으로 글을 써야 하고 어떻게 하면 읽는 분들이 편하게 읽을 수 있을지 고민을 많이 했습니다. 아직 블로그를 시작한 지 얼마 되지 않았지만 처음 올린 9~10개 포스팅 이후에 글 양식을 조금 변경을 하였습니다. ^^: 처음에는 모바일 화면에 맞춰 가운데 정렬로 줄 바꿈으로 계속 글을 써내려 갔는데요 읽기 쉽고 보기 편했으면 하는 의도와는 다르게 PC 화면에서는 산만해 보인다는 생각이 들었습니다.
글을 잘 쓰지 못하면 읽기 쉽도록 꾸며보자라고 생각하고 검색해보니 HTML, CSS을 어느 정도 할 줄 알아야 도움이 된다고 하는데 사실 전혀 알지 못하는 부분이라 저같이 HTML, CSS가 무엇인지 전혀 모르는 분들을 위해 하나씩 공부하면서 공유해볼까 합니다^^
※저는 전문가가 아니기 때문에 검색해보고 관련된 책을 읽고 공부한 내용을 포스팅하기 때문에 어리 하고 어설플 수 있습니다^^
1. HTML, CSS 뜻은?
-. HTML은 "Hypertext Markup Language"의 약자로 로 우리가 흔히 쓰는 www(world wide web)시작하는 웹페이지를 만들 때 사용하는 웹 언어라고 합니다.
-. CSS는 "Cascading style sheets"의 약자로 복잡한 HTML 언어에서 수정하지 않고 스타일 시트를 이용해 글자의 글꼴이나 크기 색상 줄 간격, 배경 색상 등 만을 자유롭게 선택하고 간편하게 수정할 수 있다고 합니다.
간단히 생각해보면 웹페이지의 큰 형태를 이루는 것은 HTML이고 글의 스타일을 가지고 노는 건 CSS라고 생각하면 될 것 같습니다.
저도 처음 공부하는 영역이라 이번에는 HTML 구조부터 알아보도록 하겠습니다.
2. HTML 구조
우선 HTML은 어떤 구조인지 알아보겠습니다. 블로그를 처음에 시작하고 검색등록을 하게 되면 <HEAD>와</HEAD> 사이에 어떤 코드(HTML 언어)를 넣어서 사이트를 등록하라고 하는데요 하라는 데로 하면 되지만 왜 그런지 구조를 알아보도록 하겠습니다.
-
<!doctype html> : 웹 브라우저가 이 문서가 어떤 언어로 작성되어있는지 알게 하는 부분입니다. 이 문서는 HTML5로 작성되어있어!
-
<html>, </html>: html 문서의 시작<html>과 문서의 끝</hrml>을 의미합니다.
-
<head>, </head>: 화면에 보이지는 않지만 웹브라우저의 제목이나, 한글 문자셋(meta), CSS, 자바스크립 등 필요한 내용이 삽입되게 됩니다.
-
<meta charset='utf-8'> : <meta>는 문서는 포괄적인 내용을 기재합니다. 예를 들어 키워드, 작성자, 사용할 문자 셋 등이 있고 <meta charset='utf-8'>은 utf-8이라는 문자 셋을 사용한다는 뜻입니다.
-
<title>, </title>: 캡처 화면을 보시는 것처럼 왼쪽 위에 브라우저에 나타나지는 웹 페이지 이름입니다.
-
<body>, </body> : 웹 브라우저 메인 화면에 나타나는 글, 사진, 영상 등이 <body>, </body> 사이에 들어가게 됩니다.
이번 포스팅에서는 HTML과 CSS가 무엇인지 알아보고 HTML의 구조는 무엇인지 아주 한번 알아보았습니다. 고수분들은 당연히 아는내용이시겠지만 이번 내용만으로도 저한테는 상당히 어려운 내용들이네요^^; 그래도 글쓰기 꾸미기를 하려면 CSS를 건드려야 하고 HTML의 구조가 어떤지 조금이라도 알게 된것같아서 뿌듯합니다. 다음 포스팅에서는 티스토리 블로그 글작성시 CSS를 어떻게 활용하는지 알아보도록 하겠습니다.
댓글