라몽(●'◡'●)디자이너

코딩/웹디자인에 대한 정보를 다룹니다.

코딩스터디/.etc

1. 소스트리 다운로드하기 아래 사이트로 이동한 후 소스트리를 다운로드해준다. https://www.sourcetreeapp.com/ Sourcetree | Free Git GUI for Mac and Windows A Git GUI that offers a visual representation of your repositories. Sourcetree is a free Git client for Windows and Mac. www.sourcetreeapp.com 건너뛰기 나머지는 그냥 계속 다음다음 마지막에 ssh키 불러오겠냐는 창은 '아니요' 이제 만들었던 폴더를 소스트리에 가져와보자. 상단의 create아이콘을 눌러서 탐색으로 폴더 작업폴더 가져오기! (생성 후 이미 폴더가 발생했다고 뜨는 창은..

2021. 7. 8.

코딩스터디/.etc

1. 깃 설치 - 홈페이지 들어가서 우측 윈도우 버전 다운로드 버튼 클릭 후 설치 https://git-scm.com/ Git git-scm.com 2. 깃허브 설치 - 회원가입 https://github.com/ GitHub: Where the world builds software GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com 3. 깃허브에 저장소 만들기 - 작업물 올릴 공..

2021. 6. 25.

코딩스터디/.etc

1. style.scss 파일에 모든 css코드 적기 : scss는 제일 앞에 $를 써야함. 1) $임의의 변수이름 : 값; (ex. $bgBody: #efefef;) 2) 변수이름을 복사해서 해당 css코드에 이름을 넣어준다. 더보기 ※ 참고사항 - SCSS 문법으로 작성된 코드를 실시간으로 일반 css파일로 변환하게 설정해놨기 때문에 css파일은 건들일 필요가 없음 - scss 작업시 축약형 안쓰는게 좋음 변수 - 자주 변경될만한 값을 특정 공간에 저장을 해서 - 해당 값을 필요한 곳에 재활용할때 2. scss파일을 기능별로 분리하기 - 분리할 scss구문을 _파일명.scss로 분리 부분파일을 만들때 규칙 _파일명.scss - style.scss 파일에 @import "파일명.scss"; 연결 SCS..

2021. 5. 4.

코딩스터디/.etc

----윈도우OS------ STEP1. 먼저 ruby언어 설치 rubyinstaller.org/ RubyInstaller for Windows Is RubyInstaller for you? RubyInstaller is the easiest and most widely-used Ruby environment on Windows. And Ruby is a great language for beginners as well as professionals. It’s suitable for small scripts as well as large applications. RubyInstaller com rubyinstaller.org - 사이트에서 download 버튼 클릭 - without devkit 에서 R..

2021. 5. 4.

코딩스터디/.etc

웹표준이란? - 구글, 파이어폭스, 사파리 등 각 브라우저마다 다르게 보이지않게 표준화 된 언어를 사용함으로써 동일한 결과물을 보여주는 것을 웹표준 - 월드 와이드 웹(WWW)을 구현하기 위해서 따라야 할 표준 또는 규격 - 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함(크로스 브라우징) validator.kldp.org/ 웹표준 검사사이트 - html jigsaw.w3.org/css-validator/ 웹표준 검사사이트 - css 웹접근성이란? - 모두가 차별없이 웹에서 제공하는 정보를 이용할 수 있도록 하는 것(일반인, 장애인, 고령자 등) 웹호환성이란? - OS, 브라우저에 상관없이 유사한 화면으로 동일한 정보에 접근이 가능해야한다. - 브라우저마다 코드를 표현하..

2021. 5. 4.

코딩스터디/.etc

swiper는 슬라이드를 구현할 때 유용하게 사용되는 자바스크립트 플러그인입니다. 1. Swiper Slide 사이트에서 Swiper의 CSS, JS 파일 다운 받기 1) 사이트 접속해서 다운받기 swiperjs.com/ -메인 홈페이지에서 Get Started 클릭 -왼쪽 메뉴에서 Download assets 클릭 -우측 컨텐츠에 Download assets에서 링크 클릭 https://unpkg.com/swiper/ 2. index.html에 css, js파일 연결 **주의점 : js파일 뿐만 아니라 css파일도 가져와야 작동 1) 파일 혹은 링크를 불러와야 합니다. - 링크로 불러오는 것은 그때 그때마다 업데이트가 되면, 구버전에서 적용해줬던 스타일이 다른 형식으로 업데이트 돼서 스타일 변형이 생길..

2021. 4. 28.

코딩스터디/.etc

유용한 제이쿼리 갤러리 필터에 대해 소개합니다~ 이름은 isotope, masonry 플러그인과 결합해 이미지 갤러리 기능을 제공하는 필터 (보고싶은 카테고리를 클릭하면 그 카테고리만 선별해서 보여주는 플러그인) http://isotope.metafizzy.co/ 메뉴를 사용하여 이미지보드를 정렬하고 검색할 수 있는 isotope.js 사용법 1. 먼저 isotope공홈에 들어가서 제이쿼리 플러그인 알집파일을 저장 2. jsotope.pkgd.min.js 파일 가져오기 3. 헤더부분에 삽입 4. custom.js 파일 만든 후 isotope 스크립트 아래에 삽입 5. html,css,js 가이드 참고후 custom.js 에 활용? 1. isotope.js 파일 load 두가지 방법 - 방법1) 로컬에 따..

2021. 4. 27.