코딩 맛집

HTML, CSS, 자바스크립트 등 퍼블리싱 기술들을 배우다 보면, 무료로 호스팅을 해보고 싶을 때가 있습니다. 그리고 직접 운영을 해봐야 퍼블리싱 실력도 향상할 수 있겠죠? 이번에는 Github이라는 플랫폼을 활용해서 무료로 서버에 나의 html, css, 자바스크립트 코드들을 호스팅 할 수 있는 방법에 대해서 포스팅 해보겠습니다. 먼저 깃허브 계정이 없으신 분들은 만들어주시고, 아래 절차대로 따라해주세요. 1. github으로 Repository 만들기 github으로 리파지토리를 만들어주세요. 그리고 이 리파지토리 안에 호스팅 할 소스코드들을 넣어주고 설정을 변경해주면, 깃허브로 호스팅 할 수 있습니다. 2. Github Pages 설정 변경 깃허브에서 리파지토리를 만들고 나서, 해당 리파지토리에서..

네이버, 다음, 구글 과 같은 포털에 SEO를 만족하기 위해서는 다양한 방법들이 있습니다. 그중에서 image 를 SEO에 맞게 최적화 시키는 방법에 대해서 알려 드리겠습니다. 1. alt 태그란? alt 태그는 시각장애인들을 위한 목적으로 만들어진 태그 입니다. 아래와 같이 img 태그의 속성으로 사용 됩니다. 시각장애인들은 이미지를 볼수 없기 때문에, alt 태그의 적혀 있는 내용을 보고, 스크린 리더기가 alt 태그의 내용을 음성으로 읽어주게 됩니다. 따라서, 저와 같은 블로그를 운영하시는 분들은 alt 속성을 img 태그의 꼭 넣어 주시는 것이 좋겠죠. 그리고 구글 SEO(검색엔진) 또한, 시각장애인을 배려한, alt 태그를 사용한 문서(글)을 더 좋아합니다. 그러면 상위 노출에도 더 유리 하겠습..

모바일 웹 환경에서 스크롤이 작동하지 않을때, overflow 속성의 scroll 또는 auto를 사용하여 스크롤을 만들 수 있습니다. overflow-x x축, 수평 부분의 내용이 넘칠때 overflow-y y축, 수직 부분의 내용이 넘칠때 visible : 요소의 내용이 넘어가도, 그대로 보여 줍니다. (기본값) hidden : 넘친 자식요소를 부모 요소 만큼 가립니다. scroll : 스크롤바를 항상 표시 합니다. auto : 내용이 넘칠때만 스크롤바를 표시 합니다.

a 태그 상에서 href의 url로 이동 하지 않고 특정 이벤트를 발생하고 싶으신가요? 그럴때 주로 사용 하는 방법이 있습니다. 1. 2. 3. 이와 같은 방법을 사용 할수 있습니다. href내의 url 대신의 javascript 구문을 쓸수 있어 호출하고 아무것도 하지 않도록 하는 것입니다. 또한 'href=#' 을 호출하여 아무 기능도 안하도록 할 수 있는데요. 하지만 이것은 페이지 상단으로 이동하게 되는 단점이 있습니다. 이를 예방하기 위한 방법도 있습니다. 이 방법에 대해서는 여기서 설명 하도록 하겠습니다. https://blog.naver.com/world9604/221966099958

1. img 태그의 before, after를 사용할 수 없어요. img 태그에 가상요소(Pseudo-element) before 와 after 을 사용해서 img 태그의 설명을 넣을려고 노력 한적이 있습니까? 아무리 애를 써도 이것은 되지 않습니다. img 태그는 no Ending tag(닫는 태그가 없는 태그) 이기 때문 입니다. no Ending tag는 - img 태그 - br 태그 - hr 태그 등이 있습니다. 이런 태그들은 가상요소(Pseudo-element) before, after, first-letter, first-line, selection 를 사용 할 수 없습니다! 2. 가상요소를 사용할 수 없는 이유 왜냐 하면 닫는태그가 없기 때문에 자식으로 텍스트도 다른 태그도 담을 수 없기 때..

데이터베이스를 사용하지 않고 브라우저에서 사용자 정보를 저장 하기 위해서는 어떻게 해야 할까요? JavaScript API 를 이용해서 사용자 정보를 저장 할 수 있습니다. 쿠키 보다도 더 강력 합니다. 쿠키보다 데이터 저장공간도 훨씬 뛰어납니다. 1. Window.localStorage 2. Window.sessionStorage 이 객체를 이용 할수 있습니다. 이 객체들은 다음과 같이 사용 할수 있습니다. // 데이터 저장 localStorage.setItem('index', '123'); sessionStorage.setItem('index', '123'); // 데이터 읽기 localStorage.getItem('index'); sessionStorage.getItem('index'); // 모든..

개발을 하다 보면 여러 html 소스 코드 안에 중복된 html 소스코드를 사용해야 할 경우들이 있습니다. 이럴 경우 중복된 소스 코드를 피하기 위해서 어떻게 할 수 있을까요? html 안의 html 넣는 방법에 대해서 알아 보겠습니다. 1. w3schools 에서 소개하는 방법 자바스크립트를 사용해서 html 파일을 넣는 방법 입니다. https://www.w3schools.com/howto/howto_html_include.asp includeHtml 이라는 함수를 만들어서 자바스크립트로 동적으로 로드 하는 방법 입니다. 모두가 포함되는 자바스크립트 파일을 하나 만들어서 includeHtml 함수를 호출하여 사용하면 되겠죠? 2. jquery load 함수 이용 jquery와 html을 삽입할 태그 ..

img 태그가 가로 세로 비율을 유지한채로 반응형 웹사이트를 제작 한다고 하면 어떻게 해야 할까요? 당연히 반응형 웹사이트 제작이니깐 img 태그에 고정 픽셀을 적용 하면 안되겠죠? img{ width : 400px; height: 300px; } 이런식으로 고정 픽셀을 적용 하면 브라우저가 줄거나 늘때 이미지의 크기는 고정되어 있습니다. 그렇다면, 우리가 원하는 형태는 1. 이미지의 가로/세로 비율 유지 2. 이미지 바로 상위 노드의 크기에 따라서 이미지의 크기 변경 이것이 우리가 원하는 목표 입니다. 1. 이미지의 가로/세로 비율 유지 브라우저는 사실 이미지의 비율을 알고 있습니다. 따라서 우리는 width 나 height 둘중 하나의 크기만 알려주면 그 값을 기준으로 나머지 하나의 크기도 계산하여 ..

display : flex 를 사용할 때 Container의 너비가 변할시의 item 너비 비율을 어떻게 조절 할수 있을까요? item 들의 flex-grow = (item 의 증가 비율) flex-shrink = (item 의 감소 비율) 을 설정 하여 Container의 너비 값이 변할때 각각의 item 의 증가/감소 비율을 설정 할 수 있습니다. Container의 너비 값이 변할때를 확인 하기 위해서는 애니메이션이 동작할때 변화를 체크 할수 있겠죠. 1. flex-grow flex-grow의 값은 증가비 를 의미하며, 0일 경우는 영향을 주지 않습니다. 2. flex-shrink flex-basis의 값이 주어졌다면, (flex-basis) x (flex-shrink) 의 값을 기준으로 감소비 를..

1. 주축을 기준으로 item을 정렬 하는 방법 display : flex 인 Container는 item들의 정렬은 어떻게 할까요? justify-content 속성을 이용해서 정렬 할 수 있습니다. justify-content 는 주축을 기준으로 item들을 정렬 합니다. 여기서 주축은 'flex-direction: 값' 의 값을 의미 합니다. .container{ display: flex; flex-direction: row; //기본값 justify-content: flex-start; } flex-start : 시작점 부터 정렬 flex-end : 끝점 부터 정렬 center : 가운데 정렬 space-between : 첫번째 item은 시작점에, 마지막 item은 끝점에, 나머지 item은 골..