반응형


지난 번 포스팅에서 html 정의에 이어 오늘은 html5와 css3라는 기술을 왜 배워야 하는지 그리고 어디에 어떻게 활용할 수 있는지 알아보도록 하겠습니다. 앞서 html5와 css3는 최신 기술(업데이트 버전)로 생각하시면 됩니다.



html5와 css3를 배워야 하는 이유는 무엇일까?


필자는 최근 회사에서 웹 디자인 관련 기획을 짜던 도중 스마트폰, 태블릿, 웹사이트에 따라 통일성을 가지기 위해 많은 고민들을 해야 한다는 것을 알게 되었습니다. 사용자에게 내용을 전달하기 위해서는 여러 기기로 접속을 하든 수 많은 레이아웃이 맞춰야 한다는 것이죠 즉,모든 기기에서 지킬 수 있는 웹 표준 html5이 필요하며 접속 기기에 따라 사이트 레이아웃들이 바뀔 수 있도록하는 css3가 필요합니다.

 

조금 더 쉽게 이야기를 드리자면 이러한 기술은 흔히 "반응형 홈페이지"라고 합니다. 또한 앱 화면을 보여주는 정보들도 html 과 css로 제작하기에 필수적으로 배워야 하는 기술이 되었습니다. 디자이너 분들도 단순 이미지를 제작하는 것 뿐만 아니라 html5와 css3는 기본적으로 활용할 수 있어야 합니다. 필자가 있는 회사에서 웹 개발 업무가 있어 페이지 디자인을 보냈더니 웹 개발자 분들은 디자이너 분들이 html코딩 작업을 안 해 주면 일의 속도가 늦춰진다..기획 의도를 알 수 없다.. 코딩 작업을 해주시지 않으면 페이를 더 받겠다고 했습니다. (잠깐.. 일에 대해 푸념을..)



* 소소한 팁 / 네이티브앱을 아시나요?"

개발자 분께서 이번 모바일 페이지는 앱이 아닌 네이티브앱으로 진행하시죠. 라고 말씀하시는데... 무슨 의미인지 몰라 여쭤봤더니 html5를 이용해서 모바일 운영체제(IOS, 안드로이드)로 각각 모바일용 앱을 만드는 것을 의미합니다.


웹 서비스 업무를 해야 하는 직원이 비워 있어.. 임시로 일을 하고 있지만 모르는 단어가 80% 이상이기에 정말 html공부에 필요성을 간절하게 느낀답니다.




필자의 블로그도 기기에 따라 레이아웃이 달라지는 것을 확인할 수 있습니다. 이렇게 모아두고 보니 고쳐야 할 곳이 여럿 보입니다.



어디에 어떻게 활용 할 수 있을까?


01. 웹 사이트를 쉽게 제작하고 소스를 넣을 수 있다.

예전에 플러그인 설치란 단어를 많이 들어보셨을 겁니다. 어떠한 화면을 보여주거나 효과를 보여주기 위해선 플러그인을 설치해야 그 웹 사이트에서 보여주고자 하는 영상들이나 이미지들이 움직였지만.  이제는 html5와 css3만으로도 인터랙티브한 사이트를 제작 할 수 있습니다. 또한 사이트 내부에 프로그램을 제작하지 않더라도 태그를 이용하여 쉽게 제작 할 수 있기 때문에. 기본적으로 코딩을 배우신다면 홈페이지를 쉽게 제작할 수 있습니다.



▲플러그인 오류 화면▲




02. 티스토리 블로그를 수정하기 쉽습니다!

필자와 같이 티스토리 블로그를 운영하고 계신다면 버튼 이미지, 메인 페이지 컬러 등 겉 모습을 다양하게 꾸미실 수 있습니다. 그렇지만 티스토리 디자인 원작자가 만든 소스를 전부 파악하고 작업해야 하기에 초급자 분들에겐 조금 힘든 부분입니다. 그렇지만 기본적인 코딩만 알아도 글씨 크기나, 구글 애드센스나 배너 위치를 잡을 수 있기에 편리한 건 사실입니다.




▲티스토리는 html편집을 직접 할 수 있습니다▲


반응형
반응형


티스토리를 운영하시는 분들이라면 기본적으로 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 기본 활용과 웹 편집기에 대한 부분들을 다루도록 하겠습니다!






반응형

+ Recent posts