본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.
생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.
생활코딩
일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.
www.youtube.com
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠. 온라인 강의 소개 입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은
opentutorials.org
"어떤 문제가 우리 삶에서 중요하고 심각할 수록
그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."
(생활코딩 : Web1 -1 수업소개. 중)
#1 실습환경 구축
생활코딩 WEB1에선 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)이란?
코딩, 개발을 공부하면서 느끼는 거지만 정말 많은 언어와 오픈소스, 프레임워크가 존재한다.
혹시 모르는 용어(프로그램)이 나온다면 그 때 그 때 공부하도록 하자.
아톰은 오픈소스 형태의 OS X, 리눅스, 윈도용 문서 및 소스 코드 편집기이다.
Node.js로 작성된 플러그인, 깃허브가 개발한 임베디드 깃 관리 지원을포함한다.
대부분의 확장 패키지는 자유 소프트웨어 라이선스를 취하며 커뮤니티가 만들고 관리하고 있다.
(후에 기회가 된다면 오픈소스 라이선스에 대하여 포스팅할 시간을 마련해 보겠다)
아톰 에디터의 가장 큰 장점은 무료이고, 플러그인으로 기능을 쉽게 확장할 수 있다.
또한, HTML/CSS/JavaScipt와 같은 웹기술로 화면을 구현했기 때문에 웹페이지를 편집하듯이 UI 제어가 가능하다.
#2. hello, World! 찍어보기
모든 코딩의 시작은 hello, world!
word의 확장자 명은 .doc, PDF의 확장자 명은 .pdf 이듯이 웹페이지의 확장자명은 .html이다.
!아톰 프로그램에서 메뉴바가 보이지 않는다면?
생활코딩 페이지의 댓글란을 읽어보니 메뉴바가 보이지 않는다는 댓글을 종종 확인할 수 있다.
이 문제는 (ctrl+v) View 메뉴 -Toggle Meun Bar 누르면 해결할 수 있다.
"지금까지 웹페이지에 대한 소비자로만 살아오셨다면, 이제 생산자로서 첫발을 뗀 것입니다."
(생활코딩 : Web1 - 4 HTML 코딩 실습 환경 준비. 중)
#2+) 아톰, 좀 더 스마트하게 사용하자!
윈도우 : File - Settings
맥 : Atom - Preferences...
Settings의 Editor화면에서 Soft Wrap : 자동 줄 바꿈
Settings의 Editor화면에서 Show Indent Guide : 태그 사이에 가는 실선을 보여줌
#3 기본문법 : 태그
Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.
강조표시 : <strong> ~ </strong>
Hypertext Markup Language (HTML) is the standard markup language for <strong> creating web pages </strong> and web applications.
밑줄 : <u> ~ </u>
Hypertext Markup Language (HTML) is the standard markup language for <strong> creating <u>web</u> pages </strong> and web applications.
태그 : HTML 코딩 안에서 문법의 비유 및 은유
#3+) 수업시간에 배우지 않은 다른 HTML 기초 태그에 대하여 알아보자!
<head>
<meta> 태그 : meta 태그는 키워드 혹은 제목, 요약을 나타내는 태그
<title> 태그 : title 태그는 문서의 제목을 나타내는 태그로서 활용
<link> 태그 : link 태그는 주로 css 파일을 연결할 때 사용하는 태그
link 요소의 속성을 살펴보면,
'href'는 해당 css파일의 주소를 기입한다.
'type', 'rel'에는 css파일과 대응하게 적어줘야 한다.(물론, link 요소는 css파일 외 다른 외부요소와도 연결할 수 있다.)
<style> 태그 : html문서안에 css를 그대로 사용하고자 할 때 사용하는 태그
<script> 태그 : src 속성을 넣어 외부에 있는 js와 연동하거나,
src 속성을 사용하지 않고 javasript 코드를 넣어 사용할 수 있다.
<body>
제목 태그 : <h1>, <h2>, <h3> ....
<p> 태그 : 문단 태그
<pre> 태그 : 형식화된 텍스트를 나타내는 태그
<br> 태그 : 줄바꿈 태그
<hr> 태그 : 장면의 전환, 다른 화제로의 전환 // html5 표준 상 주제의 분리적 요소로 사용
<em> 태그 : 글자 기울이기
<a> 태그 : 하이퍼링크
<img> 태그 : 이미지 출력
목록 태그 : <ul>, <ol>, <li>
<ul> : 순서가 없는 목록, <ol> : 순서가 있는 목록, 두 태그 다 하나이상의 <li>를 가져야 함
<div> 태그 : 레이아웃을 짜는 태그
테이블 : <thead>, <tbody>, <tfoot>의 레이아웃 구조(생략 가능)
테이블의 행은 <tr> 셀은 <td>로 나타내며, td는 rowspan과 colspan을 속성으로 가질 수 있음.
<caption> 태그로 표의 제목을, <th> 태그로 열의 제목을 표현 가능
<form> 태그 : 서버와의 통신을 위한 필수적인 태그
action과 method 속성을 가지고 있으며,
action은 태그가 가진 정보를 넘겨주는 페이지 method는 넘겨줬을 때의 방식 설정
<input> 태그 : form 태그의 하위요소로 타입에 따라 각기 다르게 설정
<textarea> 태그 : input 요소의 "text"타입과 비슷하나, 한 줄만 입력이 가능하지 않고 긴 내용 입력가능
<select> 태그 : 셀렉트 박스를 출력해주는 태그
<fieldset> 태그 : 폼 태그들을 그룹화하는 태그, <legend> 태그 : fieldset태그의 이름 명명
공부한 자료 : https://conol.tistory.com/24
기초적인 태그만 정리했는데도 이렇게나 많다..
특히나 form태그의 경우 이후 실습을 거쳐가며 다시 한번 확인하여야 할 부분이다.
'오픈튜토리얼스 > 생활코딩 : Web1' 카테고리의 다른 글
| [생활코딩|WEB1#5] 문서의 구조와 슈퍼스타들, HTML 태그의 제왕2019.12.26 (0) | 2019.12.26 |
|---|---|
| [생활코딩|WEB1#4] 최후의 문법속성과 img, 부모 자식과 목록 2019.12.25 (0) | 2019.12.25 |
| [생활코딩|WEB1#3] 줄바꿈, HTML이 중요한 이유 2019.12.22 (0) | 2019.12.23 |
| [생활코딩|WEB1#2] 혁명적인 변화, 통계에 기반학 학습 2019.11.30 (0) | 2019.11.30 |
| [생활코딩|WEB1#0] 동기, 기획,코드와 HTML 2019.11.20 (0) | 2019.11.20 |
최근댓글