'코딩' 태그의 글 목록 (8 Page)

scss를 위해 컴파일러를 설치해보자

scss의 준비단계 컴파일러를 설치해봅시다!! 하드가 날아가니 다시 설치해야 하는 게 한두 개가 아니네요. 그래도 그 김에 하나라도 더 소개해드릴 수 있어서 잘됐죠? 1. 명령 프롬프트 ① 검색 - 시작 줄에서 [cmd]를 검색해 명령 프롬프트를 열어주세요. - 단축키 [window + S]를 누르면 검색창이 바로 뜬답니다. ② 명령 프롬프트 - 이 까만 화면이 명령 프롬프트입니다. - scss를 사용하려면 미리 친해져 봅시다. 2. 컴파일러 설치 ① 명령어 입력 - 설치 방법은 명령어만 알면 간단합니다. - [gem install sass]를 입력해주세요. - 오타가 업나 살펴보고 [엔터]키를 눌러주세요. ② 성공적인 설치 - 엄청 길게 뭔가가 써지고 설치가 됩니다. - 설치가 잘 된다면 표시된 것처럼..

coding/html + css · 2021. 9. 24. 09:30

vs code에서 코드 한 번에 주석처리하기

코딩을 하다 보면 아 여기서부터 여기까지는 잠깐 주석 처리를 해둬야지.. 하는 생각 해보신 적 있으시죠? 일일이 주석을 타자로 치고 있었는데 이게 단축키가 있다는 사실 알고 계셨나요? 비주얼 스튜디오 코드에 있는 기능으로 주석을 편하게 넣어봅시다! 1. 줄 주석 설정 ① 영역 지정 - 먼저 줄 주석 설정부터 해보겠습니다. - 주석으로 하고 싶은 코드 한 줄을 영역 지정해줍니다. 드래그로 블록 지정해주세요. ② 편집 - 상단 메뉴에서 [편집>줄 주석 설정/해제]를 클릭해주세요. - 오른쪽을 보시면 단축키가 있는데 [Ctrl+/] 단축키로도 설정과 해제를 할 수 있습니다. ③ 주석 설정 - 이렇게 주석이 설정된 것을 볼 수 있습니다. - 토글 방식이기 때문에 편집에서 한번 더 설정해주시거나 단축키를 한 번 ..

coding/editor · 2021. 9. 9. 09:30

[sass/scss] 반복 스타일 한 번에 쓰기

css에서 스타일이 반복될 경우 한 번에 처리하는 법을 알려드릴게요. scss의 장점 중 하나죠! 1. @mixin @mixin 그룹이름{ 속성: 속성 값; } ① mixin - mixin은 반복적으로 쓰이는 스타일을 그룹화해서 사용할 수 있게 해 줍니다. - 변수와 비슷한데, 변수가 한 가지만 넣을 수 있다면 mixin은 여러 개를 넣을 수 있습니다. - [@mixin 그룹 이름{ 속성: 속성 값; }]으로 사용할 수 있습니다. 2. 예시 ① 사용이 필요한 곳 예시 - 위의 코드에서 체크한 것처럼 서로 다른 부분에서 동일한 스타일이 적용된 적이 있을 거예요. - 같이 적자니 선택자가 애매하고, 그렇다고 그냥 적자니 반복되어서 코드가 예쁘지 않아요. - 이렇게 한 번 정리해줄 만한 곳에 사용해주시면 됩니..

coding/html + css · 2021. 9. 7. 09:30

[무료 코딩 강의] 사이트 모음

최근에 발행했던 무료 강의 소개 포스팅을 모아봤어요. 한 번에 편하게 봅시다! 1. 생활코딩 https://www.youtube.com/user/egoing2 생활코딩 일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다. 채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNa www.youtube.com ① 생활코딩 - 예전에도 몇 번 언급한 적이 있었던 생활코딩부터 소개해드리고 갑니다. - 일반인에게 알려주는 것이 주된 목표라 기초를 잡기에 아주 좋습니다. - 설명도 쉽..

coding/개발 팁 · 2021. 9. 6. 09:30

[무료 코딩 강의] 부스트코스

오늘은 코딩 강의를 무료로 들을 수 있는 곳을 소개해드릴게요. 1. 부스트코스 https://www.boostcourse.org/opencourse 다 함께 배우고 성장하는 부스트코스 부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다. www.boostcourse.org ① 부스트코스 - 제목에도 있듯이 이름은 부스트코스입니다. - 위의 주소로 접속해서 들어가 봅시다. ② 메인 페이지 - 메인 페이지를 보시면 부스트코스 강의가 무료인 이유를 설명해주고 있고 - 아래쪽에 메뉴가 잘 나눠져 있네요. - 코딩뿐만 아니라 마케팅 쪽도 들을 수 있습니다. 2. 강의 수강신청 ① 강의 선택 - 강의를 안 들어볼 수 없겠죠? - 일단 마음에 드는 카테고리를 골라주세요. 저..

coding/개발 팁 · 2021. 8. 27. 09:30

코딩 121