본문 바로가기

반응형

생활코딩

(27)
[생활코딩] WEB2 CSS -10강, 11강 (div와 grid) 1. 그리드 디자인을 위해 어떠한 의미도 담지 않은 태그가 필요한 순간이 있다. 무색무취의 태그 => 블럭 엘리먼트 => 인라인 엘리먼트 CSS에도 부모자식 태그가 가능하다 id값을 주어 묶을 수 있다! 드디어 그리드 사용 등장! disply: grid; grid-template-colums: ___ ____ 이 전체 문서 중, 이 부분에 주목해보자 일부러 그리드의 영역을 확인하기 위해 solid pink와 gray로 표현했다. grid -template-columns을 주었을 때 요렇게 변하는 군! 이 내용을 응용해서, 만들던 페이지에도 그리드를 적용해보았다! 바로 이렇게. 그런데 저 박스 크기만큼만 내려온 border-right 선을 더 쭈욱 내리고 싶은데 흠.. 어떻게 할 수 있을까? 다음 강의를 ..
[생활코딩] WEB2-CSS 1강, 2강, 3강, 4강 (CSS의 탄생 배경 & CSS 기본 문법) 1. CSS 등장 배경 WEB이 처음 세상에 등장했을 때에는 단 하나의 서비스만 있었다. 바로 HTML. HTML을 이용해서는 전자문서를 만들 수 있었다. 컴퓨터를 이용해서 정보를 표현할 수 있었고, 인터넷을 통해 전세계 누구나 볼 수 있게 할 수 있었다! 당시로서는 혁명적인 사건이었고, 사람들은 웹에 열광하게 되었다. 처음에는 html으로 문서를 만들 수 있게된 것만으로도 만족했지만, 곧 여러가지 불평들이 생기게 되었다. 수많은 불만족 중에 웹페이지를 좀 더 보기 좋고, 아름답게 만들고 싶다는 불만이 CSS의 등장 배경이다. 문서의 글꼴, 문자의 크와 색상, 가운데 정렬, 문서의 배경 이미지를 넣고 싶어요 등등등 웹페이지를 아름답게 만들 방법에 대한 깊은 고민에 빠지게 된다. 두 가지 방법이 있었다. ..
[생활코딩] WEB1_22강, 부록 (HTML_동영상 삽입, 댓글 기능, 채팅 기능 추가하기) 이제 WEB1을 중심으로, 필요한 것에 따라 WEB2의 다양한 과정들을 이수하면 된다! 이에 앞서서, WEB1 부록 영상들을 간단히 메모하고 넘어가겠다. 1) 동영상 삽입하기 유튜브에서 '공유하기'를 누르면, 다음의 모습이 뜬다. 이때 저 '퍼가기'를 누르면, 다음의 소스코드를 얻을 수 있다. 우리는 이 동영상을 삽입하는 태그라는 것을 유추할 수 있다. html에 를 걸어, 그 안에 iframe 코드를 복사해 붙여넣기 하면, 동영상을 띄울 수 있다! 2. 댓글 기능 개발 직접하기 전에, 직접 구현하지 않고도 남이 만든 댓글 기능을 우리 웹사이트에 포함시킬 수 있다! Disqus를 이용하는 것이다. https://disqus.com/ https://disqus.com/ disqus.com 회원가입을 하고,..
[생활코딩] WEB1 - 19강( 19, 19.1.1, 19.1.2, 19.1.3_ 웹서버, Apache, bitnami, 웹브라우저, 통신) 19. 웹서버 운영하기 웹서버라는 제품 군에는, 여러 제품이 있다. Apache, IIS, Nginx, ...등 우리는 아파치를 쓸것! 오픈소스고 무료다! 단 한번도 일등의 자리를 빼앗긴 적이 없는..! "how to install apache http server OS(window, mac, etc)" 이고잉쌤이 그런 말씀을 해주셨다. 컴퓨터를 만든(?) 어떤 천재 수학자에게 수학을 잘하는 방법을 물어봤더니, 수학을 잘하게 되는 게 아니라 익숙해지게 되는거라는 대답을 했다는 것이다. 우리는 이 웹과 인터넷의 무한한 세계에서 19. 1.1 웹서버 설치(윈도우)_ Apache 윈도우에 설치하기 how to easy install apache on window > bitnami wamp stack 아파치를 ..
[생활코딩] WEB1-HTML&Internet 16강,17강, 18강 (웹과 인터넷, 웹서버, 웹호스팅) WEB1-16.원시웹 WEB의 본질? 정보 기술에 대한 관점 포인트를 넓혀보자! 인터넷과 WEB과 같은 혁명적인 무언가를 만들기 위해서는, 이것들의 탄생과 소멸에 대해 알아야 한다! Internet vs WEB? 인터넷이 도시라면, 웹은 건물 하나 인터넷이 운영체제라면, 웹은 그 운영체제 위에 있는 프로그램 하나라고 할 수 있다. 웹의 메소포타이마에 왔다. 인터넷이 등장한 1960년 이래로, 엘리트들만의 시스템이었던 인터넷이, 1990년 web을 만나면서 드디어 대중화의 길을 겪게 된다. 인터넷이 갖고 있는 잠재력을 제대로 사용한 시스템이 많지 않았는데, WEB이 등장하면서 인터넷의 잠자고 있던 가능성을 제대로 깨우는 정보 시스템이 등장한 것이다. 이렇게 웹과 인터넷은 함께 결합해서 폭발적인 성장을 하게..
[생활코딩] Github.com 1강/ Dropbox와 Git의 비교 저번 GIT1시리즈 강의에 이어서 GIT2로 바로 넘어가려다가, 가장 최신 버전의 (4개월전) Github 관련된 강의가 더 가벼운 버전으로 업로드 된 걸 발견했다. 7강으로 이루어진 요걸 먼저 솩 훑고 넘어가려 한다. 앞쪽개념/내용은 이전 포스팅과 살짝 겹친다. [생활코딩] Github.com www.youtube.com/playlist?list=PLuHgQVnccGMDWjb0TWItMCfDWDs8Y3Oo7 Github.com - YouTube www.youtube.com 버전관리 & 백업 & 협업 Dropbox Google Drive OneDrive iCloud 파일의 변경사항을 추적하고 백업하고 공유해주는 서비스다. 이중의 원조격인 Dropbox 사업계획서에는 대략 이런 얘기가 써있다. "개발자들이..
[생활코딩] Git1 ( 1-7강) Git, 대체 넌 누구냐! 깃과 깃허브 개념 가볍게 알아보기 대표적인 버전 관리 시스템 Git Git은 소프트웨어 엔지니어만을 위한 수업은 아니다. git은 소스코드 지옥에서 왔지만, 문서 지옥을 경험해본 자는 모두 Git을 통해 구원받을 수 있다! Git은 프로그래머만의 전유물이 아니다. 핵심은 프로젝트의 복잡성을 획기적으로 낮출 수 있다는 점이기 때문이다. 혼자서 한 두개의 문서를 한 번에 작성해서 혼자 보기 위해 보관하고 있다면, 천국에 있는 것이다. 천국에 있는 자에게는 Git같은 도구를 알려주는 것이 지옥이 될 수 있다. 일부러 지옥에 뛰어들어야할까? 현실이 지옥이 되는 것은 시간 문제다. 지옥에 대면했을 때, 무엇을 통해 지옥을 빠져나가는 것을 아는 것 정도가, 아직 지옥에 있지 않은 사람들의 목표가 되어야 한다. 우리의 목표는 적당함이다. git이 필..
[생활코딩] Web 11강, 12강, 13강, 14강, 15강 최후의 문법 속성 & img image를 넣고 싶을 때 쓰는 tag 라는 태그의 이름만으로는 정보가 부족한 경우가 있다. 그래서 새로운 문법을 출연시켰다. 이미지 소스의 링크 주소를 "" 사이에 넣어준다. 그러면 웹페이지에 해당 이미지를 삽입할 수 있게 된다. unsplash에서 무료 이미지를 하나 골라 나의 web폴더에 다운로드 받아서, 해당 이미지 네임을 "" 사이에 넣어주었다. 이미지 크기가 너무 커서, 화면에 딱 맞추기 위해 width="100%"도 추가해주었다. 검은 밑줄 친 저 두개와 같은 것들을, Attribute라고 한다! 부모자식과 목록

728x90
반응형