06. HTML 태그(Tag) 종류 및 성격

이 글에서는 HTML 태그를 직접 사용해 보면서 태그의 종류와 성격에 대해 알아 보겠습니다. HTML 개념에 대한 사전 이해가 필요하니 처음 보시는 분들은 앞 글들을 참고해 주시기 바랍니다. See the Pen HTML Tag Sample by Andy Jung (@Samchogo) on CodePen. Display 속성 위 예제에서 가장 기본적이면서 자주 사용되는 HTML 태그 몇개를 사용했습니다. HTML 태그에는 중요한 속성 하나가 있습니다. 바로 '영역'과 '배치'에 관련된 'Display' 속성 입니다.HTML을 제대로 이해하거나 작업을 하려면 이 속성은 반드시 이해해야 하는 속성입니다. display:block 속성은 별도로 넓이를 지정하지 않아도...

05. HTML과 JavaScript

개발자가 아니더라도 자바스크립트(JavaScript)라는 말은 무수히 들어 보았을 것입니다. 내용을 잘 모를 경우 Java라는 개발 언어와 관련 있을 것으로 생각하지만 사실 Java와는 직접적인 관련이 없습니다. 자바스크립트이 이름은 모카(Mocha)로 시작하여 중간에 라이브스크립트(LiveScript)였다가 최종적으로 자바스크립트가 되었습니다. 단지 Java와는 이름이 유사할 뿐입니다. 자바스크립트는 원래 브라우저 내에서 HTML과 함께 사용하는 클라이언트 언어입니다. 비교적 최근에 node.js의 등장으로 서버사이드 언어로 확장 되었지만, 주된 사용 용도는 HTML 문서를 보다 동적으로 만들거나 사용자 인터페이서에 기능을 추가할 때 사용되는 언어입니다. 현대의 웹사이트 구현에 있어서 JavaScript는 필수 요소가 되었습니다. 앞 글들에서...

04. HTML과 CSS 이해하기

앞 글에서 HTML 태그는 Style 속성을 갖는다고 설명했습니다. 이 Style 속성에는 수많은 세부 속성들이 존재 합니다. 단순히 색깔이나 크기 뿐만 아니라 공간, 배치 등으로 확장하면 속성 값이 무수히 많아지게 되기 때문입니다. <p style="color:white;background-color:black;width:200px;height:100px;border:1px solid red"> 매우 많은 속성 값이 존재 합니다. </p> 예제에서 P 태그에 많은 Style이 추가 되었습니다. Style 속성 내에 규정되는 실제 style 관련 내용들을 CSS라고 이해하면 됩니다. Style 속성 = CSS CSS는 Cascading Style Sheets 의 약자인데, 여기서 'Cascading' 이라는 말은 '단계적, 단층적'의 의미를 지닙니다. 실제 HTML 문서를 만들어...

03. HTML Tag 이해하기

앞선 글들에서 HTML 문서의 전반적인 구조와 구성요소에 대해 이해가 되었다는 가정 하에, 태그라는 것에 대해 한걸음 더 들어가 보도록 하겠습니다. 2,000년대 초반 인터넷 커뮤니티 및 게시판이 유행할 때 포토샵 만큼이나 HTML 태그가 대중화 된 적이 있었습니다. 게시물 작성 시 제목을 움직이게 한다든지, 제목의 색깔을 바꾸기 위해 간단한 태그들을 많이 사용 했었습니다. 지금은 그러한 태그 사용을 못하도록 제약이 되고 있지만, 태그를 이해하는 좋은 사례라고 볼 수있습니다. <strong>제목</strong> 지금은 권장되지 않는 태그이지만 인터넷 초창기에 비 개발자도 이러한 태그 정도는 많이 사용하곤 했습니다....

02. HTML 문서의 구조

HTML 문서의 구조를 단순하게 구분하면 실제로 문서에 보여지는 부분과 각종 부가정보 부분으로 나눌 수 있습니다. <html> <head> <!-- head 영역은 문서에 대한 부가적인 정보 또는 필요한 관련 파일들이 인클루드 되는 영역입니다. --> </head> <body> <!-- 화면에 표시되는 내용은 모두 body 영역에 기재됩니다. --> </body> </html> 1. Head 영역 Head 영역의 내용은 실제로 보여지는 부분은 아니지만, 문서의 성격과 내용 표시에 필요한 요소들을 정의하기 때문에 상당히 중요한 부분입니다. 예를 들어 브라우저 상단의 타이틀바에 표시되는 웹 페이지의 제목 또는 아이콘의 경우는 화면에 보이는...

01. HTML 시작하기

HTML은 필수! 전세계 사람들이 매일 접하는 것이 바로 HTML입니다. 웹사이트(페이지)를 구성하는 기본 언어가 바로 HTML이기 때문입니다. 그리고, 개발자 뿐만 아니라 기획자, 마케터까지도 기본적인 HTML은 알고 있어야 업무가 잘 진행될 정도로 HTML은 인터넷 관련 업종의 필수적이면서 기본적인 개념이 되어 있습니다. 또한 웹 개발에 필요한 다양한 언어들을 공부할때 항상 HTML에 대한 기본적인 지식은 가지고 있어야한다는 전제 조건이 붙습니다.실제로 웹사이트의 프로세스를 이해하거나 공부할 때 알아야 하는 개념의 순서 상 항상 HTML은 첫번째 입니다. HTML -> CSS -> JavaScript -> Server Side (PHP, JSP,...