이번 시간에는 검색엔진 최적화에 대해 알아보겠습니다.
구글 검색엔진최적화 가이드
감사합니다.
2016년 6월 16일 목요일
2016년 6월 15일 수요일
홈페이지 만들기 제12강
오늘 저희가 살펴볼 태그는 의미론적인 태그들입니다.
의미론적은 semantic입니다. 이것은 여러가지 태그들이 있는데요, 저희는 다 살펴보지는 않고 중요한 것들을 살펴볼 예정입니다.
본문은 영어로 article입니다. 이것은 그냥 본문에 article과 /article을 붙이면 됩니다. 정하기 애매한 것은 section태그를 이용하세요. 링크 모음은 nav 태그를 이용하세요. 그리고 앞 부분은 header, 뒷부분은 footer 태그를 이용하세요.
감사합니다.
의미론적은 semantic입니다. 이것은 여러가지 태그들이 있는데요, 저희는 다 살펴보지는 않고 중요한 것들을 살펴볼 예정입니다.
본문은 영어로 article입니다. 이것은 그냥 본문에 article과 /article을 붙이면 됩니다. 정하기 애매한 것은 section태그를 이용하세요. 링크 모음은 nav 태그를 이용하세요. 그리고 앞 부분은 header, 뒷부분은 footer 태그를 이용하세요.
감사합니다.
2016년 6월 14일 화요일
홈페이지 만들기 제11강
예제를 봅시다.
<html>
<head>
<meta charset="utf-8">
<meta name="discription" content="홈페이지 제작하기 ">
<meta name="keywords" content="홈페이지 제작">
<meta name="author" content="egoing">
<meta http-equiv="refresh" content="30">
</head>
</html>
설명 해 드리겠습니다.
3번째 줄은 저희가 벌써 배웠고, 네번째 줄은 description은 설명이란 뜻이고 설명되는 대상은 홈페이지 제작하기입니다.
5번째 줄은 keywords, 즉 태그들입니다. 태그는 홈페이지 제작입니다. 6번째 줄은 author은 저자라는 뜻이죠? 그러므로 저자는 egoing이라는 뜻이 되겠죠. 7번째 줄은 http-equiv="refresh"라는 뜻은 자동으로 새로고침이 된다는 뜻입니다. 그러므로 30초마다 새로고침이 된다는 뜻이죠.
감사합니다.
<html>
<head>
<meta charset="utf-8">
<meta name="discription" content="홈페이지 제작하기 ">
<meta name="keywords" content="홈페이지 제작">
<meta name="author" content="egoing">
<meta http-equiv="refresh" content="30">
</head>
</html>
설명 해 드리겠습니다.
3번째 줄은 저희가 벌써 배웠고, 네번째 줄은 description은 설명이란 뜻이고 설명되는 대상은 홈페이지 제작하기입니다.
5번째 줄은 keywords, 즉 태그들입니다. 태그는 홈페이지 제작입니다. 6번째 줄은 author은 저자라는 뜻이죠? 그러므로 저자는 egoing이라는 뜻이 되겠죠. 7번째 줄은 http-equiv="refresh"라는 뜻은 자동으로 새로고침이 된다는 뜻입니다. 그러므로 30초마다 새로고침이 된다는 뜻이죠.
감사합니다.
2016년 6월 13일 월요일
홈페이지 만들기 제10강
제가 오늘 소개해 드릴 태그는 쓰지 말라고 소개해 드리는 태그니 쓰지 마세요... 하지만 연습용으로는 쓰셔도 되요. 그리고 이 태그는 개발도구에 없으니 유이하시기 바립니다...
소개할 태그는 font(글꼴)태그입니다. 이 태그는 퇴출됬습니다. 그러므로 쓰면 안 됩니다.
<font color="red" size="8">방가방가</font>
이렇게 쓰면 어떻게 될까요?
말 그대로 사이즈는 8로 나오고 글 색은 빨강색으로 나옵니다. 그리고 글은 당연히 '방가방가'...
이것이 퇴출된 이유는 이 글을 여러번 쓰면 덕지덕지 붙게 되죠? 이렇게 되면 컴퓨터가 혼란스러워져 글이 깨져서 meta charset="utf-8"을 해도 안 되는 경우가 나타납니다. 그래서 이것은 css라는 다른 컴퓨터 언어를 사용하라고 퇴출시킨 것입니다.
감사합니다.
소개할 태그는 font(글꼴)태그입니다. 이 태그는 퇴출됬습니다. 그러므로 쓰면 안 됩니다.
<font color="red" size="8">방가방가</font>
이렇게 쓰면 어떻게 될까요?
말 그대로 사이즈는 8로 나오고 글 색은 빨강색으로 나옵니다. 그리고 글은 당연히 '방가방가'...
이것이 퇴출된 이유는 이 글을 여러번 쓰면 덕지덕지 붙게 되죠? 이렇게 되면 컴퓨터가 혼란스러워져 글이 깨져서 meta charset="utf-8"을 해도 안 되는 경우가 나타납니다. 그래서 이것은 css라는 다른 컴퓨터 언어를 사용하라고 퇴출시킨 것입니다.
감사합니다.
홈페이지 만들기 제9강
오늘 배울 내용은 method와 파일 업로드인데요, 일단 method부터 살펴봅시다.
계속 form태그에 시달려서 지겹죠? 이번 시간이 form태그의 마지막 시간이 될 것 같습니다. Method태그는 나중에 저희가 홈페이지를 만드때 아주 중요한 태그 top3안에 듭니다. Method 태그는 그냥 form태그에 한 칸 띄고 쓰는 것입니다.
Method는 두 개의 것이 있습니다. 우리가 지금까지 해 왔던 form 방식은 url에 텍스트가 표시되죠? 이것이 get방식입니다. 그런데 비밀번호가 url에 노출되면 안 되잖아요? 그래서 method="post"를 해 주는 것을 저는 추천합니다.
다음은 파일 업로드입니다.
그냥 form태그 옆에 enctype=""에 써 넣으면 되시고요, input type은 file로 지정해주세요.
감사합니다.
계속 form태그에 시달려서 지겹죠? 이번 시간이 form태그의 마지막 시간이 될 것 같습니다. Method태그는 나중에 저희가 홈페이지를 만드때 아주 중요한 태그 top3안에 듭니다. Method 태그는 그냥 form태그에 한 칸 띄고 쓰는 것입니다.
Method는 두 개의 것이 있습니다. 우리가 지금까지 해 왔던 form 방식은 url에 텍스트가 표시되죠? 이것이 get방식입니다. 그런데 비밀번호가 url에 노출되면 안 되잖아요? 그래서 method="post"를 해 주는 것을 저는 추천합니다.
다음은 파일 업로드입니다.
그냥 form태그 옆에 enctype=""에 써 넣으면 되시고요, input type은 file로 지정해주세요.
감사합니다.
2016년 6월 9일 목요일
홈페이지 만들기 제8강
예제로 알아봅시다.
<!DOCTYPE html>
<html>
<body>
<form action="htp://localhost/hidden.php">
Id:<input type="text" name="id">
Hidden:<input type="hidden" name="hide" value="me">
</form>
</body>
</html>
이렇게 하면 text의 타입으로 되어있는 것은 화면에 표시되지만, type이 hidden일 때는 표시가 되지 않고 url에는 그냥 hide=me라고 표시되겠죠.
이번엔 label입니다.
레이블은 그냥 사용법과 의미를 말씀드리죠.
Label태그는 설정된 것을 클릭하면 그것에 해당되는 텍스트 상자로 이동하게 됩니다.
사용법은 2가지 법이 있는데요,
Label for="id"
Input id="id"
이러는 방법이 있고요, 두번째 방법은
Input과 글을 label로 둘러싸는 방법도 있습니다.
감사합니다.
<!DOCTYPE html>
<html>
<body>
<form action="htp://localhost/hidden.php">
Id:<input type="text" name="id">
Hidden:<input type="hidden" name="hide" value="me">
</form>
</body>
</html>
이렇게 하면 text의 타입으로 되어있는 것은 화면에 표시되지만, type이 hidden일 때는 표시가 되지 않고 url에는 그냥 hide=me라고 표시되겠죠.
이번엔 label입니다.
레이블은 그냥 사용법과 의미를 말씀드리죠.
Label태그는 설정된 것을 클릭하면 그것에 해당되는 텍스트 상자로 이동하게 됩니다.
사용법은 2가지 법이 있는데요,
Label for="id"
Input id="id"
이러는 방법이 있고요, 두번째 방법은
Input과 글을 label로 둘러싸는 방법도 있습니다.
감사합니다.
2016년 6월 8일 수요일
홈페이지 만들기 제7강
그러면. 그냥. 이번에는 버튼과 초기화를 배워볼 것입니다.
우리가 지난 시간에 배웠던 submit버튼은 서버로 데이터를 전송했었죠? 그런데 button태그는 자바스크립트라고 불리는 다른 컴퓨터 언어인데요, 이 자바스크립트를 사용해서 메세지를 표시하는 기능입니다. 한 줄만 살펴봅시다.
<input type="button" value="버튼" onclick=alert('hello world')>
이 태그는 submit 밑줄에 있습니다.
이러면 제출 버튼 바로 옆에 버튼이라는 버튼이 만들어지는데요, 이것을 누르면 hello world라는 메시지가 뜹니다. 괄호 안의 내용은 자바스크립트입니다.
우리가 상대방에게 텍스트를 입력받을 때 입력한 텍스트를 최대한 빨리 지우려면 초기화를 해야겠지요? 그러면 form태그 안에 이 한줄만 넣으면 됩니다.
<Input type="reset">
우리가 지난 시간에 배웠던 submit버튼은 서버로 데이터를 전송했었죠? 그런데 button태그는 자바스크립트라고 불리는 다른 컴퓨터 언어인데요, 이 자바스크립트를 사용해서 메세지를 표시하는 기능입니다. 한 줄만 살펴봅시다.
<input type="button" value="버튼" onclick=alert('hello world')>
이 태그는 submit 밑줄에 있습니다.
이러면 제출 버튼 바로 옆에 버튼이라는 버튼이 만들어지는데요, 이것을 누르면 hello world라는 메시지가 뜹니다. 괄호 안의 내용은 자바스크립트입니다.
우리가 상대방에게 텍스트를 입력받을 때 입력한 텍스트를 최대한 빨리 지우려면 초기화를 해야겠지요? 그러면 form태그 안에 이 한줄만 넣으면 됩니다.
<Input type="reset">
2016년 6월 7일 화요일
홈페이지 만들기 제6강
이번에는 여러분이 잘 알고 있는 텍스트를 입력받는 기능, 선택기능을 공부해볼 것입니다.
일단 기본 태그들은 form과 input입니다.
일단 예제로 살펴봅시다.
<html>
<body>
<form action="http://localhost/login.php>
<p>아이디: <input type="text" name="id" value="id></p>
<p>비밀번호:<input type=""password" name="pwd" value="nothing></p>
<p>주소: <textarea cols="40" rows="'8">주소</textarea></p>
<h1>색상선택</h1>
<p><select name="color">
<option value="red">붉은색</option>
<option value="blue">파랑색</option>
<option value="black">검정색</option>
</select>
</p>
<h1>색상다중선택</h1>
<h2>ctrl을 누르고 선택<h2>
<p><select name="color2" multiple>
<option value="red">붉은색</option>
<option value="blue">파랑색</option>
<option value="black">검정색</option>
</select>
</p>
<h1>옷의 색상</h1>
<p>
<input type="radio" name="color" value="red">빨강색
<input type="radio" name="color" value="blue" checked>파랑색
<input type="radio" name="color" value="black">검은색
</p>
<h1>사이즈</h1>
<p>
<input type="checkbox" name="size" value="95">95
<input type="checkbox" name="size" value="100">100
<input type="checkbox" name="size" value="105">105
</p>
<p><input type="submit"</p>
</form>
</body>
</html>
아직 form에 대한 강의는 안 끝났습니다. 다음시간에 form에 대해 조금 더 알아보는 시간이 있겠습니다.
일단 위의 것을 해석해 봐야겠죠? 아는 것은 안 하겠습니다.
form action은 이 데이터를 어디로 전송할지를 정하는 것입니다. form태그 안에 있는 모든 선택된 데이터를 localhost/login.php로 전송합니다.
input은 텍스트를 입력받는 상자인데요, type은 글자의 종류(text:일반, password:점글자, submit은 예외(제출))입니다. name은 글자가 무엇인지, value는 들어갔을 때의 기본값입니다.
select태그는 선택 태그인데요, dropdown list로 표시됩니다. name은 이것의 의미, option은 그 선택되는 것중 하나, 그것의 value는 표시되는 것의 의미입니다.
select name 다음에 multiple을 붙인 것은 다중선택기능입니다. 말 그대로 ctrl버튼과 마우스로 버튼을 누르면 다중선택이 가능합니다.
input type의 radio는 동그란 것인데요, 이것은 단일선택, 즉 하나만 선택이 가능합니다. name과 value는 같고요, 밑의 checkbox는 다중선택입니다. 네모 박스가 나타나는데요, 네모박스 안에 체크표시가 됩니다. 저는 다중선택을 input multiple보다는 checkbox를 추천합니다.
오늘 강의는 잘 이해가 안 가실수도 있습니다. 그러면 일단 제가 쓴 걸 복사해서 개발도구나 메모장으로 가져가서 저장 후 실행시켜보세요. 그래도 모르겠으면 댓글 남겨 주세요.
감사합니다.
일단 기본 태그들은 form과 input입니다.
일단 예제로 살펴봅시다.
<html>
<body>
<form action="http://localhost/login.php>
<p>아이디: <input type="text" name="id" value="id></p>
<p>비밀번호:<input type=""password" name="pwd" value="nothing></p>
<p>주소: <textarea cols="40" rows="'8">주소</textarea></p>
<h1>색상선택</h1>
<p><select name="color">
<option value="red">붉은색</option>
<option value="blue">파랑색</option>
<option value="black">검정색</option>
</select>
</p>
<h1>색상다중선택</h1>
<h2>ctrl을 누르고 선택<h2>
<p><select name="color2" multiple>
<option value="red">붉은색</option>
<option value="blue">파랑색</option>
<option value="black">검정색</option>
</select>
</p>
<h1>옷의 색상</h1>
<p>
<input type="radio" name="color" value="red">빨강색
<input type="radio" name="color" value="blue" checked>파랑색
<input type="radio" name="color" value="black">검은색
</p>
<h1>사이즈</h1>
<p>
<input type="checkbox" name="size" value="95">95
<input type="checkbox" name="size" value="100">100
<input type="checkbox" name="size" value="105">105
</p>
<p><input type="submit"</p>
</form>
</body>
</html>
아직 form에 대한 강의는 안 끝났습니다. 다음시간에 form에 대해 조금 더 알아보는 시간이 있겠습니다.
일단 위의 것을 해석해 봐야겠죠? 아는 것은 안 하겠습니다.
form action은 이 데이터를 어디로 전송할지를 정하는 것입니다. form태그 안에 있는 모든 선택된 데이터를 localhost/login.php로 전송합니다.
input은 텍스트를 입력받는 상자인데요, type은 글자의 종류(text:일반, password:점글자, submit은 예외(제출))입니다. name은 글자가 무엇인지, value는 들어갔을 때의 기본값입니다.
select태그는 선택 태그인데요, dropdown list로 표시됩니다. name은 이것의 의미, option은 그 선택되는 것중 하나, 그것의 value는 표시되는 것의 의미입니다.
select name 다음에 multiple을 붙인 것은 다중선택기능입니다. 말 그대로 ctrl버튼과 마우스로 버튼을 누르면 다중선택이 가능합니다.
input type의 radio는 동그란 것인데요, 이것은 단일선택, 즉 하나만 선택이 가능합니다. name과 value는 같고요, 밑의 checkbox는 다중선택입니다. 네모 박스가 나타나는데요, 네모박스 안에 체크표시가 됩니다. 저는 다중선택을 input multiple보다는 checkbox를 추천합니다.
오늘 강의는 잘 이해가 안 가실수도 있습니다. 그러면 일단 제가 쓴 걸 복사해서 개발도구나 메모장으로 가져가서 저장 후 실행시켜보세요. 그래도 모르겠으면 댓글 남겨 주세요.
감사합니다.
2016년 6월 4일 토요일
홈페이지 만들기 제5강
자, 오늘 강의 내용은 꽤 깁니다. 그리고 주위 깊게 살펴봐야 하는 거라, 저는 2틀동안 걸쳐 쉬어가면서 하면 좋겠습니다. 홈페이지 만들겠다는 사람 몸살 걸리게 하고 싶진 않아서...
자, 우리가 홈페이지를 들어가 보면 살짝의 간격의 띄어쓰기로 표시되어 있는 단락을 보신 적이 있으시나요?
단락은 영어로 paragraph, html 언어계에서는 <p>입니다. 이것은 아주 간단합니다. 그냥 한 단락 앞에 <p>, 뒤에 </p>를 붙이면 됩니다.
자, 이제 이해하기 어려운 부분이 시작됩니다.
우리는 홈페이지에 사진을 넣죠? 사진은 영어로 image, html에서는 img입니다. 일단은 이미지를 준비해 주고, 저는 이미지 이름을 '나'라고 짓겠습니다. 그럼 어떻게 해야 하는지 예제로 살펴봅시다.
예)
<img src="나.jpg" width="300" height="200" alt="내 사진" title="내 사진">
이러면 어떻게 될까요?
이미지는 '나'라는 이미지가 업로드 되고, 가로는 300픽셀, 높이는 200픽셀, 이미지가 깨졌을때 '내 사진'이라고 나오고, 그림 위에 마우스를 올려 놓으면 '내 사진'이라고 흰 박스에 표시됩니다. 즉, src는 업로드할 이미지, width는 가로 길이, height는 세로 길이, alt는 이미지가 깨졌을 때 나오는 글, title은 마우스를 위에 올려놓았을 때 나오는 도움말입니다.
다음은 이해하기 조금 어려우실 수도 있습니다. 이것은 표인데요, 표는 영어로 table입니다. 그래서 html 언어에서도 <table>입니다.
이 표는 3가지 부분으로 나누어 설명드릴 건데요, 2번째 부터는 꼭 듣지 않아도 되는 내용입니다. 하지만 표를 심화적으로 표현하고 싶다면 힘들어도 하시는 것이 좋겠습니다. 너무 무리는 하지 마시고요...
일단, 표의 기본부터 살펴봅시다.
표는 어떻게 생겼죠? 표는 여러 박스가 큰 사각형으로 둘러싸여 있는 형태입니다.
표 예제로 살펴봅시다.
<html>
<body>
<table border="1">
<tr>
<td>이름</td><td>성별</td><td>주소</td><td>수익</td>
</tr>
<tr>
<td>최진혁</td><td>남자</td><td>청주</td><td>1000</td>
</tr>
<tr>
<td>최유빈</td><td>여자</td><td>청주</td><td>500</td>
</tr>
<tr>
<td>합계</td><td></td><td></td><td>1500</td>
</table>
<body>
</html>
이렇게 넣었습니다. 그럼 이렇게 나오게 됩니다.
이름 성별 주소 수익
최진혁 남자 청주 1000
최유빈 여자 청주 500
합계 1500
태두리도 있지만 넣을 수 있 는 프로그램이 없어서 안 넣었습니다.
자, 해석을 해 봅시다.
table은 표가 시작된다는 뜻이고, border="1"은 태두리라는 뜻이고(2도 넣을 수 있지만 2는 모양이 이상해서 1 추천), tr은 table row의 약자로, 한 행이 추가된다는 뜻입니다. 대신 행이 끝날 때는 </tr>을 붙여줘야 합니다. <td>는 한 칸에 들어가는 내용입니다. 그리고 마지막에 </table>을 붙여 줘야 합니다. 그런데
이해가 잘 되시나요? 저는 이해하는데 1달 걸렸는데... 여러분이 이해가 안 되는 부분이 있으시면 댓글로 남겨주세요. 언제든디 도와드리겠습니다.
자, 2번째 부분입니다.
글을 병합하려면 어떻게 할까요?
위에 표에서 둘다 청주에 살고 있죠? 그럼 어떻게 넣어야 병합을 할 수 있을까요?
이때 바로 달려가는 것은 <span>! 그런데 그냥 <span> 넣으시면 큰일나요. 행인지 열인지 구분해서 넣어야 해요. 행은 row니까 <rowspan>을 넣고, 그 다음 행 몇 개를 병합할 것인지 해석해서 넣어야 합니다. 만약 2개의 행을 병합하고 싶으면 <rowspan="2">이렇게 넣어주세요. 그 다음 밑에 행에 병합할 글자와 <td>태그는 삭제! 예를 들면 위에서는 이렇게 되죠.
<td rowspan="2">청주</td>
밑의 행에서는
그러면 열 병합은 어떻게 할까요?
<td colspan="">입니다. 이것도 위에 것이랑 마찬가지입니다. colspan할 열 개수를 넣어 주시고 그 열은 삭제!
자, 3번째 부분입니다. 이제부터는 차근차근 쉬워집니다.
표도 머리, 몸통, 발이 있죠? 그냥 <tr>을 바꾸면 됩니다. 이 행을 머리로 하고 싶다. 그러면 <tr>을 <thead>로. 몸통은 <tbody>. 맨 밑의 꼬리말은 <tfoot>. 그러면 머리말은 굵고 가운데 정렬이 됩니다. 나머지 몸통은 중간, 꼬리말은 맽 밑으로 가게 됩니다.
강의 중 어려우신 것이 있으시면 바로 댓글에 질문해주세요~
감사합니다~
홈페이지 만드는 개발도구
2016년 6월 3일 금요일
홈페이지 만들기 제4강
자, 오늘 강의는 되게 짧습니다.
우리가 웹페이지를 만들때 계속 <html>로 시작했잖아요. 그런데 전문적인 웹사이트에서 마우스 오른쪽 버튼을 클릭하셔서 페이지 소스 보기를 하시면 시작은 대부분 <!DOCTYPE html>이라고 되어 있는 것을 보실 수 있습니다.
이것은 지금 현재까지는 필요 없는데, 우리가 나중에 마스터 되서 이것을 잘 활용해야 합니다. 안 그러면 네이버나 다음, 구글 뭐 이런데처럼 전문적인 사이트를 만들 수가 없습니다. 그러므로 우리는 이것을 필요 없지만 중요한 것으로 여기면서 계속 앞에 이것을 붙여야 합니다.
우리가 웹페이지를 만들때 계속 <html>로 시작했잖아요. 그런데 전문적인 웹사이트에서 마우스 오른쪽 버튼을 클릭하셔서 페이지 소스 보기를 하시면 시작은 대부분 <!DOCTYPE html>이라고 되어 있는 것을 보실 수 있습니다.
이것은 지금 현재까지는 필요 없는데, 우리가 나중에 마스터 되서 이것을 잘 활용해야 합니다. 안 그러면 네이버나 다음, 구글 뭐 이런데처럼 전문적인 사이트를 만들 수가 없습니다. 그러므로 우리는 이것을 필요 없지만 중요한 것으로 여기면서 계속 앞에 이것을 붙여야 합니다.
홈페이지 만들기 제3강
지난 시간에 배운 것들은 기억나죠? 자, 이번 시간에는 이것으로 문서의 구조를 살펴볼거구요, 새로운 것도 배울 거예요.
지난 시간에 배운 것들만으로도 사실 충분한 홈페이지를 만들 수 있습니다. 그런데 이것보다 더 고급스러운 것을 배울 것입니다.
여러분은 홈페이지에 들어가 보면 글자 크기가 다 다르죠? 그것을 배우고, 또 인터넷에 들어가 보면 종종 글씨가 깨지는 것도 있습니다. 이것도 치료하는 법을 가르쳐 드리겠습니다.
우리가 배우고 있는 것은 html이죠? 글자를 나타낼때에는 h를 사용할 겁니다. 우리가 달리기 시합에서 1등한다고 하면 제일 빨랐단 거잖아요? 여기서는 제일 크다는 겁니다.
예제를 봅시다.
예)
<html>
<head>
<title>홈페이지 만들기></title>
</head>
<body>
<h1>안녕?</h1>
<h2>ㅋㅋ</h2>
</body>
</html>
이렇게 하면 어떻게 될까요?
홈페이지 만들기
안녕?
ㅋㅋ
이렇게 나옵니다.
아주 간단하죠? 이것은 원리이니 쉬울 것입니다.
이것은 외우셔야 합니다. 글자가 깨지지 않게 치료하는 거라서...
뿀묘횟킇긓
이렇게 나오는 것을 보셨을 수 있습니다.
이것을 치료하기 위해 사용하는 태그가 있습니다.
<meta charset="utf-8">
이것은 외우시면 됩니다. 참고로 이것은 title 바로 다음줄에 나옵니다.
오늘 강의는 여기서 끝내겠습니다. 감사합니다.
지난 시간에 배운 것들만으로도 사실 충분한 홈페이지를 만들 수 있습니다. 그런데 이것보다 더 고급스러운 것을 배울 것입니다.
여러분은 홈페이지에 들어가 보면 글자 크기가 다 다르죠? 그것을 배우고, 또 인터넷에 들어가 보면 종종 글씨가 깨지는 것도 있습니다. 이것도 치료하는 법을 가르쳐 드리겠습니다.
우리가 배우고 있는 것은 html이죠? 글자를 나타낼때에는 h를 사용할 겁니다. 우리가 달리기 시합에서 1등한다고 하면 제일 빨랐단 거잖아요? 여기서는 제일 크다는 겁니다.
예제를 봅시다.
예)
<html>
<head>
<title>홈페이지 만들기></title>
</head>
<body>
<h1>안녕?</h1>
<h2>ㅋㅋ</h2>
</body>
</html>
이렇게 하면 어떻게 될까요?
홈페이지 만들기
안녕?
ㅋㅋ
이렇게 나옵니다.
아주 간단하죠? 이것은 원리이니 쉬울 것입니다.
이것은 외우셔야 합니다. 글자가 깨지지 않게 치료하는 거라서...
뿀묘횟킇긓
이렇게 나오는 것을 보셨을 수 있습니다.
이것을 치료하기 위해 사용하는 태그가 있습니다.
<meta charset="utf-8">
이것은 외우시면 됩니다. 참고로 이것은 title 바로 다음줄에 나옵니다.
오늘 강의는 여기서 끝내겠습니다. 감사합니다.
2016년 6월 2일 목요일
홈페이지 만들기 제2강
자, 지난 수업에 했던 html이 기억나죠? 복습해 봅시다.
시작할때는 <html>을 써 준다.
위에 머리말을 쓰려면 이렇게 해 준다.
<head>
<title>내 홈페이지(예)</title>
</head>
글을 쓸 때는 이렇게 해 준다.
<body>
내 홈페이지(예)
</body>
링크를 해 줄때는 이렇게 해 준다.
<a href="...">내 홈페이지(예)</a>
html을 끝낼 때는 이렇게 해 준다.
</html>
자, 이제 새로운 것을 배워 봅시다.
글이 같은 세로줄로 앞에 점으로 나열 된 것을 본 적이 있으시나요? 예를 들어 보도록 하죠.
이것은 리스트처럼 나열되어 있죠? 리스트는 영어로 말 그대로 list입니다. 그것을 줄여 <li>로 써 줍니다.
그런데 1. 2. 3. 이런 것은 어떻게 쓰냐고요?
점은 순서가 없죠? 하지만 1. 2. 3. 은 숫자로 순서가 있습니다. 그러므로 나열되어 있다는
것으로 ordered list를 줄여 <ol>이라고 붙이죠. 그런데 점은 어떻게 하나요? 나열이 되어 있지 않다는 뜻으로 unordered list를 줄여 <ul>이라고 붙입니다. 많은 분들은 ul을 보고 url이라고 착각하셔서 링킹을 하는 경우가 있는데, 링크는 <a href>고 이것은 <ul>입니다.
자, 이제 예제로 넘어가죠.
예)
<html>
<head>
<title>내 홈페이지</title>
</head>
<body>
<ul>
<li>내 홈페이지
<li>입니다.
</ul>
<ol>
<li>ㅋㅋ
<li>ㅎㅎ
</ol>
</body>
<html>
좀 길죠? 하지만 줄 넘기는 거 안 해도 된다는 거 지난 시간에 배웠죠? 하지만 이것이 보기 깔끔하다는 점이...
자, 오는 강의는 여기서 마치도록 하겠습니다. 감사합니다.
시작할때는 <html>을 써 준다.
위에 머리말을 쓰려면 이렇게 해 준다.
<head>
<title>내 홈페이지(예)</title>
</head>
글을 쓸 때는 이렇게 해 준다.
<body>
내 홈페이지(예)
</body>
링크를 해 줄때는 이렇게 해 준다.
<a href="...">내 홈페이지(예)</a>
html을 끝낼 때는 이렇게 해 준다.
</html>
자, 이제 새로운 것을 배워 봅시다.
글이 같은 세로줄로 앞에 점으로 나열 된 것을 본 적이 있으시나요? 예를 들어 보도록 하죠.
- 안녕
- 나는 ...이야.
- ㅋㅋ
- ㅎㅎ
이것은 리스트처럼 나열되어 있죠? 리스트는 영어로 말 그대로 list입니다. 그것을 줄여 <li>로 써 줍니다.
그런데 1. 2. 3. 이런 것은 어떻게 쓰냐고요?
점은 순서가 없죠? 하지만 1. 2. 3. 은 숫자로 순서가 있습니다. 그러므로 나열되어 있다는
것으로 ordered list를 줄여 <ol>이라고 붙이죠. 그런데 점은 어떻게 하나요? 나열이 되어 있지 않다는 뜻으로 unordered list를 줄여 <ul>이라고 붙입니다. 많은 분들은 ul을 보고 url이라고 착각하셔서 링킹을 하는 경우가 있는데, 링크는 <a href>고 이것은 <ul>입니다.
자, 이제 예제로 넘어가죠.
예)
<html>
<head>
<title>내 홈페이지</title>
</head>
<body>
<ul>
<li>내 홈페이지
<li>입니다.
</ul>
<ol>
<li>ㅋㅋ
<li>ㅎㅎ
</ol>
</body>
<html>
좀 길죠? 하지만 줄 넘기는 거 안 해도 된다는 거 지난 시간에 배웠죠? 하지만 이것이 보기 깔끔하다는 점이...
자, 오는 강의는 여기서 마치도록 하겠습니다. 감사합니다.
홈페이지 만들기 제1강
오늘 배울 내용은 홈페이지인데요, 홈페이지를 어떻게 만드는지 알고 있는 분들도 계시고 모르는 분들도 계시는데, 일단 기초부터 차근차근 짚고 넘어가죠.
여러분, 홈페이지는 html으로 만들어진다는 것을 알고 계셨나요? 그런데 이상하게도 홈페이지는 꼭 도메인이 있어야 한다고들 하시는데, 홈페이지는 그냥 인터넷 페이지입니다. 그러므로 도메인이 없어도 됩니다. 홈페이지는 간단하게 메모장으로 만들 수 있습니다.
일단 메모장 여는 방법입니다. 바탕화면이나 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하시고 새로 만들기를 클릭하시면 바로가기라는 것이 있습니다. 그걸 클릭하시고 박스에 notepad.exe라고 쓰시고 확인 누르시고 이름 정하고(이름은 자유) 확인하시면 그 화면에 방금 지정한 이름의 바로가기가 나타납니다. 그걸 클릭하시면 화면이 나옵니다.
이제 본격적인 html 공부를 시작합시다.
1. 화면에 표시되는 글
일단 html을 시작하려면 html이라고 입력해야 시작되는데, html언어에서는 <과 >이 없으면 html이라고 인식을 못 합니다. 그러므로 일단 <html>을 입력해야 시작이 되겠죠?
자, 다음은 화면에 글 표시하기입니다. 우리 몸은 영어로 body라고 합니다. 화면은 우리의 몸인 셈이므로 <body>를 입력해 줘야 화면에 글이 표시됩니다. 그 다음에 여러분이 하고 싶은 말을 써 줍니다. 그런데 여기서 잠깐! html 언어에서는 엔터를 알아듣질 않습니다. Html 언어에서는 엔터 대신 html언어를 사용합니다. <br>입니다. 하지만 띄어쓰기는 그냥 스페이스바 한번 치면 됩니다.
자, 그런데 html에서는 뭘 끝내지 않으면 다음 것으로 넘어갈 수가 없습니다. 그러므로 반드시 끝내야 하는데, 이것은 /입니다. 그러므로 본문을 끝낼 때는 </body>라고 해 줘야겠죠.
자, 이제 본문의 기초는 끝났습니다. 그런데 링크가 없으면 시시하죠? 링크 연결 법을 알려 드리도록 하겠습니다.
링크는 대부분 글자에 색이 있고 밑줄이 처져 있죠? 그것이 나타나게 할 겁니다. 이제부터는 대부분원리가 아닌 규칙이므로 차근차근 외우셔야 합니다.
링크의 전에는 <a href="가 나옵니다. a는 색 있는 글자라는 뜻인데 이 a는링크와 붙어 있을 때만 적용됩니다. href는 링크라는 뜻이고요, " 다음에는 연결할 링크 주소를 써 줍니다. 그리고 다시 "를 넣어 줍니다. 그리고 >를 넣어 주세요. 그 다음에 입력할 것은 링크와 연결된 글자인데요, 엔터나 띄어쓰기 하지 않은 상태에서 쓰고 싶은 글자를 써 넣으세요. 그리고 이제 색 있는 글자는 끝났다는 표시로 </a>를 넣어 주세요.
2. 위에 표시되는 글
자, 이제부터는 예제로 합시다.
예)
<html>
<head>
<title>내 홈페이지</title>
</head>
<body>
이 홈페이지는 메모장으로 만들어졌습니다.<br>
<a href="naver.com">네이버</a>
</body>
</html>
이렇게 쓰면 어떻게 될까요?
Head는 우리의 머리라는 뜻이죠? 그러니까 head에 있는 글은 머리말이라는 뜻이죠. 그리고 title은 제목입니다. 그러니까 이 홈페이지의 이름을 창 맨 위에 띄우는 것이죠.
그리고 제가 </html>을 넣은 이유는 html이 끝났다는 것입니다.
이렇게 만들어진 홈페이지에 접속하는 방법입니다.
Ctrl+s를 해 주시고 바탕화면으로 저장 위치를 바꾼 뒤 이름은 마음대로 하시되 끝에 .html을 붙여야 합니다. 파일 형식은 모든 파일로 해 주세요. 그런 뒤 저장을 해 주시면 바탕 화면에 방금 만든 파일이 나타납니다. 그 파일을 클릭하면 바로 인터넷에 여러분이 만든 홈페이지가 열립니다. 도메인이 이상하죠? 그것은 나중에 Html 마스터가 됬을 때 합시다.
자, 이제 여러분은 아주 간단한 홈페이지를 만들 수 있게 되었습니다. 축하합니다!
여러분, 홈페이지는 html으로 만들어진다는 것을 알고 계셨나요? 그런데 이상하게도 홈페이지는 꼭 도메인이 있어야 한다고들 하시는데, 홈페이지는 그냥 인터넷 페이지입니다. 그러므로 도메인이 없어도 됩니다. 홈페이지는 간단하게 메모장으로 만들 수 있습니다.
일단 메모장 여는 방법입니다. 바탕화면이나 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하시고 새로 만들기를 클릭하시면 바로가기라는 것이 있습니다. 그걸 클릭하시고 박스에 notepad.exe라고 쓰시고 확인 누르시고 이름 정하고(이름은 자유) 확인하시면 그 화면에 방금 지정한 이름의 바로가기가 나타납니다. 그걸 클릭하시면 화면이 나옵니다.
이제 본격적인 html 공부를 시작합시다.
1. 화면에 표시되는 글
일단 html을 시작하려면 html이라고 입력해야 시작되는데, html언어에서는 <과 >이 없으면 html이라고 인식을 못 합니다. 그러므로 일단 <html>을 입력해야 시작이 되겠죠?
자, 다음은 화면에 글 표시하기입니다. 우리 몸은 영어로 body라고 합니다. 화면은 우리의 몸인 셈이므로 <body>를 입력해 줘야 화면에 글이 표시됩니다. 그 다음에 여러분이 하고 싶은 말을 써 줍니다. 그런데 여기서 잠깐! html 언어에서는 엔터를 알아듣질 않습니다. Html 언어에서는 엔터 대신 html언어를 사용합니다. <br>입니다. 하지만 띄어쓰기는 그냥 스페이스바 한번 치면 됩니다.
자, 그런데 html에서는 뭘 끝내지 않으면 다음 것으로 넘어갈 수가 없습니다. 그러므로 반드시 끝내야 하는데, 이것은 /입니다. 그러므로 본문을 끝낼 때는 </body>라고 해 줘야겠죠.
자, 이제 본문의 기초는 끝났습니다. 그런데 링크가 없으면 시시하죠? 링크 연결 법을 알려 드리도록 하겠습니다.
링크는 대부분 글자에 색이 있고 밑줄이 처져 있죠? 그것이 나타나게 할 겁니다. 이제부터는 대부분원리가 아닌 규칙이므로 차근차근 외우셔야 합니다.
링크의 전에는 <a href="가 나옵니다. a는 색 있는 글자라는 뜻인데 이 a는링크와 붙어 있을 때만 적용됩니다. href는 링크라는 뜻이고요, " 다음에는 연결할 링크 주소를 써 줍니다. 그리고 다시 "를 넣어 줍니다. 그리고 >를 넣어 주세요. 그 다음에 입력할 것은 링크와 연결된 글자인데요, 엔터나 띄어쓰기 하지 않은 상태에서 쓰고 싶은 글자를 써 넣으세요. 그리고 이제 색 있는 글자는 끝났다는 표시로 </a>를 넣어 주세요.
2. 위에 표시되는 글
자, 이제부터는 예제로 합시다.
예)
<html>
<head>
<title>내 홈페이지</title>
</head>
<body>
이 홈페이지는 메모장으로 만들어졌습니다.<br>
<a href="naver.com">네이버</a>
</body>
</html>
이렇게 쓰면 어떻게 될까요?
Head는 우리의 머리라는 뜻이죠? 그러니까 head에 있는 글은 머리말이라는 뜻이죠. 그리고 title은 제목입니다. 그러니까 이 홈페이지의 이름을 창 맨 위에 띄우는 것이죠.
그리고 제가 </html>을 넣은 이유는 html이 끝났다는 것입니다.
이렇게 만들어진 홈페이지에 접속하는 방법입니다.
Ctrl+s를 해 주시고 바탕화면으로 저장 위치를 바꾼 뒤 이름은 마음대로 하시되 끝에 .html을 붙여야 합니다. 파일 형식은 모든 파일로 해 주세요. 그런 뒤 저장을 해 주시면 바탕 화면에 방금 만든 파일이 나타납니다. 그 파일을 클릭하면 바로 인터넷에 여러분이 만든 홈페이지가 열립니다. 도메인이 이상하죠? 그것은 나중에 Html 마스터가 됬을 때 합시다.
자, 이제 여러분은 아주 간단한 홈페이지를 만들 수 있게 되었습니다. 축하합니다!
피드 구독하기:
글 (Atom)