'coding' 카테고리의 글 목록 (32 Page)

[brackets] 브라켓 html 자동완성

안녕하세요. 플입니다. 오늘은 브라킷에서 템플릿을 불러와볼게요. 1. 템플릿 일단 템플릿 기본 형태는 위의 사진과 같아요. 아주 간단하게 구조를 잡아주고 필요한 부분은 넣어주면 될 것 같아요. 필요하다면 언어도 한국어로 바꿔주시면 된답니다. 은근히 쓰기 귀찮은 코드인데 간편하게 쓸 수 있다는 점이 에디터 프로그램의 장점 같아요. 2. !(느낌표) 자 그럼 이제 템플릿이 뭔지 알았으니 불러와봅시다. !(느낌표)를 입력하고 탭키를 눌러주세요. 간단하죠? 이렇게 간편하게 불러올 수 있답니다. 이제 저 표시된 빈 공간에 html 코드를 짜주시면 된답니다. 그럼 이만. 총총.

coding/editor · 2020. 8. 14. 07:30

[Bootstrap] 부트스트랩 사용방법

안녕하세요. 플입니다. 오늘은 부트스트랩을 사용해볼게요. 1. 부트스트랩 https://www.bootstrapcdn.com/ Quick Start The recommended CDN for Bootstrap, Font Awesome and Bootswatch. www.bootstrapcdn.com 먼저 위의 링크로 접속해주세요. 부트스트랩 3을 사용할 예정이니 메뉴에서 Old Versions(옛날 버전) > Bootstrap(부트스트랩) 메뉴를 선택해주세요. 아래로 쭉쭉 내리면 v3(버전 3)이 있는데요. 찾기 귀찮으니까 Ctrl + F를 이용해 찾아줍시다. Ctrl + F 를 누르고 v3를 검색해주세요. 부트스트랩 3의 css 주소를 복사해주세요. 이제 부트스트랩 홈페이지에서 할 일은 모두 끝났습니다..

coding/개발 팁 · 2020. 8. 11. 07:30

[반응형] 빛방울 서브 페이지

안녕하세요. 플입니다. 빛방울 서브 페이지를 만들었어요~ 1. 서브 페이지 빛방울의 서브페이지를 만들었어요~ 서브는 안 만들려고 했는데 어찌어찌하다 보니 만들게 되었네요. 서브페이지는 인스타그램 페이지를 만들어봤어요. 인스타 연동은 여러 방면으로 해봤는데 인스타그램에서 지원을 그만둬가지고 그만... 연동은 아니고 인스타에 올려둔 그림 중 마음에 드는 그림들을 모아서 갤러리처럼 만들어두었어요. 앞으로 점점 늘어날 예정이랍니다. 메인 페이지도 조금씩 조금씩 수정해가고 있어요..;; 원래 유지보수가 더 중요한 것 아니겠어요? :) 2. 사이트 바로가기 https://ssimplay.github.io/shinedrop/sub1.html paint drop ssimplay.github.io 사이트 링크를 남겨둘게..

coding/개발 팁 · 2020. 7. 15. 07:30

[jQuery] 버튼 누르면 리스트 나오게

안녕하세요. 플입니다. 오늘은 버튼을 누르면 보이지 않던 리스트를 나오게 만들어볼게요. 1. 준비 이 더보기 버튼을 누르면 아래로 리스트가 더 나오는 작업을 해줄 거예요. 저는 구분하기 쉽게 나중에 나타나는 리스트 즉, 태그에 class를 적어주었어요. 2. 클릭 $(function(){ $('.more').click(function(){ }) }); 먼저 더보기 버튼에 클릭 메서드를 넣어줄 거예요. .click()이 클릭 메서드예요. 말은 어렵지만 클릭을 하면 이러이러한 작업을 실행해줘 라는 명령어라고 생각하시면 된답니다. 클릭 뒤에 오는 함수 function()은 이제부터 함수 안에 있는 것을 실행하겠다는 말이에요. 여러 기능을 그룹으로 묶는다고도 생각할 수 있겠네요. .more은 뭔가요? .more..

coding/JavaScript · 2020. 6. 22. 07:30

[css] 텍스트 줄 바꿈 단어 단위로 하기

css로 텍스트 줄 바꿈 단위를 자동으로 단어 단위로 끊어서 하게 만들어보겠습니다. 1. 텍스트 준비 일단 텍스트를 준비합니다. 이런 줄 바꿈이 엉망징창이군요. 만약 pc에서만 작동하는 홈페이지를 만든다면 간편하게 태그를 사용해도 무리가 없지만 반응형을 제작하는 사람이라면 모바일이나 화면이 줄어들 때마다 태그를 이동시킬 수도 없으니 고민이 많을 거예요. 오늘은 그런 줄 바꿈을 깔끔하게 만드는 방법을 알아볼 거예요. * 태그는 줄 바꿈을 위한 태그로 줄 바꿈하고 싶은 위치 맨 마지막에 적어주면 그다음 글자부터 아래줄로 내려가게 된다. 2. word-break p{ word-break:keep-all; } word-break을 넣어주면 단어를 기준으로 줄 바꿈을 해줍니다. 좀 더 정확히 말하자면 띄어쓰기를 ..

coding/html + css · 2020. 6. 12. 07:30

coding 265