개인 홈페이지형 블로그 만들기 위해 html css javascript를 배우려는 사람이 주변에 있다. 알짜 공부로 짧은 시간에 html css 코딩을 배우고 싶었다. '테크보이 워니(Techboi Wonie)' 님이 강의한 html css 유튜브 강좌를 반복해서 듣고 복습하면서 나중에 참고하려고 내용을 정리해 놓기로 했다.
html css 코딩 공부하는 replit.com 사이트
세상은 넓고 코딩 공부할 사이트가 많지만, 별도로 프로그램을 다운로드하여 설치할 필요도 없고 그냥 웹페이지로 접속하여 그 자리에서 코딩 공부할 수 있는 https:// replit.com 사이트도 있다. 진짜 그냥 사이트에 들어가서 아이디 만들고 이메일, 비밀번호 쓰고 회원 가입한 뒤 바로 이용할 수 있다. 열린 두 개의 화면에서 왼쪽에 html css 코딩을 하고 난 뒤 실행(Run)을 클릭하면 오른쪽에 코딩한 것이 웹페이지에 어떻게 구현되는지 확인할 수 다. 코딩이 잘못되었다면 오른쪽 페이지에 구현이 되지 않으니 왼쪽 코딩 창에서 잘못된 부분을 디버깅해야 할 것이다. 보다 정확하게 웹 페이지상에서 어떻게 보이는지를 보려면 오른쪽 페이지 상단 네모 텍스트 박스 안에 있는 웹주소를 새로운 인터넷 페이지를 하나 열고난후 주소창에 적어주소 실행해 보면 방금 코딩한 것이 웹페이지에서 어떻게 구현되는지 확인할 수 있다.
코딩 공부한 스크립트는 별도의 파일로 저장되니 언제든지 열어서 계속 코딩을 이어가거나 추가로 코딩을 하거나 공부에 참고 할 수 있다.
html css 코딩의 액기스를 배운다
테크보이 워니님이 유튜브 7분 남짓 동영상 하나로 웹사이트 코딩할 때 필요한 html 핵심을 강의해 놓았다. 몇 번 반복해서 보고 공부하다가 내용을 따로 정리해 놓고 복습하고 나중에 참고도 하고자 한다. 워니 님이 강조하는 것이 "코딩 기초를 몰라도 무작정 그냥 어떻게든 베끼라고 말씀..." 코딩을 배우려는 초보자들이 새겨들어야 할 말로 배움의 초입에 선 사람들이 꼭 알아야 하는 html 알짜 공부의 기초라고 본다.
개인 홈페이지형 블로그를 만들기 위해 웹페이지 코딩을 할 때 기초가 되는 것이 html css 코딩이다. html 뼈대를 만들고 css로 스타일링을 하는 것이다. javascript는 웹페이지에 생명을 불어 넣는 작업이라고나 할까. 스스로 웹페이지를 코딩하기 위해 html css 기초부터 차근차근 배워나가는 것도 괜찮겠지만 일단 자신의 두 손으로 코딩을 하면서 필요한 것들을 그때그때 실천적으로 사용해 보는 방식으로 접근하는 것이 훨씬 실용적인 코딩 배우는 방법이라고 본다.
html 코딩 기초적 핵심
유튜브 동영상을 보고 들으면서 강의 내용을 그대로 따라서 구현해 보는 것이 좋다. 유튜브를 몇 번 보고난 뒤에는 아래처럼 코딩 창에서 타이핑한 스크립트 내용을 주욱 보기만 하여도 html css 각종 태그와 속성의 의미를 알 수 있다. 그냥 머릿속에서 각각의 태그와 속성이 구현하는 웹페이지 결과가 그려진다. 유튜브로 몇 번 보면서 공부한 뒤에 아래의 코드를 따라가며 보면 저절로 코딩의 명령 내용과 실행결과가 뇌에서 산출되는 듯 하다.
html 문서의 섹션
html 문서는 두가지 섹션으로 나뉠 수 있는데, 첫 번째는 head 섹션, 두 번째는 body 섹션이다. 헤드 섹션은 이 문서가 어떤 문서인지 명시하는 정보가 들어간다. 예를 들어서 타이틀(title)이 "테크보이"라고 하면, 인터넷 웹문서 타이틀 제목이 "테크보이"가 된다.
태그는 열리고 닫히는 짝으로 이루어진다. 혼자서 기능하는 태그도 있다. 태그에 따라서는 속성이 붙여지고 css에서 스타일링이 가능하다. 기본 구조의 전개는 <html>, <head> 순서로 열리고, </head>가 닫히고, 이어서 <body>가 열리고, </body>, </html> 순서로 닫힌다.
<html>
<head>
</head>
<body>
</body>
</html>
html 태그와 속성
html 태그 사이에는 체인이 물려 들어가듯 태그들이 서브 태그로 들어갈 수 있다. <head>태그 안에는 <title> 태그, css 링크 태그, <meta> 태그, css <style> 태그 등이 올 수 있다. 타이틀 태그는 위에서 말한 바와 같이 웹문서의 제목이고, css 링크 태그는 별로도 css 스타일링 코딩 블록만 모아서 파일로 저장한 것의 위치를 말해주는 것이고, 메타 태그는 웹사이트가 어떤 정보를 담고 있는지를 말해주는 것이다. css 스타일 태그는 html 헤드(head) 부분에 직접 css 스타일 코딩을 해 놓은 것이다. 함께 보면 좋은 프스팅 : html css javascript 알짜 공부(2) : css 강좌
<html>
<head>
<title>테크보이 워니</title>
<link href="style.css rel="stylesheet" type="text/css" />
<meta name="description" content="테크보이 워니의 문서 html" />
<style>
. top {
background: red;
height: 100px;
}
. mid {
background: blue;
height: 100px;
}
. bot {
background: yellow;
height: 100px
}
</style>
</head>
<body>
</body>
</html>
html 태그의 핵심 기초
html 태그(tag)의 핵심 기초적인 것들은 <body> 태그 안에 코딩이 된다. 웹페이지나 개인 홈페이지형 블로그 만들기를 하거나 html 코딩을 하고 난 뒤 속성 값에 대한 스타일 링을 위해 css 코딩을 하거나 반드시 사용하게 되는 핵심적인 태그들이 있다.
텍스트 관련 태그, 미디어 관련 태그, 링크 태그, 테이블 태그, 목록 태그, 구역을 나누는 태그, 인풋 태그 등이 웹페이지 html 코딩을 할 때 반드시 사용되는 태그들이다. 스스로 개인 홈페이이형 블로그 만들기를 하고자 하는 사람이라면 반드시 html css 코딩을 위한 html 태그를 배워야 한다.
텍스트 관련 태그
텍스트 관련 태그에는 <h> 태그, <b> 태그, <i> 태그 등이 있다.
<h> 태그는 문서 페이지의 제목, 부제목, 본문 등을 작성할 때 문서의 체계성과 문서 흐름의 의미를 파악할 수 있게 해주는 태그이다. h 태그는 h1, h2, h3, h4, h5, h6 여섯개가 있다.
<b> 태그는 굵은 글씨를 나타내고, <i> 태그는 기울임 글씨를 나타내고, <p> 태그는 문장 태그로 여러 줄을 나타낼 수 있다.
<body>
<div class="item">안녕</div>
<!-- 텍스트 관련 태그들 -->
<h1> 안녕하세요 </h1>
<h2> 안녕하세요 </h2>
<h3> 안녕하세요 </h3>
<h4> 안녕하세요 </h4>
<h5> 안녕하세요 </h5>
<h6> 안녕하세요 </h6>
<b> 굵은b> 글씨 </b>
<i> 기울임i> 글씨 </i>
<p> 안녕하세요? 저는 테크보이 워니입니다! </p>
미디어 관련 태그
미디어 관련 태그에는 <img> 태그, <video> 태그가 있다.
<img> 태그는 사진이나 이미지를 나타내고, <video> 태그는 동영상을 나타내는 태그이다.
src는 소스를 의미하며 해당 미디어 파일의 위치를 지정하는 속성이다. 비디오 태그에 controls를 넣어주면 동영상을 플레이하거나 일시멈춤 등의 아이콘 모양이 나타나 동영상을 콘트롤 할 수 있다.
<!-- 미디어 관련 태그들 -->
<img src="https:// i.imgur.com/CylgwLR.png" />
<video src="https:// www. w3schools.com/html/mov_bbb.mp4" controls />
링크 관련 태그
링크 관련 태그에는 인터넷 사이트 연결하는 <a href> 태그가 있다. 레퍼런스로 참조하고자 하는 인터넷 사이트 주소를 가리킨다.
<!-- 링크 태그 -->
<a href="google.com"> 구글 </a>
<a href="facebook.com" target="blank"> 페이스북 </a>
테이블 태그
<table> 태그는 테이블과 테두리 모양, 테이블 안 내용의 속성을 지정하게 된다.
<!-- 테이블 태그 -->
<table border="1">
<thead>
<tr>
<th> 이름 </th>
<th> 나이 </th>
<th> 직업 </th>
</tr>
</thead>
<tbody>
<tr>
<td>짱꽝 </td>
<td>59세 </td>
<td>자유직</td>
</tr>
<tr>
<td>여사 </td>
<td>57세 </td>
<td>변호사</td>
</tr>
<tr>
<td>워니 </td>
<td>49세 </td>
<td>개발자</td>
</tr>
</tbody>
</table>
목록 태그
목록 태그에는 <ol> 태그, <ul> 태그가 있다. 함께 보면 도움이 되는 포스팅 : html css javascript 알짜 공부(2) : css 강좌
<ol> 태그는 번호가 붙여진 목록에, <ul> 태그는 머릿 기호가 붙여진 목록 태그이다.
<!-- 목록 태그 -->
<ol>
<li> 워니 </li>
<li> 제니 </li>
</ol>
<ul>
<li> 워니 </li>
<li> 제니 </li>
</ul>
구역을 나누는 태그
구역을 나누는 태그에는 <div> 태그, <span> 태그가 있다.
<div> 태그는 한 줄 공간 전체를 차지하는 태그로 block element이고, <span> 태그는 한 줄 내에서 자기 내용물 만큼 부분 공간을 지정하는 태그로 inline element이다.
<!-- 구역을 나누는 태그 -->
<div class="top"> 상단 </div>
<div class="mid"> 중단 </div>
<div class="bot"> 하단 </div>
<span class="like"> 좋아요 </span>
<span class="sub"> 구독 </span>
<span class="comment"> 댓글 </span>
인풋 태그
인풋 태그에는 type에 따라 텍스트, 체크박스, 라디오, 색깔, 여러 줄 문장, 드롭다운을 구현하는 태그로 속성으로 지정한다.
타입이 text 는 텍스트 입력창, checkbox는 체크 박스, radio는 라이도 버튼, color은 색깔, textarea는 여러줄 문장, sexect name은 메뉴의 드롭다운 을 구현한다.
form 태그 구간 내에서 email은 이메일, password는 비밀번호, button submit는 로그인 버튼을 구현한다.
<!-- 인풋 태그 -->
텍스트 <input type="text" />
체크박스 <input type="checkbox" />
라디오 <input type="radio" />
색깔 <input type="color" />
여러줄 문장 <textarea></textarea>
드롭다운 <select name="name">
<option value="워니"> 워니 </option>
<option value="제니"> 제니 </option>
</select>
<form>
<input type="email" placeholder="이메일" />
<input type="password" placeholder="비밀번호" />
<button type="submit"> 로그인 </button>
</form>
</body>
</html>
html css를 위한 알짜 공부
독학을 통한 코딩 공부는 힘들다. 책을 차례대로 읽으면서 코딩 공부를 하는 것도 어렵다. 일단은 무대포 정신으로 무장하고 스스로 코딩을 하면서 프로그램을 구현해 보면서 에러를 고쳐나가고 새로운 기능과 속성들을 적용해 나가면서 배우는 것이 좋은 것 같다. 그런 점에서 워니 님의 7분 남짓 시간동안의 html 강의는 html 기초를 배우기 위한 엑기스만 전달하는 것으로 아주 훌륭한 강의였다. www.youtube.com/watch?v=50JOpxN0554&list=PLa7Lj786Q-GtH_zTBNufgR4MTiKH6OP4_&index=3 적어도 나에게는 그랬다. html 코딩 용어가 낯설지 않은 사람에게는 이 강의처럼 시간 절약에 html css 코딩을 씹어먹듯 배울 수 있는 알짜 공부 콘텐츠는 접하기 어렵다고 본다. 좋은 강의를 해주신 테크보이 워니 님께 다시 한번 감사드린다.
댓글