'coding/editor' 카테고리의 글 목록 (9 Page)

[codepen] 코드펜을 티스토리에 불러와보자

안녕하세요. 플입니다. 오늘은 코드펜을 이용해 코드를 불러와볼 거예요. 1. 코드펜 https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 우선 코드펜 사이트에 접속해줍니다. 그리고 로그인을 해주세요. 2. 코드 작성 오른쪽 메뉴 맨 위를 보시면 Pen이라는 메뉴가 있는데요. 이 메뉴를 클릭해주세요. 그러면 이렇게 간단하게 코드를 짤 수 있는 공간이 나와요. 아무거나 짜 볼게요. 코드는 제가 아무..

coding/editor · 2020. 9. 27. 07:30

[Brackets] 브라켓에서 코드를 연속 복사 해보자

안녕하세요. 플입니다. 오늘은 브라켓 팁을 가져와봤어요. 1. 코드 작성 처음부터 *(곱하기)를 이용해서 만들어주면 좋긴 한데 항상 그렇게 마음대로 되는 게 아니거든요. 간혹 새로 추가해야 할 때가 발생합니다. 그것도 여러 개를! 그럴 때 사용하면 좋습니다. 먼저 복사할 코드를 작성해주세요. 오늘은 태그를 이용해볼게요. 링크 2. Ctrl + D 커서를 코드 아무 곳이나 두고 Ctrl + D를 눌러주세요. 이 단축키의 장점은 커서가 코드 앞이든 뒤든 중간이든 코드 근처에 있기만 해도 가능하다는 거예요. 그리고 복사하지 않고도 연속해서 사용할 수 있어요. 아마 일러스트레이터를 사용하셨던 분들이라면 연속 복사 단축키가 익숙하실 거예요. 그럼 연속으로 3개를 더 만들어볼까요? 이렇게 간단하게 코드를 복사할 수..

coding/editor · 2020. 9. 12. 07:30

[brackets] 브라켓에서 여러줄을 한번에 이동시켜보자

안녕하세요. 플입니다. 오늘은 브라켓 활용방법이에요. 1. 앞으로 이동 코드를 복사해오면 가끔 이렇게 너무 많이 밀려난 경우를 볼 수 있을 거예요. 이럴 때 한 줄씩 앞으로 당겨오려면 너무 힘이 들어요. ... 사실 힘들진 않지만 귀찮잖아요. 한 번에 이동시켜볼까요? 옮길 만큼 드래그로 잡아주세요. 그다음 Shift + Tab을 눌러주세요. 아까보다 앞으로 왔죠? 이렇게 한 번에 옮길 수 있답니다. 꼭 Shift 키를 먼저 눌러주세요. 2. 뒤로 이동 위에서 왜 Shift키를 먼저 누르라고 했냐면 Tab키만 누르면 뒤로 가기 때문이에요. 뒤로 이동을 해볼게요. 앞으로 이동했던 거랑 똑같습니다. 일단 드래그로 영역을 잡아주시고 이번엔 Tab키를 눌러주세요. 이번엔 뒤로 움직였죠? 이렇게 간편하게 코드를 정..

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

[brackets] 브라켓에서 여러개의 태그 한번에 입력해보자

안녕하세요. 플입니다. 오늘은 브라킷에서 태그 여러 개를 한 번에 입력해볼게요. 1. 브라킷 브라킷은 이렇게 생긴 에디터 프로그램이에요. 코딩을 도와주는 도구라고 생각해주시면 됩니다. 2. 태그 여러 개 넣기 각설하고 바로 본론으로 넘어가 볼게요. 만약 태그를 3개 넣고 싶으시다면 li*3 처럼 적어주시고 Tab키를 눌러주시면 됩니다. 여기서 *기호는 코딩에서 x(곱하기)를 의미해요. 그러니까 li x 3이라고 생각해주시면 됩니다. 에디터 프로그램에게 "나는 태그가 3개 필요해" 하고 알려주시는 거예요. tab으로 명령을 전달하면.. 이렇게 한 번에 3개를 만들 수 있습니다. 일일이 입력하지 않아도 되어서 간편하죠? 에디터 프로그램의 이런 장점이 코딩을 빠르게 할 수 있게 도와준답니다. 다른 에디터 프로..

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

[brackets] 브라켓 html 자동완성

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

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

coding/editor 50