[코딩야학]HTML태그와 개발을 배울때 알면 좋은 팁!

"코딩야학 강의를 정리한 노트입니다"

해커톤을 준비하며...

24~25일 멋쟁이사자처럼 6기 해커톤이 예정되어 있습니다. 지난 한 학기동안 학교다니면서 온라인 강의와 오프라인 세션을 통해 웹 프로그래밍을 배웠었는데요.아무래도 학교를 다니면서 준비하다보니... 개발&개발공부를 할 시간이 많이 부족했습니다... 개발에 대한 열정과 기대가 컸기에 아쉬움이 너무나도 크게 남아있었는데... 다행히(?) 해커톤을 준비할 '방학'라는 시간이 제게 주어졌기에 방학한 뒤로 밀렸던 강의도 듣고 팀원들과 프로젝트도 하나하나 하고 있습니다... 하지만 '완벽함'에 대한 욕심일까요 개발을 하고 배우면 배울수록 조금 더 알고 싶고 자세히 알고싶어지는게...조금 씩 커져만가네요...ㅎㅎ 그러던 중 '오픈튜토리얼스'의 이고잉님이 기획하신(?) '코딩야학'라는 프로젝트를 접하게 되었고 열흘 남짓한 기간동안 알차게 기본을 다시 잡고자 강의를 듣게 됬습니다. 따라서 이 글은 '코딩야학'강의를 바탕으로 한 제 '생각을 정리한 노트' 라고 생각하시면 될 것 같습니다!

HTML이란

HTML란 Hyper Text Markup Language의 약자로 우리가 인터넷 상에서 보는 화면들을 구성하는 언어라고 생각하면 될 것 같습니다. 아직은 배우는 단계이므로 HTML의 특징은 어떠며, 어떤 장점과 단점이 있는지, 이론적 배경이 무엇인지는 자세히 다루지 않겠습니다. 물론 역사와 배경 그리고 특징을 알고 공부를 하면 조금 더 좋겠지만 우리의 목표는 '초보자를 위한 웹 개발'이기에 궁금하신 점은 더 찾아보시면 좋을거 같아요!

https://www.w3.org/

HTML 간단한 속성

1. Easy 쉽다 : 개발을 막 시작하려는 초심자가 하기에 가장 좋은 마크업 랭귀지 입니다

2. Important 중요하다 : 우리가 하루에도 100번이상 보는게 뭘까요?? 바로 인터넷입니다

3. Public Domain : HTML은 지난 27년간 누구의 소유도 아니었다고 합니다. 이러한 오픈소스 생태계는 HTML의 가장큰 특징이자 장점이죠!

HTML을 간단히 구현해 보아요

준비물 : 웹 브라우저 + 편집기

웹 브라우저란 우리가 일상생활에서 많이 사용하는 어플리케이션(?)을 말합니다. 예를들어 메이크로 숴프투의 익슈플로러, 구그ㄹ의 크로옴, 리눅스의 퐈이어 폭스 등이 있죠 (제품명을 말해도 되는지 몰라서 이렇게 적었습니다... 글적글적...)

편집기란 우리가 작업할 코드들을 적을 메모장 같은 건데요. 윈도우 유저라면 한번 쯤 사용해본 '메모장'도 텍스트 편집기 중 하나입니다.

우리는 구글의 크롬과 Atom편집기를 사용해서 코딩을 해볼 거에요

준비물 : 구글 크롬 + Atom 편집기

구글 크롬은 다 알거라는 가정하에 아톰 편집기 설치 방법을 간단히 알려드리겠습니다. 구글에 Atom라고 검색하면 바로 메인 사이트에 접속이 가능해요. 자신의 컴퓨터가 윈도우라면 윈도우 버전으로 다운로드 받으시면 되고 맥이면 맥 버전으로 받으시면 됩니다! 그 외에 인스톨은 정말 간단하기에 어려우시면 댓글 달아주세요!

Atom Editor 시작하기

Hello world~

그럼 Atom 에디터를 한번 시작해 볼까요

설레는 마음으로 Atom 편집기를 열어보는데.... 오....!!!!

(젠장 다 영어 잖아...)

(여기까지군...)

라고 생각하시는 분들 많으실거 같아요...ㅠㅠ

저도 처음엔 그랬는데요.... 하나하나 설명해드릴테니 쉼호흡 크게 하시고 따라오세요

만약에 그래도 진정이 안된다면..... Youtube에 Relaxing music 듣고 천천히 따라오셔요(그래도 안되면 놀다오세요)

Open Folder로 작업환경 만들기

오른쪽 상단에 File을 누르시면 Open Folder 란이 있어요. 못찾으시면 ctrl + shift + O(영어 0)를 누르시면 됩니다.

<중간정리>

1. Open Folder 열기

2. 바탕화면에 새폴더만들기

3. 새폴더의 이름은 web

4. 폴더선택

5. 깔끔하죵~