happy cat image

everdevel

우리 모두의 웹 입문, 에버디벨

UI 변경
오늘도 방문해 주셔서 감사합니다.
여러분이 매일 찾아주셔서 하루 5명 오는 사이트에서 1000명이 오는 사이트로 커갈 수 있었습니다.
드디어 2017년 8월 25일 에버디벨 책이 [웹코딩 시작하기]라는 제목으로 정말 출간 합니다.
정말 열심히 최선을 다해 많은 조사를 하며 작성했습니다. ^-^*
에버디벨은 제가 프로그래머가 아닌 시절 만든 사이트지만, [웹코딩 시작하기]는 저의 2년간의 프로그래머 경력을
살려서 꼭 알아야 한다고 생각하는 것들을 최대한 쉽게 설명하여 만들었습니다.
[웹코딩 시작하기]서평 이벤트도 시작했습니다.
[웹코딩 시작하기 서평 이벤트 많은 참여 부탁드립니다. ^-^* 눌러주세요.]

- 2017.8.5 에버디벨 운영자

HTML 시작하기

HTML은 웹개발에 있어 기본으로 알아야 할 언어 입니다.
웹페이지를 구성하는데 기본이자 가장 중요한 역할을 합니다.
웹페이지는 하나의 문서로 볼 수 있습니다.
일반적인 책을 보면 글과 이미지 등으로 구성이되며, 글에는 제목이 있고 문장이 있습니다.
HTML을 사용하면 글의 제목을 구성하고 문장을 구성할 수 있으며, 리스트와 이미지 등도 구성가능 합니다. 웹에서 보는 문서인만큼 비디오 또한 재생이 가능합니다.
그리고 링크를 사용해서 다른 페이지로 훌쩍 이동도 가능합니다.
다음은 HTML의 기본 구조 입니다.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

각 태그는 <태그명>으로 시작하여 </태그명>으로 끝나며 모두 다 그런것은 아닙니다.

<img />나 <br /> 태그등과 같은 단독 태그를 제외 하고는 거의 대부분의 태그들은 위와같은 법칙을 같습니다.

단독 태그는 끝에 /를 붙이고 닫아야 합니다. 예를 들어 <img src="url" /> 와 같이 사용 합니다.

지금은 무슨말인지 잘 모르실수 있습니다. 그냥 넘어 갑니다. ^^

<!DOCTYPE html>

이것은 HTML의 문서 타입을 의미합니다. 그리고 의미는 HTML5를 사용한다는 의미입니다. 5는 버젼을 의미합니다.
지금은 HTML5의 시대이므로 위와 같이 문서타입을 작성합니다.
그리고 title태그는 웹페이지의 제목을 의미합니다. 예를 들어 규동을 만드는 요리에 관한 페이지를 작성한다면 제목을 규동만들기와 같이 작성하면 됩니다.

<title>규동만들기</title>

네이버를 접속해 보시면 브라우저 탭에 NAVER 라는 글씨가 보일것입니다. 이것은 네이버의 웹페이지를 구성하는 프론트엔드 개발자가 다음과 같이 head태그안에 있는 title태그의 내용을 다음과 같이 작성했기 때문입니다.

<title>NAVER</title>

그외에도 문자 인코딩 이라든지 자바스크립트,스타일시트등을 넣는데요 나중에 차차 알아갑시다.
처음부터 이것저것 하면 머리 아파서 금방 포기하게 됩니다. body 태그에는 실질적인 홈페이지에 출력될 내용을 넣습니다.
웹브라우저에 안녕하세요를 출력하고 싶다면 저 body문안에 안녕하세요를 적으면 되는것이죠.^^

<!DOCTYPE html>
<html>
<head>
<title>에버디벨</title>
</head>
<body>
안녕하세요.
</body>
</html>

그럼 이것으로 html소개는 마치고 강좌로 넘어 가도록 하겠습니다.

강좌로 돌아가기