홈페이지 제작 기초 (문서의 구조)
HTML은 홈페이지 제작, 반응형 웹 제작을 할 수있습니다.
Javascript와 JQuery를 이용하지 않아도 꽤 멋있는 홈페이지를 만드는 것이 가능합니다.
HTML은 홈페이지 제작에 비유하자면 뼈대와 같고, CSS는 살점 Javascript와 JQuery는 옷과 장식 정도로 볼 수있을까요?
HTML의 작성은 많은 분들께서 드림 위버나 기타 다른 프로그램을 생각하시겠지만,
드림 위버와 같은 프로그램은 굳이 사용하지 않아도 될 불필요한 코드들도 같이 작성되는 경우가 많습니다.
그렇다고 메모장으로 작성하기엔 너무 힘들지요.
그래서 무료 이용이 가능한, 노트 패드를 사용합니다.
npp.6.7.9.2.Installer.exe
노트패드 설치는 간단합니다.:D
새 화면에서 확장자를 HTML로 저장을 한번하고 하시면, 더욱 편리합니다.
HTML은 기본적으로 태그로 이루어져 있습니다.
태그는 꺽쇠 괄호안에 명령어가 들어가있는 형태를 말합니다.
태그에서는 기본적으로 여는 태그<>와 닫는태그</>가 있습니다.
반드시 닫는 태그가 존재하는 것은 아니지만, 있는 것은 정황히 작성해 주어야 합니다.
HTML의 기본 구성입니다.
위에서 설명해 드린대로 여는태그 와 닫는 태그가 있고, 닫는 태그가 따로 없는 태그도 있습니다.
<html>은 문서의 시작과 끝을 알려줍니다.
그리고 앞에 명시된 <!doctype ...>은 지금 사용하고 있는 이 문서는 HTML5 언어로 작석된 문서는 뜻입니다.
만약 이게 명시가 안되있는 상태에서 되면, 가끔 재대로 실행되지 않는 경우도 간간히 있습니다.
문서의 구성에는 크게 'head'와 'body'가 있습니다.
head안에는 웹 문서에서 사용하는 언어/문서 제목/ 키워드/제작자 등 여러가지 문서와 관련된 정보들을 나열 합니다.
안쪽에 보면 밑줄친 부분과 style보입니다.
먼저 밑줄친 <meta charset = "utf-8">은 인코딩 작성방법을 'utf-8'로 하겠다는 의미인데,
utf-8이 언어를 많이 호환하고 었어서, 실행시 대부분의 언어가 깨지지 않는다고 합니다.
거의 항상 기본적으로 하는 편이여서 기본적으로 저장해 두고 쓰면 편리 합니다.
기초를 배울적엔 style시트(CSS)를 같은 페이지에 작성해 주는 경우가 많아
기본적으로 위와 같이 저장해 두고 쓰게 되면 많이 유용합니다.
body는 웹 브라우져에 표시될 화면 내용들을 작성합니다.
간단하게 한가지 예제를 보여 드릴까합니다.
위 형식에서 없었던 <head>에 <title>을 주었습니다.
그리고, <body>에는 <p>태그로 문서를 작성해 주었습니다.
스타일 시트는 따로 주지 않았지만, 문장이 찍힙니다.
결과 값입니다.
<title>은 위쪽 바에 이름을 생성해줍니다.
그리고, <p>태그로 페이지에 문장이 찍혔습니다.
추가 사용된 태그입니다.:D
위에서 설명드리는걸 잊었는데, 보통 HTML5는 기존 익스플러에서 지원이 되지 않는 태그가 꽤 있어서,
확인 할 때에는 크롬으로 확인하는 쪽이 훨씬 용이 합니다.:D
'공부 > 홈페이지' 카테고리의 다른 글
| HTML 목록 만들기 (0) | 2015.11.28 |
|---|---|
| <strong> & <b> , <em> & <i> 차이점 (0) | 2015.11.12 |
| 형광펜효과 인라인요소 + 블록요소 알아보자 (0) | 2015.11.10 |
| HTML 이미지 삽입 및 링크 걸기 (2) | 2015.11.09 |
| HTML기초 문장 효과 주기 (0) | 2015.11.05 |