분류 전체보기
-
[HTTP] 개요생활코딩/WEBn 2020. 8. 27. 11:54
[강의 출처] opentutorials.org/course/3385 WEB2 - HTTP - 생활코딩 2018년 8월 1일부터 14일까지 10일동안 코딩야학 4기가 시작됩니다. 혼자 공부하지 마시고, 함께 공부해보세요. 현업의 엔지니어들이 기술지원과 상담을 해드리고, 완주하신 분들께는 수료증도 드 opentutorials.org HTTP HyperText Transfer Protocol 웹브라우저와 웹서버가 컨텐츠(html, 이미지, 오디오, css, js, ...)를 주고 받기 위해 사용하는 통신규칙 웹브라우저의 요청(Request)과 웹서버의 응답(Response)을 위한 메시지로 구성되어 있다 웹브라우저의 개발자도구 - 네트워크에서 통신 내용을 확인할 수 있음 HTTP를 이용한 통신방식 요약 사용자..
-
[CSS] 반응형 디자인(Responsive Design), Media Query생활코딩/WEBn 2020. 8. 26. 17:16
[강의 출처] opentutorials.org/course/3086/18323 반응형 디자인 - 생활코딩 반응형 디자인과 미디어 쿼리 소개 강의 소스코드 변경사항 미디어 쿼리를 이용해서 반응형 디자인 구현하기 강의 소스코드 변경사항 opentutorials.org 반응형 디자인(Responsive Design) 웹 특성상 PC, mobile, 여러 운영체제 등 다양한 환경에서 적절하게 동작해야할 필요성 대두 화면의 크기에 따라, 웹페이지의 각 요소들이 반응하여 그 화면에 최적화된 형태로 동작하는 디자인 미디어 쿼리(Media Query) 반응형 디자인을 구성하는 핵심적인 기술 태그 내에 @media(조건문) { 실행 } 형식으로 작성 스마트폰의 가로모드, 세로모드를 비롯한 다양한 크기의 화면에 대응할 수..
-
[CSS] 레이아웃: Box Model, Grid생활코딩/WEBn 2020. 8. 25. 17:31
[강의 출처] opentutorials.org/course/3086/18319 박스모델 - 생활코딩 CSS box model 소개 강의 소스코드 변경사항 박스 모델을 써먹기 강의 소스코드 변경사항 opentutorials.org Box Model tag를 감싸는 Box형 부분들(padding, border, margin, width 등)에 효과를 줌으로써 디자인함 width: 텍스트의 너비 display: 글자의 부피 지정, block(그 줄 전체), inline(텍스트만큼의 부피), none(사라짐), grid, ... Grid 가로/세로 2차원 레이아웃을 나누기 위해 사용 의 해당 태그에서 display: (inline-)grid 로 정의하여 사용 가능 div(block), span(inline) 태..
-
[CSS] Selector: class, id생활코딩/WEBn 2020. 8. 24. 20:57
[강의 출처] opentutorials.org/course/3086/18329 CSS 선택자를 스스로 알아내는 방법 - 생활코딩 강의 내용이 많고 복잡합니다. 시간을 충분히 확보하고 시작하세요. 소스코드 변경사항 opentutorials.org Cascading: 선택자(Selector) 우선순위 id > class > tag(element) class (코드 작성자가) 텍스트들을 어떤 의도에 따라서 그룹화할 때 쓰는 선택자(Selector) 다른 태그에 class="class이름" 형태로 삽입 한 태그에 여러 class 중첩이 가능하며, 띄어쓰기로 구분 여러 class가 중첩된 경우, HTML CSS JS 2. 같은 계열 Property의 Value라면 아래처럼 표현 가능, Value의 순서는 중요하지..
-
[CSS] 정의, Selector, Declaration, Property, Value생활코딩/WEBn 2020. 8. 24. 19:37
[강의 출처] opentutorials.org/course/3086 WEB2 - CSS - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 아름답게 디자인�� opentutorials.org CSS란? HTML의 후배(?)격인 디자인 최적화 언어 HTML 덕분에 웹페이지 형태의 정보 공유가 가능해진 이후, '아름다움'에 대한 추가적인 요청이 생김 처음에는 HTML의 디자인 관련 태그를 이용했으나, 점차 이에 최적화된 새로운 도구 CSS가 필요 '정보'와 '디자인'을 제공하는 코드가 섞이면서 정보로서의 가치가 희석될 뿐 아니라, 변화(전체 텍스트의 색..
-
[Internet] Mac 내장 Apache로 웹서버 운영하기생활코딩/WEBn 2020. 8. 21. 21:02
[강의 출처] opentutorials.org/course/3084/18894 웹서버 운영하기 : 맥 - 생활코딩 자신의 운영체제에 맞는 수업을 찾아서 학습해주세요. 맥에 웹서버 설치하기 웹서버와 http 웹브라우저와 웹서버의 통신 --- 맥에 웹서버 설치 이번 시간에는 아파치 웹서버를 맥 컴퓨터에 설치 opentutorials.org 기타 참고페이지들은 본문에 적어두었다. 생활코딩 Web1 Internet편에 직접 웹서버를 운영해보는 단계가 있다. 생활코딩에서는 bitnami라는 프로그램을 통해 실습을 하는데, 아래와 같은 문구가 있는 게 아닌가. "맥에는 아파치가 기본적으로 깔려있습니다. 그래서 실습을 하기가 무척 쉽습니다." 그래서 직접 해보기로 했다. 맥에 기본적으로 깔려 있는 아파치로 웹서버를 ..
-
[Internet] 개요생활코딩/WEBn 2020. 8. 21. 21:01
[강의 출처] opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여� opentutorials.org Internet 분산된 형태의 통신 시스템 인터넷 안에서 정보를 제공하는가, 요청하는가에 따라 서버(Server)와 클라이언트(Client, 혹은 브라우저)로 구분됨 Web Internet에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간 스위스의 유럽입자물리연구소 소속 연구원이었던 팀 버너스 리가 최초의 웹브라우저를 만듦 최초의 웹은 이곳 info.ce..
-
[HTML] 개요생활코딩/WEBn 2020. 8. 20. 18:31
[강의 출처] opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여� opentutorials.org HTML Hyper Text Mark-up Language 웹페이지를 만드는 컴퓨터 언어 퍼블릭 도메인(Public Domain: 저작권이 없음) 웹브라우저에서 파일 열기를 통해 내 컴퓨터 로컬에 있는 html 파일을 열 수 있음 TAG Tag가 감싸는 텍스트의 정보(구조나 형태)를 표현하기 위한 문법적인 표시 태그를 가리키는 기호인 는 HTML상에서 <(less ..