CSS Grid 레이아웃에 대한 이야기

음악재생 중 웹은 항상 전통적으로 "문서 중심" 이었습니다 사람들은 늘 보다 나은 레이아웃을 요구 합니다 대부분의 대화는 똑같은 방식으로 마무리 되었고, 결국 안좋은 해킹을 사용해야 함에 불만이 컸습니다 우리가 사용하는 해킹은 예전 방법처럼 강력하지 않아요

예전에는 모든 것을 거대한 테이블에 넣으면 됐었죠 왜 예전 방법이 인기 있었을까요? 이유는 복잡한 레이아웃도 손쉽게 구현할 수 있는 강력함을 가졌기 때문이죠 맞아요 그 방법은 최악입니다 유지 보수 관점이나

의미적으로 최악이었습니다 저는 예전에 Windows Presentation Foundation, StackPanel, WrapPanel, Grid 레이아웃에서 작업했던 경험과 같은 것이 필요했습니다 Flexbox 기술 사양이 등장하면서 StackPanel, WrapPanel과 같은 간극은 매꿨는데

Grid에 대한 간극은 무엇으로 채워야 할까요? 그래서 우리는 그러한 것을 필요로 했고, 만들어야 한다고 생각했습니다 새로운 레이아웃 기술이 필요했어요 그래서 만들기로 했습니다

우리는 Grid가 개발자들이 필요로 하는 것 이상이 되길 바랬어요 개발자들이 필요하다고 생각하는 것은 이미 할 수 있는 일이었습니다 그래서 우리는 그 후로 5년간 정말 열심히 적극적으로 작업해 왔습니다 의미있고, 유연하며 견고하고, 강력한 파워를 이해하기 쉽고 사용하기 쉬운 시스템을 CSS로 만들 수 있도록 하고자 했습니다 CSS Grid는 웹 제작자에게 웹 애플리케이션 레이아웃을 복잡한 테이블 마크업 없어 실질적인 방법으로 레이아웃을 수행할 수 있는 방법을 제공합니다

더 이상 float, position으로 레이아웃을 잡지 않아도 됩니다 absolute 포지션과 JavaScript를 함께 쓰면 발생하는 오버헤드 문제는 없습니다 보다 나은 레이아웃 방법의 등장으로 이전과 다른 새로운 스타일 방법을 우리는 얻게 되었습니다 레이아웃을 디자인 하고, Grid를 정의한 다음 콘텐츠를 Grid 안에 넣기만 하면 됩니다 이전 테이블 레이아웃 시대에 구현했던 놀라운 페이지 레이아웃을 구현할 수 있습니다

처음 CSS Grid 기술 사양을 읽고 나서 든 생각은 "와우!!" 였습니다 실제로 엄청난 가능성을 가졌고, 모든 것을 바꿀 수 있습니다 CSS Grid를 처음 보았을 때 정말 필요한 것이라고 느꼈습니다 적절한 위치에 요소를 레이아웃 할 수 있는 능력에 감탄했습니다 다른 이들에게 이 놀라운 기술을 소개하기 위해 다양한 예제를 만들기 시작했습니다

CSS Grid 레이아웃이 사라질 일은 없을 것이라고 확신했습니다 다른 이들 또한 CSS Grid를 보면 뭔가를 알게되고, 느낄 것입니다 꿈이 현실로 바뀌기 위해서는 기술에 제조사가 관심을 가지게 하는 것입니다 Microsoft는 Grid에 관심을 가졌고 기술 발전을 선도했습니다 기술을 요구하는 웹 제작자 뿐만 아니라, 리소스를 사용하여 브라우저를 만들고 빌드하는데 필요한 브라우저 개발자의 참여 또한 필요합니다

개발자들은 이 놀라운 기술에 주목했고, 2017년 업데이트 되는 모든 주요 브라우저의 새로운 버전에서 이를 지원하기로 합니다 이제 이야기 하는 수준을 넘어 사용할 수 있습니다 어쩌면 우리는 Grid의 등장을 더욱 앞당겨야 했어야 할지도 모른다 생각했습니다 아마도 CSS가 만들어졌던 초창기 부터 Grid는 우리에게 필요 했으니까요 [음악재생 중

]

Basic HTML class 2,web design tutorial class -2, HM oxygen,

Assalamu Alaikum bhai 어떻게 지내세요? 희망은 html이다 기본 농업 대출 클래스 2 요소 및 속성에 대한 내용 SM Mazharul 이슬람교 비디오가 훌륭해지기를 바랍니다

만약 당신이 그것을 좋아한다면, 구독하십시오 하나는 다음 동영상을 얻기위한 것입니다 인접한 벨 아이콘을 클릭하십시오 숫자를 늘리는 대신 yuit가 무엇인지 HTML 요소와 속성을 살펴 보겠습니다

HTML meta element | MTA Web Design Fundamentals | Cardiff Met

meta 요소는 웹 페이지에 대한 추가 메타 데이터를 제공하는 데 사용됩니다 head 요소에 포함될 수있는 다양한 메타 태그 요소가 있습니다

가장 보편적 인 부분을 살펴 보겠습니다 charset 속성 웹 페이지 문자 집합을 지정합니다 사용할 페이지에서 사용할 수 있습니다 "utf-8"은 다음을 포함하는 범용 문자 집합입니다 거의 모든 문자와 세계의 상징

그래서 대부분 웹 페이지에서 메타 태그의 문자 세트 속성을 utf-8로 설정하면 head 요소에는 여러 개의 meta 요소가 포함될 수 있으므로 일반적인 것들 작성자와 설명은 "이름"과 "내용"을 사용하여 지정됩니다 속성 "name"은 메타 요소의 유형을 지정하고 "content"는 메타 요소의 유형을 지정합니다 실제 메타 콘텐츠

그래서 저자의 세부 사항을 추가하기 위해 메타 요소를 추가 할 수 있습니다 저자의 이름과 내용 우리는 Joe Train의 저자명을 씁니다 이 경우 설명을 추가합시다 이름 속성이 설명과 동일하고 content 속성의 값을 지정하여 페이지 설명 일반적인 meta 요소의 또 다른 예는 뷰포트입니다 뷰포트 속성은 웹 브라우저 어떻게 다른 장치에 페이지를 표시 할 수 있습니다

우리는 탐구 할 것이다 나중에 코스의 뷰포트 옵션을 선택합니다 이제는 공통 설정을 지정하겠습니다 너비는 장치 너비와 같습니다 페이지 너비를 장치의 너비와 같게 설정하고 초기 배율은 페이지의 초기 배율을 설정하는 1

0과 같습니다 마지막으로 keywords 속성을 사용하여 웹 페이지의 키워드를 나열 할 수 있습니다 Google과 같은 검색 엔진에서 사용하는 데 사용되는 keywords 속성 귀하의 웹 사이트 순위를 매기는데 그들은 더 정교한 방법에 의존합니다

HTML Tutorial: From Web Design Prototype to HTML

이봐, 난 스킬 라이프에서 온 헌터 야이 두 번째 수업에 오신 걸 환영한다

4 부분으로 구성된 과정으로 비디오 채널 랜딩 페이지를 디자인하고 코딩 할 수 있습니다 에서 이 단원에서는 1 단원의 디자인 용 HTML을 작성합니다 이제 3 단원에서 CSS를 작성해 보겠습니다 설명에서이 과정을 위해 연결된 수업 계속 따라 가라

우리가 가서 코드를 작성하되 마지막 코드를 다운로드하고 디자인 할 수도 있습니다 skillthrivecom에 작은 가격 이것은 창조주로서 계속해서 나를 돕습니다 무료로 시청할 수있는 디자인 및 개발 과정을 제공합니다 그것으로 방해가되지 않도록 시작하십시오

좋아, 이제 우리는 디자인을 마쳤다 Figma, 앞으로 들어가서 실제로 HTML을 작성하기 시작하자 실제 비디오 채널 자, 우리가 언급하기를 원하는 것은 시작하는 것은 내가 사용하고있는 코드 편집기이며, 그 코드 편집기는 Visual 스튜디오 코드 이제 제가 제안하는 이유는 몇 가지 확장 기능을 설치하고 싶다면, 그리고 뭔가를 사용하고 있다면 그 확장 기능에 동일한 액세스 권한이 없을 수도 있습니다

지금, 만약 당신이 다른 것에 익숙하고 그것을 사용하고 싶다면, 언제든지 사용하십시오 그것 너와 함께하고 싶을 때를 대비해서 여기에 뭔가 있는거야 정확하게 그래서, 여기 code

visualstudiocom에서 다운로드 한 후, 가자 앞으로 Visual Studio 코드를여십시오 일단로드되면 여기로 내려와 이 아이콘으로 실제로 확장 프로그램을 설치할 수 있습니다 그만큼 먼저 설치하고자하는 것은 Live Server입니다

그래서, 그것은 첫 번째 것이 될 것입니다 여기, 이것을 클릭하겠습니다 440 만 명의 사람들이 그것을 다운로드하고 5 별, 그래서 당신은 그것이 정말 인기가 말할 수 있습니다 그만큼 정말 인기가있는 이유는 코드에서 변경을 할 수 있다는 것입니다 그것이 HTML이든 CSS이든 관계없이 브라우저

본질적으로 그것이하는 일은 단지 호스팅 된 웹 사이트처럼 만듭니다 컴퓨터에서 볼 수 있습니다 그런 다음, 그렇게하면, 일단 저장하면 파일은 자동으로 새로 고쳐지기 때문에 그 파일을 볼 수 있습니다 지금, 과거에 나는 지나갔고 실제로 갔다 사이트를 손으로

그리고 짜증나는 이유 중 하나는 단지 당신이 변경 사항을보고 싶을 때마다해야하지만, 이것을보고 학습하고 있으며 내가 쓰는 것을 이해하려고 노력하고 있습니다 그것이 실제로하고있는 것, 그것은 당신이 그 점들을 약간 연결시키는 것을 도울 것입니다 보다 나은 이제는 확장 기능을 설치 했으므로 다음 번에 설치해야합니다 HTML5를 사용하고 싶습니다

실례합니다 HTML 상용구 그리고 나는 그것을 여기에서 보지 않는다 그래서 보자, HTML 철자가 틀렸다 그래서 상용구 자 간다 그리고 이건 'HTML'과 같이 입력 할 수있게하려면 아래로 내려 가서 Boilerplate, 그리고 그것은 당신을 위해 상용구 코드를 뱉어 낼 것입니다

자, 너 Boilerplate 코드가 무엇인지 모릅니다 본질적으로 코드는 계속해서 다시 쓰고 싶다 그래서, 다시 작성하는 대신 그리고 다시 한번, 여러분은 시작 코드로 시작하고, 몇 가지를 변경하고, 제목과 설명을 작성한 다음 실제로 코드를 작성하기 시작합니다 그럼, 가라 앞서 이것을 사용하고 있기 때문에 미리 설치하고 설치하십시오

그럼 우리는 실제로 여기에 새 프로젝트를 만듭니다 그래서 나는 내 삶에 들어갈거야 파인더 나는 바탕 화면에 와서 새 폴더를 만들거야, 그냥 그 폴더를 '비디오 채널'이라고 부릅니다 그런 다음이 폴더를 잡고 끌 수 있습니다

Visual Studio 코드에 아이콘을 추가하면 해당 프로젝트가 열립니다 우리를 위해 저는 앞으로 나아가서 이것을 화면 왼쪽으로 이동 한 다음 브라우저를 오른쪽으로 이동하십시오 그래서, 여기, 이것 아래 폴더에서 새 파일을 만들 수 있습니다 그래서 저는 'index

html'을 할 것입니다 우리 홈 페이지가 될거야 그런 다음 'stylecss'를 만들겠습니다 그것은 우리 스타일을 잡을 예정이다

그런 다음 HTML로 돌아가서 'HTML'을 입력하겠습니다 와! HTML, 여기에 HTML5가 있음을 알 수 있습니다 상용구 나는 이것을 클릭하여 그 상용구 코드를 뱉어 낼 수있다 그때 나는 와서 몇 가지를 바꿀 수 있습니다

제목을 '동영상'으로 변경해 보겠습니다 채널 ', 그리고 설명을 위해 이것을'내 멋진 비디오 '로 변경할 수 있습니다 채널' 그러면 우리는 계속해서 스타일을 도입 할 수 있습니다 'style

css' 승인 그때 이 코멘트를 제거하십시오 이제 우리는 이것을 가지고 있습니다 이 HTML 파일에 들어가서 마우스 오른쪽 버튼을 클릭하고 Open With Live Server라고 말하면 이 새 탭이 열립니다

지금 아무 것도 보이지 않지만 우리가 들어 오면 그냥 'Hello World'라는 h1을 여기에 추가 한 다음 저장하면됩니다 브라우저에 자동으로 반영됩니다 멋지다 그래서 우리는 필요 없다 'Hello World'그리고 우리는이 스크립트 태그도 원하지 않습니다

그리고 내가 할 일은 그냥 래퍼를 끌어 와서 래퍼를 만들려면 'div class = "wrapper"'라고 해보자 먼저 큰 따옴표를 사용하겠습니다 그리고 나서 나는 여기에 댓글을 달아주세요이 댓글은 단지 이것이 헤더가 시작되므로 '헤더' 그런 다음 새 섹션을 만들 수 있습니다

이 섹션에서는 'top_section'을 호출 할 수 있습니다 그런 다음 '헤더'를 만들 수 있습니다 이 머리글에 나는 h1을 원하고 원하는 제목을 넣을 수 있습니다 우리는 'Your Channel Title'을 할 것입니다 그런 다음 Lorem Ipsum 중 일부와 함께 P 태그를 수행 할 수 있습니다

그리고 난 그냥 갈거야 이 Lorem Ipsum을 복사하여 여기의 코드 편집기로 돌아와 그런 다음 P 태그 아래에 버튼을 붙이면됩니다 버튼을 클릭하면 '지금보기'가됩니다 계속해서 저장하십시오 좋아, 이제 우리는 우리의 브라우저에서 그것들을 볼 수 있습니다

그런 다음이 섹션에서 이것은 머리글 자, 이제 그 부분을 주석으로 처리해 봅시다 헤더 섹션 다음으로 내가하고 싶은 것은 여기에 또 다른 설명을 작성하는 것입니다 이는 콘텐츠가 어디로 갈 것인지를 보여줄 것입니다

실제로 시작 내가 여기서하고 싶은 첫 번째 일은 다른 섹션을 만들고 이것을 'class = "content_section"'이라고 지정하십시오 그리고 이것에 대해서, 나는 첫 번째 재생 목록을 만들고 싶습니다 그리고 그 재생 목록에, 나는 h4 태그를 원하고,이 h4 태그는 가고 있습니다 우리의 재생 목록 제목이되도록 'class = "playlist_title"'을 지정합니다

과 h4에서는 "섹션 제목"만 말할 수 있습니다 좋아요, 그래서 우리는 브라우저 다음으로 우리가하고 싶은 일은 모든 것을위한 div를 만드는 것입니다 동영상 따라서, 이것은 'div class = "videos"'가 될 것입니다

실제로 개인과 마찬가지로 실제 동영상으로 이동하기 전에 비디오, 실제로 가서 내가 피그모로부터 수출 한 이미지를 가져와 봅시다 그래서 저는 여기서 Finder로 들어갈 것입니다 그리고 여기 내 실제, 내 이미지 아르 그리고 여기에 내 프로젝트가있는 보드가 있습니다 그래서이 폴더를 복사하려고합니다

여기, 내 모든 이미지와 함께, 내 프로젝트가있는 바탕 화면에 와서 붙여 넣으십시오 바로 여기에서 이미지를 볼 수 있습니다 비디오 채널 이제 우리가 할 수있는 일은 여기에 새로운 div를 만들 수 있다는 것입니다 그래서 나는 'div class = "video"'할 것입니다

그럼 인라인으로 할거야 스타일링, 배경 이미지를 가져 오거나 적어도 배경 이미지를 설정하려면 "배경 이미지" URL을 설정합니다 URL은 이제 막 나옵니다 이미지가있는 위치가됩니다

그래서, 그것은 'images / image-1'이 될 것입니다 다음 JPG 그래서 이것은 단지 파일 이름 일뿐입니다 그러면 우리는 그것을 닫아라 다음으로하고 싶은 일은 실제로 글꼴 굉장 아이콘을 사용하는 것입니다

이제 그 일을하기 위해, 우리는 우리가 Font Awesome 라이브러리를 가져옵니다 그리고 그렇게하기 위해서 Font로 향해야합니다 굉장한 웹 사이트 그리고 실제 홈페이지를 방문하면 이 행동 유도 전화는 무료로 사용하기 시작합니다 그럼 네가 가지고 있는지 확인하고 싶어

Free를 선택한 다음, 그냥이 모든 것을 복사하십시오 다시 여기로 오십시오 그리고 여기, 실제 스타일 시트라고 부르는 스타일 아래에서 붙여 넣기 만하면됩니다 이제 HTML에서 Font Awesome을 사용할 수 있습니다 이제, 실제와 같은 것을 찾으십시오

전화를 걸기 위해 전화를해야합니다 아이콘을 검색하십시오 그래서 우리는 놀이 동그라미를 할 것입니다 여기에서 볼 수 있습니다 iHTML을 사용하십시오

아이콘 HTML을 사용하면 실제로 사용할 수 있습니다 계획 따라서 여기를 클릭하여 복사 한 다음 붙여 넣기 만하면됩니다 이리 멋지다

일단 우리가 그랬다면이 비디오를 일곱 개 더 복사 할 것이다 타임스 그래서이 비디오에서 바로이 div를 복사하고 이것을 복사 할 것입니다 그것을 7 번 붙여 넣으십시오 그리고 이것은 개별 비디오 또는 첫 번째 재생 목록에 대한 8 개의 개별 동영상 그럼 내가 들어올거야

여기에서 번호를 변경하십시오 좋습니다 한 번 말하면 이미지의 일부를 실제로 볼 수 있습니다 잡아 당기는 일종의, 그들은 무서워 보인다 그러나 우리는 스타일에서 그것을 고칠 것이다

그리고 지금 우리가하고 싶은 일은 계속해서 Playlist 2 섹션을 만드는 것입니다 그럼,하자 이 재생 목록에 올거라 1 div 여기에서 볼 수 있습니다

그것의 끝, 그리고 우리는 그냥 가서 복사하고 아래에 붙여 넣을 수 있습니다 이 하나 이 항목을 '재생 목록 2'로 변경하겠습니다 그리고 우리는 또한 변화시킬 필요가 있습니다 원하는 경우 제목, 그리고 9시에 시작하려면이 제목을 변경해야합니다

16까지 올라가 좋습니다 근본적으로 우리가해야 할 모든 것입니다 나는 그냥 가보고 싶다 그리고 그것은 단지 좋은 측정을위한 것입니다, 저는 여기서 주목할 것입니다

그래서 메모를 작성하십시오 '이것은 콘텐츠 섹션의 끝'입니다 계속해서 여기에 유의하십시오 이것은 래퍼의 끝입니다 그래서, 일단 우리가 말하면, 당신은 당신이 당신의 두 섹션에서 우리는 헤더를 가지고 있으며, 기본적으로 모든 것이 될 것입니다

여기까지, HTML까지 그리고 우리는이 모양을 정말 멋지게 만들 것입니다 다음 비디오에서는 CSS를 실제로 작성하려고합니다 그래서, 그걸로 CSS를 작성하고 시작하자

Wix.com | 웹 접근성이 좋은 홈페이지 만들기

웹 접근성은 개인 장애와 상관없이 모든 이가 보조 장치 또는 키보드만으로 웹 콘텐츠를 이용할 수 있어야 한다는 개념입니다 Wix에서는 간단한 설정만으로 웹 접근성을 향상시킬 수 있습니다

지금부터 보조 장치가 텍스트 및 이미지를 이해할 수 있도록 사이트를 설정하는 법을 알려드리겠습니다 텍스트부터 시작해볼까요? 사이트 텍스트는 헤더, 서브헤더, 단락으로 구성됩니다 눈에 띄게 표시되어 있지는 않지만 H1은 사이트 제목, H2는 페이지 제목, P는 단락 등 텍스트는 자동으로 헤더 태그가 지정되어 있습니다 헤더 태그가 시작부터 끝까지 체계적으로 지정되어 있어야 보조 장치가 내 웹 콘텐츠의 구조를 파악할 수 있습니다 이제 하나씩 살펴보겠습니다

먼저 에디터로 이동하세요 사이트 제목을 선택한 후 텍스트 편집을 클릭합니다 텍스트 설정 맨 아래에서 헤더 태그를 선택하세요 여기에서 해당 텍스트의 해더 태그를 확인할 수 있습니다 사이트 제목이라면 H1으로 지정되어 있겠죠? 검색엔진 최적화를 위해서 사이트 제목이 H1으로 지정되어 있는 것은 매우 중요합니다

페이지 제목은 H2, 단락은 P로 지정할 수 있습니다 모든 사이트 텍스트의 헤더 태그를 확인하세요 이제 이미지를 살펴보겠습니다 각 이미지에 대체 텍스트로 불리는 짤막한 설명을 추가하세요 이를 통해 검색엔진 및 보조 장치가 이미지를 인식할 수 있습니다

사이트 이미지를 클릭하여 설정창으로 이동합니다 설정창 하단으로 내려가면 "이미지 설명"란에서 대체 텍스트를 입력할 수 있습니다 이번에는 색상 대비율을 통한 콘텐츠 접근성 향상 방법을 알아보겠습니다 전경과 배경의 권장 색 대비율은 45:1입니다

각 색상에는 지정된 코드가 있어 에디터에서 올바른 대비율을 찾아낼 수 있습니다 예시를 통해 텍스트 색상 코드 확인 방법을 보여드리겠습니다 텍스트 상자를 선택하고 텍스트 편집창에서 색상 아이콘을 클릭하세요 각 색상에 마우스를 가져다 대면 우측 하단에 각 색상 고유의 코드가 표시됩니다 이와 같은 작업을 반복하여 배경 색상 코드를 찾아냅니다

전경 및 배경 코드를 찾았다면 Wix 도움말 페이지의 예제 사이트를 방문하여 색상 대비율을 확인합니다 해당 도움말 페이지 링크는 동영상 끝에 제공됩니다 모든 단계를 완료했다면 왼쪽 상단의 사이트 메뉴를 클릭하세요 접근성 탭을 선택하여 슬라이드 형식의 파란색 버튼을 켜고 비주얼 표시기 기능을 활성화합니다 이제 사이트를 게시하면 보조 장치 또는 키보드만으로 사이트를 이용하는 방문자도 손쉽게 사이트 구조를 파악하고 콘텐츠에 접근할 수 있습니다

조금 이해가 되셨나요? 보다 자세한 내용을 확인하려면 도움말 페이지를 확인하세요

Sketch Tutorial: HTML and CSS Website Design Course

안녕하세요, 저는 Skillthrive의 Hunter입니다이 코스에서는 설계 과정을 배우게됩니다

Sketch에서 간단한 방문 페이지를 만든 다음 웹에 디자인을 적용하여 반응 형 디자인 만들기 기본 HTML 및 CSS가 포함 된 사이트입니다 보너스로 애니메이션 CSS 상자 그림자로 펄스 효과를 만드는 법도 배웁니다 Jquery를 사용하여 버튼을 만들고 On-Click 이벤트로 비디오의 음소거를 해제하는 방법에 대해 설명합니다 최종 스케치 및 코드를 포함하여 코스 파일을 다운로드 할 수 있습니다 Skillthrive

com에서 다운로드 탭을 클릭하십시오 이 과정에 대한 즉각적인 액세스 권한을 얻으려면 무료 회원이되어야합니다 현재 무료 과정 중 그래서 더 이상 고민하지 않고 시작합시다 Sketch를 열어 보겠습니다 새로운 문서를 선택하면 아트 보드 도구가 나타납니다

우리가 여기에서 선택한 반응 형 웹을 드롭 다운을 선택하고 데스크톱 HD를 선택하십시오 이제 우리가 갈 수있는이 새로운 대지가 생겼습니다 앞으로 키가 크지 않도록 높이를 760으로 조정하십시오 그런 다음 여기에있는 코스 파일과 이미지에 들어가서 드래그하십시오 이 아이슬란드 사진에

그냥 조금 더 크기를 조정 해 보겠습니다 아트 보드에 놓습니다 그런 다음 여기를 클릭하여 여기에 흐림을 추가 할 수 있습니다 가우스가 있는지 확인하십시오 흐리게 선택하고 값을 10으로 설정합니다

그런 다음이 이름을 배경으로 바꾸고 잠금을 설정해야합니다 그래서 우리는 우연히 그것을 옮기지 않습니다 그런 다음 키보드를 눌러 사각형 도구를 불러 와서 이 상단 모서리를 보면 아트 보드의 상단과 왼쪽에 빨간색으로 변하면 빨간색으로 변합니다 즉, 그 꼭대기에 있다는 의미입니다 그런 다음 아래쪽과 아래쪽이 나타날 때까지이 모서리를 클릭하여 드래그 할 수 있습니다

오른쪽이 빨간색이고 나서 해제됩니다 그런 다음 경계 색상을 해제 할 수 있습니다 테두리를 없애기 위해서입니다 그리고 나서이 색으로 들어가서 그것을 050620의 16 진수 코드로 바꿀 수 있습니다 그런 다음 여기로 와서 문서 색상에 추가 할 수 있습니다

이제 이것이 아니라고해도, 이것이 문서를 말하지 않는다면, 당신은 여기를 클릭하고 여기를 선택한 다음이 더하기를 클릭하여 문서 색상 – 정말 두 번 추가 한 것처럼 보이므로 삭제할 것입니다 이제이 스케치 문서를 열 때마다 이 프로젝트에서 사용 된 실제 색상을 볼 수 있습니다 한 번 추가하면 여기에 표시를 변경하거나 변명 할 수 있습니다 나,하지만 70 %로 불투명도를 표시하지 않습니다 그런 다음이 이름을 오버레이로 바꾸고 마우스 오른쪽 버튼을 클릭하여 레이어를 잠급니다

다음은 앞으로 레이아웃을 설정해 보겠습니다 우리 프로젝트의 모든 것을 정렬하는데 유용합니다 나중에 CSS 그리드를 사용할 때 유용 할 것입니다 이 과정의이 CSS 부분을 살펴 보도록하겠습니다 그래서 저는 View, Canvas에 올 것입니다

그 Show Layout이 선택됩니다 이제 이것이 내 기본 레이아웃 모양입니다 이제 당신의 모습이 달라 보이므로 View, Canvas로 돌아가 보자 레이아웃 설정 여기에 제가 선택한 컬럼이 있다는 것을 볼 수 있습니다

너비를 1140으로 설정하고 열 수를 12로 설정했습니다 이제 열이 약간 흐려질 수도 있습니다 그 값으로 변경하면 예를 들어 말할 수 있습니다 조금 남았 어 센터를 클릭하고 스케치를 클릭하면됩니다

그게 당신을 위해 좋고 중심이 맞는지 확인하십시오 수동으로 설정하고자하는 또 다른 사항은 거터 폭입니다 일단 거터 너비를 설정하면 열 너비는 자동으로 조정됩니다 그러니 계속 진행하여 30으로 변경하면 어떻게되는지 보여줍니다 그 작품

Column Width가 68로 설정되어 있음을 볼 수 있습니다 이제 열 너비를 변경하면 배수구 너비가 다음과 같이 조정됩니다 글쎄,하지만 나는 거터 너비를 40으로 설정하고 싶습니다 그런 다음 여기에 다른 색상 옵션이 있습니다 꽤 자명하지만, 이것을 당신의 이름으로 설정할 수도 있습니다

이것이 미래에 사용하게 될 것이라면 기본값 좋습니다 이제 설정을 마치고 OK를 클릭하십시오 그럼 키보드에서 'T'를 칠거야 아트 보드를 클릭하고 여기를 클릭하십시오

이 로고의 이름 – BrandStock를 해보 죠 이 글꼴을 선택하고이 텍스트 패널을 확장하면 Playfair Display로 설정된 글꼴이 있고, 크기가 24로 설정되어 있는지 확인하십시오 가중치는 굵게 설정됩니다 그리고 또한, 우리가 여기에 착상 해 그것을 확장한다면 16 진 코드를 ECF0F1로 설정하십시오 이제 문서에 추가하겠습니다

색상뿐만 아니라 그런 다음 마우스 오른쪽 버튼을 클릭하고 '윤곽선으로 변환'을 선택하십시오 그러면이 텍스트 레이어가 모양으로 변환됩니다 레이어와 그것이 멋진 이유는 내가 이것을 가져 가서 SVG 또는 벡터 그래픽을 사용하고 내 웹 사이트에서 사용하십시오 그리고 이것이 중요한 이유는 벡터 그래픽이 잘 보이게 될 것입니다

모든 장치는 해상도에 관계없이 비율에 비례하므로 화면을위한 것이므로 Sketch에서 수행 할 수있는 정말 멋진 작업입니다 그럼 그냥이 코너로 확대 해 보겠습니다 이걸 왼쪽으로 옮겨서 왼쪽으로 정렬하고, 그다음에 나는 가지 않을거야 지금 당장 마진에 대해 걱정할 필요가 있습니다 좋아, 그럼 다음에 할 일은 T를 치고 이름을 입력하자

링크 중 하나에 대해 '서비스'가 될 것입니다 그런 다음이 글꼴을 선택하고 글꼴을 변경하십시오 이것과 이것에 PT 선을 선택하고 싶습니다 나는 크기가 18이되기를 원하며 체중이 규칙적 이길 원한다 그리고 그 색깔이 미색 인 것을 확인하십시오, 그것은 완벽합니다

그런 다음이 레이어를 선택하고 Option 키와 Shift 키를 누른 채로 오른쪽으로 드래그하여 서로 약 40 픽셀인지 확인하십시오 이제 Option을 사용하여 레이어를 복제하고 Shift 키를 누른 상태로 만듭니다 이걸 오른쪽으로 옮기면 오른쪽으로 옮길거야 또는 왼쪽으로 이동하여 위아래로 움직이지 않도록하십시오 그것은 진정한 권리 운동입니다

그리고이 이름을 'Projects'로 바꾸십시오 그런 다음 Option-Shift를 오른쪽으로 드래그하면이 이름이 '정보'로 바뀝니다 그런 다음이 레이어를 선택하고 명령 G를 호출 한 다음 '연결'이라고 부릅니다 그리고 이것으로 여전히 선택되었습니다 가자

여기를 클릭하여 아트 보드의 가운데에 배치하십시오 굉장해 헤더 섹션에는 연락처 버튼이 있습니다 자, 키보드에서 T를 눌러 봅시다 그리고 우리의 설정은 PT 모래 인 링크와 동일해야합니다

실제로 24로 설정되어 있습니다 올바르지 않습니다 이것으로 돌아와서 이것들이 18로 설정되어 있는지 확인하십시오 그래서 그것은 단지 빠 른 실수였습니다 약간의 실수가있었습니다

그럼 18 세와 18 세를 바꾸자 계속해서 40 픽셀인지 확인하십시오 계속 진행하고 이들을 선택하고 좋은 조치를 취하도록하십시오 그들은 서로에 중점을 두었습니다 그런 다음 그룹화를 선택하고 아트 보드의 가운데에 배치하십시오

알았어, 거기에 약간 빠른 부비가 있지만, 정말 빨리 고칠거야 좋아, 그럼 이걸로 가서 18로 설정되어 있습니다 '연락처'를 입력하십시오 그러면 우리가 할 수있는 것은 R 버튼을 클릭하여 직사각형 툴을 가져오고 여기를 클릭하여 드래그하면 생성됩니다 직사각형, 그리고이 하나에 너비가 111이고 높이가 36 – oops – 26, 36을하자

이 반지름을 5로 설정하여 모서리가 조금 둥글게됩니다 국경에서 필을 끄 겠어 너비를 1로 설정하고 색 상에 회색으로 설정하고 싶습니다 그런 다음 연락처와이 새 사각형을 선택하고 여기를 클릭하여 중심에 배치 할 수 있습니다 그것들을 누른 다음 여기를 클릭하여 다시 가운데에 놓습니다

이제 이들이 중심에 놓여 지도록하겠습니다 다시 G 명령을 그룹화 한 다음 '연락처 버튼'이라고 부릅니다 그런 다음 버튼, 링크 및 로고를 클릭하고 서로를 중심에두기 위해 여기를 클릭하십시오 명령 G를 그룹화하고 해당 헤더를 호출합니다 그런 다음이 헤더 그룹을 선택하고 그냥 위에서 30 픽셀 이동하십시오

완전한 좋아, 이제 내용 섹션을 만들어 보겠습니다 그래서 제가 할 일은 자막을 만드는 것입니다 그래서 다시 T를 치자 텍스트 도구를 시작하고 여기에 자막을 입력하십시오

'주문형 비디오 대행사 ' 그리고 이것은 Sans 18의 태평양 표준시가 될 것입니다 그러나 저는 실제로 여기에 무게를 굵은 글씨로 바꾸고 순수한 흰색인지 확인하십시오 실례합니다, 미색입니다 그냥 이걸로 설정하고 우리는 이것을 일단 우리가 모든 콘텐츠를 얻으면 비디오에서 조금 더 나을 것입니다

자, 그럼 다음은 실제 텍스트 섹션이나 제목 섹션입니다 T를 다시 치면 텍스트 도구가 나타납니다 입력 할 내용은 무엇입니까? '모두가 비교할 수없는 스타일과 형식'이기 때문에 여기서는 매우 싼 제목입니다 그런 다음이 글꼴을 선택하기 만하면됩니다 그 제목을 Playfair로 설정하려고합니다

크기를 45 픽셀로 설정하고 가중치를 설정해 보겠습니다 여기 정기적으로 그리고 그 색깔이 미색 인 지 확인하십시오 그럼 이걸 왼쪽으로 움직일 수 있고 이 것이 약 15 개인지 확인합시다 그러니 그냥 움직여 봅시다

우리는 거기 가면 좋을 것 같아요 자, 이제 우리가 할 수있는 것은 연극을 만드는 것입니다 단추 그래서 저는 O를 눌러 타원형 도구를 들고 Shift 키를 누른 채로 있습니다 드래그하여 서클을 만듭니다

그런 다음 경계를 해제 한 다음 여기 너비를 50으로 설정하십시오 지금 설정하기 전에이 작은 아이콘을 확인했는지 확인하십시오 클릭하면 잠겨있는 것처럼 보입니다 그렇게 할 때 규모가 커지므로 너비를 똑같이하는 높이, 그래서 그것을 움직일거야 ~ 50도

그런 다음이 색상에서 16 진수 코드로 들어가서 그것을 E74D71로 보내고 여기 팔레트에 들어가서 그건 우리 문서에 굉장해 그럼 내가 할 일은 우리 코스에 들어가는거야 파일을 열어서 SVG에 들어가서이 SVG에서 드래그하십시오 이제이 SVG는 이미 미색으로 설정되어 있으므로 변경 걱정은해야합니다

그 그리고 나서 내가 할 일은 들어 와서 이것이 클릭하면 잠겨져있는 것처럼 보입니다 그런 다음 여기로 너비를 변경하십시오 11 그런 다음 여기 버튼으로 드래그하여 여기에 있는지 확인하십시오

중심에 두었다 그러면 타원형, 재생 버튼을 선택하고 그 중심에 놓습니다 그런 다음 타원형의 재생 버튼을 선택하고 해당 재생 버튼을 호출하면됩니다 다음으로 재생 버튼 옆에 작은 텍스트 조각을 만들어야합니다 그렇게하기 위해 우리는 T를 누르고 '우리가 왜 더 나은지 지켜보기'와 같은 것을 입력 할 수 있습니다

그리고 그냥 PT Sans으로 바꾸고 크기를 18로 설정 한 다음 물론 그것이 정규로 설정되어 있는지 확인하십시오 그래서 너무 큰 것처럼 보입니다 왜 그런지 모르겠습니다 크기를 조정하지 않았으므로 다시 시도해보십시오 18

우리는 거기에 갈 그것이 오프 화이트인지 확인하십시오 계속해서 움직여서 중심을 움직여 봅시다 그걸 움직여 봅시다 버튼에서 20 픽셀 시도해 봅시다

그런 다음이 두 가지를 선택하고 G 명령을 그룹화하고, 그리고이 재생 버튼과 텍스트를 호출하십시오 그런 다음 그리드를 보는 선을 그냥두고 공간과 공간을 가도록 할 수 있습니다 이 약 40 픽셀 이제 더 많은 픽셀 4 개를 봅시다 픽셀

굉장해 자, 이제이 3, 명령 G를 선택하고 그냥 콘텐츠 좋아요, 할 일이 하나 더있어서 추가해야합니다 비디오는 여기 있습니다 그렇게하기 위해 키보드에서 R을 누르고 드래그 아웃하여 직사각형을 만들고 너비를 310×350으로 조정할 것입니다

이 하나에 나는 실제로입니다 너비와 높이를 정확한 값으로 설정했는지 확인하고 싶습니다 일단 너비를 변경하면 비례 적으로 변경되기를 원하지 않기 때문에 체크 표시를 해제합니다 수동으로 실제로 설정하려고합니다 좋아, 그러고 나면 여기서 국경 반경을 5로 바꿀거야

나는 경계를 끈 다음 이것을 채우기로 들어가서 색상을 선택한 다음 여기를 선택하면 이미지를 선택할 수 있고 이미지가 코스 파일에있게됩니다 여기에 코스 파일을 탐색하고이 차량을 선택하십시오 JPEG를 누른 다음 열기를 누릅니다 그럼 이건 왼쪽 변명이 될거에요 이 가장 오른쪽 레이아웃 그리드

그런 다음 콘텐츠를 중심으로 내가 할 마지막 일은 이것에 대한 그림자를 만드는 것입니다 그렇게하기 위해 저는 그림자를 선택하러 갈 것입니다 그러면 저는이 색을 통해 들어 와서 070C1F의 16 진수 코드를 설정하려고합니다 Enter를 클릭하십시오 그런 다음 X 값을 변경하려고합니다

X 값을 0으로 변경하고 Y 값을 25로 변경하고 흐림을 15로 설정하고 스프레드를 음수 15로 설정하고 그냥 계속 시도해 보겠습니다 색깔은 아마도 90을 좋아할 것입니다 또는 실례합니다 색깔이 아니라 알파입니다 값

그런 다음이를 토글하여 우리가 좋아하는지 확인합니다 그냥 아래로 내려 가서 80을 시도해 보거나 70을 먼저 시도해 봅시다 우리가 간다, 나는 그것이 조금 나아 보인다라고 생각한다 좋아, 그럼이 두 그룹을 묶어 보자 앞으로 나아가서 이동하십시오

보도록하겠습니다 중심에있는 것처럼 보입니다 자, 여기를 축소 해 봅시다 나는 그것이 꽤 좋게 보인다라고 생각한다 Sketch에서이 점을 설계하는 것까지 우리가 원하는 모든 것입니다

이제이 디자인을 취해 실제로 빌드 해 봅시다 그것은 HTML과 CSS입니다 그래서 그 다음 비디오에서 보게 될 것입니다 바탕 화면에서 마우스 오른쪽 버튼을 클릭하고 새 폴더를 만들어서이 폴더를 호출합니다 계획

이것이 우리 코드가 살아갈 곳입니다 그리고 나서 내가 할 일은 비주얼 스튜디오 코드를 여는 것입니다 코드 에디터를 선택하면됩니다 코스 파일을 다운로드하여 동일한 것을 사용하려는 경우 설치하십시오 코드 코드 편집기

다음으로 파일을 열고 열거 나 데스크탑에 올 것입니다 내 폴더를 선택하고 폴더를 열어 보겠습니다 그런 다음이 프로젝트 탭에서 여기를 클릭하여 새 파일을 만듭니다 이것을 indexhtml이라고 부릅니다

다른 파일을 만듭니다 stylecss를 호출하고 다른 파일을 만든 다음 그 파일을 호출하십시오 videojs

그런 다음 색인 파일에 들어가서 붙여 넣습니다 여기 보일러 코드가 있습니다 당신은 내가 여기에서 볼 수 있습니다 문자 세트, 스타일 시트에 링크되어 있고 jQuery도 가져오고 있습니다 이것이 우리가 사용하려고하는 것과 우리가 가고있는 몇 줄의 코드입니다

비디오의 나중에 videojs 파일에 씁니다 내가 할 일은이 바디 태그에 들어가는거야 그리고 여기에 div를 작성해 보겠습니다 그리고이 부서는 우리의 전체 영웅이 될 것입니다

그런 다음 헤더를 만들고 내가 할 일을 먼저 만들 수 있습니다 헤더에 여기에 로고를 포함 시키면 클래스를 제공 할 것입니다 로고와 소스에 images / logosvg를 설정해야하며 로고 만 고쳐 줄거야 이제 우리는 이것이 실제로 실제로 존재하고 있는지 확인해야합니다

우리 프로젝트에서, 여기에 새 폴더를 만들어 보겠습니다 이 이미지들 그런 다음 코스 파일로 들어가기를 원하며 아이슬란드 이미지를 선택하고 폴더에 넣으십시오 그리고 내가 끌어 들이고 싶은 다른 하나는 SVG입니다 그래서 SVG에서 로고와 재생 SVG를 선택한 다음 이미지에 넣으십시오

폴더뿐만 아니라 이제 우리가 해냈으니 탐색을 만들어 보겠습니다 그리고 이것은 목록을 생성하고이 클래스를 링크로 호출 한 다음 각각을 생성합니다 개별 링크를 보려면 여기를 클릭하십시오 그리고 이것은 거짓 링크처럼 연결될 것입니다

실제로는 아닙니다 이 페이지가 유일한 페이지이기 때문에 페이지에있는 모든 것에 연결될 것입니다 이 과정에서 우리가 실제로 만들 예정입니다 그리고 이것은 서비스가 될 것입니다 그런 다음 복사하여 붙여 넣은 다음 이름을 변경할 수 있습니다

다음 nav의 아래에서 나는 버튼을 다시 포함시킬 것이다 이것은 가짜 링크가 될 것입니다 그리고 우리는 포장거야 버튼 또는 버튼 주위에 표시됩니다 버튼에 중간 버튼 클래스를 지정하고 텍스트에 대해 이 연락처에 전화 할 것입니다 우리가 필요한 헤더를 끝내기 전에 다음으로 모바일 메뉴 섹션을 만듭니다 그러기 위해서 저는 여기서 또 다른 클래스를 만들거나, 저를 다른 div로 만들 것입니다

모바일 탐색 클래스를 제공하십시오 그런 다음 여기에 입력을 만들고 ID를 부여합니다 toggle 중 하나이며 유형은 checkbox가 될 것입니다 그리고 우리는 이것을 생성하기 위해 이것을 사용할 것입니다 같은 햄버거 메뉴와 같은 상태가 메뉴를 움직이게 할 것입니다

아래로 미끄러지면서 링크를 보여줄 것이고 그것은 단지 될 것입니다 모바일에서 볼 수 있지만 글쓰기를 시작하면 더 자세한 내용을 알 수 있습니다 CSS를 사용하면 실제 무슨 일이 벌어지고 있는지 더 많이 이해할 수 있습니다 좋아, 그럼 레이블 필드를 만든 다음 그 라벨을 제공해야합니다 햄버거를 먹으면서 우리가 위에서 설정 한 토글이 될 것입니다

그리고이 라벨 안에서 우리는 실제 햄버거 아이콘을 보려면 여기를 클릭하십시오 그리고 이것은 햄버거 상단이 될 것입니다 계속해서 복사하십시오 이 햄버거 고기가 될거야 나는 이것을 햄버거 바닥이라고 부르고 싶다

그런 다음 햄버거 탐색을 실제로 만들어야하므로 새 div를 만듭니다 그에게 햄버거 조종사 클래스를 제공하십시오 그러면 우리는 래퍼 (wrapper)를 만들어서 이것을 이름으로 지정합니다 햄버거 함 랩퍼 그리고 나서 우리는 다른 div를하고 이것이 될 것입니다

햄버거가 항목을 탐색하면 여기에 모든 링크를 넣을 곳이 있습니다 우리 nav 그리고 다시, 이것들은 단지 더미 링크가 될 것입니다 그리고이 div에서, 실제로, 당신은 div가되기를 원하지 않습니다 나는 그것을 nav로 바꾸고 그 다음에 우리가 이 또한 nav에

다음은 위의 헤더 아래에 섹션 및이 섹션에서는 영웅 콘텐츠 클래스를 제공 할 것입니다 그런 다음 새로운 div를 작성하여 영웅 텍스트 클래스를 만든 다음 입력 할 것입니다 단락 태그 및 영웅, 실제로 영웅 부제 클래스를 제공합니다 그리고 우리는 계속해서 자막에 글을 쓸 것입니다 이제 우리의 디자인에서는 모든 대문자가 될 것입니다

그러나이 글을 쓰려고합니다 제목의 경우에는 실제 캡션을 사용합니다 CSS 그런 다음 h1을 만들고이 h1에 제목을 씁니다 그리고 나서 우리는 새로운 div를 만들고이 div는 클래스를 가질 것입니다

재생 섹션이라고합니다 여기에 새 사업부가 생기면 우리가 jQuery를 작성할 때 유용하게 쓰일 게임의 ID와 클래스는 재생 버튼이라고합니다 다음으로 우리는 재생 버튼을 위해 그 SVG를 끌어 올 것입니다 images / playsvg에 살기 위해서입니다

우리는 이것을 그냥 놀아 볼 것입니다 단추 그러면이 부서에서 단락을 작성하려고합니다 우리가 왜 더 나은지 지켜 볼 것입니다 그런 다음이 div 바로 아래, section 닫기 태그 바로 앞에 있습니다

여기에 새로운 div를 만들려고합니다 그리고 이것은 영웅 비디오가 될 것입니다 그리고 여기에 코드가 살아갈 곳이 있습니다 우리는 Wistia에서 끌어 들일 것입니다 Wistia는 우리가 호스팅 할 곳입니다

비디오 그래서 당신이 들어 오면, 당신도 알다시피, 여기에 구글과 Wistiacom에 입력, 이것은 우리가이 과정을 위해 사용할 자원 이제 Wistia는 실제로 꽤 비쌉니다 무료 티어가 있고 무료 티어는 3 개의 무료 비디오를 허용합니다

그래서 나는 이것이 정말로 유용하다고 생각한다 무료 계정 상자에서 나온 설정 자, 여기에 내 계정으로 뛰어 들어가 보자 그게 뭔지 한번보세요 좋아, 일단 당신이 Wistia에 있다면, 당신은 아무것도 보지 않을거야

실제로 새 프로젝트를 만들어야합니다 여기에 방문 페이지 프로젝트가 있다는 것을 알 수 있습니다 이 아이슬란드 비디오는 코스 파일의 비디오 폴더에 포함되어 있습니다 그리고 비디오를 올리려면 업로드하고, 파일을 선택하고, Wistia에 업로드하십시오 그럼 비디오를 보러 올거야

나는 비디오 액션에 들어가서 커스터마이즈하고 싶다 외모에 16 진수 코드를 여기에있는 분홍색으로 설정했습니다 E74 D71 인 Sketch에서의 프로젝트 그런 다음 동영상으로 선택한 유형의 미리보기 이미지를 보겠습니다 나는 비디오의 1 초 표시에 시작을 선택한 다음 비디오의 6 초 표시

그리고 그 일은 정확히 당신이 보는 것입니다 여기 – 이것은 계속 반복 될 것이고 우리는 볼 수있게 될 것입니다 우리 페이지에 살고 있습니다 자, 컨트롤도 여기 있다고 생각합니다 자동 재생이 있습니다

동영상 미리보기 이미지이기 때문에 꺼져 있으며이 큰 버튼은 숨겨져 있기 때문에 나는 그것이 실제로 보이기를 원하지 않았다 나머지는 클릭하십시오 나머지는 실제로 클릭하십시오 플레이 바와 모든 것들이 나타날 것입니다 그럼 그냥 클릭하십시오

그리고 당신은 Wistia에서 놀고있는 것을 볼 수 있습니다 일단 우리가하고 싶은 일이 실제로 공유되고 퍼지면 이 나쁜 소년 이렇게하려면 동영상 작업을 시작한 다음 몫 그런 다음 인라인 삽입을 선택합니다 그런 다음 비디오 크기가 반응 형, 임베드 형으로 설정되어 있는지 확인하십시오

그런 다음 검색 엔진에서 색인에 대한 페이지에 비디오 메타 데이터를 삽입합니다 꺼져 그런 다음 해당 코드를 복사하려면 여기를 클릭하십시오 Visual Studio 코드를 클릭 한 다음 붙여 넣습니다 여기에 정말 긴 스크립트가 있습니다하지만 꽤 간단합니다

그걸 붙여 넣기 그리고 우리가 할 다음 일은 몸 바로 앞에 있습니다 이 부서가 끝나면 바로 여기에서 JavaScript 그래서 우리는 스크립트 소스와 videojs, 그리고 닫는 스크립트를 같게하고 싶습니다

그럼 우리는 그냥 가서 저축 할 것입니다 이제 우리가 프로젝트 폴더 아래의 데스크탑 밑으로 들어가서 이 HTML은 브라우저에서 열리 며 모든 것을 볼 수 있습니다 엄청나게 큰이 SVG가 보입니다 우리는 우리의 embed를 볼 수 있습니다, 우리는 프로젝트의 모든 내용을 볼 수 있습니다 그래서 분명히보기에는 정말 좋지 않지만 CSS가 무엇인지는 분명합니다

그리고 우리는 다음 비디오에서 그것을 스타일링 할 것이므로, 나는 그 것을 보게 될 것입니다 stylecss 파일에서 상단에 내가 이미 진행 한 것을 볼 수 있습니다 Google 글꼴을 가져 왔고 Google에서 직접 가져 왔습니다 그래서 여기에 Google 글꼴 웹 사이트에서 볼 수 있습니다

PT Sans에 입력하십시오이 글꼴을 선택할 수 있습니다이 글꼴을 확장하고 사용자 정의 할 수 있습니다 400을 사용하고 싶고 굵은 글꼴을 원한다면 저것을 묻고 그 후에 @ 수입하십시오 그런 다음 코드의이 부분을 선택하면됩니다

복사 한 다음 stylescss 파일에 붙여 넣습니다 이제 우리는 실제로 코드의 일부를 실제로 작성할 수 있습니다 Google 글꼴을 가져 왔습니다 첫 번째 것은 시체입니다

나는 그저 100 % 높이를 주려고합니다 그런 다음 모든 스타일을 여기에 적용 할 것입니다 이것이 단지 경기장을 평준화하고 확실하게하는 것이라고 생각하십시오 여백을 0으로 설정하고 패딩을 0으로 설정하고 상자 크기 조정은 테두리 상자로 설정됩니다 그런 다음 마진을 0으로 설정하고 패딩을 제로

그런 다음 여기에 h1을 추가하고이 글꼴에 h1을 추가하겠습니다 글꼴 패밀리가 필요합니다 플레이 페어 디스플레이로 설정되고 폴백은 세리프가 될 것입니다 그리고 우리가 글을 쓰는 동안 HTML 파일을 열어 보겠습니다 우리는 실제로 무슨 일이 일어나는지 볼 수 있습니다

글꼴 크기 45, 글꼴 무게를 100으로 설정하고 색상을 지정합니다 그 헥스 코드와 우리가 사용하고 스케치, 그래서 ECF0F1 그러면 글자 간격은 2 픽셀이됩니다 우리도 설정하고 스케치 그리고 나서 마진을 0으로 설정합니다

40 0 그러고 나서 그냥 저장하고 여기로 들어 와서 새로 고칩니다 그리고 우리는 우리의 헤딩 헤딩이 업데이트 된 것을보고 또한 그 마진을 제거했습니다 및 기본 브라우저에 있던 패딩 그리고 나서 다음을 위해 여기에 몇 가지 기본값을 추가 할 수 있습니다

그런 다음 우리의 영웅 스타일을 추가 할 수 있습니다 따라서 익숙하지 않은 경우 -이 RGB 색상은 스케치에서 가져오고 있습니다 스케치의 값입니다 우리가 Sketch로 돌아가 착륙을 열면 여기 페이지를 클릭하면 오버레이에 들어가서이 색상으로 볼 수 있습니다 RGB 값이므로 5, 6, 32가 될 것이며 알파는 70이됩니다

여기서 RGBA는 5, 6, 32 및 07입니다 그래서 나는 그저 멈추고 그걸 설명하기를 원한다 명확하지 않았다 이제 헤더와 오버레이가 있습니다

실제로 이미지를 가져와야하고 의사 클래스를 사용할 것입니다 그 일을하기 전에 그리고 Z 지수를 음수 값으로 설정하는 것도 중요합니다 이미지가 오버레이 또는 영웅 클래스 뒤에 있는지 확인한 다음 계속해서 이미지를 가져 오면 이미지의 URL로 설정합니다 아이슬란드

jpg 그런 다음 배경 위치가 가운데로 설정되었는지 확인합니다 반복은 no-repeat이고, 배경 크기는 덮어 지도록 설정됩니다 그런 다음 흐리게 처리하기 위해 필터를 사용할 수 있습니다 이 10 픽셀 – 그리고 여기에 오타가 있습니다

거기에 우리가 간다 그리고 Sketch 에서처럼 흐리게 추가하면 가장자리에 이미지가 좀 이상 해져서 우리가 할 일은 변형입니다 그것과 우리는 그것을 규모로 변형 할 것이고 그것을 확장 할 것입니다

최대 12 좋아, 이제 오버레이와 이미지를 처리 ​​했으니 머리글에 스타일을 추가하십시오 그리고 여기서도 flex를 사용할 것입니다 그런 다음 우리는 공간을 사용하게 될 것입니다

할 일은 로고를 왼쪽으로 밀면됩니다 항목을 중앙에 놓은 다음 버튼을 오른쪽으로 밀어 넣습니다 Flex 나 Flexbox를 사용하지 않았다면, 정말 멋지 네요, CSS로 완전히 살아 남았습니다 그리고 나는 더 유용한 깊이있는 방법들을 링크시켜야 할 것입니다 flexbox를 사용하십시오

왜냐하면 여러분이 정말로 사용하고 있어야한다고 생각하기 때문입니다 아직 아니야 그런 다음 우리는 서로를 중심에두고 여백을 추가 할 것입니다 30 픽셀 위쪽 이제 이걸 저장하고 무엇을 살펴 봅시다

우리 사이트는 같습니다 그러니 계속해서 새로 고치겠습니다 우리는 그것이 모두 함께 가고 있다는 것을 모두 볼 수 있으며, 내가 가고 싶은 한 가지는 앞으로 숨기려면 숨기기 -이 메뉴 숨기기 이제 햄버거를위한 섹션을 만들어 보겠습니다 우리가 할 일은 주 래퍼를 숨기는 것입니다

모바일 메뉴 – 오케이 – 오타가 있습니다, 여기 있습니다 모바일 메뉴 표시 없음 그럼 이제 우리가 저축하면 이쪽은 여기 사라질거야 그러니 새로 고쳐 가자 우리는 오타가 있어야합니까? 그게 왜 사라지는 지 확신 할 수 없네

돌아 가자 Google 색인에 추가하여 휴대 전화로 랩핑했는지 확인하십시오 모바일 네비게, 알았어 그러니 모바일 메뉴를 호출하면 새로 고침 해보겠습니다 알았으니 머리글 뒤를 돌아가서 스타일링을 계속하자

다음 일 그리고 다음은 로고가 될 것입니다 그래서 우리는 단지 커서의 커서를 추가하고 싶습니다 그런 다음 탐색 링크의 스타일을 지정하고 목록을 제공 할 수 있습니다 스타일 없음 유형

여백 블록 (oops-blocks)이 0 픽셀이되기를 원합니다 마진 블록 끝이 0 픽셀입니다 그리고 이것들은 크롬에서 나오는 것들 중 일부를 오버라이드하고 있습니다 필자가 시도하고있는 것보다는 필자가 추가하고있는 것 Chrome에 기본으로 제공되는 기본 설정을 재설정하려면 포함합니다 그러면 0 픽셀이되고 마지막 픽셀은 0 픽셀이됩니다

여기는 패딩 인라인 시작은 0 픽셀입니다 그래서 나는 그것을 구할 수있다 시원한 그런 다음 실제로 개별 항목을 링크가 될 것입니다 그리고 여기에 디스플레이가 인라인 블록이되어 나란히 놓 이길 원합니다

그리고 패딩 (padding)에서 우리는 0을 맨 위에 그리고 20을 각 사이드에주고 싶습니다 그러니 계속 진행하십시오 새로 고침해라 그것들은 이제 올바르게 정렬되어 있음을 알 수 있습니다 다음은 실제 링크 자체가 될 것입니다

여기에 나는 03 초의 전환을 추가하려고합니다 쉽게 그리고 거기에 아무 지연, 그래서 0 초거야 그리고 이것이 할 일은 일단 우리가 떠오르게 될 다음 일을 추가하면됩니다 pseudo class, 그래서 hover

이 값을 여기서 색으로 바꿀 수 있습니다 그 분홍색이 될 것입니다, 그래서 그것은 E74D71입니다 이제 이것을 저장하고 마우스를 가져 가면 브라우저를 새로 고침하면됩니다 이걸로 우리는 할 수 있습니다 작고 보기 흉한 사람

이제 내가 실제로 이것을 목표로하지 않았기 때문에 그들이 아닌 것처럼 보입니다 맞아 그럼 그게 목록이 될거야 우리가 간다 그런 다음 새로 고침 해 봅시다

내가 가리킬 때 그 변화가 있음을 알 수 있습니다 자동으로 변경하는 대신 전환을 추가 할 때도 볼 수 있습니다 멋진 부드러운 동작입니다 단지 훨씬 더 즐겁습니다 좋아, 계속 나아 간다

미디어 버튼을 클릭 해 보겠습니다 폭을 설정할 수 있습니다 Sketch에서 직접 가져온 값입니다 알겠습니다이 커서에도 커서를 추가하여 마우스를 올려 놓으면 변경됩니다

그걸로 그리고 여기에서 실제로이 전환을 복사 한 다음 붙여 넣으려고합니다 여기에 마우스를 올려 놓으면 멋진 전환이 이루어지기 때문에 여기에 표시됩니다 그 그런 다음 여기에 마우스를 올리면 상태를 추가 할 수 있습니다

이것에서 나는이 국경을 복사해서 붙여 넣을거야 그런 다음이 값에 대해 여기에서이 값으로 변경하려고합니다 국경을 바꿀 때도 변화를 원합니다 배경색, 그래서 같은 값으로 변경하자 이제 저장하면 브라우저가 새로 고쳐집니다

연락처 단추가 좋고 스타일 그 위에 마우스를 올려 놓으면 멋진 전환이 이루어집니다 그 핑크색으로 정말 좋아 보인다 좋아요 다음에 영웅 콘텐츠를 스타일링 할 것입니다

그래서 가장 먼저 우리는 여기에 목표로해야 할 영웅의 내용입니다 이번에는 디스플레이 그리드를 사용할 예정이며 세부 사항을 설명하지 않기 때문에 디스플레이 그리드 용 코스를 아래에 포함 시키십시오 정확히 어떻게 디스플레이 그리드를 사용 하는가에 관한 것이지만, 플렉스와 같은 것은 레이아웃 그런 다음이를 같은 크기의 12 개 섹션으로 반복합니다 화면 크기의

이 항목을 가운데에 정렬하면 200 픽셀 위쪽 여백이 생깁니다 저장하십시오 새롭게 하다 그래서 당신은 이미 그것이 주인공의 텍스트로 바뀌 었음을 알 수 있습니다 우리는 그리드 컬럼 시작을 할 것이고 우리는 그 6 개의 섹션을 확장 할 것입니다

그래서 스팬 6 그리고 마진 권리는 40 픽셀이 될 것이므로이면 바로 여기가 더 넓어 질 것입니다 우리는 거기에 갈 이제 영웅 텍스트를 만들었으니 영웅 부제를해야합니다 그것은 텍스트 변형이 될 것입니다

그리고 그것이 우리가 그것을 강제하기 원하는 곳입니다 대문자 글꼴의 무게는 700이 될 것이므로 그 글꼴은 대담 할 것입니다 그리고 마진은 다음과 같이 될 것입니다 0 0 15 그리고 0

계속해서 저장하십시오 그리고 영웅 비디오 섹션이 될 다음 일을 작성해 보겠습니다 그래서 영웅 비디오 그리고 여기서 우리는 그릿 열 시작을 할 것입니다 그리고 이것은 6을 확장 할 것입니다

그래서 우리는 6 개의 열로 나누었습니다 그리고 나서 각 – 동영상의 콘텐츠가 공간의 절반 인 6 개를 차지합니다 유효한 그런 다음 여기에서 실제로 어떤 것을 목표로 삼을 것입니다 in Wistia에서 Wistia를 찾은 다음 Wistia에 Chrome을 대시합니다

테두리 반경은 5 픽셀입니다 그리고 내가 새로 고치기 전에, 나는 앞으로 나아가고 나머지를 여기에 추가 할 것입니다 그럼 연극 섹션을 보자 우리는 이것에 flex를 사용하려고합니다 항목을 서로의 중심에 놓은 다음 재생 버튼으로 이동합니다

디스플레이 플렉스뿐 컨텐츠 센터를 정당화하십시오 폭은 50이 될 것입니다 이 오타를 수정하십시오 높이도 50이 될 것입니다

그리고이 값들은 Sketch의 디자인에서 직접 얻었습니다 그리고 margin-right는 20 픽셀이 될 것입니다 배경 우리는 RGBA 값으로 설정하려고합니다 그래서 우리는 RGBA 228 55 95를 할 것이고 하나의 경계 반경은 갈 것입니다 5 픽셀의 값이되어야합니다

5 픽셀이 아니라 50 퍼센트를 용서해주십시오 그리고 이것은 이것이 완전히 둥글 었는지 확인하게 될 것입니다 그런 다음 여기 애니메이션을 애니메이션으로 설정하려고합니다 펄스라는 애니메이션 이름으로 설정하겠습니다 길이는 2 초가 될 것이고 그 애니메이션은 영원히 지속될 것입니다

그리고 커서가 포인터가 될 것입니다 애니메이션을 위해 여기에 아직 이것을 적지 않았지만, 우리는 이것을 한 쌍의 여기에 더 많은 라인이 있습니다 다음에 쓰고 싶은 것은 재생 버튼이 될 것입니다 SVG 우리는 그것을 훨씬 더 작게 만들 것입니다

그럼 버튼 이미지를 재생 해 봅시다 여기서 너비를 13 픽셀로 설정하겠습니다 좋구나 이제 브라우저를 새로 고치고 저장하십시오 그리고 거기에 당신이 간다, 당신은 이것이 거의 그것처럼 보이고 있음을 볼 수 있습니다

그것은 거의 완벽하게 스타일링되어야합니다 우리가하고 싶은 몇 가지 작업과 여기에 대한 하나의 애니메이션이 있습니다 맥박 이것은 정말 멋지다 이 멋진 차가운 효과를 내기 위해 박스 그림자를 사용할 것입니다

버튼에, 어떤 모양으로 보이게 하듯이 – 실제로 이것이 클릭 할 수있는 것이라는 점을 주목하십시오 그리고 누군가의 시선을 끌기로되어 있습니다 그래서 우리는 키 프레임을 사용하게 될 것입니다 그래서 우리는 키 프레임을 작성합니다 우리는 애니메이션 투표를 이름 짓고 0에서 첫 번째 키 프레임을 지정합니다

다음을 원한다 – 박스 그림자를 0 0 0 0 픽셀로 설정하고, RGBA로 설정 한 다음 228 55 95로 설정하면 값은 07이됩니다 그 다음에는 마지막 키 프레임 또는 백퍼센트 – 다음을 원합니다 우리는 상자 그림자를 원합니다, 그래서 저는 이것을 실제로 복사 할 것입니다 그것을 안으로 붙여 넣으십시오

우리는 그것이 여기에 있기를 원합니다 나는 이것을 15로 바꾸고, 이 값을 0으로 설정하십시오 이제 이걸 저장해 봅시다 이제 우리가 새로 고침하면 버튼이 정말 멋지다는 것을 알 수 있습니다 펄싱 효과를 사용하면 애니메이션이 매우 간단하다는 것을 알 수 있습니까? 실제로 그다지 그다지 중요하지 않았습니다

알았어, 우리가 여기서하고 싶은 마지막 일은 단지 페이지가 응답 할 수 있도록 허용 할 일부 미디어 쿼리를 추가하십시오 그리고 우리가 마지막으로해야 할 마지막 일은 햄버거입니다 항해 이제 실제로 동영상을 중단하려고합니다 좀 더 자세하게 설명하겠습니다

하지만 그것들은 오랜 시간이 걸리지 않을 것이기 때문에 미디어 쿼리 그래서 우리는 @media를한다 우리는 당신을 스크린 할 것이고 여기에 최대 폭을 1200으로 설정합니다 그리고 우리가 원하는 것은 화면이 최대 일 때입니다 너비가 1200 인 경우 이러한 변경 사항이 적용됩니다

따라서 영웅 콘텐츠에 여백을 남기고 싶습니다 100 위 안에 우리는 영웅 텍스트와 영웅 비디오에 그리드 열이 있어야합니다 실제로 전체 화면에 걸쳐 있으므로 전체 너비가 될 것입니다 그런 다음 주인공 텍스트에서 여백 하단이 60이되기를 원하며 마지막으로 영웅 비디오 이제 이것에 대해 약간의 여백을 추가 할 것입니다

여기에서 볼 수 있습니다 왜 이것이 유용할까요? 자 이제 저는 그것을보고 있습니다, 저는 여기서 반복하고 있습니다 그래서 영웅 비디오를 복사 해 봅시다 쉼표를 만들고 붙여 넣은 다음이 것을 제거하십시오 이제는 저장하겠습니다

하지만 새로 고치기 전에 나는 왜 우리가 그것을 추가했는지 보여줄 것입니다 그래서 우리가 이것을 펼치면 당신이 그 모든 것을 나쁘게 보지 않는다는 것을 볼 수 있습니다 큰 화면을 만든 다음 작게 만들기 시작하면 크기가 작아집니다 조금 비좁은, 그렇지? 모바일에서 볼 때 완전히 끔찍한 것처럼 보일 수 있지만 이제 다시 시도해 보도록하겠습니다 그리고 이제 우리가 이것을 작게 만들면 그것이 전체 너비로 갈 것임을 알 수 있습니다

이제 분명히 조금 너무 복잡해지고 있습니다하지만 햄버거 메뉴로 그 문제를 해결할 것입니다 다음 동영상에서 특히이 동영상에서 우리는 모바일 탐색을 위해이 CSS를 할 것입니다 이미 시작한 CSS에서 확인할 수 있습니다

햄버거 메뉴를 숨기면 기본적으로 숨겨집니다 그래서 여기에 보이지 않는 것을 볼 수 있습니다 이를 표시해야 할 때 및 다른 요소가 표시되어야 할 때를 대상으로하는 미디어 쿼리가 있습니다 숨겨져 있어야합니다 이제 화면에 미디어 쿼리를 작성해 보겠습니다

최대 너비를 목표로 설정하고이를 1,000으로 설정합니다 픽셀 한 번 화면이 천 또는 화면보다 작 으면 우리가 모바일 탐색을 원하거나 Google 메뉴를 상속 받도록 설정 한 모바일 메뉴 우리는 nav 링크와 버튼에 아무 것도 표시하지 않기를 원합니다 그래서 앞으로 나아가 야한다는 것을 여기서 우리 프로젝트를 새로 고침 해보면 이제는 이걸 긁어 내면 이걸 보게 될거야 멀리 – 이것은 사라져 버린다

그리고 우리 nav는 나타난다 지금 분명히 그것은 지금 스타일이 아니지만 우리는 지금 그것을 할 것입니다 그래서 우리가하고 싶은 첫 번째 일은 우리가하고 싶은 첫 번째 일은 메뉴 아래에 있습니다 그리고 햄버거 수업을 목표로하십시오 이제 우리는 그것을 절대 위치로하고 싶습니다 가서 너의 너비를 여기에 맞추면된다 35 픽셀이되는 높이는 30 픽셀이 될 것입니다

최상위 값을 14 픽셀로 설정하고 10 %, Z- 색인 5, 커서를 설정합니다 바늘 그런 다음 햄버거 사업부를 타겟팅하고 싶습니다 이것은 친척이 될 것입니다 이것들의 넓이는 햄버거와 같을 것입니다

35 세가 될거야 이것들의 높이는 3 픽셀이 될 것이고 이것은 사실, 햄버거를 대표 할 작은 막대와 일단 우리가 이것을 적어서 저장하면 더 의미가 있습니다 그래서 경계 반지름을 3 픽셀로 설정하고 싶습니다 배경색은 여기에서 헥스 코드로 설정되어 오프 화이트 (off-white)가됩니다 그리고 마진은 10 픽셀이 될 것입니다

마지막으로 여기에서 타겟팅을 전환하는 다른 방법을 쓰겠습니다 모든 그것은 03 초가 될 것입니다 그리고 이것은 안심할 것입니다

아웃 그러면 우리가 할 수있는 것은 토글을 숨길 수 있다는 것입니다 그리고 이것은 일종의 해킹과 같습니다 맞습니까? 그래서 우리가 이것을 움직이면 너는이 작은 것을 볼 수있다 여기 입력하고이 입력은 상태와 같습니다

맞습니까? 선택했거나 선택하지 않았습니다 그리고 우리가 할 일은 우리가 pseudo를 사용하여 그것을 사용할 것입니다 페이지에 실제로 표시되는 내용을 변경하기 위해 checked라는 클래스 그리고 나서 우리는 그것을 사용하여보기 좋게 만들 것입니다 CSS로 전환과 애니메이션

그래서 우리가 이것을하면 작은 틱 박스가 나타날 것입니다 떨어져 그래서 우리는 토글을 할 것입니다 그리고 나서 그것을 설정합니다 없음을 표시합니다

그리고 그냥 저장하고 페이지를 새로 고칩니다 그리고 이제 이것을 작게 만들어 보겠습니다 하고 있었다 자, 이제 햄버거 메뉴 스타일을 볼 수 있습니다 분명히 우리는 그것을보고 싶지 않고 애니메이션과 그 모든 것을 원합니다

그러니 그 일을 시작하십시오 그래서 이번에는 체크 표시를 사용하여 토글을 타겟팅 할 것입니다 인접한 선택기를 사용하여 다음 스타일을 선택하려고합니다 햄버거 가기 그리고 햄버거 정상은 회전에 의해 변형 될 것이고 그것은 가고 있습니다

음의 45도 회전합니다 여백 상단은 17 포인트 – 우 – 175 픽셀로 설정됩니다 여기에 그 가치가 반값이라는 메모를 추가하겠습니다 햄버거 높이의 크기

따라서 크기를 조정하려는 경우에 유용합니다 권리? 좋아, 그럼 내가 복사해서 붙여 넣을거야 고기를 넣은 다음 바닥에 붙이십시오 그래서 이것은 햄버거 고기가 될 것입니다 이쪽은 긍정적 인 45로 회전 할 것이고 이것은 진행될 것입니다

음수 3 픽셀의 여백 맨 위가됩니다 그리고 여기에는 햄버거 div 높이의 음수 값을 나타내는 메모가 추가됩니다 즉 여기에서 설정 한 값입니다 바로 여기에서 음수 값 그것의 좋아, 그리고 여기에 우리는 햄버거 바닥을 가지고, 그래서 바닥 롤빵

그리고 이것은 조금 더 간단합니다 여기서 우리가 할 일은 변형이 있지만 회전 대신 크기를 조정할 예정이며이를 0이되므로 사라집니다 마지막으로 우리가 작성해야하는 마지막 인접 셀렉터는 체크 된 토글에 대해, 그리고 여기에 체크 된 글이 필요한지 확인하기 위해 오타, 우리가 간다 그래서 체크 함과 햄버거를 토글하고 햄버거 탐색 그래서 왜 우리가이 플러스를 사용하는지 왜 그런지 궁금해 할 것입니다

우리는 인접 셀렉터를 사용합니까? 그래서 우리가 가기 전에 나는 다시 여기에서 무슨 일이 벌어지고 있는지에 대한 색인과 종류 따라서 햄버거 섹션에서 토글 입력이 일종의 종류임을 알 수 있습니다 그 자체로 놀고 있잖아, 그렇지? 직접적인 것은 없습니다 아이들이 없습니다 그래서 당신이해야 할 일은 우리가 말하는 것입니다

'이봐, 이 항목을 체크하면 다음 항목을 찾습니다 다음 값을가집니다 ' 예를 들어, '이봐,이게 체크되면 햄버거라는 수업을 찾은 다음 햄버거 고기라고 불리는 그 아이를 찾은 다음 다음을 적용하십시오 변환' 그래서이 플러스를 사용해야하는 이유는 본질적으로 이것은 그것의 실제 자손이 아니라 오히려 인접한 것입니다 그것에

그게 약간 혼란스러운 사건을 왜냐하면 나는 그것이 나를 위해 조금 혼란 스러웠다는 것을 알고 있기 때문이다 좋아요, 그래서 top은 0으로 설정 될 것이고 계속 쓰려고합니다 왜냐하면 나는 그것을 끝내고 나서 우리가 그것을 끝내면 얼마나 시원한지를 보여주고 싶다 실제로 애니메이션을 적용합니다 다음은 햄버거가 될 것입니다

하나는 고정 된 위치로 설정하려고합니다 Z 지수는 4가 될 것이므로, 우리가 설정 한 5보다 적습니다 위 너비가 100, 높이가 100으로, 배경색은 여기에 멋진 어두운 보라색이 될 것입니다 그렇게 될 것입니다 050620

Top은 음수 100이 될 것이므로 그렇게 될 것입니다 실제로 움직이는 부분 여기에 잠깐보실 수 있습니다 그래서 왼쪽 0, 오른쪽 0, 아래 0, 그래서 모든 것이 멋지고 가장자리에 가깝습니다 오버플로가 숨겨집니다

전환이 03 초로 전환되기를 바란다면 쉽게 편하게 쉬십시오 좋아, 그럼 래퍼를 할거야 그래서 햄버거 nav 및 햄버거 nav 래퍼 그것은 상대적인 위치가 될 것입니다 오버플로, 그래서 우리는 오버플로하려고합니다 – 우– 그리고 그것은 자동으로 설정됩니다

그리고 마지막으로 높이를 100으로 설정합니다 이제이 래퍼라는 이름을 어떻게 보는지, 나는 HTML에서 그렇게했는지 확인하십시오 이제 HTML로 돌아가서 래퍼를 다시 확인해 보겠습니다 그래, 그래서 나는 생각했다 나는 그 오타를 만드는 것을 기억했다

그럼 먼저 저장하고 다시 저장하겠습니다 스타일을 알려주고 이것을 저장하고 새로 고침하여 모양을 확인하십시오 처럼 좋아, 그렇게 유망 해 이 버튼을 클릭하면 애니메이션이 만들어집니다

멋지다 그래서 움직이게한다 그렇게해야합니다 그래서 우리는 오타가있는 것처럼 보입니다 다시 가자

우리가 한, butum, '바닥을 보자 우리는 거기에 갈 새로 고침해라 붐 – X 종류의 슬라이드를 볼 수 있습니다 쿨, 맞지? 여기 JavaScript는 없습니다

모든 CSS 이제 분명히 이것은 옳지 않습니다 그래서 우리는 그것을 고칠 필요가 있습니다 그리고 우리는 가고 있습니다 다음 스타일로 그렇게하십시오

래퍼 후에 실제로 항목을 대상으로하고 싶습니다 햄버거 항목이 될거야 그리고 그게 40 위를 넘을거야 색깔은이 하얀색이 될거야 불투명도가 0이되어보고 싶지 않습니다

텍스트 장식 없음, 글꼴 크기 46, 여기에 전환을 추가합니다 – whoops- 전환과 그것도 위의 것과 같을 것입니다 따라서 03 초가 걸립니다 하나는 쉬울 것이고 0 초가 될 것입니다

그래서 이것은 유혹과 같은 것입니다 그래서 핑크색으로 바뀌면 일관성이있게 될 것입니다 프로젝트의 나머지 링크에 연결합니다 그리고 내가이 대회를 잘 사용하고 싶은 이유는 내가하지 않았던 것처럼 느껴져 네

그래서 나는 여기에 또 다른 오타를 만들었습니다 여기 CSS로 돌아와서 내가 할 일은 다음과 같습니다 햄버거 네비게이션 아이템을 할거야, 첫번째 아이를 목표로해라 그래서 첫 번째 아이는 다음과 같은 것을 원합니다 그래서 첫 번째 링크에서 사실 여백 상단이 0이되기를 원합니다

그래서 내가 위쪽에 여백을 가졌다면 모든 것을 밀어 낼 것입니다 그래서 마진 상단에 추가하여 첫 번째 하나는 0입니다 그 간격은 단지 상단과 하단 사이의 링크 알았어 여기 스타일이 두 개 더 많아

햄버거가 좀 더 많을 거라고 했잖아 뒤얽힌 그러면 래퍼 탐색을 수행하고 불투명도 1이 될 것입니다 그리고 마지막 수업이 있습니다 그래서 햄버거 탐색 랩퍼입니다

nav로 설정 한 다음 마우스를 올려 놓으면 불투명도는 1이됩니다 색상을 그 분홍색 값으로 설정하기를 원합니다 좋아, 우리가 간다 그러니 이걸 저장하고 새로 고침 해 봅시다 좋아, 모든게 좋아 보인다

그리고 이것을 클릭하십시오 오, 아니, 그래서 여기에 뭔가가있는 것처럼 보입니다 어떻게 든 나는 이것에 대한 스타일을 놓쳤다 그래서 내가 놓친 것을 보자 항목을 탐색하고 항목을 탐색하면 – 그렇지 않은 것처럼 보입니다

실제로 nav 항목에 대한 스타일을 추가하려면, 그냥 a에 추가했습니다 여기 저기 가서 햄버거 탐색 항목을 작성하겠습니다 그래서 나는 그것이 마지막 것이 아니라고 거짓말을했습니다 그래서 이것은 될 것입니다 장치의 높이는 100입니다

그러면 디스플레이가 구부러지며 플렉스 방향은 기둥이 될거야 따라서 왼쪽에서 오른쪽으로 움직이는 대신에 상하 간격이 될 것입니다 우리는 그것들을 정렬 된 항목 중심에 놓기를 원합니다 그리고 정당화 된 컨텐츠가 중심이 될 것입니다 모든 것이 집중 될거야

좋아, 그럼 이제이 붐을 되살려 보자 우리가 간다, 이제 우리는 모든 것이 멋지고 중심에 있음을 볼 수 있으며, 일단 우리가 떠올랐다면 그 위에는 핑크색으로 부드럽게 전환 될 것입니다 그리고 그것은 HTML까지 우리가하고 싶은 모든 것입니다 CSS를 사용하고 있지만, 할일이 한 가지 더 있으며 videojs 코드를 작성해야합니다

재생 버튼을 클릭하고 실제로 동영상을 재생할 수 있습니다 연주를 시작하십시오 그래서 우리는 다음 비디오에서 그렇게 할 것입니다 이 비디오에서는이 버튼을 실제로 대화 형으로 만드는 데 집중하려고합니다 그것을 클릭하면이 비디오의 음소거가 해제되고 처음부터 끝까지 재생됩니다

그리고이를 위해 우리는 자바 스크립트를 사용할 것입니다 Wistia의 플레이어 API 이제 완전한 초보자에게는 무서울 것 같은데, 그러나 그것은 정말로 간단합니다 그리고 우리가하려는 일을 실제로 시작하는 것은 JavaScript 플레이어 API에 대한 Wistia 설명서를 참조하십시오 여기에서 볼 수있는 바로 그 시작부터 window

WQ를 사용하여 비디오 핸들을 얻으십시오 그것이하는 일에 대한 정보, 그러나 본질적으로 그것이 할 일은 이 비디오가 비디오 ID를 검색하여 존재하는지, 그리고 비디오 ID가 예를 들어 Wistia에서 몇 가지 메소드를 전달할 준비가되었습니다 재생 및 음소거 해제 방법 그래서 우리가 여기서 할 수있는 것은이 코드를 복사하는 것입니다 설명서를 작성하고 video

js 파일에 붙여 넣으면 변경해야합니다 이 ID는 우리가 비디오에서 찾고있는 ID로, 그리고 그것은 살려고합니다 Wistia에서 URL의 실제 동영상 페이지에 여기 URL에 마지막 비트가 될 것입니다 코드에 코드를 복사 한 다음 붙여 넣으십시오 에서

그럼 저것을 저장하고 여기서 다시 코스로 들어가 보자 실제 HTML 페이지를 새로 고칩니다 그리고 우리가 조사하기 위해 들어가면, 우리는 '나는 비디오에 대한 핸들을 가지고있다'는 것을보고 있어야한다 이것이 성공했다면 콘솔로 우리는 거기에 갈

그래서 우리는 그 인쇄물을 보았습니다 그리고 우리가 이것을 확장한다면 우리는 다른 정보들을 볼 수 있습니다 이 동영상에서 얻은 정보는 API에서 전달되었습니다 그래서 우리가해야 할 일은 '이봐, 언제 누군가이 버튼을 클릭하면 실제로 재생되고 음소거가 해제됩니다 ' 그리고 그것은 정말로 간단합니다

그래서 우리가해야 할 일은 여기에 아주 간단한 jQuery를 작성하는 것입니다 나는 이것을 할 것이므로이 jQuery를 복사하여 붙여 넣을 것이다 이리 그리고이 일은 '이봐, 나는 뭔가를 찾고있다 재생 ID가있는 페이지입니다

' 따라서 HTML로 돌아 가면 여기서 볼 수 있습니다 여기에 우리는 놀이의 신분증을 가진이 수업을 가지고 있습니다 그래서, '어이, 뭔가 일이 생길 때처럼 보이네 이게 내가 원하는거야 그리고 내가 찾고 있는게 뭐지? 클릭 이벤트를 찾고 있는데 그 일이 발생하면 우리가 할 일은 동영상 재생은 API에서 직접 제공됩니다

또한 무음 상태의 비디오를 사용하고 있습니다 다시 문서로 돌아 가면 음소거를 찾아 보겠습니다 여기에 여러 가지 다른 방법이 있고 Wistia가 어떻게 방법을 설명하는지 볼 수 있습니다 그 (것)들을 사용하고 또한 무엇을 하는가 그래서 여기에서 몇 가지 다른 일을하고 싶다면 참고하도록하십시오

그냥 재생 또는 음소거하는 대신 어쩌면 당신은 그것이 전체 화면이나 다른 어떤 방법으로 가길 원할 것입니다 사용할 수 있습니다 우리가 사용하는 두 가지는 재생하고 음소거를 해제합니다 좋아, 이제 가서 이걸 저장해 보자

우리가 이것을 클릭하면 우리가 재생할 수있게되면 우리는 이것을 재생할 수 있어야합니다 비디오 및 또한 그것을 듣고 그러니 계속 클릭하십시오 그리고 우리가 간다, 완벽하게 작동합니다 일단 우리가이 위에 마우스를 가져 가면 컨트롤이 나타납니다

동영상을 스크럽하고, 소리를 끌 수 있고, 음소거를 해제 할 수 있습니다 우리가 원한다면 풀 스크린을 만들어라 그래서 거기에 간다 몇 줄의 코드를 사용하여 Wistia의 자바 스크립트 플레이어 API를 사용하면 해당 버튼을 대화 형으로 만들 수 있습니다 우리 프로젝트에서 비디오를 재생하십시오

다음 동영상에서는 실제로 이 프로젝트를 웹에 게시하고 더 복잡하게 들릴 수도 있습니다 그게 실제로는 아니지만 실제로는 몇 분 정도 걸릴 것입니다 그렇게 말하면 다음 비디오에서 보게 될 것입니다 이 비디오에서는 사이트를 웹에 게시하는 데 집중할 예정이므로 친구, 가족 및 엄마와 공유 할 수 있으므로 자녀가 자신을 당신이 자랑 스럽다 이제는 실제보다 더 복잡하게 들릴지도 모릅니다

Netlify와 함께 Netlify Drop을 사용하면, 글자 그대로 Netlify에 폴더를 드롭하면 사이트가 말 그대로 10 초 미만입니다 이제 Netlify I로 가서 그 다음에 내려 봅시다 그래서 저는 Google에 가서 BitBalloon을 볼 수 있습니다 Netlify가 첫 번째 링크입니다 그러니 계속해서 클릭하십시오

Netlify에 문의하십시오 이제 이미 Netlify에 로그인 했으므로 당신을 위해 조금 다릅니다 가입을 요청할 것이지만 일단 이 페이지를 열면 문자 그대로 코드가있는 곳으로 향합니다 그러면 우리 데스크톱에있게 될 것입니다 이것을 선택하면 프로젝트 파일이 선택되고, 드래그해서 끌어다 놓으십시오

문자 그대로 이것을 만들 것입니다 당신은 그것을 보았습니다! 나는 심지어 나의 문장을 끝낼조차 수 없었다 그리고 그것은 벌써 있었다 완료된 건물 우리가 그 빵을 클릭하면 여기에서 볼 수 있습니다 우리 사이트가 있습니다

문자 그대로 웹에 살고 있습니다 이것은 누구에게나 보낼 수있는 링크입니다 HTTPS가 이미 설정되었습니다 또 다른 멋진 기능입니다 Netlify의 이점

그리고 이것을 확장 시켜서 그것은 멋지고 반응이 좋을 것입니다 그리고 여러분도 알다시피, 그것은 두려운 것처럼 보입니다 이게 정말 멋지게 보자 그렇습니다 그리고 너 거기 간다

누가이 코스에서 가장 짧은 비디오를 얻었 을까? 그것은 웹에 살고 있습니까? 그리고 그것이 말했던 것, 그것은 우리가 포함하고 싶었던 모든 것입니다 이 과정에서 Sketch에서 기본 방문 페이지를 디자인하는 방법을 배웠고 실제로 그 디자인을 가져 와서 HTML CSS에 적용한 다음 라이브로 가져와야합니다 인터넷 그리고 저는 여러분이 이곳에서 많은 것을 배웠 으면합니다

이제 저는 깊은 기초 지식을 많이 다루지 않았 음을 압니다 HTML 또는 CSS 또는 자바 스크립트를 사용하지만 실제로 유용하게 사용할 수있는 링크가 있어야합니다 내가 배웠을 때 유용하다고 여겼던 과정들 그렇게 말하면, 저는 Skillthrive의 Hunter이고 다음에 당신을 만날 것입니다 비디오