안녕하세요? 친절한 전문가입니다.
개발자에 대한 관심이 높아지고 있는 현재.
전공자가 아니라도 코딩을 배우고 싶어하는 사람들의 수는 계속 많아지고 있습니다.
하지만, 무엇부터 공부해야 하는지 모르시는 분들이 많습니다.
이런 분들을 위해 제가 정보를 제공하려고 합니다.
게임에는 스킬트리가 존재하는 것처럼 코딩에도 테크트리라고 하는 것이 있습니다.
그중에서 HTML과 CSS는 가장 먼저 찍어야 하는 코딩기술입니다.
아마 저와 함께 성장하신다면, 우리는 코딩의 기초라고 할 수 있는 HTML과 CSS에 대해서는 어느정도 알고 활용할 수 있는 단계에 도달하실겁니다.
우선 HTML부터 시작해보려고 합니다!!
그럼 함께 열심히 공부해보자구요!
◆ HTML이란?
컴퓨터의 모든 파일에는 각자 고유의 형식이 있습니다.
워드문서의 경우에는 확장자 .docx / 텍스트의 경우에는 확장자 .txt가 대표적입니다.
컴퓨터 파일과 마찬가지로 웹에도 파일형식(확장자)가 있습니다.
그리고 웹에서 사용하는 확장자를 .html이라고 합니다.
하지만, 컴퓨터 문서와 큰 차이가 있습니다.
텍스트 문서나 한글 문서들은 문서를 작성하는 프로그램과 그 내용을 확인하는 프로그램이 같지만, 웹 문서는 문서를 작성하는 프로그램과 그 내용을 확인하는 프로그램이 다르다는 점입니다.
우리는 한글파일을 열고 바로 바로 그 위에 편집까지 할 수 있습니다.
하지만, 네이버검색창을 열고 바로 그 위에 편집할 수는 없습니다.
웹 문서를 작성하는 프로그램을 '웹 편집기(Web editor)'
웹 문서를 보는 프로그램을 '웹 브라우저(Web browser)' 라고 합니다.
이런 기본 정보를 가지고 있으면 HTML이 무엇인지 확실히 이해하실 수 있을겁니다.
HTML은 .html 확장자를 사용하는 웹 브라우저를 편집할 수 있는 언어입니다.
하이퍼텍스트 마크업 랭귀지(HyperText Markup Language)의 줄임말로, 하이퍼텍스트(링크)를 마크업하는 언어라는 뜻입니다.
여기서 하이퍼링크는 다들 많이 아시다시피 링크로 다른 페이지나 문서로 이동하는 것을 말하고,
마크업은 태그라는 것을 이용해 문서에서 어느 부분이 사진인지, 링크인지를 표시해주는 것을 말합니다.
태그라는 것은 생소하지만, 이해하실 필요 없습니다.
그저 정의를 하기 위해 만들어낸 단어일 뿐입니다.
즉, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML이라고 정의할 수 있습니다.
◆ HTML소스를 볼 수 있는 방법
실제로 네이버나 구글 같은 우리에게 익숙한 사이트들은 모두 HTML과 CSS로 이루어져 있습니다.
정말로 그러한지 확인하는 방법은 매우 간단합니다.
원하는 사이트의 빈 공간에 [마우스 우클릭] - [페이지 소스 보기]를 선택해 보거나 [Ctrl + U]를 눌러보세요.
이렇게 해당 사이트의 소스 코드들을 볼 수 있습니다.
지금은 봐도 뭔지 모르는건 지극히 정상입니다. 앞으로 저와 함께 공부하시면 전부 해석하실 수 있을겁니다.
◆ 웹 표준이란?
HTML이 무엇인지 알았다면, 다음 단계는 HTML의 표준에 관해 아는 것입니다.
화폐단위로 우리나라는 원을. 미국은 달러를 사용합니다.
그래서 미국으로 여행을 떠나게 된다면 달러로 환전해서 가는 것이 대다수입니다.
웹 표준도 이와 비슷한 개념입니다.
크롬이라는 국가에서는 HTML을. 마이크로소프트 엣지라는 국가에서는 HTML5를 사용한다면 각 국가로 갈 때마다 HTML과 HTML5를 서로 바꿔서 다시 만들어야 할 것입니다.
하나의 사이트를 여러 브라우저(국가)에 개시하기 위해 여러가지 언어로 다시 만들어야한다니...
정말 비효율적인 방법입니다.
웹 표준은 이를 해결하기 위해 웹 사이트를 만들 때 지켜야 하는 약속들을 정리한 것입니다.
그리고 현재 웹 표준은 바로 HTML5입니다.
가장 최근에 약속한 웹 표준은 HTML5이라는 말이죠!
◆ 왜 HTML5와 CSS인가?
이번 포스팅의 마지막 내용입니다.
왜 HTML5와 CSS를 공부해야 하는 것일까요?
공부하는 이유를 알아야 끝까지 해낼 수 있습니다.
저는 HTML5와 CSS를 공부해야 하는 이유를 다음과 같이 정리해보았습니다.
1. 최신 웹 표준에 맞는 웹 사이트를 제작할 수 있다.
최근 코딩 추세는 PC나 스마트폰, 가전기기, 자동차 등 모든 기기에서 사용할 수 있는 웹을 만드는 것입니다.
즉, 한 번 코딩한 사이트를 어느 국가에서든 사용할 수 있는 웹이 인기라는 말입니다.
이럴때 필요한 것이 HTML5입니다.
HTML5로 한 번 웹 문서를 작성하면 모든 기기에서 웹 문서 내용을 정확하게 파악할 수 있습니다.
여기에 CSS까지 더할 경우, 각 기기에 맞게 자동으로 레이아웃이 바뀌는 '반응형 웹 디자인'까지 만들 수 있습니다.
2. 화면을 디자인하기 위한 기초이다.
웹을 개발할 때는 프론트엔드와 백엔드로 나누어 개발을 진행합니다.
프론트엔드는 우리가 눈으로 보는 부분을 말하고, 백엔드는 보이지 않는 곳에서 사이트를 유지하기 위한 부분을 말합니다.
로그인 창을 보여주는 디자인을 프론트엔드가 담당하고,
로그인을 하는 과정을 설계하는 것을 백엔드가 담당합니다.
이 둘 중 하나라도 없으면, 사이트는 만들어지기 어렵습니다.
그리고 이런 프론트엔드의 첫 시작이 바로 HTML5과 CSS입니다.
3. 웹 사이트와 블로그를 수정하기 쉽다.
이게 우리가 HTML5와 CSS를 배우는 가장 큰 이유입니다.
티스토리 블로그나 워드프레스 블로그를 개설했는데, HTML5에 대해 전혀 무지할 경우 우리가 원하는 대로 블로그가 꾸며지지 않고 오히려 망가지는 경험을 많이 하셨을 것입니다.
CSS의 기초 문법을 공부하고 알고 계신다면, 블로그의 HTML수정을 할 때 의도한 대로 수정을 하실 수 있을것입니다.
'코딩' 카테고리의 다른 글
| [컴퓨터언어] 텍스트의 일부를 처리하는 태그 16가지 배우기 (HTML공부하기!) - 5 (0) | 2021.06.17 |
|---|---|
| [컴퓨터언어] 텍스트를 하나로 묶어서 처리하는 태그 (HTML공부하기!) - 4 (0) | 2021.06.16 |
| [컴퓨터언어] HTML의 기본 구조 (HTML공부하기!) - 3 (0) | 2021.06.15 |
| [컴퓨터언어] 웹 브라우저와 웹 편집기 (HTML공부하기!) - 2 (0) | 2021.06.14 |
댓글