목차
- HTML CSS 이해하여야 하는 이유
- HTML 정의
- 블로그 위한 HTML CSS
- HTML 이해전 알아야할 상식
- HTML 요소구조
- HTML 작업 위한 프로그램 설치
HTML CSS 이해하여야 하는 이유
HTML과 CSS를 배우기 위해서 기초강의를 따라가 보겠습니다.
우선 블로그를 위한 HTML, CSS의 기본적인 개념만 간단하게 정리해 보겠습니다.
우선 이 글을 쓰게 되는 배경에 대해서 간단히 말씀드리겠습니다.
우리가 기본적으로 블로그를 만들어 가다 보면 , 결국에는 필요성이 생기는 것이 몇 가지 있는데
그중의 하나가 HTML에 대한 기본적인 것들과 CSS , 그리고 파이썬 프로그램에 대한 니즈가
생기게 마련입니다.
물론 워드프레스 또한 마찬가지인데요, 결국에는 그쪽으로 이전을 하려는 마음이 생기기는
합니다.
이에 따라서 한번에 다 해낼 수는 없으니, 시간을 가지고 천천히 공부해 나가면서 , 블로그 운영과
실행에 도움이 될만한 것들을 하나씩 배워 나가면 크게 성장할 수 있는 밑바탕이 되지 않을까
생각합니다.
물론 전공이 컴퓨터 쪽이시거나 , 프로그래머 출신이나 그쪽으로 일을 하고 계시는 분들은 어렵지
않게 이러한 밑바탕을 가지고 블로그 운영과 확장에 상당한 속도와 안착을 하실 수 있으리라는
것은 말할 필요도 없을 것입니다.
이 글은 제 스스로가 이 분야에 대한 문외한으로 , 걸음마부터 하나씩 정리해 본다는 마음으로
적는 글이니 , 이제 막 블로그를 제작하시거나, 비전공자, 분야가 다르신 분들, 나이 많으신
분들은 하나씩 보시면서 함께 해 나가 보시는 것이 어떤지 추천드립니다.
HTML 정의
HTML은 Hypertext Markup Language라고 합니다.
이는 프로그래밍 언어는 아니고 , 일반적으로 인터넷 화면 , 웹페이지들이 어떻게 구조화
되어있는지 브라이 주려부터 알 수 있게 하는 마크업 언어로 알려져 있습니다.
마크업 언어는 태그 등을 이용, 문서나 데이터 구조를 표기하는 규칙을 정의하는 것입니다.
쉽게 얘기하자면 우리가 책에다가 밑줄을 치거나 펜으로 필기를 하는 행위가 일종의 마크업
으로 보는 것인데요 , 제목은 중앙으로 배열하게 하고 , 글자에 고딕으로 두껍게 만들어지게
한다든지 , 누가 언제 보더라도 동일하게 모양을 나타내 주는 것을 마크업이라고 할 수 있습니다.
가장 대표적이고 많이 사용되는 마크업 언어의 종류로 HTML과 마크다운 같은 것을 발들 수 있습니다
블로그를 위한 HTML과 CSS
대부분의 문장에 대한 표현은 HTML의 문장에 대한 마크업으로 표현하면 됩니다.
추가적으로 디자인적 요소를 가미하려면 , 예를 들어 색깔에 대한 지정이나, 간격, 배치하는 방법,
배경 색상, 포인트 크기 등을 조정하고 스타일링하면서 완성도를 높여주는 것은 CSS에서 담당을
하게 됩니다.
CSS는 Cascading Style Sheets의 의미입니다.
앞서 설명드린 대로 레이아웃 , 디자인 요소에 대한 정의로 자바스크립트와 함께 내용이나 디자인
에 대한 동적 처리도 가능하다고 합니다.
결국 티스토리 같은 어느 정도 편집이 가능한 블로그를 운영하시는 경우에는 기본적인 HTML
, 그리고 CSS를 수정함을 통해서 조금 더 구글 최적화 SEO를 어느정도 반영함과 동시에 ,
블로그에 접근하시는 모든 분들을 위한 깔끔하고 , 보기 편한 나만의 블로그를 만들어가는데
많은 도움이 될 것으로 예상됩니다.
HTML과 CSS 이해하기 전 알아야할
우선 'www. ~'에 대해서 무엇인지 잘 아시는 가요? 잘 아시는 분들도 계시겠지만, 잘 모르시는
분들을 위해 간략히 컴퓨터와 인터넷 환경 관련된 이야기를 해보겠습니다.
'www'는 월드 와이드 웹이라고 합니다, world wide web으로 정보를 공유하고 , 접근 , 셰어
할 수 있도록 하는 인터넷 서비스를 지칭합니다.
이 웹은 인터넷을 통한 정보를 Hypertext 방식으로 작성된 문서로 정보를 생산해 내고 ,
http프로토콜을 사용 , 컴퓨터 네트워크 망인 인터넷을 통하여 송출하게 됩니다.
정보를 제공하는 영역에서 하드웨어와 소프트웨어로 나눈다면 서버(Server) 컴퓨터와 서버를
움직이는 프로그램 영역인 벡엔드(Backend) 영역으로 나누어집니다.
반면 정보를 소비하는 대중을 클라이언트 (Client)라고 하며 , 여기에는 하드웨어인 컴퓨터와
소프트웨어인 '웹브라우저' , 이러한 클라이언트에서 동작하는 프로그램 영역은 프런트엔드
(Frontend)라고 부릅니다.
이러한 프런트엔드 측의 프로그래밍을 위한 언어로 HTML, JavaScript, CSS 등으로 분류됩니다.
잡설은 배제하고 바로 HTML 강의 1강의 내용을 요약해 보겠습니다.
HTML 요소 구조
요소에 대해 본다면 우선 기본적으로
Opening 태그와 Closing 태그가 문장을 감싸고 있습니다.
가장 기본적인 HTML 구성요소는 '태그'라고 부르며 , < >를 사용하여서 나타내는 것입니다.
이 태그는 기본적으로 <괄호> 롤 사용하게 되지요, 문장의 끝이나 적용하려는 단어의 끝에는
</ xxx >이라는 식으로 , 슬러시 ' / '를 괄호 다음에 넣으셔서 마무리하게 됩니다.
이렇게 여는 태그를 사용하고 , 닫는 태그를 사용하는 것이 , 가장 기본적인 html의 작성 구조
입니다.
참고로, 이런 양끝의 마크업에 의해서 둘러 싸인 문장을 '내용, Content'라고 합니다.
다른 용어로는 태그 바디 (Tag Body)라고도 부릅니다.
이렇게 보신다면 , 나머지 내용은 그냥 언어나 명령을 구성 짓는 명령어? 같은 단어들과
이니셜만 기억하신다면 , 웬만한 기초 웹사이트 화면은 구성하실 수가 있습니다.
그럼 , 이러한 것들을 말로만 들으실 것이 아니라 직접 한번 작업을 해보시는 것이 이해가
더 빠르시겠지요?
HTML을 하기 위한 프로그램
강의를 따라가기 위해서 우선 프로그램을 한번 설치해 보겠습니다.
텍스트 에디터로 'Sublime Text'라고 나타납니다.
구글 검색 화면에서 입력해 보면, 맨 위에 나타나는 'Sublime Text - Text Editing, Done Right'
를 클릭해서 , 홈페이지에서 바로 다운로드가 가능합니다.
웹사이트 화면 , 로그온 화면
설치를 하고 나면 다음과 같은 화면이 나옵니다. 맨 위에 툴들을 살펴보시면 , 여느 프로그램과
다르지 않게 되어 있습니다. '파일'창에서 저장과 저장할 폴더 등을 지정해 주시면 됩니다.
기본적으로 문서를 선언하는 문구가 필요하다고 합니다.
- 이 부분은 나중에 이해가 되면 다시 첨삭하도록 하겠습니다.
이것의 표현은
<! DOCTYPE html>
이 문장은 HTML5 문서를 선언하는 문장이라고 합니다. 웹에게 문서가 HTML5로 작성된다는
것을 알려야 한다는 것인데요 , 이것이 HTML 문서작성의 시작 문장이 됩니다.
그럼, 기본적인 입력방법은 다음 글에 올리겠습니다.
관련내용은 여기를 참고해 보시기 바랍니다.
댓글