기획
- 기획자 : 무엇을 만들까 상상 → 계획 → 구체화
- "코딩 수업과 내용을 잘 정리정돈 할 수 있는 웹사이트"
그림을 그려서 기획
- 제목이 맨 위에 있었으면 좋겠어
- 제목과 목차를 나누는 선
- 왼쪽에 목차
- 1클릭 후 나오는 페이지
- 동영상강의 맨 위에 배치
- 밑에 한글로 설명
등 의 구체적인 계획을 그려보자!
코딩과 HTML
- 코딩 : 원인인 코드를 통해 결과를 만든다
위 | 아래 |
기계가 하는 일 | 사람이 하는 일 |
결과 | 원인 |
Application App Program Webpage Website |
code 부호, 신호 source 원천 Language 약속이라는 의미 |
- HTML (Hyper Text Markup Language) : 웹 페이지를 만드는 코드
- 장점1. 배우기 쉽다.
- 장점2. 많이 사용하는 만큼 중요하다
- 장점3. Public Domain
애플, 네이버, 구글 등의 회사에서 브라우저를 만들 수 있는 이유
우리가 만든 웹페이지를 여러 브라우저에서 동일하게 똑같이 볼 수 있는 이유 - 장점4. 1990년 이후 지금까지 살아 남아있고 앞으로도 오래 살아남을 수 있는 기술. 유료가 아니라 업데이트엔 느리지만 무료라 오래간다.
HTML 코딩과 실습환경 준비
- 준비물 : 웹브라우저 + 에디터(editor)
* 에디터란 ? :편집하는 프로그램. HTML 코드를 작성 할 수 있는 프로그램
(ex. 원도우 메모장, 맥 Textedit, 리눅스 gedit 등→코드작성 가능 하지만 코드작성 용도로 만들어 진 프로그램은 아니다.)
ATOM 설치
- 다른 에디터 원하면 'HTML Editor' 또는 'best HTML Editor 년도' 검색
- 2020 현재에도 Atom 1위 이므로 나는 Atom 다운
A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
atom.io
ATOM 사용법
1. 프로젝트 시작 : File - Open Folder - 저장되길 원하는 폴더 선택
- 폴더 우클릭 - New File - 파일이름.html(워드 .doc / 한글 .hwp)
2. 브라우저에서 웹페이지 열기
- 다른 컴퓨터에 저장되어 있는 웹페이지 열기
- 주소창에 해당 주소 쓰기
- 웹 브라우저와 같은 컴퓨터에 있는 웹페이지 열기
- 웹브라우저 열기 - ctrl+o - html파일선택
'프로그래밍언어 > HTML' 카테고리의 다른 글
[HTML] <meta> 태그의 속성들 (0) | 2020.11.14 |
---|---|
[HTML] 링크달기 <a>태그로 웹사이트 만들기 (0) | 2020.11.12 |
[HTML] 부모-자식 태그와 문서구조 (0) | 2020.11.11 |
[HTML] 줄 바꿈 태그와 이미지 태그(+속성) (0) | 2020.11.08 |
[HTML] 기본 문법 태그(+검색하는 법) (0) | 2020.11.07 |