티스토리를 운영하시는 분들이라면 기본적으로 html, CSS, 스크립트 사용이 가능하다는 걸 아실 겁니다. 필자는 정말 HTML에 관해서는 쌩초보이기 때문에 다른 전문가 분들의 포스팅을 보고 따라하거나 계속 실험을 해가면서 페이지를 꾸며갔습니다. 그러나 궁금한 점을 해결하기 위해서는 많은 시간을 허비해야 하기 때문에. 그 수고로움을 덜고자 HTML + CSS를 기초부터 배워보려 합니다.
2019년도에는 초등학생도 코딩 교육이 의무화가 되었다고 하는데. 시대의 흐름에 뒤쳐질 수 없으므로 필자도 열심히 배워보고 합니다! 하나라도 더 배우면 좋으니까요
제가 적는 html 포스팅은 그동안 배워왔던 이론들을 정리하면서 복습하는 취지의 포스팅 이므로 저와 같이 초보의 길을 걸으시는 분들과 공유한다는 생각으로 열심히 작성해보려고 합니다!
HTML 은 무엇인가?
저와 같은 초보 분들이라면 html이라는 단어를 보시면 단순히 인터넷을 여는 파일? 정도로 알고 계실 겁니다. 그 의미가 맞기도 하고요 단순하게 풀이하자면 엑셀 프로그램 확장자가 .xlsx 파일로 저장되고 한글 프로그램 확장자가 .hwp로 저장 되듯이 웹 사이트 문서도 웹 형식에 맞춰진 .html 혹은 .htm으로 확장자를 붙여 웹 브라우저가 실행되게 만드는 것이죠!
그러면! 더욱 쉽게 html 파일을 편집하는 것은? 웹 편집기(web editior)
웹 문서를 보는 프로그램은? 웹 브라우저(web browser) 입니다!
여기서! 웹 브라우저는 모두 알고 계신 크롬, 파이어폭스, 인터넷 익스플로러 같은 프로그램을 말합니다!
그러면 HTML이런 단어는 정확하게 무슨 뜻일까요? H(hyper) T(Text) M(Markup) L(Language) 해석 하자면 하이퍼 텍스트를 마크업하는 언어랍니다. 좀 더 세부적으로 따지고 보면 하이퍼텍스트(웹사이트에서 링크를 클릭 하면 다른 문서 혹은 사이트로 이동 하는 기능), 마크업(태그를 사용해서 제목이나 위치 사진 등의 위치를 표시하는 것)입니다. 이 여러가지를 간결하게 표현하면 웹 문서를 만드는 언어가 HTML이라는 겁니다! (가장 중요)
가장 기본 적으로 HTML은 시작 태그 <......> 가 있으면 종료 태그 </......>가 있어야 태그(Tag)가 제 기능을 수행 할 수 있습니다. 가장 기본적인 구조로는 <html> <head> <title> <body> 태그가 있습니다.
만약 다른 분들이 만드신 페이지가 궁금하시다면 F12를 누르거나 아무 페이지에서 좌 클릭 하신 후 페이지 소스 보기를 누르시면 문서 파일이 나옵니다.
저는 제가 사용하는 티스토리를 눌러봤는데.. 소스 내용들이 정말 많습니다.
웹프로그래머 분들이 대단하다는 걸 다시 한번 깨닫습니다. 저 빼곡한 내용들을 배열하고 정리하고 위치를 전부 찾아서 내용을 기입하신다니..놀랍습니다. 저도 열심히 배워 웹 페이지 하나는 자유롭게 만들 수 있었으면 좋겠습니다.
▲(왼쪽) 웹 브라우저 이미지 / 페이지 소스 HTML (오른쪽)▲
HTML5는 무엇인가?
html을 검색하시다 보면 html5라는 단어를 함께 보실 수 있는데요. 웹 표준 기술이라고 불리기도 합니다! 이 웹 표준 기술은 다양한 웹 브라우저(크롬, 사파이어, 익스플로러 등)에서 구현될 수 있도록 사이트를 만들 때 지켜야 하는 약속들을 정리하셨다고 보면 됩니다.
html에 대한 내용들은 워낙 많기에 오늘은 가장 기본적인 html 정의 와 기본 구조만 정리하고! 다음 포스팅에서는 html 기본 활용과 웹 편집기에 대한 부분들을 다루도록 하겠습니다!
'SELF:생활리뷰노트 > IT' 카테고리의 다른 글
| 사라진 티스토리 html, CSS 편집 기능 메뉴 찾기! (2) | 2018.02.12 |
|---|---|
| html5와 css3를 배우는 이유와 활용 방법! (0) | 2018.02.07 |
| 크롬 브라우저 회색화면 오류 해결하는 방법! (0) | 2018.02.01 |
| 윈도우10 사진 미리보기 안됨! 이미지 오류 해결하기 (18) | 2017.12.19 |
| JJC MC SERIES SD 메모리카드 보관케이스 구입! 가성비 굿! (0) | 2017.11.23 |