WEB1 - 1. 수업 소개
공부를 대하는 태도 이야기
WEB1 - 2. 프로젝트의 동기
본인이 생활 코딩 프로젝트를 시작하게 된 동기
원래 강의 대상은 개발에 대한 지식이 없는 직장 동료들을 대상으로 함
WEB1 - 3. 기획
기획 : 만들기 전에 무엇을 만들지 정리하는 것
코딩 사이트 기획
목차 1. HTML 2. CSS 3. Javascript
WEB1 - 4.코딩과 HTML
컴퓨터-인간 상호 간의 약속 : 코드, 소스, 언어
컴퓨터의 결과물 : 애플리케이션, 앱, 프로그램, 웹페이지, 웹사이드
HTML 장점 1. 쉬움 2. 중요함 (사용 ↑)
저작권 X → 독점 X → 수명 ↑
WEB1 - 5. HTML코딩과 실습환경 준비
강의에서는 ATOM 에디터 이용 (이미 Visual Studio Code를 설치했으므로 그대로 진행)
폴더 설정 및 파일 만들기
웹페이지 실행(파일 실행) : F5
WEB1 - 6.기본문법 태그
저장 : ctrl + S
열리는 태그 <>와 닫히는 태그 <\>가 한 쌍
WEB1 - 7.혁명적인 변화
페이지 소스 → 웹 HTML 코드 확인 가능
<h1> : 가장 크고 굵은 제목, <h1>부터 <h6>까지 있으며 숫자 ↑ 글씨 크기 ↓
인터넷의 편리함(검색)을 이용하자
WEB1 - 8.통계에 기반한 학습
기본적으로 외워야 할 태그 = 사용량이 많은 태그
기초가 모여서 심화가 됨. 기초를 탄탄히 다지자
통계를 기반으로 효율적으로 공부하자
WEB1 - 9.줄바꿈 : br vs p
<br> : 한 줄 띄어쓰기 - 닫히는 태그 X
<p> : 단락 범위 지정하기 - 닫히는 태그 O
→ css 이용 : <p style = "margin-top:40px;">로 조정 O
의미에 맞는 태그를 사용하는 것이 중요
WEB1 - 10. html이 중요한 이유
일반인 : <span style = "font-size:24px"> coding <\span> : 본문 양식
전문가 : <h3> coding <\h3> : 제목 양식
1. coding 검색 시에 제목이 coding인 전문가의 게시글이 먼저 나옴
2. 전문가의 게시글은 html 태그를 정확하게 사용 → 접근성 ↑
WEB1 - 11. 최후의 문법 속성 & img
<img> : 그림 삽입 태그
<img src = "이미지 주소" width = "100%">
속성 : src와 width처럼 태그만으로는 정보가 부족할 때 추가 정보를 제공하는 것
WEB1 - 12. 부모자식과 목록
ctrl + 클릭 : 다중 선택
<li> : 목차 태그
<ul> : 목차 태그의 부모 태그 (목차 숫자 X 그룹화) ; unordered list
<ol> : 목차 태그의 부모 태그 (목차 숫자 O 그룹화) ; ordered list
<table> - <tr> (한 행) - <td> (행의 열 수)
WEB1 - 13. 문서의구조와 슈퍼스타들
<title> : 웹페이지 제목 설정 (링크 내용 설정)
<meta charset = "utf-8"> : utf-8로 문서 읽기, 없을수도 O
→ utf-8 : 유니코드를 위한 가변 길이문자 인코딩 방식
<body> : 본문 태그. 본문의 시작과 끝을 묶음
<head> : 제목 태그. 본문 외의 제목들을 묶음
<html> : 최고위층 태그. 전체 내용을 묶음
<!doctype html> : html로 작성했음을 나타냄
WEB1 - 14. HTML 태그의 제왕
<a> : 링크를 거는 태그
<a href = "참조할 링크" target = "_blank" title = "HTML5">
target = "_blank" : 새 창에서 열기
title = "HTML5" : "HTML5"라는 툴팁 띄우기
WEB1 - 15. 웹사이트 완성
<a href = "파일이름.html">을 이용해 각각의 html을 링크로 연결