본문 바로가기

coding/etc

(13)
[브라킷] brackets으로 자식태그까지 한 번에 코딩하기 안녕하세요. 플입니다. 오늘은 브라킷을 이용해 자식 태그까지 한 번에 코딩해볼게요. 1. 꺽쇠 이용 (>) 꺽쇠 혹은 부등호라고도 하죠. > 바로 이 기호요. 이 기호를 이용해서 안쪽에 자식 태그를 넣을 것이라는 걸 알려줘요. 저는 태그 안쪽에 태그를 넣을 거예요. div>p 그러면 이렇게 입력해주시면 된답니다. 어렵지 않죠? 2. Tab키 자 이제 바로 Tab키를 눌러주세요. 탭키는 caps lock 키 위에 있는 키에요. Shift 위에 위에 있는 키랍니다. 이렇게 부모 태그와 자식 태그가 한 번에 생겼어요. 간편하죠? 이래서 다들 에디터 프로그램을 사용하나 봅니다. 질문이 있으시거나 다른 궁금하신 점이 있다면 댓글 남겨주세요~ 그럼 이만. 총총.
[개발자 도구] class 확인하기 안녕하세요. 플입니다. 개발자 도구에서 클래스를 확인해볼게요. 1. 태그 선택 class를 확인하기 위해서는 class가 적용된 태그에서 확인해야겠죠? 클래스가 적용된 태그를 아무거나 선택해줍니다. 2. 클래스 보기 오른쪽에 css가 잔뜩 적힌 창이 있을 거예요. 그쪽에서 오른쪽 상단에 보시면 .cls이라고 적힌 글이 보이실 거예요. .cls는 class를 말해요. 꾹 눌러봅시다. 그러면 이렇게 사용된 클래스를 확인할 수 있어요. banner라는 클래스를 사용했네요. 여기서는 클래스 추가가 가능해요. 3. 클래스 체크 해제 체크박스를 해제하면 이렇게 클래스를 해제해볼 수 있어요. 해제하면 어떤 클래스에서 css가 적용된 건지 어디에서 오류가 생긴 건지 찾을 때 유용해요. 그럼 이만. 총총.
[개발자 도구] css 체크박스 활용 안녕하세요. 플입니다. 오늘은 개발자 도구 중 css 체크박스 활용을 해볼게요. 1. css 체크박스 이것을 css 체크박스라고 부르는지는 잘 모르겠으나 제가 가리키는 것은 이 부분입니다. style탭에서 보면 홈페이지에 적용된 css를 쭉 볼 수 있어요. 각각 css 값 앞에 마우스를 올리면 체크박스가 나타납니다. 그 체크박스를 활용해볼게요. 2. 체크박스 활용 본격적으로 어떻게 활용하는지 알아볼게요. 먼저 홈페이지의 원래 상태예요. 적용된 css 중 아무거나 하나를 해제해볼게요. 바뀐 게 보이시나요? 이런 식으로 하나씩 체크를 해제해보면서 어떤 기능을 하는지 알아볼 수 있어요. 어디가 문제인가 하면서 하나씩 체크를 해제했다 체크했다가 하면서 찾을 수 있어요. 그럼 이만. 총총.
[브라킷] brackets 테마 바꾸기 안녕하세요. 플입니다. 오늘은 브라킷에서 테마를 바꿔볼게요. 1. 테마 브라킷을 열어서 보기> 테마 메뉴로 들어갑니다. 2. 테마 설정 테마 설정 창으로 들어와서 현재 테마에서 내용을 클릭해서 바꿔주시면 됩니다. 저는 다크 테마를 사용하고 있는데 테마를 바꿔볼게요. 테마를 선택하면 이렇게 라이트 테마로 바꿀 수 있어요. 옆에 디폴트라고 적혀있는데 원래는 흰 화면이 기본 배경이에요. 라이트 테마를 적용하면 이런 이미지예요. 이건 제가 평소에 쓰는 다크 테마예요. 그럼 이만. 총총.
[브라킷] brackets에서 화면 나누기 안녕하세요. 플입니다. 오늘은 브라킷에서 화면을 나눠서 사용해볼게요. 1. 화면 분할하기 화면 분할은 어디서 하냐구요? 여기서 한답니다. 보이세요? 바로 요기! 콕! 눌러보면 세 가지 메뉴가 뜨는데요. 원하는 분할을 선택해주면 됩니다. 간편하죠? 2. 분할 화면 사용 저는 '왼쪽/오른쪽으로 분할'을 사용해볼게요. 어떤 게 더 좋은 건 없고 본인이 원하는 화면으로 사용하면 됩니다. 그러면 왼쪽에서 이렇게 분할 화면을 관리할 수 있게 나와요. 오른쪽에도 파일을 하나 열어볼까요? 파일을 더블클릭해서 열어주거나 왼쪽에 있는 파일을 드래그해도 오른쪽에서 열 수 있어요. 오른쪽에 파일이 열린 것 보이시죠? 이렇게 하면 왔다 갔다 하기도 편하고 두 개를 한 번에 볼 수 있어서 시간도 단축되고 좋아요. 저는 보통 ht..
[브라킷] brackets에서 태그 만들기 1. 일반적인 방법 브라킷은 이런 식으로 나오는 에디터 프로그램이에요. 여러 가지 에디터 프로그램 중 하나입니다. 에디터 프로그램들의 장점은 단축키라던가 코딩을 빨리 할 수 있는 다양한 기능들이 있다는 점이에요. 메모장에서 코딩하던 시절이여 안녕~ 아마 다른 에디터프로그램도 많이 지원하는 기능일 거예요. 하고 앞에 여는 태그만 적어도 자동으로 닫는 태그를 만들어준답니다. 간편하죠? 맨날 닫는 태그 잊어버리고 에러났던 일들이 없어진다면 한층 더 수월하게 코딩할 수 있겠죠. 닫는태그 신경 쓰지 않아도 되고 말이죠. 물론 바로바로 닫는 태그를 적어주는 습관이 좋기는 하지만.. 브라킷이 해준다는데 마다할 이유는 없죠. 2. 탭키 활용 두 번째 방법은 탭키를 활용하는 거예요. 위의 이미지처럼 원하는 태그의 이름만..
[code pen] 레이아웃 바꾸기 안녕하세요. 플입니다. 코드팬에서 레이아웃을 바꿔볼게요. 1. code pen https://codepen.io/pen/ Create a New Pen ... codepen.io codepen은 온라인에서 코딩을 할 수 있는 사이트인데요. 이전에 new pen이라고 포스팅을 올린 적 있죠. 정확한 명칭은 codepen이었네요. 에디터 프로그램을 쓰지 않고 간편하게 코딩해볼 수 있어서 좋아요. 뭔가를 만든다기보다 실험해볼 때 쓰면 좋을 것 같네요. 먼저 코드팬을 열어주세요. 2. 레이아웃 변경 이런 화면을 만날 수 있을 거예요. 이제 레이아웃을 바꿔서 코드를 짜는 부분을 좌측으로 정렬해볼게요. 왼쪽 위 메뉴를 보시면 Change View라고 적힌 메뉴가 있죠? 이것을 눌러주세요. 굉장히 직관적인 UI를 만..
[cmd] 명령어를 실행할 수 없을 때 안녕하세요. 플입니다. cmd에서 명령어가 실행되지 않을 때 어떻게 해결하는지 알아볼게요. 1. cmd창 이런 식으로 '내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.'라는 문구가 뜨면서 명령어가 실행되지 않는 걸 볼 수 있어요. 어? 이거 얼마 전까지 되던 건데 왜 이러지 8ㅁ8 하는 생각이 들 때 사용하면 됩니다. 2. 내 컴퓨터 내 컴퓨터> 오른쪽 클릭> 속성을 눌러주세요. 왼쪽 메뉴에서 고급 시스템 설정을 눌러주세요. 3. 환경 변수 시스템 속성 창이 뜰 텐데 여기서 환경 변수를 선택해주세요. 시스템 변수에서 path를 선택하고 편집을 눌러줍니다. 변수 값을 ;C:\Windows\System32로 추가해줍니다. 추가할 때는 ;(세미콜론)을 이미 있던 주소 뒤에 붙이고..