2021년 해커데이: 4기 "새로운 방법"

Hacktoberfest 2021 시리즈의 하이라이트 끝에서 저는 에서 CSS 대가의 가르침에서 지도를 찾았습니다. Hacktoberfest가 끝나기 전에 제 첫 번째 공헌을 만들었습니다!

이전 글issue에서 나는 내가 Hacktoberfest 저장소에 기여한 첫 번째 공헌, 즉'weekly-web-dev-challenge-poll을 기록했다.
나는 갈라지기, 복제, 지점 만들기, 요청 생성을 하는 모든 절차가 정확했다.그러나, 내가 작성한 코드에 문제가 생겨서, 저장소 창설자는 나의 인출 요청을 거절했다.
본문에서, 나는 나의 새pull 요청의 창설을 기록할 것이다.

새로운 방법

나에게 분배된 문제는 웹 페이지의 밑에 있는 하이퍼링크에 아이콘을 추가하는 것이다.
아이콘을 추가하는 방법은 각 하이퍼링크를 Font Asome<i> 태그로 둘러싸고 CSS 클래스를 <i> 태그에 추가하는 것입니다.

<i class="fab fa-twitter"><a rel="noopener" href="https://twitter.com/scrimba">Twitter</a></i>

다음은 Font Aowesome 웹 사이트에서 제공하는 주제 설명입니다. Basic Use
그러나 이 특정한 항목에서 이런 방법은 조형과 포지셔닝에 문제를 초래할 수 있다.
사이트 디자인 레이아웃에 있어서 제 주요 목표는 절지대사입니다. 제 말은 CSS대사Kevin Powell입니다.
"도와줘, CSS 마스터 케빈 바벨. 새로운 방법이 필요해!"

디즈니와 르카스 영화사는 모든 권리를 보류한다.

CSS 마스터 케빈 파월

글씨체가 좋은 아이콘을 쓰고 싶다는 걸 알고 유튜브에서'글씨체가 좋은 소셜미디어 아이콘'을 검색해봤어요.
내가 케빈 바벨을 찾았을 때, 나는 이것이 내가 찾는 강좌라는 것을 알았다.

디즈니와 르카스 영화사는 모든 권리를 보류한다.

케빈의 유튜브 튜토리얼

케빈의 유튜브 튜토리얼에서 빈 요소를 만드는'바로 가기'에서 벗어나라고 격려했다.
케빈은 아이콘이 추가된 이 특별한 사례에서 "그것은 진정한 내용이 아니며, 시각적 보조로서 내용 자체에 중요하지 않다"고 설명했다.
Kevin은 다음에Font Aweasome 사이트의 고급 부분으로 데리고 가서 HTML 요소를 만드는 대신 아이콘을 추가하는 것을 권장합니다.

CSS 유사 요소 CSS 유사 요소

위원소가 무엇인지 이해하기 위해 가 제공한 정의를 살펴보자.
"CSS 위조 요소는 요소 지정 부분의 스타일을 설정하는 데 사용됩니다."
- W3 학교
위조원소'우리가 찾고 있다'가 전편이다.

W3 학교 CSS - 위조 요소:: before

::before 위조 요소는 요소의 내용 앞에 일부 내용을 삽입하는 데 사용할 수 있습니다.
다음 예제에서는 각 요소의 컨텐트 앞에 이미지를 삽입합니다.

h1::before {
  content: url(smiley.gif);
}

- W3 학교

새로운 방법

before 위조 요소의 새로운 방법을 이용하여 하이퍼링크에 아이콘을 추가할 수 있습니다. HTML을 작성하거나 추가할 필요가 없습니다.
항목의 HTML을 변경할 수 없는 경우 CSS의 기능을 사용하여 페이지에 아이콘을 추가할 수 있습니다.CSS에는 위조 요소라는 강력한 특성이 있습니다.Font Awesome은 처음부터:before 위조 요소를 사용하여 페이지에 아이콘을 추가합니다.
- 글씨체가 너무 무서워요
이 해결 방안은 HTML 요소를 추가하면 디자인 레이아웃과 스타일 문제를 초래할 수 있기 때문에 나에게 매우 적합하다.또한 이 새로운 방법을 사용하면 미디어 조회를 위해 추가 CSS 코드를 작성할 필요가 없습니다.

사용:: before 유사 요소

첫걸음
advanced Font Awesome 문서에 따라::before 위조 요소에 아이콘을 추가하는 첫 번째 단계는 이 CSS 코드를 작성하거나 추가하는 것입니다. 아이콘 종류를 만들고 before 위조 요소를 선택합니다.

/* Step 1: Common Properties: All required to make icons render reliably */

 .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right: 5px;
  }

(주: 오른쪽 여백 추가: 5px)
두 번째 단계
현재 우리는 모든 아이콘에 적용되는 공공 CSS 속성을 처리하기 위해 '.icon::before' 클래스가 있습니다. 이제는 우리가 찾고 있는 단일 아이콘을 추가할 때가 되었습니다.
다음 CSS 코드에는 컨텐트에 필요한 글꼴과 유니코드가 추가되었습니다.

.twitter::before {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
  }

다음 그림은 유니코드 f099 등 트위터의 일부 브랜드 스타일 글꼴을 보여줍니다.

세 번째 단계
마지막으로 HTML 코드에서 트위터 아이콘을 추가할 태그를 찾고 아이콘과 트위터 클래스를 추가합니다 (class="icon Twitter").

<a rel="noopener" href="https://twitter.com/scrimba" class="icon twitter">Twitter</a>

우리는 현재 트위터 아이콘을 트위터 하이퍼링크에 추가하는 데 성공했습니다. 추가 HTML 요소는 추가하지 않았습니다.우리는 아이콘과 트위터 클래스를 트위터 하이퍼링크가 있는 anchor<h1> 표시에 추가하기만 하면 된다.

약간의 미조

새로운 방법은 Before 위조 요소를 이용하여 다른 글꼴 아이콘을 추가합니다. 내가 팟캐스트 아이콘에 도착할 때까지 모든 것이 좋습니다.소용없어!
만약 어떤 아이콘이 당신에게 적합하지 않다면, 전체 글꼴 을 읽고 훑어보십시오.이 문서들을 읽는 것은 내가 팟캐스트 아이콘 문제를 해결하는 데 도움을 주었다.
CSS 글꼴 시리즈를 "Font Awesome 5 Brands"에서 "Font Awesome 5 Free"로 변경하고 글꼴 가중치 "900"을 추가하여 Podcast Font Awesome 아이콘이 작동하지 않는 문제를 해결했습니다.

.podcast::before {
    font-family: "Font Awesome 5 Free"; content: "\f2ce";
    font-weight: 900;
  }

고급 그룹 Scrimba 플래그

Scrimba 로고를 추가하기 위해 before 위조 요소를 사용하는 새로운 방법도 사용했습니다.
하지만 함정이 하나 있다.내가 지난 글에서 논의한 바와 같이, Scrimba에는 경외할 만한 글씨체 아이콘이 없다.그래서 나는 다른 방식으로 Scrimba 로고를 추가해야만 했다.
투명한 png 파일을 사용하여 하이퍼링크에 Scrimba 로고를 추가합니다.
Scrimba 학생 이 목록에 모든 노래 제목에 Spotify 로고를 추가하는 것을 돕기 위해 이전에 작성한 코드를 수정했습니다.

.scrimba-logo::before {
    content: "";
    display: inline-block;
    height: 11px;
    width: 15px;
    background-size: 15px;
    background-image: url("imgs/SVG-Scrimba-Logo.png");
    background-repeat: no-repeat;
    margin-right: 5px;
    }

과거의 Scrimba 매주 네트워크 개발 과제 새 끌어오기 요청 만들기

현재 코드가 완성되었으니, 내가 지난 글에서 상세하게 소개한 바와 같이, 나의 지점을 제출하고 추진할 때가 되었다.
그리고 불가사의한 일이 일어났습니다. 또 다른 GitHub 전송 오류를 받았습니다!

디즈니와 르카스 영화사는 모든 권리를 보류한다.
이럴 리가 없어!나는 내가 무엇을 잘못했는지 알 때까지 가능한 모든 GitHub 전송 오류 문제를 겪었다.내가 그것을 일하게 했을 때, 나는 심지어 앞의 문장에서 고장 제거 부분을 썼다."이건 내 잘못이 아니야!"
문제는 바로 여기에 있다.내 지점에서, 내 로컬 컴퓨터에서, 나는 모든 코드를 작성한 후에, 내 계정에 지점 GitHub 메모리 라이브러리의 상위권을 만들었다.

git push --set-upstream origin MichaelLarocca

내가 상류를 만들려고 시도할 때, 그것은 작용하지 않는다.나는 현지의 지점에서 리모컨 앞을 걷고 있다는소식을 들었다. 그리고git pull을 먼저 시도했다.
문제 해결
그리고 "Fetch"를 사용하여 GitHub 계정의 지점 저장소를 업데이트하여 계정 창설자 저장소의 현재 상태와 다시 동기화했습니다.
그런 다음 로컬 저장소의 주 분기에서git pull을 사용하고 MichaelLarocca 분기로 전환하여 결합합니다.그리고 나서 나는 다시 상류를 만들려고 시도했지만, 여전히 성공하지 못했다.
업스트림을 설정할 수 없는 문제를 다시 시작했습니다.
이 문제를 해결하기 위해서, 나는 다시 내 GitHub 계정에서 복제하고forked 저장소를 다운로드했다.그리고 나는 새로운 지점 'Michael Jude Larocca' 를 만들고 그것을 전환한 다음, 추가 코드를 작성하기 전에 상위권을 만들었다.
업스트림이 설정되면, 나는 새로 만든 지점에 추가 코드를 작성하여, 다시는 어떤 사건도 발생하지 않도록 GitHub 계정 저장소로 전송할 수 있다.

끌어오기 요청 제출

이제 제 Hacktoberfest 품질 공헌인'잠금 및 불러오기'에 따라 제 사진을 찍고 합병 요청을 제출할 때가 되었습니다.

디즈니와 르카스 영화사는 모든 권리를 보류한다.

내 부탁이 받아들여졌어!

잘했어, 고마워, 마이클!#55 닫기
- 리안

더 큰 세계로 진입하는 첫걸음

Hacktoberfest 2021에 대해 품질 향상에 도움이 되는 인출 요청을 등록, 참여, 창설하는 방법을 배웠거나, 저장소를 만들고 인출 요청을 처음 받아들였다면 이것은 당신이 자랑스러워해야 할 위대한 성과입니다!
당신은 이미 더 큰 세계로 나아가는 첫걸음을 내디뎠습니다. 개원에 기여했습니다!

디즈니와 르카스 영화사는 모든 권리를 보류한다.
케빈 파월(Kevin Powell)의 유튜브 튜토리얼을 통해 CSS에만 한정된 광검을 만드는 방법을 알아본다.
내 글에서 케빈 바벨에 대한 더 많은 정보를 알 수 있다:
Scrimba의 매주 인터넷 개발 도전에 대한 정보를 더 많이 알고 있습니다: Teacher Feature: Kevin Powell.
Review: Scrimba's Weekly Web Dev Challenge
디즈니와 르카스 영화사는 모든 권리를 보류한다.

결론

Hacktoberfest 2021 시리즈는 참여자나 위탁 관리 저장소라면 등록 활동, 어떻게 갈라지는지, 복제, 지점 만들기, 고품질의 요청을 하는지 단계별로 설명한다.
Hacktoberfest에 참가한 프로그래머는 오픈소스 프로젝트에서 협업을 배우는 것이 전문 개발자가 되는 데 필요한 기본 기능이다.
Hacktoberfest는 사람들이 기원을 인식하고 프로젝트에 기여하도록 격려하는 흥미로운 계절 활동이다.그러나 개원 프로젝트는 연중 우리의 프로젝트에 기여할 수 있으니 주의하세요!
2021년의 Hacktoberfest가 끝났음에도 불구하고 "개원은 영원히 당신을 수반할 것임을 기억하세요!"