코딩이야기/HTML5 23

HTML5 강좌 3강 - HTML5 레이아웃 잡아보기

HTML5 강좌 3강 - HTML5 레이아웃 잡아보기 지난 강좌에 이어 이번강좌에서는 HTML5를 이용하여 기본적인 레이아웃을 잡아보도록 하겠습니다.레이아웃을 잡아 페이지를 만들다 보니 css 요소가 무지 많이 들어갑니다. 위 붉은색 부분이 바로 css 요소입니다.css는 웹문서의 스타일을 잡아주는.. 그러니까 좀 더 깔끔하고 멋진 페이지로 만들어 주는것 입니다.소스코드를 받아보면 깜짝 놀랄수도 있습니다.하지만 걱정하실 필요 없습니다.css.. 스타일시트는 차근차근 알아가면 됩니다.중간중간 css 관련 요소가 강좌 내용에 나올겁니다.그리고 부족한 부분은 따로 강좌 내용에 넣도록 하겠습니다. 이렇게 레이아웃을 만들어 보았습니다.이왕 이렇게 레이아웃을 만들었으니 태그를 연습하면서 메뉴들을 하나씩 채워보도록 ..

HTML5 강좌 2강 - HTML5 시맨틱웹을 위한 구성요소

HTML5 강좌 2강 - HTML5 시맨틱웹을 위한 구성요소 지난 강좌에 이어 이번강좌에서는 시맨틱웹을 위한 HTML5 새로 추가된 태그에 대해 공부하겠습니다.지난 강좌에 시맨틱웹 태그에 대해 잠깐 언급했는데요.복습하는겸 정리를 하자면 다음과 같습니다. *시맨틱웹을 위한 태그머리말을 나타내는 태그제목과 부제목을 묶는 태그메뉴 부분을 나타내는 태그개별 콘텐츠를 나타내는 태그제목별로 나눌 수 있는 태그좌우측의 사이드바를 나타내는 태그제작자의 정보나 저작권의 정보를 나타내는 태그 위의 내용이 왜 시맨틱웹을 위한 태그일까요?예를 들면 우리는 지난 HTML에서 코딩을 할 경우 다음과 같이 했습니다. 헤더에 들어갈 내용 헤더 부분의 영역을 div라는 박스에 묶어서 사용을 했죠.하지만 시맨틱웹에서는 태그 자체의 의미..

HTML5 강좌 1강 - HTML5 개념 및 기본구조

HTML5 강좌 1강 - HTML5 개념 및 기본구조 지난 강좌에서 HTML 태그에 대해 공부하고 연습을 했습니다.이번 강좌에서는 HTML5에 대해 알아보도록 하죠.이번 강좌 역시 기본적인 개념은 간단히 이해하고, 예제를 테스트 해보면서 HTML5를 공부하도록 하겠습니다. 참고로 이 강좌는 능숙한 개발자들을 위한 강좌가 아닙니다.지극히 웹에 대해 초보적이고 이제 입문하는 분들을 위한 강좌입니다. 먼저 HTML5가 무엇인지, 왜 HTML5를 사용하는지 알아보겠습니다. *HTML5란 무엇인가?HTML5란 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(hypertext markup language)의 최신규격 입니다.HTML5를 사용하면 별도 프로그램을 깔지 않아도 인터넷 브라우저상에서 화려한 ..