<생활코딩 - WEB - WEB1 - HTML & Internet>
1. 부모자식과 목록
1 부모태그와 자식태그: 자식태그가 부모태그 안에 그룹핑 되어있음.
대부분의 경우, 둘은 필요에 따라 관계가 달라질 수 있음.
2 <li></li>: list의 약자로 목차를 표현할 때 쓰는 태그.
(<li>같은 항목태그는 <ul>같은 부모태그가 필요함)
3 <ul></ul>: unordered list의 약자로 목록을 구분해주는 부모태그.
(<ul>는 자식태그를 그룹핑시켜주는 태그로서 반드시 자식태그가 필요함)
4 <ol></ol>: ordered list의 약자로 글 순서대로 숫자(1. )를 자동 삽입해줌.2. 문서의 구조와 슈퍼스타들
1 정보를 잘 정리하기 위해서 구조가 필요함.
2 <title></title>: 웹페이지의 제목을 정해주는 태그. 검색엔진이 웹페이지를 분석할 때 가장 중요하게 여기는 태그이다.
3 <meta charset=“utf-8”>: character set (문자규칙)을 정하고 명령하는 코드이다.
현재 내가 사용하는 atom 내의 html 코드는 UTF-8로 작성되었다.
웹페이지에서 구현될 때도 UTF-8로 구현되라고 명령하는 태그이다.
(문자 표현 방식이 다를 때, 문자가 깨져 보인다.)
4 <head></head>: 본문을 설명하는 구간을 알려주는 태그.
5 <body></body>: 본문 구간을 알려주는 태그.
6 <html></html>: body 태그와 head태그를 감싸는 태그.
7 <!DOCTYPE html>: 이 웹페이지가 HTML로 만들어졌다는 것을 알리는 코드.
8 브런치 메인화면에서 소스보기를 해보았다.
내가 방금 배운 코드들이 첫 줄부터 보였다.
이렇게 오픈된 정보들을 그동안 존재조차 알지 못했다는 게 정말 신기했다.
그리고 줄 나누기, 들여 쓰기 등 잘 정리된 코딩 문자들을 보니,
기분이 좋고 신이 나기 시작했다.
왜 코딩을 볼 때마다 그런 기분이 드는지 아직은 잘 모르겠다 :)
9 뒤이어 구글과 네이버, 카카오(kakaocorp)의 메인 사이트에서 소스보기를 해보았다.
일부분은 줄 나눔이 되지 않은 통째의 문장들이 검은색으로 가득 있어서 ‘어머 이게 뭐야,,’라며 당황했다.
내가 잘못 검색한 건가…
10 나도 코딩을 오픈 소스로 만들 때, 한눈에 이해하고 정보를 알기 쉽도록 깔끔하게 만들어야겠다.
그리고 이게 좋은 마음가짐인 지 잘 모르겠지만,
예쁜 코드를 보면 기분이 좋으니까 나도 코드를 ‘보기 좋게’ 만들고 싶다. 3. HTML 태그의 제왕
1 <a></a>: anchor(닻)의 첫 글자로서 HyperText를 뜻한다.
2 <a href=“”> : HyperTest Reference의 약자로, 글에 링크를 걸어서 “” 사이의 주소로 이동할 수 있게 한다.
3 <a href=“” target=“_blank”>: 링크 웹사이트로 이동할 때, 새 창에서 열리게끔 해준다.
4 <a href=“” title=“”>: 링크 위에 커서를 올렸을 때, 제목을(툴팁으로) 보여준다. - 여기까지 공부하고 난 후, -
생활코딩을 만든 이 분은 진정한 의미에서 스승이라 불릴 수 있는 사람이다.
한 가지 방법만 옳다고 생각하는 시대가 수도 없이 오래 지속되어왔다. 이제서야 다양한 방법이 각각의 상황에서
모두 옳을 수 있다는 생각이 점차 퍼져가기 시작하지만, 내가 초중고등교육을 받을 때까지는 그렇지 않았다.
생활코딩을 만든 분이 말씀하신 것처럼 나도 수업시간에 딴생각을 많이 했고, 성적표는 내가 공부를 싫어하고 못한다는 신호를 계속 줬다.
그렇기에 내가 성인이 되어서 배우는 것을 좋아하게 되고 직접 공부를 찾아 즐기면서 하게 된다는 생각은 꿈에도 하지 못했다.
한 생명이 탄생해서 한 사람으로 자라기까지는 교육이 정말, 정말 큰 영향을 끼친다. 사람들은 모두 각자의 방식대로 존재하고, 그 방식에 맞는 교육방법도 모두 다르다.
이 사실을 많은 사람들이 알고 인정하고 조금씩 교육방법을 다양히 구상했으면 좋겠다. 진심으로.
생활코딩 그분은 영상 말미에 이런 말을 했다.
“이 수업에 참여하고 계신 학우 여러분도 링크를 통해서 정보를 탐험하고, 문제를 해결하고 있으면서 그 과정이 즐겁다면,
여러분은 이미 공부를 좋아하고 잘하고 있는 것입니다.
그 사실을 인정하셨으면 좋겠습니다.”
학생이었던 나와 현재의 내가 갖고 있는 공부의 의미는 같은 것이라 할 수 없을 정도로 달라졌다. 4. 웹사이트 완성
1 기존에 만든 1.html을 복제(Duplicate)해서 같은 파일 3개를 더 만들고 각각 2, 3, index라는 이름을 붙여줬다.
2 index.html 파일은 제목인 ‘WEB’에 링크를 걸어 웹에 대한 설명을 달았다.
3 1.html 파일은 리스트(목차) 중 첫 번째인 ‘HTML’에 링크를 걸어 html에 대한 설명을 달았다.
4 2.html 파일은 리스트(목차) 중 두 번째인 ‘CSS’에 링크를 걸어 cascading style sheets에 대한 설명을 달았다.
5 3.html 파일은 리스트(목차) 중 세 번째인 ‘JavaScript’에 링크를 걸어 자바스크립트에 대한 설명을 달았다.
6 진짜 웹사이트 같은 사이트가 만들어졌다! 내가 이런 걸 생성하다니 너무 신기하다. ㅎㅎ 꼭 혼자서 작은 집을 지은 기분이다.
물론 아직도 많은 기술과 태그를 통해 더 구색을 만들고 정보를 표시해야겠지만, 예쁜 모래성이라도 쌓은 기분이다. 5. 원시웹
1 인터넷의 역사: 1960년대, 중앙집중적인 통신 시스템의 취약 부분을 극복하고자,
각 통신장치들이 상호 부조하는 시스템인 인터넷이 탄생한다.
2 웹의 역사: 1980년, 스위스의 유럽입자물리 연구소의 팀 버너스 리가 웹의 전신이 될 프로그램을 반복해서 만든다.
10년 동안 반복하다가 1990년 연구소에 인터넷이 도입되자, 웹페이지를 편집하는 프로그램을 만든다.
2-1 1990년 11월, 세계 최초의 웹브라우저인 ‘World Wide Web’이 만들어진다.
1990년 12월 24일, 웹서버가 완성된다. 도메인 네임은 info.cern.ch 라고 정한다. - 여기까지 공부한 후, -
info.cern.ch를 검색해보았다. 내가 직접 만든 웹페이지와 똑같은 모양의 화면이 나타났다. 페이지 소스를 봤다. 내가 직접 작성한 코딩에 쓰인 태그와 코드로 채워진 단 13줄의 소스가 나타났다.
너무 감동받아서 온 몸에 소름이 돋으며 눈이 뜨거워졌다. 내가 원시적인 웹과 똑같은 페이지를 ‘코딩’을 통해 만들었다는 사실이, 꼭 내가 새로운 우주에서 한 세상을 창조한 것 같은 느낌을 준다. 그 정도로 내게 이 의미가 크게 다가온다.
왜 그렇게 크게 다가오는지는 아직도 잘 모르겠다. 그렇지만, 이 일을 통해 깊은 재미를 느끼고 호기심을 품으며 생동적으로 살아있는 내 모습을 보니, 그냥 행복하다.
호기심과 재미, 이게 제일 중요한 것 같다.
그리고 문제가 발생할 때, 그걸 해결하려고 노력하면서 지식과 경험을 얻게 되니
문제는 절대 나쁜 것이 아니다. 오히려 좋은 것이다.
그리고 영상 중 우리가 모르는 새 다른 사람들이 노고를 통해 만든 서비스를 이용하고 있는 부분을 말하며, 생활코딩 창조자(?)는 이렇게 말한다.
“이런 일을 위해서 헌신하고 있는 이름도 없고, 얼굴도 없는 사람들에게 감사한 마음을 가져 보세요. 소프트웨어의 세계는 이렇게 낭만적인 사람들로 가득 차 있습니다.”
낭만적인 소프트웨어 세계,, 코딩을 배운 시점을 기준으로 내가 세계를 바라보는 시선이 많이 달라졌다.
나도 이렇게 낭만적이고 문학적인 프로그래머가 되고 싶다. 6. 인터넷을 여는 열쇠 : 서버와 클라이언트
1 인터넷은 web server와 web browser, 즉 두 대의 컴퓨터가 있어야 있을(연결될) 수 있다.
이때, 요청하는 컴퓨터는 web browser고, 응답하는 컴퓨터는 web server다.
web browser는 클라이언트 컴퓨터, web server는 서버 컴퓨터라고 이른다.
2 웹서버를 이용하는 방법은 두 가지가 있다.
첫째, 직접 웹서버를 내 컴퓨터에 설치해서 사용.
둘째, 웹서버를 제공해주는 웹호스팅 업체를 이용해서 사용.
(나는 사실 웹서버의 사전적 의미만 알지, 이게 어떻게 구동하는 건지 하나도 알지 못한다.
그래서 두려운 부분도 없고 직접 알고 싶은 호기심도 크므로, 직접 설치해 사용하려고 한다.)7. 웹호스팅(github pages)
1 웹서버를 빌려주는 업체를 웹포스팅 업체라고 부른다. html은 정적(static)인 특성을 가졌으며,
“static web hosting”이라고 검색하면 여러 가지의 무료 웹호스팅 업체를 찾을 수 있다.
2 그 유명한 github는 pages라는 기능을 통해 웹호스팅도 지원한다고 한다.
1) 깃허브에서 로그인한 후, repository(저장소)를 생성했다.
2) 그동안 만든 소스코드를 업로드했다.
3) Github Pages의 설정에서 master branch로 변경했더니, 나만의 웹주소가 나타났다.
4) 웹주소를 클릭하니, 내가 작성한 코딩을 통해 구현된 웹페이지가 나타났다.
3 동적(dynamic)인 언어(php, python, ruby, java)를 지원하는 웹호스팅은 보통 유료로 이용이 가능하다고 한다.
4 웹호스팅 목록 (검색을 통해 직접 찾아보면, 최신 사이트나 또 다른 사이트를 알 수 있다.)
1) https://bitballoon.com
2) http://neocities.org
3) Azure Blob
4) Google Cloud Storage
5) Amazon S38. 웹서버 운영하기
1 웹서버 설치
1) 직접 웹서버를 운영하기 위해서는, 컴퓨터가 항상 켜져있어야 한다고 한다. 누가 어떤 컴퓨터를 통해 정보를 요청할지 모르니.
2) 웹서버를 무료로 설치할 수 있게 해주는 소프트웨어 중 ‘아파치’가 탑 1이라고 한다.
그 아파치를 설치하기 위해 ‘Bitnami’라는 프로그램을 설치했다.
(비트나미를 설치하면, 자동으로 아파치, MySQL, PHP가 설치된다.)
3) bitnami MAMP stack 라고 검색해서, https://bitnami.com/stack/mamp 사이트에 접속했다.
4) Bitnami 설치를 완료했다.(나중에 찾을 때는 컴퓨터 상에서 ‘manager-osx’라고 검색하면 된다.)
자동으로 어떤 웹사이트가 열렸다. (이게 내가 설치한 웹서버를 통해 접속된 웹페이지이다.)
5) Manage Servers에서 아파치를 중지하거나, 실행할 수 있다.
6) 여기까지 웹서버 설치 완료!
2 HTTP 통해 접속하기
1) IP 주소를 통해 접속해봤다. <127.0.0.1:8080/index.html>
(8080인 이유는 웹서버의 포트 번호는 기본적으로 80을 쓰기로 약속했는데,
지금 접속한 웹페이지는 내가 별도 설치한 웹서버를 통해 접속된 것이기 때문에,
둘을 구분하기 위해 80을 두 번 이어 쓴 것이다.)
2) 내 컴퓨터의 IP 주소를 통해 접속해봤다. <http://192.168.1.31:8080/index.html>
3) 기존에 htdocs에 있던 파일을 모두 삭제하고, 내가 만든 html 파일을 이동시켰다.
4) 내 컴퓨터와 핸드폰이 같은 와이파이 환경에 있는 것을 확인하고, 핸드폰에서 위의 http 주소로 접속해봤다.
5) 내가 만든 웹페이지가 나타났다.!!!!
6) 빨리 나만의 웹페이지를 만들어 사람들과 소통하고 싶다.!9. 수업을 마치며 1
1 첫째,
1) 기술은 본질과 혁신으로 나눌 수 있다.
2) 학습은 교양과 직업으로 분리할 수 있다.
3) 본질과 교양, 혁신과 직업은 같은 결을 띤다.
2 둘째,
1) 배우는 순서와 속도대로 볼 때, 학습의 난이도는 점점 높아지고 중요도는 점점 낮아진다.
즉, 제일 처음 배우는 것이 가장 쉽고 가장 중요하다. 반면, 배워갈수록 점점 어렵고 덜 중요해진다.
3 셋째,
1) 난이도와 중요도 그래프의 중간에는, 상상력으로 볼 수 있는 중간지점이 있다.
2) 그 지점을 기준으로 앞 쪽은 교양이자 본질을 배우는 부분, 뒷 쪽은 직업이자 혁신을 배우는 부분으로 구분할 수 있다.
3) 교양 단계에서는 들이는 노력에 비해 능력이 크게 발전한다.
반면, 직업 단계에서는 이미 능력이 높아져 있는 상황으로, 들이는 노력에 비해 능력은 미미하게 발전한다.
4) 교양 단계에서는 내가 갖고 있는 능력보다 발전하는 속도를 보고,
직업 단계에서는 발전하는 속도보다 내가 갖고 있는 능력을 보면 마음이 크게 힘들지 않을 것이다.
5) 그러나, 반대로 보게 되면 마음이 너무 힘들어진다.
4 넷째,
1) 부정적인 감정; 자괴감, 소외감, 불안함은 실력 향상에 도움이 된다.
2) 긍정적인 감정; 만족감, 자신감, 기대감도 실력 향상에 도움이 된다.
3) 그렇다면, 보다 긍정적인 감정을 가지며 실력을 향상하는 것이 사는 데 더 즐겁지 않을까?10. 수업을 마치며 2
1 복잡함
1) 세상은 눈에 보이는 복잡함과, 눈에 보이지 않는 복잡함이 있다.
2) 코딩으로 체크박스 단 10개를 만들어 테스트하려고 해도, 수백 번의 테스트가 필요할 만큼 쉽게 복잡해진다.
3) 눈에 보이는 것은 단 10개의 체크박스이지만, 눈에 보이지 않는 것은 수백 번의 테스트가 필요한 사실이다.
이런 비가시성 복잡함 때문에 어려운 것을, 프로그래머들은 자신이 부족에서 어려운 것이라고 오해하고 좌절하기가 쉽다.
4) 내 탓이 아니니 오해하지 말고 좌절하지 말자.
2 복잡함2
1) 단어 1개 만을 통해 의사를 전달하려면, 아주 많은 단어를 알고 있어야만 한다.
2) 그런데 단어 몇 개를 조합해 의사를 전달하려면, 단어의 배치에 따라 의미가 달라지니
비교적 적은 수의 단어로 훨씬 더 많은 의미를 전달할 수 있다.
3) 이처럼 복잡함은 우리에게 이득이 되기도 한다.
3 이때 중요한 것은, 진도를 멈추고 지금까지 배운 몇 가지 안 되는 기능을 직접 반복해서 익숙하게 만드는 것이다.
1) 내 인생에서 중요한 정보를 정리 정돈해보면, 더 예쁘고 편리하게 혹은 생산적으로 만들고 싶은 욕구가 점점 생길 것이다.
2) 그런 불만족이 쌓이고 쌓여서, 절망감이 충분히 성숙할 때가 바로 공부할 때이다.
3) 그때 하는 공부는, 우리를 삶의 힘든 부분에서 구원해주는 존재가 될 수 있다.
4 오늘의 일기라는 웹페이지를 만들었다.
내 브런치 블로그를 링크했고, 내 코딩처럼 투박하지만 따뜻하고 편안해 보이는 집 이미지도 보기 좋은 사이즈로 첨부했다. 11. 수업을 마치며 3
1 영상, 그림, 컨텐츠 등 모든 자료는 공공재로서 허락 없이 자유롭게 사용이 가능하다고 한다.
(어떻게 이처럼 순수하게 정보를 나누기 위한 프로젝트를 진행했을까..)
2 앞으로의 공부 방향. 자신이 생각하기에 중요한 언어부터 공부하면 된다.
1) CSS: 웹사이트를 아름답게 하는 언어.
2) JavaScript: 웹페이지 내에서 사용자와 상호작용 하게끔 하는 언어.
3) Back-end: 생산성 극대화해주는 언어. 아래의 언어들은 서로 경쟁관계에 있다.
원하는 언어를 선택해 공부하면 되고, 하나를 배우면 다른 언어 배우는 게 보다 수월해진다.
1 PHP
2 JSP
3 Nodejs Express
4 Python Django
5 Ruby on Rails
6 ASP.net
4) 광고 수업: 웹페이지에 광고 달아서 수익 창출하는 방법 알려주는 수업
3 알고 있는 지식을 이용해 프로젝트를 하거나, 컨텐츠를 만들면 자기가 알고 있는 것이 공고히 된다. 프로젝트를 시작해야겠다.
4 HTML 수업 끝.12. 부록 : 코드의 힘 - 동영상 삽입
1 유튜브 영상에서 ‘퍼가기’를 선택하니, iframe으로 시작하는 코드가 나왔다.
그 코드를 복사해서 내 html에 붙여 넣기 하니, 내 웹페이지에서 무려 유튜브 영상이 재생되기 시작했다!! 혁신적이다!!
2 무엇이든지 다 할 수 있을 것만 같은 느낌이 충만하게 차오른다.13. 부록 : 코드의 힘 - 댓글 기능 추가
1 DISQUS 같이 댓글을 지원하는 사이트의 코드를 복사해서 내 html에 붙여 넣기 했다.
2 http를 통해 접속되는 웹사이트에서만 댓글 기능이 활성화되기 때문에,
아파치를 켜고 localhost 주소를 입력해서 내 웹사이트에 접속했다.
3 와우, 댓글 기능이 추가되었다.14. 부록 : 코드의 힘 - 채팅 기능 추가
1 tawk 같이 채팅을 지원하는 사이트에서 코드를 복사해서 내 html에 붙여 넣기 했다.
2 아파치를 켜지 않았고, 사이트에 회원가입을 하지 않았기 때문에 기능을 직접 실험해보긴 어려웠다.
3 까다롭고 복잡한 채팅 기능을 코드 복사, 붙여 넣기를 통해 내 웹사이트에 쉽게 삽입할 수 있다는 것을 안 데 의의를 둔다. 15. 부록 : 코드의 힘 - 방문자 분석기
1 analytics.google.com 같은 사이트에서 tracking 코드를 복사해서 내 파일(에서 head 태그 안)에 붙여 넣기 하면,
방문자에 대한 정보를 수집해준다.
2 방문자가 어떤 언어를 얼마나 사용하는지, 어떤 지역에서 방문하는지 등 데이터가 모인다.
3 이 데이터는 당장 이용계획이 없더라도 모아두는 것이 좋다. 나중에 분석할 수 있도록 유의미한 자산이 되기 때문이다. - 여기까지 공부한 후, -
드디어 html 코드라는 것을 배워 봤다.
전혀 힘든 느낌 없이 오랜만에 진심으로 즐거웠고, 더 많은 것을 알고 실험해보고 싶다는 생각이 가득하다.
💡 Software Engineer - F.E