Ctrl + Shift + ESC

생활코딩 WEB1- HTML & Internet 본문

Hacking/Web Hacking

생활코딩 WEB1- HTML & Internet

단축키실행해보세요 2022. 5. 26. 00:43

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을 링크로 연결

 

'Hacking/Web Hacking' Related Articles more