qOOp

HTML5 레이아웃(layout) 설정하기 HTML5 본문 작성시에 가장 먼저 설정을 하여야 하는 것이 레이아웃(Layout)이 아닐까 합니다. 즉, 자신이 만들고자 하는 HTML문서의 외형을 어떻게 설정할 것인가 하는 것입니다. 집을 짓는 다고 가정을 하면, 정해진 공간에 방은 몇개, 주방, 욕실 등의 배치를 어떻게 할것이나 하는 것과 비슷하닥 생각을 하시면 됩니다. HTML문서도 동일하게 현재 개발하고자 하는 웹사이트의 주제에 맞는 전체적인 외형을 디자인을 하는 것입니다. 작가가 글을 쓸때도 서론, 본론, 결론 형식으로 글을 쓰는것과 같이 HTML문서에서도 header, body, footer 형식으로 나누는 것이 일반적입니다. header(헤더) 부분에는 웹사이트의 제목, 로고와 메인 메뉴(카테고리..

HTML5 본격적인 시작과 주석달기 지난 시간까지는 HTML > head 부분에 대해서 알아 보았습니다. 보이지는 않지만 중요한 부분이 head 부분이라고 말씀을 드렸습니다. 이제부터 본격적인 HTML인 body 부분을 진행하도록 하겠으며, HTML 보다는 HTML5 문법을 중심으로 하겠습니다. HTML, HTML5는 대소문자를 구분하지 않지만, DOCTYPE를 제외한 태그는 가능한 소문자로 입력을 하는 것이 좋지 않을까 생각합니다.-- 문서명 xxxx.html -- HTML문서 작성시에는 위와 같은 스타일로 먼저 코딩을 한 후 추가해 나가는 것이 용이합니다. 위의 코드는 거의 바뀌지 않는 부분으로 자바스크립트, 스타일시트를 입력하지 않는다고 하여도 에러가 발생하지 않기 때문에 많은 문서를 작성시에는 위..

HTML 헤드 부분의 마지막 자바스크립트와 CSS HTML문서의 헤드(head) 부분에 코딩하는 자바스크립트, CSS가 있습니다. 자바스크립트는 HTML로만은 표현할 수 없는 다양한 액션을 제공합니다. 예를 들어 경고창을 띄운다던지, 레이어를 보기게, 안보이게 한다던지... 그리고 CSS는 쉽게 말씀을 드리면, 보기 좋지 않은 HTML문서를 이쁘게 디자인 할때 사용한다고 생각을 하시면 됩니다. 자바스크립트와 CSS가 반드시 안에 코딩이 되어야 하는 것은 아니지만, 일반적으로는 head 안에 기술이 됩니다. 그리고, 자바스크립트와 CSS는 사용의 강제성은 없으며, 사용을 해도 되며 사용을 하지 않아도 되지만, 어떤 웹페이지라도 자바스크립트와 CSS를 사용하지 않는 웹페이지는 거의 없습니다. 본문 내용 자바..

HTML 헤드 메타태그 종합 name, content...charset 의 중요하다는 것은 지난 시간에 설명을 드렸습니다. 이제 meta tag 의 다른 속성들도 알아보려고 합니다. 메타 태그(meta tag)에는 문자의 인코딩을 설정하는 charset 이외에도 다른 중요한 태그들이 있습니다. 그리고 HTML의 버전과 브라우저, 브라우저 버전에 따라서 사용가능한 태그와 그렇지 못한 태그가 있지만, 최근의 브라우저 등은 메타 태그는 거의 다 지원을 하고 있으므로, 가급적 HTML 문서 작성 전에 코딩을 하기를 권합니다. HTML5 전용 문서의 인코딩을 설정합니다. 일반적으로 처럼 코딩을 하지만, HTML5 버전에서만 사용이 가능하므로, 이전 버전의 경우에는 와 같이 코딩을 하셔야 합니다.charset에 관..

메타태그, 글자가 깨어진다면 Charset를 확인하라HTML 문서 작성시에 에 코딩을 하는 중요한 부분이 있습니다. Meta Tag(메타 태그)입니다. 메타 태그 중에는 description, keywords, author 등도 있지만, 가장 먼저 코딩을 해야 하는 것이 charset 이며, 상당히 중요한 것 중의 하나입니다.메타 태그는 HTML 문서의 head 헤드 부분에 포함이 되어, 문서에 직접적으로 나타나지는 않지만, 해당 문서의 정보를 제공하는 태그입니다. 네이버, 다음, 구글과 같은 검색의 노출을 보다 효과적으로 하기 위해서는 반드시 포함시켜야 하거나, 문서가 어느 나라 언어로 되었는지도 알려줍니다. 물론 메타 태그를 사용하지 않는다고해도 보여지는 화면상에서는 이상이 없지만, 반드시 포함을 시..

DOCTYPE 란 무엇인가?HTML은 , 형식으로 보다 먼저 선언이 됩니다. 그럼, Doctype는 무엇일까요?HTML은 한 종류가 아니라, 여러 종류의 HTML이 있습니다. HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 등입니다. 이러한 유형에 따라서 같은 코딩을 하더라도 html 파일 실행시에 다른 결과 화면으로 나타나며, Doctype 선언했을 경우와 선언하지 않았을 경우, 브라우저에 따라서 다르게 출력이 됩니다. 한국에서는 한때 Doctype을 선언하지 않은 경우도 많았지만, HTML의 각 버전과 HTML5까지 이르면서 Doctype을 선언하는 것이 해당 버전의 올바르게 출력하기 위해 필요해졌습니다. Document Type Definition, DT..

HTML 작성시 가장 중요한 head -> title (헤드, 타이틀)지난번에 말씀을 드린바와 같이 HTML은 html, head, body 로 이루어져 있습니다. 파일을 선언하는 html 에 head 와 body가 포함이 되어서 HTML 파일을 구성하게 됩니다.먼저 head 부분을 설명을 드리겠습니다. head 부분에는 html의 문서의 타이틀(title, 제목)과 메타테그, 스타일시트, 자바스크립트등 실제 html 파일에서는 나타나지 않지만, html 파일을 실행시키거나, 네이버, 구글 검색과 같은 사이트의 로봇이 html 파일의 정보 수집이 가능하도록 파일 정보의 등록이 가능한 부분입니다.실제 html 파일의 실행시에 눈에 보이지 않는다고 소홀하게 생각하는 경우가 많은데, html 파일 작성시에 가..

HTML의 구조, HTML은 html, head, body 로 구성되어있다. HTML은 html, head, body 로 구성이 되어 있습니다. HTML 페이지를 작성시에는 가장 먼저 html, head, body 를 먼저 코딩 후 추가적으로 코딩을 하는 것이 좋습니다. HTML 코딩에 익숙하신 분이라면, 자신이 편한 방법으로 HTML을 코딩하면 되지만, 처음 배우시는 분, 익숙하지 않으신 분이라면, html, head, body 를 먼저 코딩후에 추가적으로 코딩을 하시는 것이 좋습니다.왜냐면, html, head, body 태그가 HTML 문서에서 가장 중요하기 때문이지요. 요즘은 브라우저가 너무 똑똑해서 대충 코딩을 해도 상관이 없지만, 배우는 입장이라면 위와 같이 코딩을 한 후 추가적으로 코딩을 하..

HTML 시작하기 HTML은 웹페이지를 작성하기 위해 드림위버와 같은 위지윅 툴을 사용해도 되지만, 처음 HTML을 접하는 분이라면 툴보다는 직접 코딩을 하시기를 권해드립니다. 직접 코딩을 함으로써, 나중에 응용을 하기가 용이하기 때문입니다. HTML5가 대세인데, 꼭 HTML을 해야하나요?HTML5도 HTML과 기본적인 문법은 동일하며, 최근의 모바일 관련 태그가 추가되고, 이전의 HTML에서 사용되었으나 많이 사용하지 않았던 태그들이 사라졌을뿐, 기본적인 틀은 동일 하다고 생각하시면 됩니다. 기본 HTML을 잘 하시면, HTML5를 배우는 것은 새롭게 추가된 태그만 더 공부하시면 쉽게 가능합니다.먼저 HTML을 코딩하기 위해서는 텍스트 에디터를 실행합니다. 혹시 텍스트 에디터가 준비되지 않은 분이라면..

HTML 이란 Hyper Text Markup Language!웹사이트 (PC버전, 모바일버전) 를 만들기 위해서는 반드시 알아야 하는 웹언어입니다. 하이퍼텍스트 마크업 랭귀지의 약자로서 현재는 HTML5 까지 발전하였습니다. PHP, ASP, JSP, JAVA, C, C+ 등 다른 PC 언어보다는 쉽게 배울수가 있어으며, 특별한 제작툴이 없어도 HTML을 배울수 있다는 것이 강점이 아닐까 생각합니다.HTML을 배우기 위해서는 어떤 준비물이 필요할까요?HTML의 웹사이트를 작성하기 위해서는 드림위버와 같은 위지윅 툴을 사용할 수도 있지만, 툴이 없어도 HTML 웹페이지를 작성을 할 수가 있습니다. 윈도우에 포함되어 있는 메모장 즉, 텍스트 에디터만 있으면, 웹사이트 제작이 가능합니다. 즉, 윈도우만 있으..