생활코딩을 통한 HTML(with BGM. 부산 개발자들의 모임)_ch.1

<--WEB언어를 공부를 시작하게 된 계기-->

 

2020년에 기존의 경제학과에서 전과를 하고 이제 컴공으로 온지 한학기가 지나 이제는 2학기를 맞이하여 한3주정도가 지나는중이다.

 

이번 한 학기동안에는 내가 자료구조, 논리회로, C언어, 파이썬 등등의 수업을 들었고 여름 방학에는 동아리를 통해 앱 개발분야(엄청 짐이 많이되서 제대로 못한..팀원들께 죄송한...) 및 전체적인 개발의 흐름과정(네이버 코딩 부스트캠프, edwith강의)등을 알아보는 시간을 가지었다.  --> 이것저것 두서없이 함...ㅋㅋㅜㅠ

 

혼자서 시작한터라 삽질도 많이했고, 아직도 많이 하고 있지만 이제는 무언가를 만들어야겠다는 생각이 들었고 그중에서 web application이란것을 만들어보고자 3달 전쯤에 들어온 open 카톡방인 부산개발자들의 모임, 지금은 투표로 인해서 BGM이라는 모임으로 명칭이 바뀌었다. 내가 처음에 눈팅만 하고 인원도 없는 방이었지만 현재는 100명을 돌파하여 본격적인 정모 및 스터디를 진행하려는 모습이 보인다.

그중에서 WEB기초라는 스터디를 신청하여 방장님의 인도하에 스터디원들과 함께 생활코딩의 목차에 따라 WEB 수업을 하기위해서 신청을 했고 본격적으로 공부하려는 글들을 조금씩 이 블로그에도 남겨서 기록을 할 예정이다.

 

- 코딩을 하는 이유? 각자마다 해결하고 싶은 문제들이 있을 것 이고 없더라도 공부를 하면서 문제를 생각해서 해결하는 힘을 가지도록 하기위한 공부를 하는 것이다.

 

- 기획? 무언가를 진행할때에 있어서는 기획이란것이 참 중요하다. 항상 일을 할때나 삶을 살때도 사람들은 "속도보단 방향"이 중요하다는 말을 하지 않는가? 그것처럼 이 기획이라는 단어 또한도 앞으로의 우리의 공부 방향에 있어서 이정표가 될수잇는 중요한 것이다. 무엇을 어떻게 공부를 할지? 그리고 코딩에 있어서는 무엇을 어떤 방식으로 어떻게 만들지를 생각해보는 시간을 가지는 것이다.

 

- 우선은 공부에 앞서 먼저 내가 하는 역할과 기계가 하는 역할에 대해서 구분해보자. 

(HTML: 웹 페이지를 만드는 코드)

* HTML의 특징: 1. 배우기가 매우 쉽다, 2. 배우는데에는 쉽지만 그렇다고 중요하지 않은 언어가 아니다(중요하다는 뜻!)

 

- 웹페이지를 만들기 위한 준비물?

1. 웹브라우저가 있어야함(당연한 소리지만 글로 써봄..)

2. HTML이란 문법에 맞게 코드를 작성하는 프로그램이 필요함.(편집 editor)

--> 이번 스터디에서는 생활코딩의 공부에 맞게끔 'atom' 이라는 editor를 사용하기로 했다.

 

- atom 사용

/*** 

* 먼저 바탕화면에 'web'이라는 폴더를 만듭니다.

* 두번째로 Atom에디터를 엽니다.

* 에디터를 연 후 좌측 상단에 File라는 버튼을 클릭 후 Open..이라는 버튼을 클릭한후에 먼저 만들엇던 'web'이라는 폴더를 클릭합니다.

* 폴더를 클릭하면 좌측에는 web이라는 디렉토리를 관리하는 화면이, 우측에는 

* 좌측의 web디렉토리에서 1.html 이라는 파일을 하나 생성해 봅니다.(여기서 .html이 웹페이지의 확장자를 뜻하는것 입니다.)

* 1.html을 만든 후 맥북기준 command+O키를 누르면 파일을 열수가 있습니다.(저의 노트북에선 실행이 되지 않아서 직접 chrome를 통해서 열었습니다. --> 아직 코드를 작성하지 않았으니 빈화면이 나옵니다)

1.html의 파일에 'hello web'을 작성하여 저장하니 웹페이지에 'hello web'이 출력돠어 나옴!

***/

 

- <tag>? tag란 html의 언어로 작성된 글들을 꾸며주는 것으로 각각의 문장이나 단어를 감싼 tag들은 그 문장이나, 단어에 대해 설명을 해주는 것 이다. 그리고 이 tag란것이 우리의 일상과 굉장히 밀접한 뜻을 가지고 있다고 한다.

 

- 우리가 평소에 간과하고 있는것들: 우리는 평소에 중요한것은 어렵고 쉬운것은 사소하다 라는 생각을 하며 살아간다. 우리가 살아가는 과정속에서 시험이란것을 치고 이러한 시험들은 어려운것은 시험에 나오고 쉬운것은 시험에 나오지 않는다라는 기본적인 생각이 탑재하기 때문이다. 하지만 잘 생각해보면...아래의 사진으로 기본의 중요성을 알 수가 있다.

처음에 배우는 것은 쉽지만 매우 중요한 것이고, 나중에 배우는것은 점점 어렵지만 덜 중요한 것 이다.

- 앞으로 각각의 tag들에 있어서 모르는 것들은 각자가 추론을 통하여 스스로 알아 보도록 하자.(필요한 tag들을 잘 검색해서 가지고 오는 능력을 기르자!)

 

- 현재의 tag는 150개 이상이 있기 때문에 다 외우는것이 힘들수가 있다. 그래서 검색을 통해서 아는것이 중요하고, 기본적으로 밑천으로 외우고자하는 tag들이 있다면 통계를 통해서 많이 쓰이는 tag들을 알아보도록 하자.

(참고 사이트:https://www.advancedwebranking.com/html/ )

The average web page from top twenty Google results

 

- <br>과 <p>의 차이

*<p>: 어디서부터 어디까지가 한 단락인지를 표현 할 수 있는 태그이기 때문에 열리는 태그와 닫히는 태그가 존재함 

*<br>: 단순한 줄 바꿈 태그

==> 의미에 맞는 태그를 잘 사용하는것이 중요하다!

 

 

 

 

 

 

 

 

- BGM(부산 개발자들의 모임): https://cafe.naver.com/busandevelopers

부산 개발자들의 모임 (BGM) : 네이버 카페