본문 바로가기

반응형

개발

(14)
중간점검_Reset my Coding Roadmap Where Am I? and What do I need? 지금까지 [생활코딩]의 WEB1_html&Internet -> WEB2_CSS의 기본을 공부했는데, 퍼블리셔가 되고 싶은 것은 아니기에 개발 뒷단의 과정을 이해해보고자 한다. 깃허브에 지금까지 공부하면서 나름대로 push 하면서 했다. 두 가지 language를 사용했다. 너무 미약하여 차마 commit contribution은 옮길수가..좀 더 분발해서 나중에 올려보도록 하겠다. 앞으로는 이런 순서로 [생활코딩] 강의를 열심히 또 들어보고자 한다. My Coding Roadmap 잘해보장!
[생활코딩] WEB2 CSS_코딩의 핵심은 '중복 방지' 극단적인 상황을 가정해보라 수많은 html 페이지에서 동일한 을 적용해줘야 하는 상황, 만약 바꿔줘야 하는 동일한 내용이 1억개의 페이지에서 발생한다면?! 이 때의 끔찍함을 막아주기 위해, style.css라는 페이지를 따로 마련해주고, 기존 html의 사이에 들어있던 내용을 복사 붙여넣기 해준다. 그리고 태그가 있던 자리에 다음과 같이 입력해준다. style.css로 연결하고, 그 안에 들어있는 내용들을 소환해 마치 태그에 들어있던 것처럼 작동하렴~이라는 뜻이다. 바로 이렇게! style.css로 따로 빼주지 않을 때에는, 각각의 페이지에서 을 확인해줘야 했다. 즉, 코드의 길이가 길어졌을 때 일일이 확인하기 어려울 것이다. (가독성, 유지 /보수 높일 수 있어!) 웹페이지에서 개발자 도구 > sour..
[생활코딩] WEB2 CSS- 미디어쿼리 반응형 웹 반응형 디자인 Responsive Web! 수많은 형태의 화면에서 동작해야하는데, 그래서 여러가지 화면에 대응되는 웹페이지를 만들기 위해 고려해야한다. 다양한 환경에서 적응할 수 있는 이 기술들을 발전시킨 끝에, '반응형 디자인'이라는 최신 흐름까지 나타나게 된 것이다! 화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해서 동작하게 되는 것이 바로 반응형 디자인이다. 이 반응형 디자인을 순수한 웹, CSS에서 구현하는, '미디어 쿼리'를 배워보겠다. 일단 이렇게 기본 세팅을 해놓고, 화면의 크기가 800px을 기점으로 반응형으로 변하게 해보는 것이다. @media() 라는 미디어 쿼리라는 표시를 해주고, ( ) 안에 '~일때'라는 값을 지정해준다. "화면의 width가 800px 이상일 때 ..
[생활코딩] 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 회원가입을 하고,..
[생활코딩] Git1 ( 1-7강) Git, 대체 넌 누구냐! 깃과 깃허브 개념 가볍게 알아보기 대표적인 버전 관리 시스템 Git Git은 소프트웨어 엔지니어만을 위한 수업은 아니다. git은 소스코드 지옥에서 왔지만, 문서 지옥을 경험해본 자는 모두 Git을 통해 구원받을 수 있다! Git은 프로그래머만의 전유물이 아니다. 핵심은 프로젝트의 복잡성을 획기적으로 낮출 수 있다는 점이기 때문이다. 혼자서 한 두개의 문서를 한 번에 작성해서 혼자 보기 위해 보관하고 있다면, 천국에 있는 것이다. 천국에 있는 자에게는 Git같은 도구를 알려주는 것이 지옥이 될 수 있다. 일부러 지옥에 뛰어들어야할까? 현실이 지옥이 되는 것은 시간 문제다. 지옥에 대면했을 때, 무엇을 통해 지옥을 빠져나가는 것을 아는 것 정도가, 아직 지옥에 있지 않은 사람들의 목표가 되어야 한다. 우리의 목표는 적당함이다. git이 필..

728x90
반응형