분류 전체보기24 2. HTML - 입문 HTML 입문 참고 링크 : 1. 생활코딩 - https://opentutorials.org/course/3084 2. Heropy - https://heropy.blog/2019/04/24/html-css-starter/ 3. w3schools - https://www.w3schools.com/html/ 들어가기 전에 HTML란? HTML(Hyper Text Markup Language)은 페이지에 내용을 채우고, 그 내용이 어떤 구조와 의미를 띠는지 보여주는 언어입니다. 정보를 표현하기 위해 만들어졌으며, 웹의 구조를 만드는 역할이에요. HTML을 작성할 땐 화면을 이쁘게 하는 것보단 튼튼한 구조를 만드는 것에 집중해야 합니다. 화면을 이쁘게 만드는 것은 CSS에 맡기도록 하세요. HTML 기본 개념.. 2022. 7. 17. 1. Web이란? Web에 대해 우리가 인터넷을 사용할 때 우리는 의식하지도 못할 정도로 자연스럽게 웹사이트에 접속을 해서 볼일을 봅니다. 이러한 일련의 행위는 어떠한 과정을 거쳐 이뤄지는 걸까요? 우리가 사이트에 접속하는 가장 기본적인 과정을 그림으로 나타내면 이렇습니다. 이를 Client - Server 모델이라고 하는데, 사용자가 웹문서를 요청하면 서버에서 해당 요청에 대한 문서를 전달해 주는 방식입니다. 웹문서? 그렇습니다. 웹 '문서'입니다. 우리가 사이트에 접속할 때 우리가 보는 것은 잘 작성된 일종의 문서입니다. 어렵게 생각할 필요없이 하나의 사이트는 한권의 책, 하나의 웹페이지는 하나의 페이지라고 생각하면 됩니다. 문서에 양식이 있듯이 웹문서에도 당연히 양식이 존재합니다. 웹 문서는 HTML이라는 '마크업'.. 2022. 7. 17. (Vue 3) Custom v-directive 만들기 (Vue 3) Custom v-directive 만들기 참고문서 : https://v3.ko.vuejs.org/guide/custom-directive.html 오늘은 vue 3에서 custom v-directive를 만드는 방법을 알아보겠습니다. 만들기 앞서 v-directive란 뭔지 한번 짚고 넘어가볼게요. v-directive란? Vue로 개발을 하다보면 v-if, v-for, v-model 같은 앞에 v 접두사를 붙인 단어들을 한번씩은 사용해보게 됩니다. 이렇게 v 접두사가 붙은것들을 v-directive라고 합니다. v-directive를 사용하면 복잡한 기능을 단어 하나만 붙여서 해결하는것이 가능하기 때문에 매우 편리하고 강력한 기능이지요. 그런데 Vue에서 기본적으로 제공하는 v-direc.. 2022. 2. 21. 티스토리 블로그 검색엔진 최적화(SEO) & 구글, 네이버 검색엔진 노출시키기 티스토리 블로그 검색엔진 최적화(SEO) & 구글, 네이버 검색엔진 노출 티스토리 블로그를 몇 주간 운영하다보니 뭔가 찜찜한 것을 발견하게 됐습니다. 바로 방문 통계의 검색 유입에 네이버와 구글은 안뜨고 다음검색만 뜬다는 점이었죠. 분명 사람들은 다음보다는 네이버와 구글을 더 많이 사용할 텐데 말입니다. 원인을 알아보니 네이버와 구글의 검색엔진은 제 블로그의 존재를 몰라서 노출이 안됐기 때문이더라구요;; (전 블로그를 만들기만하면 자동으로 되는줄 알았어요...ㅋㅋㅋ) 그래서 이참에 검색엔진 노출 방법과 일반인도 간단하게 할 수 있는 검색엔진 최적화(SEO) 방법을 정리해보기로 했습니다. 목차 1. 구글 검색 노출 2. 네이버 검색 노출 3. 검색 엔진 최적화(SEO) 구글에 블로그 노출 시키기 먼저 구글.. 2022. 2. 18. Intersection Observer를 이용하여 스크롤시 등장 모션 구현하기 Intersection Observer를 이용하여 스크롤시 등장 모션 구현하기 스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x) 스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x) 조금 있어보이는 웹페이지를 구성 할 때 빠질 수 없는 것이 바로 모션(애니메이션)입니다. 모션에는 여러 종류가 있지만 오늘은 스크롤을 내 bellmir.tistory.com 저번 포스팅에서 window.scrollY와 element.offsetTop을 이용하여 스크롤 위치에따른 등장 모션을 구현하는 법을 다뤘었습니다. 그런데 이 방법은 너무 복잡하기도 하고, 여러 요소에 같은 모션을 적용한다 하더라도 각각 높이를 계산하여 따로 붙여하는 수고가 있었습니다. 오늘은 Intersection observer라는 웹 a.. 2022. 2. 18. 오픈그래프(open graph) & 트위터카드(Twitter card) 필수 속성 정리 오픈그래프(open graph) & 트위터카드(Twitter card) 필수 속성 정리 - 오픈그래프란 사이트가 SNS를 통해 공유될 때 미리보기 형식으로 나올 컨텐츠를 정하는 용도로 메타태그 안에 설정합니다. 카카오톡으로 url을 보냈을 때, 아래의 사진과 같이 사이트의 설명과 썸네일을 포함한 카드가 생기는 것을 많이 보셨을 거에요. 오픈그래프는 바로 이 카드의 내용을 설정할 때 쓰이는 것입니다. - 트위터카드는 트위터에 최적화된 오픈그래프라고 생각하면 됩니다. 보통 둘다 동시에 써주죠. 오픈그래프(SNS) 트위터카드(트위터) 오픈그래프 & 트위터카드 기본(basic) 속성 아래는 필수로 들어갈만한 속성들입니다. 속성의 이름을 보면 어떤 쓰임인지 대충 알테니 설명은 스킵하겠습니다. 보면 오픈그래프와 트.. 2022. 2. 6. 이전 1 2 3 4 다음
