현대차, 중국 전용 ‘라페스타’ 출시..신형 쏘나타 예고편?

현대차, 중국 전용 '라페스타' 출시신형 쏘나타 예고편? 【카미디어】뉴스팀 = 현대차 중국 합자법인 베이징현대가 현지시간으로 18일 중국 전용 스포티 세단 ‘라페스타(중국명 菲斯塔∙페이스타)’를 출시했다 중국 전용 세단이지만 라페스타가 국내에서 관심을 받는 이유는 따로 있다 바로 5년 만에 풀체인지 되어 내년 초에 출시되는 8세대 쏘나타의 디자인을 엿볼 수 있는 차기 때문이다 라페스타는 C2 High(준중형) 차급으로 중국의 젊은 세대들이 '운전의 재미를 즐기기 위해 타는 차’를 콘셉트로 개발됐다 중국 준중형 C2급 시장은 연 600만대 규모로, 라페스타가 속한 C2 High 차급의 경우 중국의 20대 후반 ~ 30대 초반의 수요층이 크게 늘고  있다

이에 따라 라페스타는 최근 중국 판매량이 곤두막질치고 있는 가운데 제 역할을 해줘야하는 막중한 임무를 지고 있다 라페스타는 현대차의 새로운 디자인 방향성인 ‘센슈어스 스포티니스(Sensuous Spor tiness)’가 반영된 롱 후드, 패스트백 스타일로 디자인됐다 내부 인테리어는 1024인치 와이드 디스플레이를 중심으로 양쪽으로 길게 뻗은 크러쉬 패드에 날개 모양의 가니쉬를 적용해 스포티한 이미지를 줄 수 있도록 만들어졌다 라페스타는 최고출력204ps의 1

6 터보 GDi 엔진과 7단 듀얼 클러치 변속기 탑재했으며 COMFORT, SPORT, ECO, SMART 등 총 4가지의 주행모드시스템을 제공한다 한편, 쏘나타는 국내시장에서 9월까지 5만대를 채 팔지 못하며 차종별 판매 순위 상위권에서 밀려나고 있다 SUV의 인기에 힘을 쓰지 못하고 있고 쏘나타 잠재고객들이 그랜저로 이동한 요인도 있지만, 현재 쏘나타의 디자인 경쟁력 역시 예전만 못하다는 것이 대체적인 평가다 이에 따라 현대차는 새 디자인 철학인 센슈어스 스포트니스를 적용해 미래지향적인 디자인으로 쏘나타를 변모시킬 계획이다 콘셉트카 '르 필 루즈'

콘셉트카 '르 필 루즈'를 통해 새로운 디자인을 예고한 바 있으며, 라페스타는 새 디자인 언어로 완성된 첫 차다 라페스타는 이른바 신형 8세대 쏘나타의 예고편이라 할 수 있다 내년 초에 나올 쏘나타를 전망할 때 라페스타의 내외부 디자인을 주목해야 하는 이유다 신형 쏘나타는 준중형의 라페스타의 덩치를 좀더 키우고 다소 투박한 외관을 다듬어 나올 가능성이 크다 라페스타의 디자인은 현재 쏘나타 디자인보다 낫다는 평가가 많다

내년 출시되는 8세대 쏘나타는 7세대의 부진을 씻어내기 위해 절치부심한 차다 라페스타에 처음 적용된 현대차의 새 디자인 언어를 신형 쏘나타가 어떻게 발전시켜 나올지 주목된다  

Elementor WordPress Builder How To Build An About Us Section

안녕 얘들 아 그리고 다른 워드 프레스 Elementor 빌더 자습서에 오신 것을 환영합니다 이것은 제이미입니다 tech 22에서의 시스템 22 및 웹 디자인 그럼 우리 마지막 비디오에서 우리는이 작은 영웅 섹션을 만들었습니다 Builder의 요소를 사용하여 계속하겠습니다

Elementor로 편집하십시오 여기에 제가 열었습니다 새 섹션을 추가하겠습니다 단일 열로 이동하여 제목을 클릭하면됩니다 그리드 아이콘을 여기에 추가하자

파란색 막대 및 우리가 말하고 싶은 것을 보자 내가 조금 더 크게 만들자 이제 센터에 보자 그러면 우리는 그것을 푸른 색으로 만들 것이다 괜찮아 거기에 글꼴을 설정할 수있는 타이포그래피가 많이 있습니다

가족은 크기 무게 변형 스타일 장식 라인 높이와 편지 spacing 나는 모든 것을 그 순간에 디폴트로 남겨 둘 것입니다 텍스트 바로 아래에 작은 단락을 추가하여 텍스트 편집기 모듈을 바로 아래에 놓습니다 그리고 몇 번 이상이 내용을 복사하여 실제 내용이 없도록하십시오 거기에 넣어 좋아, 이제 시작하자 우리가 원한다면 센터는 우리를 정당화 할 수있다

나는 문장의 모양이 더 좋다고 생각한다 그래서 우리는 약간의 문장을 덧붙이고 싶습니다 이 섹션의 맨 아래 섹션 편집 버튼을 클릭합니다 누가 고급 패딩 상단과 하단의 비트를 추가하십시오 나는 모든면에서 그것을 원하지 않아 난 그냥 갔다 아래쪽에 오른쪽으로 보일 50 개의 예를 보자

바닥에 50도 괜찮아 이제는 조금 더 추가하자 이번에는 두 개의 열을 만들어 보겠습니다 우리 그리드 박스에서 흥미로운 항목은 여기에 무엇 그러나 몇몇 진도 막대기는 항상 좋은 재미이다 헤이 내 능력은 디자인 말 너는 내가 말한 것을 그대로 남겨 두 겠지만 우리는 웹 디자이너 대신 웹 디자인을 말해줘 나에게 85 % 여기에 다양한 색상의 다양한 정보가 있습니다 누군가 우리는 순간 성공을해야합니다 녹색 위험이 될거야 빨간색 경고가 주황색이됩니다

당신 예, 그들을 만들어 보자 우리의 다른 색상과 똑같이 파란색으로 만들어 보자 앞서와 색상 계속해서 파란색으로 만들면이 배경색을 바꿀 수 있습니다 여기 내 원만한 내면의 텍스트를 남겨두고 싶으면 내가 떠날거야 나도 좋아해 너와 여분의 패딩이야

sides – etc z index 인덱스에 따라 앞뒤로 당긴다 숫자가 높을수록 앞으로 숫자가 낮아집니다 그것은 캔버스에 다른 것들 뒤에 있습니다 그래서 나는 괜찮다고 생각합니다 글쎄, 나는 텍스트 색상으로 배경을 그리는 다른 모든 것들이다

여기 스타일은 어두운 그레이를 만드는 색상을 취합니다 오 푸른 얼음 투표를 시도했다 네, 그 푸른 색을 남겨주세요 좋습니다 복사해서 붙여 넣기 만하면됩니다 마우스 오른쪽 버튼을 클릭하고 테이프를 찌르는거야 그 밑에 앉아있어 내가 할거야 그 두어 번 그리고 우리는 단지 인테리어가 4 가지를 바꿀 것이라고 생각합니다

아마 이봐 요, 당신이이 스타일 중 하나를 바꾼다면 돌아 가자 여기에 별표가있는 제목 스타일을 회색으로 변경해 보겠습니다 바로 거기 좋아, 그럼 우리는이 스타일을 바꿨지 만 우리는 스타일이 여기에 있기를 원한다 if 우린 그냥 마우스 오른쪽 버튼을 클릭 한 다음 복사 할 수 있습니다 그래서 당신은 그것이 같은 색으로 디자인 제목을 변경하는 것을 볼 수 있습니다

모든 디자인이 개념을 보게되는 다른 것의 스타일을 변경하십시오 나는이 것을 고유 한 것으로 바꿀 것이다 순간 시험하러 가자 그리고 물론 우리는 가질 필요가없는 모든 사람들에게 다른 금액을 원합니다 당신은 그렇게 할 수 있습니다

당신 당신 우리는 거기에 갈 일부 카운터가있는 작은 통계 상자 또는 진행률 막대 그리고 오른쪽에 우리가 상자로 돌아가는 방법에 대한 동영상이 있습니다 타운젠드 (Townsend) 비디오는 비디오를 포착합니다 그래서 우리는 자리 표시자를 넣을 것입니다 괜찮습니다하지만 우리는 거기에 자신의 비디오 내 자신의 URL 중 하나를 잡아라

그것은 단지 youtube 비디오 URL이다 거기에 넣고 싶다 URL에 붙여 넣기를 바랍니다 우리는 거기에 내 비디오를 넣어 보자 자동 재생 뮤트 루프를 가질 수있다

그건 Hallett가 가지고있는 것이기도하다 자동 연주하지만 muties는 그렇게 해보자 행복하게 거기서 우리는 연주 할 것이지만 음소거되어 괜찮아요 두 개 이상의 섹션을 추가하면 그 부분에 대한 About 섹션이 생성됩니다 그래서 여기 또 다른 섹션을 추가 할거야

나 역시 만들거야 여기서 흥미로운 걸 아이콘 목록 좋아, 그 두 개를 제거하고 유사 나는 거기에 그 작은 아이콘을 누르거나 그것을 복제 그들을 위해 우리는 C 사이의 왼쪽 정렬베이스를 남겨 둘 것입니다 아이콘이 커지게 이유를 말해줘 파란색 호버 커버 구멍 호버 색상 검색을 통해이를 통해 그 녹색 괜찮아요 그리고 더 흥미로운 것을 넣어 둡시다 또는 그것이 무엇이든간에 방금 가져온 요소를 클릭했습니다

그냥 복사하는 것입니다 이 요소를 다시 클릭하겠습니다 이것은 우리가 원하는 곳에서 우리가 넣는 곳입니다 그리고 나는 다른 것들에 대해 똑같이 할 것이다 나는 그들을 단지 클릭하고있다

왼쪽 클릭으로 열면 거기에 넣을 수 있습니다 잘 다음과 같은 버튼을 사용하여 다른 작은 섹션을 만들어 보겠습니다 우리가 영웅 섹션에서했던 것과 비슷한 행동의 call-to-action 일종 Google 그리드로 돌아가서 텍스트 편집기를 가져와 봅시다 지금 나는 다시 몇 번이나 자지를거야 그래, 괜찮아

이 텍스트의 약간에 착색하기 위하여 그것을 선택할 것이다 나는 대담하게 만들자 다른 수건을 줘라 그 푸른 색 지금까지 우리는 당신이 그것을 아래에두기를 원합니다 이번엔 우리가 가질 수 있다면 어떨까요? 바로 지금까지 우리는 이제 우리 엉덩이를 집어 넣자 그 아래에 그리드가 다시 버튼을 추가합니다

너 거기서 우리는 조금 파란 선을 떨어 뜨렸다 괜찮아요 오른쪽에 넣자 조금만 만들어라 더 큰 더 알아보기 그것이 어디서나 당신의 링크를 놓지 않을 것입니다

큰 버튼으로 만들어 보겠습니다 그리고 우리의 푸른 색으로 만들어 보자 테크의 색상은 흰색으로 표시됩니다 배경 색상은 파란색이고 마우스를 올리면 텍스트 색상이 흰색입니다 다시 그리고 우리는 초록색 바탕색을 가질 것이다

괜찮아 이제이 섹션과이 섹션 사이에 공백을 넣기 만하면됩니다 섹션을 보려면 여기 섹션 아이콘을 클릭하십시오 어떤 부분 이 섹션에 고급 및 스타일 다시 바닥에 상위 50에 50을 넣을 것입니다 너무 많이 선택하지 않으면 링크가 필요하지 않습니다 온 사방에 좋아, 그럼 그 작은 업데이트를 저장하자

변경 사항 미리보기 당신 우리가 간다 우리는 우리 작은 것에 대한 섹션에 관해 멋진 작은 재미있는 것을 알아 들었다 Elementor와 매우 쉬운 웹 사이트는 다시 꽤 인상 깊었습니다 이것으로 작업하는 것을 즐긴다면 그렇게 할 수 있습니다 지금까지 Elementor 사이트 빌더를 사용하여 About 섹션을 사이트에 추가하십시오 우리가 계속 진행할 때 섹션을 계속 추가해두면 좋을 것입니다 당신이 있다면 공유하고 우리 유튜브 채널을 구독하고 싶습니다

웹 개발에 관심이있는 사람들은 아래를 내려다보고 우리의 무료 우리는 또한 프리미엄 코스를 몇 개 마련했습니다 YouTube 가입자에게 할인 혜택을 제공하므로 다시 한번 살펴보십시오 시스템 22의 jamie와 웹 디자인 및 기술 팁을 보내 주셔서 감사합니다 좋은 날

How To Start A Blog Part 3 – Setting Up WordPress Themes and Plugins

블로그 시작 방법 시리즈 3 번 비디오에 오신 것을 환영합니다 이 비디오에서 우리는 WordPress를 설정하는 방법, 무료 WordPress 테마를 설치하는 방법 및 작은 WordPress SEO 및 거의 모든 사람이 플러그인을 사용하여 해당 지역에서 도움을 얻으십시오

사용 먼저 WordPress 로그인 페이지로 이동하여 로그인하십시오 그러면 해당 페이지가됩니다 귀하의 블로그 URL은 플러스, 슬래시 및 wp-loginphp이며 이는 다소 비슷하게 보이는 화면으로 연결됩니다

그런 다음 사용자 이름과 암호를 입력하고 로그인하면 로그인하게됩니다 귀하의 WordPress 대시 보드에 표시됩니다 일단 거기에 있으면 가장 먼저하고 싶은 일은 아래에있는 퍼머 링크로 이동하는 것입니다 설정을 클릭 한 다음 영구 링크를 클릭합니다 거기에 도착하면 이름을 올리도록 설정하려고합니다

내 소식 블로그 이름과 게시물 이름이 나와야합니다 이것은 단축하는 데 도움이됩니다 더 읽기 쉬운 형식으로 귀하의 URL 플러스 그 SEO에 대한 더 나은 그리고 그것은 일부 플러그인 도움이 다른 설정으로는 작동하지 않으므로 그런 다음 설정> 일반으로 이동하여 거기에 도착하면 사이트 제목이 있는지 확인하십시오 그리고 그냥 다른 WordPress보다 더 서술적이고 더 많은 서재응이 될 뭔가 넣어 블로그와 같은 영리한 말이나 사이트의 키워드 중 하나와 같은 좋은 SEO 가치를 이미 가지고있는 것 다음으로 다시 설정으로 이동하여 Akismet Spam 플러그인을 설정하고 활성화하십시오

만약 당신은 여기에 넣을 수있는 API 키가 있습니다이 키를 사용하거나 여기를 클릭하십시오 API 키 가져 오기 그것은 매우 간단합니다 이제는 모든 스팸 발송자가 블로그 전체에 우스운 말을 남길 수 없도록 설정되었습니다

Akismet 당신이 스팸을 많이받지 않도록 꽤 많이 필수 플러그인입니다 정말로, 당신은 이것을 필요로합니다 플러그인을 사용하면 블로그가 발견되면 모든 종류의 스팸을 처리하게됩니다 검색 엔진 다음으로 사이트를 시작하고 실행하기 위해 몇 가지 플러그인을 추가로 설치하려고합니다

너는 원한다 당신의 WordPress SEO를 파이처럼 단순하게 만드는 All In One SEO라는 플러그인을 추가하십시오 검색 후 쉽게 설치가 가능하며 설치를 클릭하기 만하면됩니다 사이드 바에 나타납니다 그리고 너 그런 다음 집 제목, 집 설명 및 집 키워드를 입력하여 설정해야합니다

다음으로 아래로 내려 가서 업데이트 옵션을 클릭하면 걱정할 필요가 없습니다 게시물 제목 형식을 제외하고는 다른 어떤 것에 대해서, 나는 보통 게시물 제목 태그 다음에 오는 내용이 있으므로 블로그 이름이 표시되지 않습니다 모든 단일 블로그 게시물 이것은 WordPress를위한 기본적인 SEO이고 SEO는 조금 더 복잡합니다 그러나 이것은 적어도 너 시작 했어

이제는 많은 플러그인을 사용할 수 있으며 모든 것이 필요하지는 않습니다 사실 플러그인을 너무 많이 사용하면 웹 사이트가 느려질 수 있습니다 그래서 내가 사용하는 다른 플러그인은 다음과 같습니다 Optin Forms – 메일 링리스트를 시작할 준비가되면 사람들이 당신의 회보 링크 호퍼 (Links Hopper) – 가능한 제휴 제품에 연결할 때 사용하지만 그렇지 않은 경우 사람들이 그 링크가 무엇인지 보길 원합니다

문의 양식 – 사람들이 이메일을 보내지 않고도 블로그에서 연락 할 수 있습니다 전세계 모든 사람들이 스팸 메일을받을 수 있도록 블로그 어딘가에 주소를 지정하십시오 Facebook Fat Panda 님의 댓글 – 나는이 플러그인을 여기에서 추천 할 것입니다 사람들이 블로그에 Facebook 댓글을 남길 수 있기를 바랍니다 그러나이 플러그인은 조금 있습니다

설정이 복잡하고 어떻게 완료되었는지 직접 확인하기 위해 비디오가 필요합니다 모든 사람들의 의견과 답변을 Facebook에 게시 할 수 있기 때문에 사용할 가치가 있습니다 곧 Facebook 댓글을 설정하는 방법에 대한 동영상을 찾아보십시오 아주 좋은 지시 사항도있다 개발자 사이트에서도 설정할 수 있습니다

효율적인 관련 게시물 – 독자가 맨 아래로 갈 때 유용한 플러그인입니다 귀하의 블로그 게시물 중 그들이 귀하의 블로그 게시물에 대해 더 많은 기사를 읽을 수 있도록 게시물을 제안 할 것입니다 블로그 블로그는 사람들을 더 많이 읽는 데 도움이됩니다 빠른 애드 센스 – 설정하는 데 약간의 번거 로움도 있습니다

자신의 비디오 그것은 쉽게 당신의 블로그에 광고를 설정하고 Google 애드 센스를 실행하는 데 도움이됩니다 효율적으로 귀하의 블로깅 노력에 좋은 수익을 올릴 수있는 좋은 방법입니다 애드 센스 돈 블로깅을 만드는 최고의 방법 중 하나입니다 이 모든 플러그인은 블로깅을 시작할 필요가 없지만 궁극적으로는 할 수 있습니다 여기에 언급 된 것들 중 일부는 내가 생산성을 높이는 데 사용하는 것입니다

내 블로그를 운영하면서 돈을 벌 수 있습니다 마지막으로, 무료 WordPress 테마를 설치하는 방법을 간단하게 살펴 보도록하겠습니다 사이드 바의 Appearance로 가서 Themes를 클릭하면 여기에서 모든 WordPress를 찾을 수 있습니다 이미 설치 한 테마 더 많은 테마를 찾으려면 새로 추가를 클릭하고 모든 것들을 추천하고 인기를 클릭하면 1,700 가지 이상의 추가 테마를 볼 수 있습니다

수백 가지 테마를 스크롤하여 볼 수있는 내용을 미리 볼 수 있습니다 당신이 그것을 infall 전에처럼 원하는 버전을 찾으면 설치 버튼을 클릭하기 만하면됩니다 사이트에 자동으로 다운로드되지만 걱정하지 않아도됩니다 실제로는 그것을 활성화하십시오

그런 일이 일어나려면 이미 설치하고 마우스를 들고있는 테마로 가야합니다 당신이 원하는 테마 위에 올려 놓고 그것을 클릭하면 당신의 테마에 표시됩니다 지금 블로그 음, 우리는 블로그를 시작하고 WordPress를 설정하는 방법에 관한 한 비디오에 충분했기를 바랍니다 플러그인 및 테마

WordPress 블로깅 및 기타 How To Videos에 대한 추가 팁을 기대해주십시오 및 자습서 이 비디오 아래의 구독 버튼을 클릭하면 언제 알림을받을 수 있는지 확인하십시오 우리는 더 많은 비디오를 발표합니다 블로그 호스팅이 필요한 경우이 비디오 아래의 설명에서 링크를 클릭하십시오

또는 u-readorg/to/bluehost3로 이동하십시오

🔴 WordPress Progressive Web Apps (PWA) Nedir? Nasıl Yapılır? How to Build WordPress PWA?

안녕하세요 친구 오늘 당신은 WordPress 사이트에서 Progressive Web Apps를 사용하고 있습니다

WordPress PWA를 만드는 방법? 우리는 어떻게 그것을 무능하게 하는가? 우리는 이것을 검토 할 것이다 프로그레시브 웹 앱 (PWA)은 2015 년 Google에 의해 발표되었습니다 모바일 응용 프로그램을 사용하지 않고 응용 프로그램을 사용하는 것처럼 인터넷 사이트를 느끼게 해주는 소프트웨어입니다 그것을 설명하기 위해 다음 예제를 제공 할 수 있습니다 당신은 웹 사이트가 있습니다

사용자가 브라우저로 브라우저에 로그인하고 있습니다 프로그레시브 웹 앱 (예 : PWA)을 설치하면 사용자가 브라우저를 통해 더 이상 브라우저에 있지 않습니다 귀하의 휴대 전화에서 귀하의 사이트 아이콘을 클릭하여 브라우저가 응용 프로그램을 통해 로그인하고 있습니다 PWA를 사용하면 특별한 것을 얻을 수 있습니다

스플래시 화면을 만들었습니다 그런 다음 귀하는 귀하의 홈페이지 또는 연결하려는 페이지에 연결됩니다 PWA는 그 밖에 무엇이 있습니까? 브라우저에 원하는 색상을 지정할 수 있습니다 빨간색, 녹색, 파란색으로 브라우저 위쪽 부분의 색상을 원하는대로 지정할 수 있습니다 당신은 사용자 정의 할 수 있습니다

브라우저와 달리 사용자는 웹 또는 모바일 앱 사용의 느낌을 감지합니다 그것은 전적으로 응용 프로그램을 사용하는 것 같습니다 또한 사용자는 오프라인으로 설치된 사이트 (예 : 오프라인)에 PWA에 연결할 수 있습니다 그러나 중요한 알림을 보내는 것은 좋은 알림입니다 PWA를 설치하려는 사이트에는 SSL 요구 사항이 있습니다

PWA는 사용자에게 많은 이점을 제공합니다 프로그레시브 웹 앱은 사용하기 쉽습니다 PWA 용 응용 프로그램을 설치할 필요가 없습니다 PWA를 WordPress 사이트에 설치하면 사이트 방문자 집 전화를 전화기에 추가하려는 경우 경고를 클릭하면 사이트 아이콘이 전화기로 다운로드됩니다 이것은 매우 우아한 상황입니다

작성하기 전에 사이트 로그온 또는 아이콘이 전화기에 설치되어 있습니다 사용자가이 아이콘을 클릭하면 특수 시작 화면이 열리고 집이 연결됩니다 시작 화면에는 로고와 사이트의 이름이 표시됩니다 그러면 우리가 연출하는 페이지가 열립니다 PWA는 사용자의 전환율을 높입니다

내 사이트에 대한 빠른 링크를 제공합니다 그는 내 사이트에 오프라인으로 로그인 할 수 있습니다 방문자는 인터넷에 연결되어 있지 않아도 우리가 연출하는 페이지에 연결할 수 있습니다 우리는 오늘 WordPress 사이트에서 PWA 설치 방법을 검토 할 것입니다 그래서 시작하자 🙂 WordPress에 PWA를 설치하려면 내 사이트에 Super PWA 플러그인을 설치하십시오

WordPressorg 플러그인 페이지에서 Super Progressive Web Apps 플러그인을 다운로드 할 수 있습니다 플러그인 / 새로운 섹션 추가에서 플러그인을 설치할 수 있습니다 Super PWA를 설치 한 후에해야 할 일은 실제로 매우 간단합니다 응용 프로그램 이름에 사이트 이름을 입력 할 수 있습니다

저는 창립자이며 SSL을 사용하여 설치 한 beylikduzuzufocom 사이트 맵의 예를 보여 드리겠습니다 SSL을 설치 한 사이트이기 때문에 이것을 선택했습니다 Application Short Name 또는 다른 이름에 사이트 이름을 입력 할 수도 있습니다 여기서 아이콘을 선택하십시오

그는 당신에게 크기를주었습니다 192×192 픽셀 png 형식 로고 또는 아이콘 시작 화면에서 512×512 크기의 비주얼 또는 아이콘을 실행할 수 있습니다 Png에서 배경색은 시작 화면의 배경색입니다

테마 색 브라우저 rengini는 상단 부분을 표현합니다 시작 페이지는 전달하려는 페이지입니다 기본 설정을하면 집으로 이동합니다 나는 그렇게했다 오프라인 페이지를 기본값으로 두었습니다

인터넷이없는 경우 사용자가 방문 할 페이지입니다 원하는 경우 다른 페이지로 리디렉션 할 수 있습니다 Orientation Horizontal Horizontal Vertical 사이트의 표시를 결정합니다 세로는 세로를 나타냅니다 그는 다른 통제를 스스로합니다

JS, Service Worker 컨트롤 및 SSL 컨트롤 만들기 이제 트림 설정 저장이라고합니다 PWA가 이제 저희 사이트에 설치되었습니다 화면 오른쪽에 나는 내 자신의 PWA 예제를 보여줄 것이다 그를 검사 할 수 있습니다 지금 당장 활동하고있어

그것이 내가 말하는 전부입니다 다음 비디오에서 만나요 당신이 나레이션을 좋아한다면, 그것을 좋아하는 것을 잊지 마십시오 YouTube 채널을 구독하면 새 동영상에 대한 알림을받을 수 있습니다 유튜브 구독은 무료입니다

좋은 하루 되세요 🙂

3. 워드프레스로 프런트 페이지 만들기 – carousel slide

[음악] 자, 계속해서 프론트 페이지를 편집하겠습니다 php get header 소괄호, 세미콜론

그리고 끝나고 부분에 php get footer 소괄호 세미콜론 주석을 하나 넣지요 front section 닫히는 주석도 넣겠습니다 다음에 이 사이에 section에 아이디는 front-section, 그 밑에 클래스로 section-content, 그 밑에 클래스 container 그 밑에 클래스 row 탭키를 눌러주세요

여기에는 우측에 main 섹션 좌측에 side 섹션이 들어옵니다 그래서 front main이라고 주석 표시해주고, 닫히는 주석도 표시합니다 이 주석들을 복사해서 붙여넣기 합니다 그리고 main 대신에 side라고 수정합니다 여기 메인 섹션에는 div 클래스 col-md-9, 9개의 컬럼으로 하나의 단을 만듭니다

탭키를 눌러주세요 먼저 슬라이드를 넣을텐데요, 부트스트랩 사이트에서 카로우젤 슬라이드라는 컴포넌트가 있습니다 좌우 화살표 콘트롤이 있는 슬라이드, 슬라이드 아래에 인디케이터라고 하는 이런 바가 있는 슬라이드도 있네요 캡션이 들어가게 할 수도 있습니다

예제 코드를 카피해서, 텍스트 에디터로 갑니다 그 전에 주석으로 slide라고 하고, 이 사이에 붙여넣기 합니다 줄정리를 하겠습니다 서브라임에서는 Edit 메뉴에서 Line에 Reindent를 클릭해주세요 여기에서 조금 수정할 필요가 있는 것이, 여기 아이디인데요, 이것들을 모두 컨트롤 D를 눌러 4개를 지정하고, carousle-front라고 고쳐줍니다

그 다음, src에는 슬라이드 이미지가 오는데, 더미이미지로, http viaplaceholodercom에 사이즈는 1600×1100으로 하겠습니다 알트는 그대로 합니다 슬라이드에 물음표 text 이퀄 first + slide라고 해주세요

이 부분을 드래그 합니다 아, 1660이 아니라 1600으로 해주세요 두번째 슬라이드에도 고쳐줍니다 세번째도 고칩니다 텍스트를 다른 슬라이드에도 넣을텐데, 이러면 더미이미지에 사이즈 대신 이미지 타이틀이 보이게 됩니다

text = second + slide 세번째도 물음표 text = third + slide라고 추가합니다 이제는 슬라이드의 아래부분에 캡션을 넣겠습니다 이 캡션은 여기에서 보듯이 carousel-items div 속에 이런 클래스들과 함께 넣어주면 된다고 합니다 복사하고, 텍스트에디터로 가서 이미지 밑에다가 붙여 넣기를 해주십니다 reindent 하고, h5에 퍼스트 슬라이드 캡션이라고 넣고 p 태그에는 lorem 10개의 단어를 더미텍스트로 넣겠습니다 그리고 이제는 이 부분들을 모두 복사해서 다른 슬라이드에도 같은 위치에 붙여넣기 해주세요

파트 구분을 하기 위해 carousel-indicators라고 주석을 넣고, 두번째는 carousel-inner라고 하고 줄도 좀 띄웁니다 그리고 아, 캡션을 붙여넣기할때 div가 빠졌네요 첫번째 div 캡션을 복사하고, 다시 붙여넣기 합니다 Second라고 고칩니다

세번째는 third로 고쳐주세요 그리고 이 부분은 carousel-controls라고 주석을 넣어줍니다 그리고 세이브해 주세요 브라우저로 가서, 대쉬보드로 갑니다 지난 번에 페이지에 홈이라는 페이지를 만들었구요

이 페이지를 프런트 페이지로 등록해야 합니다 설정에 읽기로 들어가서, 전면 페이지를 홈으로 선택하고 변경사항 저장을 눌러줍니다 프런트 엔드로 가서, 주소창에 localhost:8080/coding_diy로 엔터를 치면, 이런 전면페이지가 보입니다 네 슬라이드는 반영된 걸 볼 수 있구요, 인디케이터 제대로 되구요

그런데 컨트롤이 제대로 안되네요 다시 텍스트 에디터로 갑니다 콘트롤 파트를 보니까, href에 이 아이디들이 처음 설정할 때의 아이디와 다르죠 인디케이터에 target에만 carousel-front라고 수정하고, 콘트롤의 href도 바꿨어야 하는데, 그렇지 못해서 작동이 제대로 되지 못했습니다 수정하구요

세이브를 하고, 브라우저에 가서 리프레쉬한 다음 좌측 우측 인디케이터를 누르니까 이번에는 모두 제대로 잘 됩니다 네 그런데 슬라이드는 오른쪽에 위치시키려고 계획했고, 좌측에는 사이드 메뉴를 넣으려고 하는데, 슬라이드가 왼쪽에 있지요 이런 경우에는 부트스트랩에서 컬럼의 순서를 변경시키는 클래스가 있는데요, 부트스트랩 사이트 flex에 order를 보시죠 div에 코딩은 첫번째, 두번째, 세번째로 아이템들을 넣었지만, 프런트 엔드에서는 순서를 변경시킬 때 order를 쓰고 하이픈을 한 다음 순서의 숫자를 적어줍니다

또한 이 클래스는 breakpoint를 넣어 디바이스마다 순서를 다르게 지정해 줄 수도 있습니다 이 클래스와 breakpoint를 잘 활용하면, PC에서는 어떤 순서가 모바일과 태블릿에서는 각각 다른 순서대로 엘리먼트를 배치할 수 있습니다 그래서 프런트 페이지에서 메인섹션과 아직 코딩하지 않은 사이드 섹션의 순서를 임의로 정할 수 있겠지요 지금 메인 섹션은 오른쪽에, 사이드 섹션은 왼쪽으로 하고 싶습니다 그래서 이 front-main 부분에서 col-md-9 다음에 order-2 아니면 안전하게 12라고 해줍니다

그리고 미디엄 이상에서만 이 순서로 배치하게 하기 위해서 order 다음에 하이픈 md라고 해줍니다 사이드 섹션에서는 order-md-1로 해주면 되겠지요 그냥 front-main의 div를 모두 복사해서, 사이트 섹션 주석들 사이에 붙여넣기, 그리고 12 대신 1이라고 해줍니다 닫히는 div 태그 달아 줍니다 그리고 일단 이 사이에는 lorem 100개의 더미 텍스트를 넣고 세이브합니다

브라우저로 가서 리프레쉬하면 이제는 슬라이드가 오른쪽에 위치하고, 사이드 섹션은 왼쪽에 위치하게 되었습니다 order라는 클래스는 위치를 변경하는 클래스가 아니라 배열 순서를 지정하는 건데, 사실상 위치를 조정하는 효과가 생깁니다 breakpoint를 넣어 디바이스마다 개별 지정이 가능하고, 숫자는 1에서 12까지 정할 수 있는데, 이번에는 그냥 12로 지정을 했습니다 만약 order를 정할 엘리먼트가 2개뿐이라면 이렇게 1과 12라고 해도 되겠습니다 프런트 페이지 슬라이드는 여기까지 마무리하고, 다음에는 페이지 아이템 박스에 대해 코딩하겠습니다