coding/editor 50
[brackets] 브라켓으로 자식태그까지 한 번에 코딩하기
안녕하세요. 플입니다. 오늘은 브라킷을 이용해 자식 태그까지 한 번에 코딩해볼게요. 1. 꺽쇠 이용 (>) 꺽쇠 혹은 부등호라고도 하죠. > 바로 이 기호요. 이 기호를 이용해서 안쪽에 자식 태그를 넣을 것이라는 걸 알려줘요. 저는 태그 안쪽에 태그를 넣을 거예요. div>p 그러면 이렇게 입력해주시면 된답니다. 어렵지 않죠? 2. Tab키 자 이제 바로 Tab키를 눌러주세요. 탭키는 caps lock 키 위에 있는 키에요. Shift 위에 위에 있는 키랍니다. 이렇게 부모 태그와 자식 태그가 한 번에 생겼어요. 간편하죠? 이래서 다들 에디터 프로그램을 사용하나 봅니다. 질문이 있으시거나 다른 궁금하신 점이 있다면 댓글 남겨주세요~ 그럼 이만. 총총.
![[brackets] 브라켓으로 자식태그까지 한 번에 코딩하기](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/bnLdBt/btqEkNJp8Fx/4KhMxBqYhyhhDWK8E4Xv5K/img.jpg)
[brackets] 브라켓 테마 바꾸기
안녕하세요. 플입니다. 오늘은 브라킷에서 테마를 바꿔볼게요. 1. 테마 브라킷을 열어서 보기> 테마 메뉴로 들어갑니다. 2. 테마 설정 테마 설정 창으로 들어와서 현재 테마에서 내용을 클릭해서 바꿔주시면 됩니다. 저는 다크 테마를 사용하고 있는데 테마를 바꿔볼게요. 테마를 선택하면 이렇게 라이트 테마로 바꿀 수 있어요. 옆에 디폴트라고 적혀있는데 원래는 흰 화면이 기본 배경이에요. 라이트 테마를 적용하면 이런 이미지예요. 이건 제가 평소에 쓰는 다크 테마예요. 그럼 이만. 총총.
![[brackets] 브라켓 테마 바꾸기](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/ExzZy/btqDEFrfoMQ/vkmKGIEaTHYZOTrNLmEcT0/img.jpg)
[brackets] 브라켓에서 태그 만들기
1. 일반적인 방법 브라킷은 이런 식으로 나오는 에디터 프로그램이에요. 여러 가지 에디터 프로그램 중 하나입니다. 에디터 프로그램들의 장점은 단축키라던가 코딩을 빨리 할 수 있는 다양한 기능들이 있다는 점이에요. 메모장에서 코딩하던 시절이여 안녕~ 아마 다른 에디터프로그램도 많이 지원하는 기능일 거예요. 하고 앞에 여는 태그만 적어도 자동으로 닫는 태그를 만들어준답니다. 간편하죠? 맨날 닫는 태그 잊어버리고 에러났던 일들이 없어진다면 한층 더 수월하게 코딩할 수 있겠죠. 닫는태그 신경 쓰지 않아도 되고 말이죠. 물론 바로바로 닫는 태그를 적어주는 습관이 좋기는 하지만.. 브라킷이 해준다는데 마다할 이유는 없죠. 2. 탭키 활용 두 번째 방법은 탭키를 활용하는 거예요. 위의 이미지처럼 원하는 태그의 이름만..
![[brackets] 브라켓에서 태그 만들기](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/k7T7n/btqC9ylrQU5/NawWVKOuNGlXpFqANRvKM1/img.jpg)
[codepen] 레이아웃 바꾸기
안녕하세요. 플입니다. 코드팬에서 레이아웃을 바꿔볼게요. 1. code pen https://codepen.io/pen/ Create a New Pen ... codepen.io codepen은 온라인에서 코딩을 할 수 있는 사이트인데요. 이전에 new pen이라고 포스팅을 올린 적 있죠. 정확한 명칭은 codepen이었네요. 에디터 프로그램을 쓰지 않고 간편하게 코딩해볼 수 있어서 좋아요. 뭔가를 만든다기보다 실험해볼 때 쓰면 좋을 것 같네요. 먼저 코드팬을 열어주세요. 2. 레이아웃 변경 이런 화면을 만날 수 있을 거예요. 이제 레이아웃을 바꿔서 코드를 짜는 부분을 좌측으로 정렬해볼게요. 왼쪽 위 메뉴를 보시면 Change View라고 적힌 메뉴가 있죠? 이것을 눌러주세요. 굉장히 직관적인 UI를 만..
![[codepen] 레이아웃 바꾸기](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/bc951v/btqCUcc5rgx/QDFVOHRrQTDfKKK8mXk5V0/img.jpg)
[new pen] 온라인 코딩
안녕하세요. 플입니다. 온라인에서 코딩할 수 있는 사이트를 알려드릴게요. 1. new pen 바로 new pen 사이트입니다. 구글에 new pen이라고 검색하면 바로 사이트에 접속할 수 있어요. https://codepen.io/NikitaDX/pen/RKLXgG New Pen ... codepen.io 들어가기 편하게 링크를 남겨둘게요. 2. 시작하기 처음 들어오면 화면이 3단으로 분리되어 html css js 세 가지를 코딩할 수 있어요. 지금은 기본으로 쓰여있는 코드예요. 모두 깔끔하게 지우고 사용하면 됩니다. 온라인으로 코딩해도 어렵지 않죠? 3. 코딩하기 코딩은 그냥 원하는 코딩을 하면 된답니다. 예시로 조금만 적어봤어요. 저장을 안 해도 알아서 반영해줍니다. 똑똑한 친구야. 아래 미리 보기 ..
![[new pen] 온라인 코딩](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/otRnB/btqB5GFniEf/MLKnEREeHLKX5XhQkQir0k/img.jpg)