부트 템플릿을 만드는 데 사용되는 무료 IDE
9602 단어 webdevcssjavascripthtml
부팅에 전용 IDE를 사용하는 이유는 무엇입니까?
답은 간단하다.특정 임무에 전문적으로 사용되는 물건을 사용하는 것이 빠르고 쉽다.
내가 먼저 너에게 문제가 어디에서 발생했는지 알려줄게.예를 들어 나는 here에서 유행하는 템플릿을 사용했다.처음에는 파일을 포함하는 폴더가 잘 구성되어 있어 사용하기가 간단했다.그러나 이것은 하나의 템플릿이기 때문에 내용을 편집하고 자신의 필요에 따라 디자인을 조정해야 한다.이것이 바로 문제의 시작이다.색인 페이지에 660줄이 넘는 HTML이 있는데 보기에는 괜찮은데 CSS...11K가 넘습니다.그래서 시작하기 전에 모든 코드를 통독하고 이해해야 한다.
또 다른 반복 가능한 문제는 환경 설정이다.폴더를 만들고, 핫 리셋을 처리하며, 모든 것을 구성합니다.
우리가 얼마나 뛰어넘을 수 있는지 봅시다.
컨디션
IDE는 초기 설정을 완료하는 것부터 시작합니다.열 재부팅, 안내, 프로젝트 체계 구조 등은 모두 처음부터 부팅된 것이다.새 프로젝트를 만들면 바로 코드를 작성할 수 있습니다.
너의 일을 더욱 작은 부분으로 나누어라
이제 IDE가 코드를 구성하는 데 어떻게 도움을 주는지 보여줄 때입니다.먼저 색인 페이지의 660개 이상의 HTML을 24줄로 압축합니다.
여기서 도대체 무슨 일이 일어났는지 설명해 드릴게요.<head>에서 보듯이 가져오기를 안내하지 않았습니다.IDE는 필요하고 반복 가능한 모든 작업을 처리합니다.따라서 CDN이나 UNPKG에 대한 링크는 걱정할 필요가 없습니다.처음부터 잘해줬어.프로젝트에 사용하고 싶은 글꼴을 가져오는 것이 유일하게 필요합니다.
지금 우리 <body>에 대해 이야기합시다.보시다시피 빈 <div>이 많습니다. 이것들은 '중복 사용 가능한 슬롯' 입니다.간단한 한 줄 프로그램은 내비게이션 표시줄, 스크립트, 쿠키 동의 알림 같은 재사용 가능한 요소를 삽입할 수 있습니다.그것들은 또한 코드를 질서정연하게 유지하고 읽기 쉽게 하는 데도 도움이 될 것이다.각 Reusable Slot은
템플릿을 실제로 편집하는 방법을 살펴보겠습니다.프로젝트 리소스 매니저 막대를 열고 확장하려면 다음과 같이 하십시오.
벨로우는 <footer>을 담당하는 코드다.보시다시피 안내 클래스의 표준 HTML을 사용합니다.분할 작업 범위는 모든 내용을 읽고 편집하기 쉬울 뿐만 아니라, 모든 재사용 가능한 슬롯에 전용 CSS 파일이 있기 때문에 템플릿의 스타일 설정도 더욱 쉽다.
HTML
<footer class="footer py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4 text-lg-start">Copyright © Your Website 2021</div>
<div class="col-lg-4 my-3 my-lg-0">
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
<div class="col-lg-4 text-lg-end">
<a class="link-dark text-decoration-none mr-3" href="#!">Privacy Policy</a>
<a class="link-dark text-decoration-none" href="#!">Terms of Use</a>
</div>
</div>
</div>
</footer>
CSS
@import 'bootstrap';
@import 'fa';
.btn {
border-radius: 50%;
}
.footer {
text-align: center;
font-size: 0.9rem;
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.link-dark {
color: #212529;
}
응용 프로그램의 나머지 부분을 방해하지 않고 제한된 범위의 CSS 파일을 사용하여 특정 슬롯을 편집할 수 있습니다.우리의 템플릿에는 거의 모든 부분에 <h2> 요소와 section-heading 종류가 있다.범위가 한정된 CSS 파일을 사용하여 각 <h2> 요소의 색상을 다르게 만들 수 있습니다.이것은 응용 프로그램의 스타일을 설계하는 데 도움이 될 뿐만 아니라, 이름도 짓는 데도 도움이 된다.너는 사이트의 수백 개의 요소에 대해 같은 클래스를 사용할 수 있지만, 여전히 다른 스타일을 사용할 수 있다.
그래, 하지만 모든 <h2>이 똑같은 품질을 원한다면, 상황은 어떨까?같은 CSS를 모든 재사용 가능한 슬롯에 복사하여 붙이는 것은 고통스러운 일이다.이렇게 하려면 전역 스타일을 사용할 수 있습니다.이것은 다른 CSS 파일이지만 역할 영역 CSS와 반대로 모든 슬롯이나 페이지로 가져올 수 있습니다.모든 제목에 같은 글꼴과 여백을 추가한 다음 범위 CSS를 편집하여 색상을 조정합니다.
아이콘
템플릿에 사용된 아이콘은 fontawesome에서 가져옵니다.그러면 IDE에서는 어떻게 사용하나요?이보다 더 쉬운 것은 없다.그들의 사이트에 들어가서 아이콘을 선택하고modal에서 코드를 복사해서 프로젝트에 붙여넣습니다.마지막 단계는 IDE가 아이콘을 사용할 위치를 알려주는 @import 'fa';을 제한된 범위의 CSS 파일에 쓰는 것입니다.
흥분했어
IDE에서 사용할 수 있는 모든 기능의 끝은 아닙니다.52개의 무료 코드 세션이 있습니다. 한 번의 클릭으로 프로젝트에 삽입할 수 있습니다.우리 템플릿에서, 나는 그 중 한 부분을 내비게이션 표시줄로 사용한다.
모든 작은 위젯은 좋은 문서 기록을 가지고 있으며, 완전히 맞춤형으로 제작되고 편집하기 쉽다.
작은 위젯을 삽입하면 프로젝트에 두 개의 새 파일이 나타납니다.컨텐트 및 범위 CSS 파일을 편집하여 스타일을 편집할 수 있는 객체 JSON 파일입니다.
네가 직접 검사해 봐.
네가 이 블로그에서 본 모든 것은 공짜다.템플릿, IDE 및 템플릿을 포함하는 코드입니다.
IDE를 열면 '프레젠테이션' 옵션으로 이동하고 이 블로그에서 사용하는 템플릿으로 프로젝트를 열 수 있습니다.원하는 대로 편집하거나 편집하지 않고 IDE 외부로 내보낼 수 있습니다.
너도 새로 만든 FB팀에 가입할 수 있다. 거기서 IDE와 관련된 모든 질문을 할 수 있다.
https://www.facebook.com/groups/gluecodesstudio
여기서 IDE를 무료로 사용할 수 있습니다.
https://www.glue.codes
Reference
이 문제에 관하여(부트 템플릿을 만드는 데 사용되는 무료 IDE), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/przemek/free-ide-dedicated-to-creating-bootstrap-templates-3cb7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
IDE는 초기 설정을 완료하는 것부터 시작합니다.열 재부팅, 안내, 프로젝트 체계 구조 등은 모두 처음부터 부팅된 것이다.새 프로젝트를 만들면 바로 코드를 작성할 수 있습니다.
너의 일을 더욱 작은 부분으로 나누어라
이제 IDE가 코드를 구성하는 데 어떻게 도움을 주는지 보여줄 때입니다.먼저 색인 페이지의 660개 이상의 HTML을 24줄로 압축합니다.
여기서 도대체 무슨 일이 일어났는지 설명해 드릴게요.<head>에서 보듯이 가져오기를 안내하지 않았습니다.IDE는 필요하고 반복 가능한 모든 작업을 처리합니다.따라서 CDN이나 UNPKG에 대한 링크는 걱정할 필요가 없습니다.처음부터 잘해줬어.프로젝트에 사용하고 싶은 글꼴을 가져오는 것이 유일하게 필요합니다.
지금 우리 <body>에 대해 이야기합시다.보시다시피 빈 <div>이 많습니다. 이것들은 '중복 사용 가능한 슬롯' 입니다.간단한 한 줄 프로그램은 내비게이션 표시줄, 스크립트, 쿠키 동의 알림 같은 재사용 가능한 요소를 삽입할 수 있습니다.그것들은 또한 코드를 질서정연하게 유지하고 읽기 쉽게 하는 데도 도움이 될 것이다.각 Reusable Slot은
템플릿을 실제로 편집하는 방법을 살펴보겠습니다.프로젝트 리소스 매니저 막대를 열고 확장하려면 다음과 같이 하십시오.
벨로우는 <footer>을 담당하는 코드다.보시다시피 안내 클래스의 표준 HTML을 사용합니다.분할 작업 범위는 모든 내용을 읽고 편집하기 쉬울 뿐만 아니라, 모든 재사용 가능한 슬롯에 전용 CSS 파일이 있기 때문에 템플릿의 스타일 설정도 더욱 쉽다.
HTML
<footer class="footer py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4 text-lg-start">Copyright © Your Website 2021</div>
<div class="col-lg-4 my-3 my-lg-0">
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
<div class="col-lg-4 text-lg-end">
<a class="link-dark text-decoration-none mr-3" href="#!">Privacy Policy</a>
<a class="link-dark text-decoration-none" href="#!">Terms of Use</a>
</div>
</div>
</div>
</footer>
CSS
@import 'bootstrap';
@import 'fa';
.btn {
border-radius: 50%;
}
.footer {
text-align: center;
font-size: 0.9rem;
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.link-dark {
color: #212529;
}
응용 프로그램의 나머지 부분을 방해하지 않고 제한된 범위의 CSS 파일을 사용하여 특정 슬롯을 편집할 수 있습니다.우리의 템플릿에는 거의 모든 부분에 <h2> 요소와 section-heading 종류가 있다.범위가 한정된 CSS 파일을 사용하여 각 <h2> 요소의 색상을 다르게 만들 수 있습니다.이것은 응용 프로그램의 스타일을 설계하는 데 도움이 될 뿐만 아니라, 이름도 짓는 데도 도움이 된다.너는 사이트의 수백 개의 요소에 대해 같은 클래스를 사용할 수 있지만, 여전히 다른 스타일을 사용할 수 있다.
그래, 하지만 모든 <h2>이 똑같은 품질을 원한다면, 상황은 어떨까?같은 CSS를 모든 재사용 가능한 슬롯에 복사하여 붙이는 것은 고통스러운 일이다.이렇게 하려면 전역 스타일을 사용할 수 있습니다.이것은 다른 CSS 파일이지만 역할 영역 CSS와 반대로 모든 슬롯이나 페이지로 가져올 수 있습니다.모든 제목에 같은 글꼴과 여백을 추가한 다음 범위 CSS를 편집하여 색상을 조정합니다.
아이콘
템플릿에 사용된 아이콘은 fontawesome에서 가져옵니다.그러면 IDE에서는 어떻게 사용하나요?이보다 더 쉬운 것은 없다.그들의 사이트에 들어가서 아이콘을 선택하고modal에서 코드를 복사해서 프로젝트에 붙여넣습니다.마지막 단계는 IDE가 아이콘을 사용할 위치를 알려주는 @import 'fa';을 제한된 범위의 CSS 파일에 쓰는 것입니다.
흥분했어
IDE에서 사용할 수 있는 모든 기능의 끝은 아닙니다.52개의 무료 코드 세션이 있습니다. 한 번의 클릭으로 프로젝트에 삽입할 수 있습니다.우리 템플릿에서, 나는 그 중 한 부분을 내비게이션 표시줄로 사용한다.
모든 작은 위젯은 좋은 문서 기록을 가지고 있으며, 완전히 맞춤형으로 제작되고 편집하기 쉽다.
작은 위젯을 삽입하면 프로젝트에 두 개의 새 파일이 나타납니다.컨텐트 및 범위 CSS 파일을 편집하여 스타일을 편집할 수 있는 객체 JSON 파일입니다.
네가 직접 검사해 봐.
네가 이 블로그에서 본 모든 것은 공짜다.템플릿, IDE 및 템플릿을 포함하는 코드입니다.
IDE를 열면 '프레젠테이션' 옵션으로 이동하고 이 블로그에서 사용하는 템플릿으로 프로젝트를 열 수 있습니다.원하는 대로 편집하거나 편집하지 않고 IDE 외부로 내보낼 수 있습니다.
너도 새로 만든 FB팀에 가입할 수 있다. 거기서 IDE와 관련된 모든 질문을 할 수 있다.
https://www.facebook.com/groups/gluecodesstudio
여기서 IDE를 무료로 사용할 수 있습니다.
https://www.glue.codes
Reference
이 문제에 관하여(부트 템플릿을 만드는 데 사용되는 무료 IDE), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/przemek/free-ide-dedicated-to-creating-bootstrap-templates-3cb7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<footer class="footer py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4 text-lg-start">Copyright © Your Website 2021</div>
<div class="col-lg-4 my-3 my-lg-0">
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
<div class="col-lg-4 text-lg-end">
<a class="link-dark text-decoration-none mr-3" href="#!">Privacy Policy</a>
<a class="link-dark text-decoration-none" href="#!">Terms of Use</a>
</div>
</div>
</div>
</footer>
@import 'bootstrap';
@import 'fa';
.btn {
border-radius: 50%;
}
.footer {
text-align: center;
font-size: 0.9rem;
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.link-dark {
color: #212529;
}
템플릿에 사용된 아이콘은 fontawesome에서 가져옵니다.그러면 IDE에서는 어떻게 사용하나요?이보다 더 쉬운 것은 없다.그들의 사이트에 들어가서 아이콘을 선택하고modal에서 코드를 복사해서 프로젝트에 붙여넣습니다.마지막 단계는 IDE가 아이콘을 사용할 위치를 알려주는
@import 'fa';을 제한된 범위의 CSS 파일에 쓰는 것입니다.흥분했어
IDE에서 사용할 수 있는 모든 기능의 끝은 아닙니다.52개의 무료 코드 세션이 있습니다. 한 번의 클릭으로 프로젝트에 삽입할 수 있습니다.우리 템플릿에서, 나는 그 중 한 부분을 내비게이션 표시줄로 사용한다.
모든 작은 위젯은 좋은 문서 기록을 가지고 있으며, 완전히 맞춤형으로 제작되고 편집하기 쉽다.
작은 위젯을 삽입하면 프로젝트에 두 개의 새 파일이 나타납니다.컨텐트 및 범위 CSS 파일을 편집하여 스타일을 편집할 수 있는 객체 JSON 파일입니다.
네가 직접 검사해 봐.
네가 이 블로그에서 본 모든 것은 공짜다.템플릿, IDE 및 템플릿을 포함하는 코드입니다.
IDE를 열면 '프레젠테이션' 옵션으로 이동하고 이 블로그에서 사용하는 템플릿으로 프로젝트를 열 수 있습니다.원하는 대로 편집하거나 편집하지 않고 IDE 외부로 내보낼 수 있습니다.
너도 새로 만든 FB팀에 가입할 수 있다. 거기서 IDE와 관련된 모든 질문을 할 수 있다.
https://www.facebook.com/groups/gluecodesstudio
여기서 IDE를 무료로 사용할 수 있습니다.
https://www.glue.codes
Reference
이 문제에 관하여(부트 템플릿을 만드는 데 사용되는 무료 IDE), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/przemek/free-ide-dedicated-to-creating-bootstrap-templates-3cb7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
네가 이 블로그에서 본 모든 것은 공짜다.템플릿, IDE 및 템플릿을 포함하는 코드입니다.
IDE를 열면 '프레젠테이션' 옵션으로 이동하고 이 블로그에서 사용하는 템플릿으로 프로젝트를 열 수 있습니다.원하는 대로 편집하거나 편집하지 않고 IDE 외부로 내보낼 수 있습니다.
너도 새로 만든 FB팀에 가입할 수 있다. 거기서 IDE와 관련된 모든 질문을 할 수 있다.
https://www.facebook.com/groups/gluecodesstudio
여기서 IDE를 무료로 사용할 수 있습니다.
https://www.glue.codes
Reference
이 문제에 관하여(부트 템플릿을 만드는 데 사용되는 무료 IDE), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/przemek/free-ide-dedicated-to-creating-bootstrap-templates-3cb7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
