티스토리

공부기록

검색하기

블로그 홈

공부기록

grace-go.tistory.com/m

고구마광팬 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[생활코딩_WEBn] 웹서버 운영하기 - 2 (HTTP와 IP) --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 웹서버 운영하기 LINK 1 : https://opentutorials.org/course/3084/18891 Window : https://opentutorials.org/course/3084/18893 MAC OS : https://opentutorials.org/course/3084/18894 Linux : https://opentutorials.org/course/3084/18895 ---------------------------------------------------------- 1. 한 컴퓨터에 서버-브라우저 다 있을 때 비트나미 설치 후.. 공감수 0 댓글수 1 2020. 9. 10.
티스토리 블로그 애드센스 HTML 넣는 법 티스토리 블로그 애드센스 HTML 넣는 법 애드센스를 신청하다 보면, 어떤 태그를 블로그의 html에 붙여넣으라고 한다. 구글에 나와있는 방법이 너무 모호해서 구글링을 통해 찾아낸 방법을 간단하게 공유한다 ! 1. 블로그로 들어와서 관리 2. 왼쪽 카테고리에서 꾸미기 - 스킨편집 3. 블로그 화면과 편집하는 부분으로 나뉘어지는데, 편집하는 부분 우측에서 HTML 편집 4. 사이에 코드를 붙여넣기 하면 된다. 끝 ! 공감수 0 댓글수 0 2020. 9. 7.
[생활코딩_WEBn] 웹서버 운영하기 - 1 (Bitnami 설치) --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 웹서버 운영하기 LINK 1 : https://opentutorials.org/course/3084/18891 Window : https://opentutorials.org/course/3084/18893 MAC OS : https://opentutorials.org/course/3084/18894 Linux : https://opentutorials.org/course/3084/18895 ---------------------------------------------------------- 내 컴퓨터에 웹서버 설치하기. 보통은 실습이 잘 작동하지 않을.. 공감수 0 댓글수 0 2020. 9. 4.
[생활코딩_WEBn] 웹호스팅 (github pages) --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 웹호스팅 (github pages) LINK : https://opentutorials.org/course/3084/18891 ---------------------------------------------------------- 웹 서버 운영이란? 컴퓨터가 있어야함 컴퓨터가 항상 켜져있어야 함 웹서버 프로그램 배워서 깔아야 함. 인터넷을 통해 웹서버에 연결할 수 있게 여러 조치해야 함. 웹 호스팅 웹 호스터(web host) : 인터넷이 연결되어 있는 컴퓨터 한 대 한대 웹 호스팅 회사(web hosting) : 웹서버를 운영하기 위한 컴퓨터.(=호스.. 공감수 0 댓글수 0 2020. 9. 4.
[생활코딩_WEBn] 인터넷을 여는 열쇠 : 서버와 클라이언트 --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 인터넷을 여는 열쇠 : 서버와 클라이언트 LINK : https://opentutorials.org/course/3084/18890 ---------------------------------------------------------- 인터넷이 동작하는 가장 기본적인 원리 컴퓨터 최소 두 대 필요. 둘이 정보를 주고받기 시작하는 순간, 새로운 시대가 열린다! 팀 버너슨 리의 두 대의 컴퓨터 web brower 가 설치된 컴퓨터 web server가 설치된 컴퓨터 http://info.cern.ch - 하드디스크(블라블라 디렉터리 안에 index.html.. 공감수 0 댓글수 0 2020. 9. 3.
[생활코딩_WEBn] 원시웹 --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 원시웹 LINK : https://opentutorials.org/course/3084/18889 ---------------------------------------------------------- WEB1의 두개의 산 웹페이지 만들기. - 코딩이 무엇인가? 웹사이트 배포 - 내가 만든 웹페이지에 인터넷을 통하여 누구나 접촉할 수 있도록 1. 웹을 이해하기 웹이 나온지는 30년이 되었다. 웹의 역사를 거슬러 올라가서, 웹이 세상에 처음 등장했을 때 도착하면 웹의 본질이 있을 것. 웹이 웹이기 위해 필요한 순수한 것만이 있을 것이고, 이것을 통해 웹을.. 공감수 0 댓글수 0 2020. 9. 3.
[생활코딩_WEBn] 웹사이트 완성 --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 웹사이트 완성 LINK : https://opentutorials.org/course/3084/18431 ---------------------------------------------------------- 링크로 연관된 페이지 연결하여 웹사이트 만들기 링크 : 본드 / 실, 연관된 페이지를 연결해서 책(웹사이트)을 만드는 역할 생활코딩의 예제 : https://web-n.github.io/web1_html_internet/index.html 내가 만든 웹사이트를 보여주고 싶은데 아직 배포하는 법을 모른.. 다.. (초보.. ) 1. 어떤 부분을 어떤.. 공감수 0 댓글수 0 2020. 9. 3.
[생활코딩_WEBn] HTML 태그의 제왕 --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * HTML 태그의 제왕 LINK : https://opentutorials.org/course/3084/18418 ---------------------------------------------------------- 링크 태그 1. 링크 태그의 수식어 태그의 제왕 검색엔진의 원천 정보의 고립을 막음 하루에 백번도 넘게 사용함 HTML의 약자 Hyper Text Markup Language에서 Hyper Text anchor(배가 정박할 때 사용하는 닷. 정보의 바다에 정박한다의 시적인 표현)의 첫 글자 2. 링크태그 사용 이전에 만들어 놓은 웹페이지에 .. 공감수 0 댓글수 0 2020. 9. 3.
[생활코딩_WEBn] 문서의 구조와 슈퍼스타들 --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 문서의 구조와 슈퍼스타들 LINK : https://opentutorials.org/course/3084/18409 ---------------------------------------------------------- html의 구조 문장 모여서 페이지 - 페이지 모여서 책 - 책에는 제목과 저자. 정보가 많아짐에 따라 정보를 잘 정리 정돈하기 위한 책-구조가 필요함. 책의 제목, 저자 등 html tag frequency 그래프에서 최상위 권의 태그들 공부할 것. 1. 책(웹)의 제목 짓기 1) 현재의 제목 : 파일명 2) title 태그 : 웹의 .. 공감수 0 댓글수 0 2020. 9. 2.
[생활코딩_WEBn] 부모 자식과 목록 --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 부모 자식과 목록 LINK : https://opentutorials.org/course/3084/18408 ---------------------------------------------------------- 1. 부모-자식 태그 1) 포함하고 있는 태그 : 부모 태그 2) 포함된 태그 : 자식태그 -> HTML에서는 부모자식 태그가 막 바뀜 -> 부모-자식 관계가 정해진 태그가 몇 가지 있음. 목차 만들기 1. ul - li list를 만들기 위해서는 태그 사용. (줄 바꿈 해준다/ br 대신 사용) list를 하나로 묶기 위해서 태그 사용. (까.. 공감수 0 댓글수 0 2020. 9. 2.
[생활코딩_WEBn] 최후의 문법 속성과 img --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 최후의 문법 속성과 img LINK : https://opentutorials.org/course/3084/18407 ---------------------------------------------------------- 속성 : 태그의 심화된 문법. -> 태그와 속성이면 HTML의 모든 문법 마스터. 1. 사진 넣는 법 1) img 태그 리그 오브 레전드란? 리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 전략 게임입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을.. 공감수 0 댓글수 0 2020. 9. 2.
[생활코딩_WEBn] HTML이 중요한 이유 --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * HTML이 중요한 이유 LINK : https://opentutorials.org/course/3084/18488 ---------------------------------------------------------- 1. HTML 은 중요하다. 1) 보통 말하는 '기초가 중요하다.' : 응용으로 가는 과정으로써 중요하다. 2) 하지만, 기초만으로도 할 수 있는 일이 많음. -> 우리가 배운 것만으로도 할 수 있는 것 소개할 것. 3) HTML이 왜 ! 중요한가? 2. 첫 번째 이유 : 정보성 - 비즈니스적인 측면(feat. 정보사회) 1) 게시물을 쓸.. 공감수 0 댓글수 0 2020. 9. 2.
[생활코딩_WEBn] 줄바꿈 --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 줄바꿈 LINK : https://opentutorials.org/course/3084/18403 ---------------------------------------------------------- 1. 줄바꿈을 위한 경쟁관계에 있는 태그 두 가지. 1) 코드에서 줄바꿈을 한다고 해도, 화면에서 줄 바꿈 되어 나오지 않는다. 따라서 별도의 태그 필요. 2) br tag (추천 검색어 : HTML new line tag - 직접 검색해서 찾아보기! ) 리그 오브 레전드란? 리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 서로의 기지를 파괴.. 공감수 0 댓글수 0 2020. 9. 1.
[생활코딩_WEBn] 통계에 기반한 학습 --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 혁명적인 변화 통계에 기반한 학습 LINK : https://opentutorials.org/course/3084/18452 ---------------------------------------------------------- 1. HTML의 150개의 태그 1) 우리는 이 태그를 다 알 필요가 있을까? 다 알 필요없음. 이전 시간에 배운 혁명적인 변화 때문에 (태그를 알게 되었으니 검색하여 태그들을 알 수 있다. ) 2) 그렇다고 해서 하나도 모르면 불편. 어떤 태그들을 공부해야 할까? -> 통계기반 학습! 3) 구글에서 웹 페이지를 분석한 것 정리.. 공감수 0 댓글수 0 2020. 9. 1.
[생활코딩_WEBn] 혁명적인 변화 --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 혁명적인 변화 LINK : https://opentutorials.org/course/3084/18400 ---------------------------------------------------------- 1. 우리가 태그를 알게 된 것은 혁명적인 변화이다 ! 1) W3C 홈페이지에 접속해서, 우클릭-페이지소스 보기를 하면 어떤 html 코드로 홈페이지가 만들어졌는지 알 수있다. *w3c : 웹에 대한걸 만드는 모임. 2) 엄청 복잡해 보이는 코드. 불쾌하다 하지만 불쾌만 한가? 우리는 태그를 알기 때문에, 태그를 알기 전에 봤을때와는 확연한 차이가.. 공감수 0 댓글수 0 2020. 8. 31.
[생활코딩_WEBn] 기본 문법 - 태그 --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 기본 문법 - 태그 LINK : https://opentutorials.org/course/3084/18392 ---------------------------------------------------------- 아래의 문장에서 중요한 단어들을 강조하고자 한다. 그때 두 가지의 ''태그'를 이용하여 강조 표현을 할 수 있다. 리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 전략 게임입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁.. 공감수 0 댓글수 0 2020. 8. 31.
[생활코딩_WEBn] 5. HTML 코딩과 실습환경 준비 --------------------------------------------------------- * 생활코딩 WEBn 정독하기 project * 5. HTML 코딩과 실습환경 준비 LINK : https://opentutorials.org/course/3084/18448 ---------------------------------------------------------- 1. 코딩을 위해 필요한 것 : 웹브라우저 + HTML(컴퓨터, 사람도 이해할 수 있는 컴퓨터 언어. )를 작성할 프로그램. -> editor - 내장되어있는 에디터 : window - 메모장, mac .. 등 - 각각 에디터들이 원래 코딩하기 위함은 아님. - 코딩 전문적인 도구 사용할 것 -> 여기에서는 아톰 ! - 아톰 .. 공감수 0 댓글수 0 2020. 8. 31.
<JS> 객체지향 프로그래밍 개발방법론 절차지향 vs 객체지향 *객체지향 프로그래밍 * 1. - 객체 : 하나의 완성되어 있는 형태 ( 눈에 보이는것 vs 눈에 보이지 않는 것) ex) 핸드폰 ( 객체 ) : 통화, 메세지, 인터넷, 어플 .. 2. 기능의 구조에 대한 이해 함수 -> 기능 ( 메소드 ) -> 클래스 (틀) -> 인스턴스 *붕어빵과의 비유* 메소드 : 팥, 슈크림.. 클래스 : 붕어빵 틀 인스턴스 : 붕어빵 3. 1) 추상화 : 눈에 보이지 않는 것을 추상적으로 만들기. (객체, 개발구조 만들기, 기능단위 만들기.. ) 2) 캡슐화 : 데이터나 기능을 보호하기 위한 방법. 3) 상속 : 재활용 할 수 있는 것을 분리하는것. 상위개념 (class) 4) 합성 : js에서는 표현하기 힘들다. 기능을 합치는 것 5) 다형.. 공감수 0 댓글수 0 2017. 9. 1.
<JS es6> es6 class +) class 상속 * es6 class / 상속 * 1. ES6 class ES5 이전 버전 : 객체지향프로그래밍을 그럴듯하게 표현하기 위해 함수를 클래스처럼 사용한 것. 원래 js 에는 클래스 개념이 없다. 1. 리터널클래스 ( 객체. 자체로 인스턴스) 객체지향프로그래밍에 맞지 않다. 상속x 2. 함수방식 클래스 ( 함수, new로 인스턴스화) 객체지향 프로그래밍에 맞지 않다. 상속x 3. 프로토타입 방식 클래스 (함수, new로 인스턴스화, .prototype으로 변수, 메소드 생성) 상속 o -> 객체지향프로그래밍에 맞다 4. ES6 (ECMA script2015)(==프로토타입클래스) : 상속 o class 클래스명 { constructor(매개변수){ ... } ... } 으로 구성된다. constructor는 .. 공감수 0 댓글수 0 2017. 9. 1.
<JS> 클래스(class) * 클래스 * 함수(메소드) 와 변수( 멤버변수 ) 의 집합 1) 리터널방식 ( literal ) : 객체형태. 자체가 인스턴스이다 ( 일회용 ) 2) 함수방식 클래스 : 함수형태. new연산자 사용하여 인스턴스 만듬 ( 확장성 ) 3) 프로토타입방식 클래스 : 함수형태. - new연산자 사용하여 인스턴스 만들고(확장성) .prototype을 이용하여 데이터를 추가한다. - 상속 가능( 관리 용의성 ) 1. 전역변수, 전역함수는 협업할 때 합리적이지 않다 ( 이름이 겹치면 곤란해짐 ) -> 클래스 이용 - 전역변수와 전역함수로 이루어진 코드 - 위의 코드를 클래스(리터널클래스) 로 만들었을 때 * this * 현재 속해있는 객체, .. 영역 상황에 따라 다르다. - 전역에서의 this * : 100의 값.. 공감수 0 댓글수 0 2017. 9. 1.
<JS> 스코프체인(scope chain) 과 클로저(closure) 1. 스코프체인 : 스코프가 계속 연결됨. ( 중첩 ) 스코프 안에 스코프 만들기 * 타 언어에서는 안된다 * - outFunc 안의 inFunc outFunc 호출 하면 outFunc를 실행하면서 inFunc의 호출명령을 읽으면서 inFunc가 실행된다. inFunc 는 전역의 a, outFunc의 b 이용. 2. 클로져 (closure) : private ( != public) 스코프 체인을 만들었을 때, 내부함수를 반환하여 저장하면 외부함수에 있는 변수가 보호, 유지 되는것. 여러개의 클로져를 만들어도 각각 별도로 저장된다. - 일반적인 스코프 체인 실행하기. : 외부함수 open을 호출하고, open을 실행하면서 inner함수의 선언을 읽고 inner함수의 호출문을 읽으면서 inner함수를 실행한.. 공감수 0 댓글수 0 2017. 9. 1.
<JS> 스코프(scope) (호이스팅, es6 변수) 스코프 (scope) : 제한된 영역. {} 로 영역을 표시한다 1. 전역과 지역 - 전역변수 global과 지역변수 local - local host(내 PC)와 remote(서버) 1) 전역변수 global : 전체 영역에서 사용될 수 있는 변수 2) 지역변수 local : 제한된 영역에서 사용될 수 있는 변수. (number함수 내에서 사용되는 num1이 지역변수이다 ) 3) 전역변수와 지역변수 * 같은 이름의 변수이지만 함수 number 지역에서는 다른 변수를 가진다. 2. 호이스팅 (Hoisting) : 스코프에서 생성된 변수. ( 전역도 해당하긴 한다) 에서 일어남. 끌어올리다. 라는 뜻으로 변수를 스코프 내에서 선언하면 스코프의 가장 상단에서 변수의 존재를 인식한다. 하지만 변수의 값은 선언.. 공감수 0 댓글수 0 2017. 9. 1.
<JS es6> let, const, 변수명 만으로 선언하기 변수 선언할 때 쓰는 let 과 const, 변수명만으로 선언하기 1. let (ie 11이후부터 사용 가능) : 유일한 변수. 같은 이름으로 또 만들 수 없다 - 같은 이름으로 변수 선언하기 - 오류 - 같은 이름 선언 없애면 - 오류 안남 - 안에 들어가는 내용 바꿀 수 있다 - 오류 x 2. 변수명만으로 선언하기 : 오류 x. 지역에서 선언해도 전역변수로 선언된다. 3. const : 상수. 안의 데이터를 바꿀 수 없다 - 바꾸려면 오류. 공감수 0 댓글수 0 2017. 8. 25.
<jQuery> each 반복문 반복문 each 여러개의 태그가 선택되었을 때 각 태그 하나하나 돌아가면서 설정한 기능을 실행하는 것. (jQuery에서만 가능한 반복문이다) each(function(실행되고 있는 태그의 순서를 나타내는 매개변수){ ....}) ex) 이렇게 10까지. 위의 슬라이드 기능의 ani 함수를 이런식으로 나타낼 수 있다. 공감수 0 댓글수 0 2017. 8. 25.
<plugin> Owl Carousel (2) -API API 플러그인을 우리가 조작할 수 있게 만들어 놓은 것. open API ex) 네이버지도, sns로 로그인하기, 타 사이트에서 sns 좋아요 누르기 등 owl carousel에 옵션, 메소트, 콜백이 있다. 1. option owl-carousel 함수 실행에 객체형태로 매개변수로 들어가 여러가지 선택사항들을 마음에 드는 대로 바꾸는 것. https://owlcarousel2.github.io/OwlCarousel2/ 접속 -> 상단의 Docs -> API의 option 많은 종류의 옵션이 있다. {해당 옵션의 이름 : 원하는값 , 해당 옵션의 이름 : 원하는 값 .. } 의 형태로 사용한다 (예) *responsive : 반응형. 사이즈마다 원하는 옵션을 넣을 수 있다. 1000~ 600 ~ 100.. 공감수 1 댓글수 0 2017. 8. 25.
<plugin> Owl Carousel2 (1) 시작하기 Owl Carousel : 슬라이드 플러그인 https://owlcarousel2.github.io/OwlCarousel2/ 사용하기 1. 홈페이지 접속 https://owlcarousel2.github.io/OwlCarousel2/ 2. 다운로드 - 다운로드된 폴더 필요한 파일들을 모아서 정리하기. -> docs로 들어가기 -> asset -> owlcarousel -> js파일 복사해서 원하는 폴더에 넣기 -> assets -> css, theme.css 파일 외에 원하는 것 골라 파일에 넣기. 3.파일 연결하기 -Docs - Installation - 아래의 내용 따라서 파일 연결하면 된다. 4. HTML, CSS 설정하기 , owl-carousel 실행 아래의 내용 따라 HTML, CSS 설정, .. 공감수 0 댓글수 0 2017. 8. 25.
<plugin> bxslider(1) -설치, 실행 * bxslider * (http://bxslider.com/) 1. 반응성이 좋다 2. 수직의, 수평의, 사라지는 모드의 애니메이션 제공 3. 슬라이드는 이미지, 비디오, 단순HTML을 가질 수 있다 4. touch와 swipe( 터치디바이스에서 옆으로 미는 것) 제공 5. CSS의 transition을 사용한다 ( 반응성 높음) 6. 충분한 callback API과 방법들 7. 파일사이즈가 작고, 테마가 많고, 시행하기 간단하다 8. Firefox, Chrome, Safari, IOS, Anderoid, IE7+지원 9. 환경설정 가능하다. 사용하기 1. 홈페이지 접속 http://bxslider.com/ * 홈페이지 메인화면 맨 아래에 사용방법 나와있음* 2. 다운로드 - 다운로드한 파일 - 필요한.. 공감수 1 댓글수 0 2017. 8. 25.
<plugin> plugin * 플러그인 * ( 제이쿼리 플러그인 ) : 이미 누군가 만들어 놓은 기능을 쉽게 가져다가 사용할 수 있게 해 놓은 파일들 사용방법 1) 기능검색 ex) 슬라이드, 메뉴, 탭, 패럴럭스, 메이슨리.. ( 영어로 구글검색 하는게 좋다) 2) 다운로드 3) 내 환경에 맞춰 설청 (HTML, CSS, js, 폴더구조 . ) 4) 실행 공감수 0 댓글수 0 2017. 8. 25.
<jQuery> 슬라이드 만들기 * 슬라이드 * 설정 가능한 옵션 1. 슬라이드 너비 2. 한 화면에 뜨는 박스 갯수 3. 총 박스 갯수 1. 변수, 시작화면 선언 2. 함수 부분 3. 본체. 실제로 실행되는 부분 공감수 2 댓글수 0 2017. 8. 25.
* animation 비교 (js vs jQuery vs CSS3) * animation 비교 js vs jQuery vs CSS3 1. js (setInterval) : 길고 어렵고 만들기 귀찮은 점이 있다. 2. jQuery (animate) 3. CSS3 (transition) : CSS에서 다 만든 후 js 파일에서 event를 감지하고 class를 추가한다. 1. 크로스브라우징 : jQuery가 용이하다. (낮은 버전의 브라우저도 안정적으로 지원해줌)2. 속도( 퍼포먼스) : jQuery < CSS3 (jQuery) jQuery는 라이브러리의 도움을 받는다. CSS는 자체 웹킷 사용 3. 관리 - jQuery : HTML, CSS, 동작 다 따로 관리해줘야 함 - CSS3 : CSS파일 안에서 스타일과 동작을 다 관리한다. js는 .. 공감수 1 댓글수 0 2017. 8. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.