본문 바로가기
  • 실행력이 모든걸 결정한다
반응형

Frontend26

[jQuery] index를 이용한 객체 선택 완벽설명 p는 ,paragraph 태그 $($('p')[1]).css("border-width", "25"); (O) 올바른 예 $($('p[1]')).css("border-width", "25"); (X) 아래부터는 잘못된 예로, 동작하지 않음 $($(p[1])).css("border-width", "25"); (X) $('p')[1].css("border-width", "25"); (X) $('p[1]').css("border-width", "25"); (X) $(p[1]).css("border-width", "25"); (X) $(p)[1].css("border-width", "25"); (X) 구조를 설명 하자면, 선택자에 따옴표를 포함하여 jQuery함수의 인자로 넣고, (작은 따옴표(' '), 큰 따옴.. 2020. 9. 3.
[React] React 프로젝트를 Github에 배포하기 배포 하기에 앞서, Github 저장소에 프로젝트가 업로드 되어있어야 한다. 업로드 및 연동 방법은 이 포스팅을 참고하자. https://kimcoder.tistory.com/78 과정은 복잡하지 않다. 해당 프로젝트의 커맨드 라인에서 npm install gh-pages --save-dev 를 입력하자 gh-pages 패키지를 프로젝트에 설치하겠다는 의미다. 설치가 끝났으면 프로젝트 폴더 내에 있는 package.json 파일에서 다음과 같이 3줄을 추가하자. 단, homepage는 반드시 여러분의 깃허브 저장소 주소를 입력해야 한다. 그리고 커맨드 라인에서 npm run deploy를 입력하면 배포가 끝난다. 여러분들이 gh-pages를 무사히 설치 했다는 사실은, 저장소의 settings에 들어가서.. 2020. 9. 1.
[React] React를 git과 연동하여 버전관리 하기 React와 git을 연동하면 어떤 것이 편해질까? React 프로젝트를 Github에 저장하여 언제 어디서나 이어서 수행할 수 있을 뿐만 아니라, 프로젝트 내에서 수정 사항이 있을 시 변동 정보가 감지되어 수정된 목록을 확인 할 수도 있고, 수정된 파일만 commit 하여 바로바로 Github 저장소에 업데이트 할 수 있다. 아래 사진 App.js 19줄에서 Learn React!!!! 에서 ! 하나를 더 붙여 Learn React!!!!! 로 만들고 File을 저장했더니 좌측 3번째 메뉴에서 Changes에 1이 뜬 것을 볼 수 있다. 그 파일은 역시 App.js이고 ! 하나가 더붙었다는 변동 정보를 감지 한 것이다. 여러분들이 이 연동 과정을 수행하기 위해 사전에 해놓아야 하는 2가지가 있다. Vi.. 2020. 9. 1.
Fontello 아이콘으로 실제 Youtube 연결 하기 http://fontello.com/ Fontello - icon fonts generator This site will not work if cookies are completely disabled. {"assets_hash":"a3410d362ed25bd7cfd803daf277b9d7","page_data":{},"locale":"en-US","layout":"fontello.layout"} fontello.com 확대 해도 깨지지 않는 아이콘을 다운받는 꿀사이트 웹페이지를 한 층 더 멋지게 만들어준다. ​ 원하는 폰트를 클릭하고 download webfont를 누르면 파일이 다운된다. 이 두 폴더를 자신이 원하는 위치에 놓고 사용하면 된다. demo라는 웹사이트에 들어가면 아이콘명을 확인할 수 있다.. 2020. 8. 21.
전 세계 CSS 인기 속성 통계 약 121만개의 웹 사이트에 대한 통계 자료이다. 지금은 사이트에 들어가도 이 그래프를 볼 수 없지만 이미지 자료는 남아있다. 글자 크기, 색, 공백, 여백, 선 같이 웹 design에 빼놓을 수 없는 속성들이 상위 랭크를 차지하였다. 테두리가 아닌 단일선도 주로 border을 이용하는 듯 하다 2020. 8. 11.
웹페이지에 소셜 기능 추가하기 웹페이지에 영상,댓글 기능을 추가하면 웹의 질이 훨씬 높아진다복잡한 과정은 아니니 따로 그림은 첨부하지 않겠다. 1. 영상유튜브, 네이버 플레이어의 공유나 퍼가기 기능을 잘 찾아보면 태그로 싸여있는 소스를 발견하게 될 것이다.이것을 복사하여 HTML 의 태그안에 원하는 위치에 넣자. 2. 댓글Disqus 사이트나 Live Re 사이트를 이용하자본인은 Disqus 사이트를 이용했다.사이트에 들어가자마자 Get started 버튼을 클릭하고 'I want to install Disqus on my site' 를 눌러서로그인하고 요금제를 결정한다. 그 다음은 플랫폼을 고를 차례인데개인 프로젝트에 따라 알맞게 골라주고자신이 생각하는 플랫폼이 목록에 없거나 단순히 댓글 기능을 추가하는거면 맨 아래에'I don't.. 2020. 8. 5.
Front-end 공부를 추가로 시작하게 된 계기 인터넷에는 수많은 웹사이트들이 있고 특히나 정보화 시대에서 웹사이트를 이용하지 않는 사람은 거의 없다. 개발자, 넓게 프로그래머라면 이런 웹사이트 정도는 만들 수 있어야 되지 않을까? 생각이 들었다. 유튜브로 HTML, CSS, JAVASCRIPT의 개념 및 관계 부터 시작해서 관련 강의를 몇 개 들어봤는데 생각보다 훨씬 재미있었다! 배워야 한다는 의무감이 점차 흥미감으로 바뀌게 되었고 동시에 풀스택 개발자에도 관심이 생겼다. Front-end 학습을 통해 제일 먼저 개발해보고 싶은 것은 내가 개발중인 게임의 나만의 공식 웹사이트다. 보통 게임 웹사이트에서 공지사항을 올리거나 게임 버그 제보, 유저간의 소통이 이루어지는데 이런 것을 직접 만들어보고싶었다. 일과 후와 주말마다 틈틈히 HTML -> CSS .. 2020. 8. 5.
HTML 태그 빈도 통계 https://www.advancedwebranking.com/html/ The average web page from top twenty Google results Apparently, an average web page uses twenty-eight different element types: The twenty-eight elements used on most pages, ordered by appearance frequency: www.advancedwebranking.com 태그는 HTML의 꽃인데, 세계적으로 주요 웹 사이트들을 분석하여 태그들의 사용 비율 통계를 보여준다. 2020. 8. 3.