Photoshop Responsive Web Design Tutorial – Understanding Mobile & Tablet Design 7/48

안녕, 유튜브! 내 이름은 댄이고 이것은 무료 동영상 중 하나입니다 그것은 내가 가르치는 코스의 일부입니다

그래서 당신이 좋아하면 설명에 링크가 있습니다 그러나 지금은 우리가 가진 것을 무료로 보자 적응 형 웹 디자인은 웹을 변경하는 방법입니다 브라우저의 크기에 따라 여기 당신은 Smashing Magazine을보고 있습니다

Smashing Magazine은 자주 읽는 웹 사이트입니다 나는 그들이 다른 페이지를 재 설계하려고 노력한 것을 좋아한다 브라우저의 크기에 따라 다릅니다 이제는 iMac과 같이 매우 큰 화면을 보게 될 것입니다 또는 매우 높은 정의를 지닌 매우 큰 모니터 인 4K 모니터입니다

왼쪽에는 메뉴와 탐색 하위 메뉴가 있으며, 주요 내용 및 광고, 하지만 정상적인 데스크톱에서 볼 때 줄어들면 당신은 그들이이 탐색 바를 바꾸는 것을 볼 것입니다, 주요 내용 및 광고 그러나 작아지면 타블렛을 보자 조금 변경 : 광고를 제거, 탐색 모음이 작아집니다 모바일 용 뷰로 축소하면 다시 변경됩니다 Photoshop에서 디자인 할 때 고려해야 할 사항은 무엇입니까? 그것은 정적 매체이며, 확장 가능하거나 신축 적이 지 않다는 것입니다

당신이 웹 페이지에서 얻는 것과 같습니다 Photoshop에서 프로토 타입을 요약 할 때 디자이너가 수행하는 작업 다른 시각을 디자인하는 것입니다 그래서 개발자에게 넘겨줌으로써 모바일로 바뀌면 사이트가하는 일을 알고, 메뉴가 태블릿보기에있을 때 어떤 일이 발생합니까? 모든 질문은 스케치에서 대답해야합니다 우리는 많은 의심들이오고가는 것을 원하지 않습니다 개발자와 사용자간에 문제 해결을 시도합니다

개념화 단계에서 해결되었을 것입니다 그리고 이것은 적응 형 웹 디자인에 대한 빠른 소개였습니다 공유하고 싶기 때문에이 무료 동영상을 만들었습니다 비록 내가 당신이 풀코스 과정을 계속하기를 원한다면, 50 개 이상의 동영상이 있습니다 설명에 할인 코드가 있습니다

제발, "좋아"하고 구독하십시오 나중에 YouTube에서 멋진 사람들과 만나십시오 나는 내 손으로 작별 인사를하고 있지만, 너는 그것을 보지 못했다 그렇지?

Responsive web design | css media query | html viewport

이것은 html 웹 페이지입니다 응답하는 이제 내가 어떻게 반응하는지 보여 줄거야

이렇게 더 작은 장치에서 완벽하게 작동합니다 화면 너비 변경시 atomaticalley 변경 요소의 스타일링 이제 스타일 시트에서 미디어 쿼리 코드를 삭제했습니다 이제 기본 스타일로 표시되는 웹 페이지 더 작은 장치에서는 읽을 수 없다 더 작고 더 큰 장치에서 읽을 수 있도록하기 위해 미디어 쿼리를 사용합니다 이제는 휴대 전화 및 안드로이드 기기와 같은 기기에서 읽을 수 있도록 해 드리겠습니다

이것은 태블릿의 화면 크기입니다 ibrowser inspector에서 view-port를 확인할 수도 있습니다 (ctrl + shift + I) 이것은 모바일 화면 너비입니다 이제 코드로 되돌아갑니다 이것은 스타일 시트이다

내가 사용한 수업에 대한 설명은 이전 비디오 링크를 확인하십시오 이제는 미디어 쿼리를 사용하여 더 작은 장치에서 웹 페이지를 읽을 수있게했습니다 미디어 쿼리는 @media 화면으로 시작합니다 최대 또는 최소 미디어 장치 너비 또는 높이 사용을 피하십시오; 값 다음에 표시하다 중괄호 사용 이 중괄호 안의 요소를 정의하기 시작합니다 우선 부모의 모든 너비 설정 집단 내지 100 %; 그런 다음 하위 요소의 스타일을 변경합니다 이제는 평소와 같이 요소를 정의하십시오

지금 이것은 읽을 수있다 사이드 바, 메인 컨텐츠 및 오른쪽 사이드 바 모두 100 % 너비로 설정됩니다 이제 링크, 로고 및 사이트 제목을 정의 할 수 있습니다 헤더 부분에 4 개의 div 엘리먼트가있다 그래서 그것을 읽기가 어렵게 만드는 것은 어렵다

링크 엘리먼트가 바닥에 고정된다

5 MIN TUTORIAL – Responsive Web Design – SIMPLE EASY

이 비디오에서 배우게 될 HTML을 사용하여 반응 형 웹 페이지를 만드는 법 및 CSS 모바일 웹 사이트와 반응 형 웹 사이트이며 모바일 버전을 사용하지 않는 이유는 무엇입니까? 이 비디오를 따라 가기 위해서는 html과 css에 대한 기본적인 이해가 있어야합니다 나는 모바일 장치의 주제를 들여다 볼 때 정말 혼란스러워했다

웹 디자인 및 모바일 사이트 이 비디오는 시간과 번거 로움을 덜어줍니다 반응 형 웹 사이트 대 모바일 버전 반응 형 웹 사이트는 크기를 조정하는 하나의 웹 사이트입니다 사용자 기기의 화면에 맞게 모바일 버전이 일반적으로 m- 점으로 시작하는 다른 웹 사이트 인 반면 m 도트 버전을 사용하지 않는 이유는 무엇입니까? 반응이 빠른 웹 디자인은 별도의 작업이 필요하지 않습니다 웹 사이트 하나의 웹 사이트 만 유지하면됩니다

모든 기기에서 잘 어울립니다 mdot 웹 사이트는 공유 할 때 오류를 만들 수 있습니다 URL은 데스크톱 및 모바일 장치에서 열립니다 오류가 발생하면 검색 엔진이 순위를 낮추어 사이트를 처벌합니다

그리고 그 목록은 계속됩니다 RESIZABLE WEB DESIGN을위한 HTML과 CSS 아래 링크에서 운동 파일을 다운로드 할 수 있습니다 웹 사이트를 구축하는 좋은 방법은 html 태그를 유동적으로 만드는 것입니다 그것은 귀하의 CSS에서 비율을 사용하여 매우 쉽게 할 수 있습니다 이 예에서는 머리, 메뉴, 내용 본문 및 바닥 글을 가운데에 배치하고 있습니다

웹 브라우저 요소에 최소 높이와 가장자리 여백을 지정하기 만하면됩니다 최소 높이를 사용하면 필요에 따라 요소를 늘릴 수 있습니다 왼쪽과 오른쪽 여백은 모든 화면 해상도에 대한 비율을 유지하기 위해 백분율로 표시됩니다 그리고 마진 – 상단 및 하단에 대해 동일한

이 숫자로 당신의 필요에 맞게 놀 수 있습니다 그래서 여기에 우리는 반응하는 웹 사이트를 가지고 있습니다 !!! 그러나이 웹 사이트를 휴대 기기에서 볼 때 웹 사이트는 전체 해상도로 표시됩니다 탐색하려면 확대 / 축소해야합니다 여기 뷰포트 메타 태그가 작동하는 곳이 있습니다 뷰포트 메타 태그는 문제에 대한 Apple의 해결책이었으며 신속하게 채택되었습니다 다른 플랫폼 그러나 W3C는 결코 앞으로 나아갈 수 없었다 따라서 CSS에서 비슷한 뷰포트 규칙을 정의 할 것입니다

인터넷 익스플로러를위한 또 하나의 해결책 너비는 정상보기 및 가로보기에서 장치로 사이트를 조정합니다 그리고 줌 또는 초기 1은 줌을 의미하지 않습니다 모든 단일 장치에 사용할 전체 뷰포트 속성이 있습니다 그러나 쉽게하기 위해, 우리는 단지 모두를 맞추기 위해 약간을 사용합니다

나는 당신에게 참고로 링크를 남겨주세요 모바일 장치에서 웹 페이지를 볼 때 우리가 원하는 방식으로 보입니다 이 비디오에서는 다음을 배웠습니다 크기 조정이 가능한 웹 디자인과 모바일 웹 디자인 간의 차이점은 무엇입니까? 크기를 조정할 수있는 콘텐츠 용 HTML 및 CSS 설정 방법 올바른 디스플레이를 위해 메타 태그 및 CSS에서 뷰포트 사용 모든 장치 Internet Explorer 용 픽스입니다 다음 비디오에서는 반응 형 탐색 메뉴를 작성하는 방법, 반응 형 이미지 및 비디오, 반응 형 배경 및 요소를 숨기는 방법

이 비디오가 마음에 드십니까? 내 채널을 구독하고 공유하십시오!

Deconstructing a Flexbox Layout Quiz – Responsive Web Design Fundamentals

여기 또 다른 도전이 있습니다 표시되는 레이아웃은 Flexbox를 사용하여 만듭니다

화면에 표시되는 모든 다른 색상 요소의 경우, 프레젠테이션 작성 이 레이아웃을 만드는 데 필요한 요소를 정렬합니다 나는 당신에게 첫 번째 요소를 보여줄 것이다 밝은 녹색 상자를 가린다 위는 뷰 윈도우의 전체 너비이므로 100 % 보이게됩니다 이것은 일반적인 것으로 보일 수 있습니다

탐색 막대는 페이지 상단에 나타납니다 그래서 저는 그것을 0으로 분류 할 것입니다 이제 계속하고 나머지는 채워야합니다

MAKING A HTML Responsive Web Design

안녕하세요, 오늘 저는 HTML 반응 형 웹 디자인을 만드는 법을 보여 드릴 것입니다 그것들처럼 이제 알겠습니다

함께 화면을 설정하고 싶습니다 HTML 레이아웃 요소 웹 사이트는 종종 잡지 나 신문과 같이 여러 열에 내용을 표시합니다 HTML5는 웹 페이지의 다른 부분을 정의하는 새로운 의미 요소를 제공합니다 header 문서 또는 섹션의 헤더를 정의합니다 nav 탐색 링크를위한 컨테이너를 정의합니다

섹션은 문서의 섹션에 대한 정의입니다 기사는이다 독립적 인 독립 기사를 정의한다 당신은 저것 같이 절을 둘 수있는 장소이다 그것들처럼 옆으로 콘텐츠를 (사이드 바처럼) 바닥 글 문서 또는 섹션에 대한 바닥 글을 정의합니다 웹 사이트를 열 때 텍스트를 볼 수 있습니다 남자가 코딩을 시작하자 먼저 파일을 열고 색인 이름을 지정합니다

죄송합니다 먼저 마우스 왼쪽 버튼을 클릭하고 새 문서와 텍스트 문서를 선택하십시오 이름을 indexhtml로 지정하십시오 건너 뛰고 예 나는 숭고한 텍스트를 열고있다

어떤 프로그램 으로든 코드를 열 수 있습니다 당신의 스크립트를 선택하십시오 그런 다음 스크립팅을 시작하십시오 너는 너의 웹 사이트를 어떤 이름으로 지을 수있다 나는 내 웹 사이트의 이름을 지을 것이다 몸집이 좁은 공간을 만든다

나는 평신도를 확대 할 것이다 시작하자 브라켓을 만든다 그래서 몫을 만들고 내 채널은 비디오 제작을 계속합니다 다음 비디오에서 그렇게 끝내라

Responsive Web Design in Sketch App: Auto Layout & Flexbox Plugin

안녕하세요, 저는 Skillthrive의 Hunter입니다이 자습서에서는 와 같은 반응이 빠른 카드 레이아웃을 만드는 스케치의 자동 레이아웃 플러그인 이 하나

시작하기 전에 Anima를 다운로드하여 설치해야합니다 스케치 설명에 링크가 있습니다 그러면 다운로드 할 수있는 페이지로 이동하게됩니다 또한 원하는 경우 오늘의 과정에서 사용하고있는 Sketch 파일을 다운로드하고, Skillthrive

com에서 무료 회원이되어 즉시 액세스 할 수 있습니다 이 코스뿐만 아니라 현재 진행중인 모든 코스 파일 우리 사이트 설명에 참여할 수있는 링크가 있습니다 또한, 우리가 도착하기 전에 시작,이 실제 튜토리얼의 의도는 자동 레이아웃의 기초를 배우고 모든 것을 압도하지 마십시오 그것이 할 수있는 일

따라서 핀 고정 방법, 너비 설정 방법 및 누적 된 그룹에 대한 소개 그래서 이것은 확실히 나를 데려간 플러그인입니다 잠시 동안 실제로 편안함을 느낄 수 있으므로 배우는 것을 가져 가십시오 오늘부터 디자인에 적용하고 일부 설정을 사용하며 질문이 있으시면 언제든지 아래 의견에 물어보십시오 그래서 그걸로 Sketch에서 시작하여 오늘의 튜토리얼을 시작하겠습니다 그래서 당신은 Sketch에서이 단순한 카드 디자인을 사용하고 있음을 알 수 있습니다

이제이 사람이야 실제로 디자인에서 원하는 가장 작은 카드로 디자인되었습니다 소형 모바일 화면 용입니다 자, 저는 항상 가장 작은 것으로 시작하고 싶습니다 먼저 카드 디자인

그런 식으로 똑똑한 사람을 만들 수 있습니다 나는 작은 카드로 문제가 생기는 것에 대해 걱정할 필요가 없다 디자인 그렇게 말하면서이 카드가 어떻게 사용되었는지 보도록하겠습니다 실제로 지어졌다

따라서이 그룹으로 이동하여이를 확장하면 나는이 사건에 관한 정보 인 '정보 그룹'을 가지고있다 그리고 나서 나는 내가 이미지라는 이름의이 모양 레이어가 있습니다 이제 채우기 위해 와서 당신은 내가 이것을 이미지로 채우고 이것을 설정한다는 것을 보게 될 것입니다 옵션을 여기에 기입하십시오 그리고 이것은이 이미지를 사용하여 모양의 크기에 따라 멋지게 표시합니다

이것은 정말로 될 것입니다 스케치를 사용하기 때문에 실제 크기를 확장하고 크기를 조정할 때 중요합니다 이 이미지가 뒤에 있는지 확인하려면이 설정을 다시 참조하십시오 멋지게 표시됩니다 이제 내가 한 또 다른 사항은 여기에 채우기를 추가하는 것입니다

정말 간단한 선형 그라디언트 그리고 이것을 켜고 끄면 모든 것을 볼 수 있습니다 이 작업은 실제로 텍스트가 우리가 여기서 사용하고있는 어떤 이미지에서도 볼 수있을 것입니다 이제이 '정보 그룹'으로 이동하여이를 확장하면 우리는 두 개의 텍스트 레이어를 사용한 다음 등급 그룹을 만들었습니다 5 개의 별 모양의 레이어를 그룹화하여 뷰어, 알다시피, 이벤트에 대해 어떤 등급이든 상관 없습니다

이제 내가 원하는 또 다른 것 이 텍스트 레이어에 관해서는 여기에 언급했는데, 나는 정렬과 'fixed'를 클릭하고 'fixed height'가 선택되지 않았는지 확인했습니다 지금 'auto'또는 'fixed height'가 때때로 'auto'에있을 때 내가 실제로 시도하려고 할 때 어떤 문제를 줄 것입니다 이 텍스트를 동적으로 확장하십시오 그러니 당신이 통과하고 가지고 있는지 확인하십시오 'fixed'로 설정 한 다음 'fixed height'및 'fixed width' 선택하지 않았다

자 이제 실제로 시작하는 방법에 대해 이야기하겠습니다 자동 레이아웃 플러그인을 사용하여이 스마트 카드를이 특정 카드 레이아웃에 추가하십시오 그래서 내가 집중할 첫 번째 일은 바로이 '정보'그룹핑입니다 이제 우리가 오면 아래로 우리는 우리가 왼쪽에서 10 픽셀을 가지고 있다는 것을 볼 수있는 선택권을 가지고있다 하단에서 10 픽셀

이제 나는 그 디자인을 원한다 매개 변수,이 이벤트 카드가 얼마나 큰 지 상관없이 수행 할 수 있습니다 그래서 우리는 할 수있는 것은이 계층을 선택하는 것입니다 우리는 Anima 플러그인으로 갈 수 있습니다 make 우리가 여기에있는 왼쪽 아이콘에 있는지 확인하십시오

이것은 실제 자동 레이아웃 설정입니다 그런 다음 우리는 이것을 확장 할 수 있고 여기에 올 수 있습니다 그리고이 버튼에 대해 말하면, "이봐 요, 왼쪽에서 10 픽셀을 가져온 다음 아래쪽에서 10 픽셀을가집니다 언제나 그렇습니다 "그런 식으로, 우리가 얼마나 큰 일을 하든지간에, 항상 언급 할 것입니다

여기서 설정 한 매개 변수로 돌아갑니다 이제 내가 할 일이 또 있습니다 여기에 너비가 설정되어 있으므로 픽셀 대신 설정해 보겠습니다 85 %로 설정하십시오 그렇게하면 그것이 무엇이든간에 그 크기를 나타낼 것입니다

이벤트 카드가 무엇이든간에 그리고해야 할 또 다른 일은 내가 여기에 최소 너비가 290로 설정되어 있습니다 자, 제가 이전에 말씀 드렸듯이, 이것은 가장 작습니다 내 카드를 원한다는 것을 290으로 설정하면 실제로이 이벤트 카드를 300 픽셀보다 작게 설정하는 이유는이 이벤트 카드가 이제 왜 300 픽셀입니까? 글쎄, 우리는 10 픽셀 왼쪽에 이것과 10 + 290은 300이며 카드 300의 전체 폭을 나타냅니다 우리가 실제로 이것에 설정하려고하는 유일한 설정들 '정보'레이어이지만, 다음에 우리가 실제로하려고하는 것은 뭔가 – 스택이라고하는 것을 적용합니다 자, 스택에 익숙하지 않다면, 본질적으로 스택이란 무엇인가? 매개 변수를 해당 그룹 내의 하위 계층에 추가합니다

따라서이 정보를 확장하면 등급 '을 선택하면 여기에 네 개의 레이어가 있고 세 개의 텍스트 레이어가있는 것을 볼 수 있습니다 이 스타 등급 분류 스택을 적용하면 어떻게 될까요? 이 정보가이 4 개의 레이어에 적용될 것입니다 계속 가라 이 등급 그룹의 별표 레이어 인 여기의 레이어가 이들이 아이이기 때문에 적용된 속성을 가지지 않을 것입니다

이 등급 분류의 레이어 그래서 단지 당신이 빌드하기 시작할 때 여기에서 명심해야 할 중요한 것 스택을 만들고 디자인이 반응 적인지 확인하십시오 그럼 그냥 가자 앞서서 이것을 무너 뜨리고 '정보 및 평가'로 돌아와서 여기에 3 개의 점이있는 폴더 모양의 아이콘으로 이동합니다 누적 된 그룹을 만들 수 있습니다 여기를 클릭하겠습니다

이 레이어가 서로 위에 있기 때문에 이것이 수직이라는 것을 명심하십시오 할거다 그것들이 왼쪽으로 정렬되고 5 픽셀의 간격을 가지는지 확인하십시오 그래서 지금 우리가 얼마나 크게 만들었 든 상관없이 항상 이것들을 다시 참조 할 것입니다 이 '정보 및 등급'레이아웃의 요소에 대한 설정 이제 우리가 할 수있는 일 이 '등급'그룹으로 돌아 왔습니다 계속해 보도록하겠습니다

하나 뿐이지 만,이 요소는 내부 요소가 여기에 친척이 있거나 서로 옆에있어 가로로 상대적인 그래서 우리는 그냥 가서 레이어의 맨 위에 놓고 여기서 간격은 5로 설정됩니다 그리고 실제로, 제가 이것을 클릭하기 전에, 95와 15로 너비와 높이를 설정해 봅시다 그렇게하면, 알다시피,이 그룹은 결코 그것보다 작아지지 않을 것입니다 그리고 좋은 측정을 위해, 그냥 펼쳐서이 모든 스타 레이어를 선택하고 별이 결코 가지 않거나 더 크거나 작아지지 않도록 너비와 높이를 여기에 넣으십시오

15 x 15 픽셀보다 큽니다 그렇게 말하면 우리는 계속 나아가고 붕괴 될 수 있습니다 이것들이 있습니다 우리가 들어 와서이 카드를 펼치면 그냥 축소 시키십시오 하자 이 크기를 더 크게 만들면 텍스트가 업데이트되지 않았 음을 알 수 있습니다

그런 업데이트가있을 때까지 이것을 클릭하십시오 그럼 우리가 여기를 확대하면 알 수 있습니다 왼쪽에서 10 픽셀, 10 픽셀입니다 아래쪽, 그리고이 내부의 모든 그룹은 서로 5 픽셀이 될 것입니다 따라서 크기를 조정해야하는 경우 많은 시간을 절약 할 수 있습니다

그런 식으로 위치를 바꿀 필요가 없으며 그런 것에 대해 걱정할 필요가 없습니다 그래서 이것은 매우 편리합니다 그리고 이것이 여러분이 장기적으로 얼마나 유용하다는 것을 알기를 바랍니다 자 이제 가서 카드 Z로 돌아가 명령 -Z를 해봅시다 우리가 할 수있는 일은이 '이벤트 카드'를 선택하는 것입니다

타임스 이제 우리는 서로의 위에 3 개를 쌓아 놓았습니다 계속해서이 레이어들을 붕괴시키고, 그것을 선택하고,이 스택으로 돌아와서, 수평을 선택합시다 그래서 우리는 서로를 옆으로, 왼쪽으로 그리고 권리 우리는 이렇게 말할 수 있습니다

"이봐, 이걸 맨 위에 놓고 여기에 20 픽셀 간격을 두십시오 "이제는이 모든 것들이 각각 20 픽셀 씩 떨어져 있습니다 그런 다음이 그룹에 와서 이름을 지정하면됩니다 'row-events'를 선택하면 여기에서 몇 번 명령을 내리고이를 선택하고 다른 스택 이번에는 수직으로

우리는 이것들을 왼쪽 정렬 할 수 있습니다 그냥 20 픽셀을하고, 지금 우리는이 9 개의 카드를이 멋진 레이아웃으로 가지고 있습니다 그리고 그냥 'column-events'로 바꾸십시오 그리고 지금 우리가 들어 와서 실제로 크기를 조정하면이 모든 것이 크기에 따라 크기가 조정됩니다 여기에 설정 한 설정 중 그래서 당신은 멋지게 보입니다

그렇게하면 우리가 신속하게 설계하고 크기를 조정할 수 있습니다 필요하다 자 이제 좀 더 똑똑해 지도록하겠습니다 이 층들의 따라서 가장 먼저해야 할 일은 대도시, 그래서 여기에 아트 보드를 만들어 보겠습니다 그리고 앞으로 나아가 자

이것을 1400이나 1440과 같은 것으로 설정하면됩니다 여기에서 우리가하고 싶은 일들에 대해서 이야기하십시오 예를 들어 데스크톱 용이며 데스크톱 HD이기 때문에 우리가 할 수있는 일은 "이봐, 우리는 이 열은 고정 폭이 될 것입니다 "그래서 우리는 여기에 와서 여기를 클릭하여 고정 폭을 설정하면 픽셀 차원을 설정할 수 있습니다 하자 1,200이므로 1,200으로 크기가 조정됩니다

그런 다음 우리는 각 행에 와서 말할 수 있습니다 "이봐 요, 여기 폭은 1200 이길 원합니다 그래서 열 그룹의 전체 범위를 채울 것입니다 "그래서 그것은 왜 멋진가? 들어 와서 실제로 크기를 조정할 수 있다는 것입니다 행에있는 것들도 동적으로 크기를 조정할 것입니다

자, 예를 들어이 '이벤트 카드'를 클릭 해 보겠습니다 그냥 좀 더 크게 만드십시오 오른쪽의 크기가 조정 된 것을 볼 수 있습니다 카드를 삭제하면 카드를 삭제할 수 있습니다 뿐만 아니라 크기를 조정하려고합니다

이제 우리는 이것을 거쳐 만들어야합니다 그들이 업데이트하는지 확인하십시오 그러나 이것이 정말 멋진 방법임을 알 수 있습니다 Sketch에서 유연한 디자인을 만들 수 있습니다 그럼 그냥 계속 지키자

지금이 곳 여기서 언급하고 싶은 또 하나의 점은 행을 가져 와서 그것을 만드는 방법, 수평 대신에 앞으로 나아갈 수 있습니다 그들을 수직으로 쌓아 라 따라서 모바일 용으로 설계하려는 경우 그렇게 빨리 할 수 ​​있습니다 그러니 그냥 'A'를 클릭하고 새로운 여기에 대위원

이 드롭 다운의 경우, 'Apple 기기 '를 선택하고 여기에'iPhone 8 plus '를 설정하십시오 그러면 우리가 할 수있는 일은 이 그룹 중 하나에 여기에 오십시오, 여기에서 이것을 해봅시다 Command-C, 우리는 할 수있다 여기에 iPhone 그룹으로 붙여 넣기 만하면됩니다 "이봐, 수직으로하지 마

" 그리고 나서 우리는 이것을 무언가로 재조정 할 수 있습니다 우리의 최소 300 명과 같습니다 그래서 여기서 일어나는 일은 언급 한 너비를 변경하십시오, 그래서 진행하고 실제로 이것을 unclick, 이제 우리는 300으로 크기를 조정할 수 있습니다 그리고 나서 우리는 계속 진행할 수 있습니다 이것을 실제 대지로 옮기십시오

우리는 거기에 갈 이제 우리는 이 대지 크기를 확장 한 다음이 요소가 업데이트되는지 확인하고, 이제 몇 번의 클릭만으로이 멋진 모바일 레이아웃을 얻을 수 있습니다

Jak stworzyć stronę w Responsive Web Design? (PSD to HTML)

좋아, 그녀가 16시에 고장났다 내 인생에서 유튜브에 두 번째 방송이 될거야, 나와 함께하시기 바랍니다 오늘 말했듯이, 나는 Responsive Web Design 원리를 사용하여 웹 사이트를 인코딩하려고합니다

글쎄, 나는 그래픽 디자이너로부터 그래픽 디자인 프로젝트를 얻었고, 모바일 용 버전이 있고 데스크톱 버전도 있습니다 사실, 더 작은 장치에서는이 그래픽 버전이 표시되어야합니다 반면에 더 크고 높은 것들 -이 하나 그러나이 프로젝트를 직접 구현하기 전에, 나는 Responsive Web Design이 무엇인지, Mobile First가 무엇인지 등을 간략하게 설명하고자한다 나는이 간단한 예제를 사용할 것이다 음,보세요 : 여기에 간단한 페이지가 있습니다

여기 사진과이 사진에 대한 설명이 있습니다 그것은 우리에게 흥미로운 모든 것입니다 See – 우리가 지금까지 페이지를 써야한다면, 5 년 또는 그 이상 과거로 이동 하자고합시다 여기에 글을 써 보자 background : 빨강 전체 페이지의 배경이 자동으로 빨간색으로 변경되고, 그러나 만약 우리가 이전에 준비했던 것을 가지고 있지 않다면 모든 페이지 해상도에서 배경이 빨간색이됩니다 보기 : 스크롤, 되감기, 되감기, 되감기 – 각 해상도마다 배경이 빨간색이고, 우리가 잘 알고 있듯이 – 우리는 다른 장치를 사용하며 셀, 태블릿, 휴대용 컴퓨터를 사용하여 웹 사이트를 표시합니다

또한 귀하의 페이지 또는 귀하가 방문한 페이지에서이 개념을 이미 알고있는 것 (잘 모르겠습니다) 종종 페이지는 표시되는 점에서 다르다 페이지를 실행하는 기기에 따라 세포에는 보통 최소한의 분수, 최소한의 분수, 애니메이션, 모든 것들이 하나 위에 배열되어 있습니다 데스크탑에는 더 많은 것들이 있지만 더 많은 박스와 더 많은 것들이 서로 옆에 있습니다 예를 들어 반응 형 페이지가 Smashing Magazine 인 경우 해당 아이콘 프런트 엔드의 주제에 대한 다양한 기사, 자습서, 비디오 등을 여기에서 찾을 수 있습니다 이 페이지에서 흥미로운 점은 디스플레이의 너비에 따라 달라지며, 이 페이지를 이동하면 창을 이동하고 너비를 더 작은 페이지로 변경합니다

그것은 움직이고있는 것들이 숨어 있고 어떤 것들은 그곳 어딘가에서 움직이고 있습니다 이 순간에 저는 이미 전화기에 표시되는 이러한 견해에 대해 이미 알고 있습니다 여기, 실제로, 메뉴는 그런 메뉴 버튼으로 대체되었습니다 이 버튼을 클릭하기 만하면 메뉴가 표시됩니다 이것은 기본적으로 반응 형 웹 디자인 개념으로 요약하면 몇 초 만에 표시되므로 각 장치에서 잘 보이는 웹 사이트를 제공하는 것입니다

따라서 모바일에이 페이지를 구현하고 싶다면 말이 안되겠습니까? 여기에 너무 많은 정보가 있습니다 그러나 셀 버전을 보면, 이 버전의 디자인은 앞서 보여준 것보다 훨씬 뛰어납니다 이것은 또한 반응 형 웹 디자인입니다 행동으로 보아라 마치 그것이 한 것처럼, 창 너비가 이렇게 생겼을 때, 이걸 보면 이렇게 생겼어

글쎄, @ media-queries가 사용되었고 그것이 무엇인지 아주 간단한 셀렉터를 썼다는 것을 알았습니다 내 사이트에 빨간색 배경을 설정했음을 의미합니다 그러나 나는 빨간색 배경을 모바일 장치에 표시된 페이지에만 표시하고 싶습니다 더 큰 디스플레이를 가진 사람들은 파란색이되게하십시오 그리고 나는 다음과 같이 쓴 것을 보아라

@media (최소 너비 : 640px) 즉 브라우저 창 크기가 640px 이상인 경우이 클립에서이 모든 스타일이 적용되고 효과가 표시됩니다 이제이 창을 옮기면 나는 너비를 바꾼다 그리고 점점 더 커지고있다 갑자기 위에, 우리 사이트는 파란색 배경을 가지고 있습니다 왜냐하면 제가 처음에 말했듯이, 나는 그런 미디어 쿼리를 만들었고 우리의 디스플레이의 너비가 640px보다 높을 때마다, 이 스타일은 여기에 적용되며 1도 더 중요합니다

예를 들어 여기에서 내가 노란색으로 변경하면 가장 최신의 스타일이됩니다 나는 뒤로 움직이고, 나는 더 작은 스크린에있다 – 빨간색이다 잘 또한 이미지에 이미지와 텍스트 측면에 볼 수, 등을 참조 – 그건 당신이 아마, 모든 위에 다른 하나 배치하는 데 사용되는 방법입니다 – 우리는 이것이 우리의 세포의보기임을 인식하자 그러나 바탕 화면에서이 텍스트가 어떻게 그림을 떠올리게하는지, 이러한 선택자 덕분에 가능합니다 즉, content와 함께 복용하고 있습니다

img float : left – 즉 왼쪽에서 떠 다니고, 데스크톱에서 우리의 겸손한 웹 사이트가 이렇게 보입니다 조금 더 나아 보입니다 이것은 디자인 등이없는 예일뿐입니다 그러나 이것은 더 높은 해상도를위한 버전 일 것입니다 우리가 무너지면 다시 모바일 장치 용 버전이 생깁니다

그래서 어떻게 일어 났는지 설명하고 싶었습니다 이러한 것들이이 사이트에 숨어 있으며 위치, 크기 등을 변경하고, 이 모든 것은 방금 미디어 쿼리에 의해 수행되었습니다 글쎄요, 어느 시점에서 "좋아요 너비가 X보다 크면이 메뉴를 여기에 보여주세요 더 낮 으면이 스타일이 적용될 것입니다

" 또한 모든 것은 이러한 미디어 쿼리를 잘 작성하는 방법 그리고 가능한 한 작은 코드를 사용하여 모든 것이 점차 나타나거나 감추어 지도록하십시오 그리고 오늘 나는 너를 위해 여기 이렇게 뭔가하려고 노력할 것이다 이 예제를 구현하고 싶습니다 그리고 이것은 그가 그래픽으로 저를 제공 한 간단한 장면입니다, 참조 : 나는 움직이고, 모든 것이 다른 것 아래에있다 어떻게 내가 최신 Photoshop에서 프로젝트를 열 었는지 그리고 이것은 열린 메뉴가있는 버전입니다

그리고 그것은 닫힌 버전이다 꽤 간단한 페이지이고 데스크탑 버전도 있습니다 데스크톱에서이 버전은 다음과 같이 보입니다 이 메뉴는 기본적으로 발견되었습니다 우리에게는 로고가 있습니다, 우리는 텍스트의 제목, 부제, 작성자에 대한 데이터 및 기사 자체의 텍스트가 두 개의 열로 나뉘며, 차례로, 여기에 우리는 부가 물, 부차적 인 내용을 가지고 있습니다

그리고 마침내 컬럼 시스템이 있습니다 그런데 헤드 라인과 가장 중요한 것 – 우리는 어떻게 그러한 웹 사이트를 구현하기 시작합니까? 글쎄, 우리는 두 가지 버전을 가지고 있으며 종종이 데스크탑에서 시작하려는 유혹이 있습니다 – 우리는 데스크톱에서 작업하고 대형 디스플레이가 장착 된 랩톱에서 작업하며, 그러나 모바일과 같은 개념이 먼저 있습니다 – 일반적으로, 무슨 일이 벌어지고 있습니까? 이를 단순화하기 위해 가장 작은 디스플레이를 염두에두고 모든 페이지를 구현하기 시작하면, 우리 웹 사이트가 표시됩니다 따라서 우리의 경우 우리는이 PSDek을 모바일 용으로 사용해야합니다 그리고 모바일 장치 용 버전에서 CSS를 작성하는 것을 포함하여 사이트 구현을 시작하십시오 그 버전이 여기에있다면, 우리는 데스크탑 버전을 다룰 것입니다 그리고 처음에는 내가 보여 주길 원했을 것입니다

아마 데스크탑 버전을 위해서 우리는 미디어 쿼리를 사용할 것입니다 그리고 우리는 "너비가 어떤 것보다 높으면, 글쎄, 우선이 메뉴를 보여줄거야 기본적으로이 메뉴는 숨겨져 있으며 텍스트를 열로 나누는 등의 다른 작업을 수행하기 때문에 예를 들어,이 메뉴를 수평으로 배열하고, 꼬리말의이 메뉴가 이렇게 배열되어있는 것을 볼 수 있습니다 각 요소는 " 그렇다면 모바일 장치 용 버전을 다루겠습니다 빠른 시일 내에 시작하기 위해 이미 여기에 소개를 준비했습니다

나는 내 카탈로그를 3 개의 폴더로 나눴다 "css"- 모든 CSS가 여기에 있습니다 기본적으로 하나의 maincss 파일입니다 그 다음 "img"- 여기 모든 그림들이있다

나는 지름길을 택했다 그리고 나는 약간을 만들었다 우리는 여전히 "js"폴더를 가지고 있습니다 그래서 기본적으로 3 개의 폴더가 있습니다 하나의 파일은별로 없습니다

그리고이 페이지를 켜면 아무것도 없습니다 그래서 우리는 처음부터 시작합니다 그리고 내가 전에 한 일을 설명하는 단어는, 물론, 나는 피할 수없는 가장 중요한 것들을 넣었습니다 즉, HTML 태그, 태그 헤드, 제목 – 여기에 제 경우 "JSbin"이 간단하게 "기사"로 변경하자

나는 또한 "utf-8"인코딩을 가지고있다 나는 또한 당신이 그런 선을 보는 그런 방법에있는 지름길을 가지고 갔다 : 이것은 일반적으로 글꼴로드입니다 자,이 프로젝트에서 디자이너는 자신을 보았을 때 Open Sans Regular 글꼴을 사용했습니다 그리고 다른 사람들 사이에는 Open Sans Light 등도 있습니다 그래서 나는 접근 가능한 Google 글꼴 저장소에서이 글꼴을로드하기로 결정했다

"Okay, 나는 그러한 변형에서 Open Sans를 원한다 나는 그것을로드하고 점을 끝내기를 원한다" 이렇게하면 내 서버에 그러한 글꼴 파일을 가지고 있어도 상관하지 않습니다 디스크에 있는지 여부 – 인터넷에서로드됩니다 -이 모든 글꼴을 사용할 수 있습니다

물론, 나는 maincss를 사용한다 마지막으로 그러한 속성 메타 이름 = "뷰포트", 즉 일반적으로 모바일 장치를 확대 할 필요가 없다는 것입니다 그래서 모든 것이 1 : 1이 될 것이고 그것은 충분할 것입니다 그런 프로젝트를 시작하려면 어디에서해야합니까? 글쎄, HTML에서, 우리는 CSS 나 JS로 시작하지 않는다

우리는 항상 HTML로 시작한다 그런 서비스를 할 때 우리가 무엇을 염려합니까? 글쎄, 우리는이 HTML을 의미 론적으로 만들고 싶다 가장 먼저 머리에 태그를 사용하는 것입니다 목적에 따라 HTML 태그를 사용하려면, 예를 들어이 섹션 전체가 기사의 제목 인 경우, 헤더에 있습니다 예를 들어 이러한 메뉴가 이런 방법으로 제공되면 링크 목록 등으로 알려져 있습니다

우리가 쓴 것을 생각하기에 앞서, 페이지를보고 작은 부분으로 나눌 가치가 있습니다 조각들 -보기 및보기 : 좋아요, 그게 뭐죠? 이것은 페이지의 로고입니다 이것은 햄버거 버튼이다 우리는 숨겨진 레이어를 여는 중이며 여기에도 메뉴가 있습니다 즉 위에서 운전할 때 우리는 이미 로고, 변화하는 햄버거 (한 번 햄버거가되고 한 번 십자가가 닫히는)의 세 가지 요소를 구별합니다

우리 메뉴의 목록, 이것은 또한 목록의 요소가 조금 더 강조 표시됩니다 이제 우리는 찾고 있습니다 좋습니다 제목입니다 아마 어느 정도의 제목 일 것입니다 이것은 소개입니다, 소위 납, 그것도 단락이 될 수 있습니다, 다시 가장 작은 부분, 즉 작가의 사진, 저자명, 출판 당시의 시간, 우리가 여기에서 구별 된 가장 작은 것들을 결합한다면, 그래서이 3 개의 요소는 하나의 큰 집합 태그에 놓일 수 있습니다

이것들은 저자의 세부 사항입니다 왜냐하면 그것은 정말로 사진인데, 저자의 이름과 그것이 출판되었을 때, 이 기사 또는 저자에 관한 정보와 관련된 요소 일 수 있습니다 그게 합리적인 경우에 그들을 결합하는 것도 생각할 수 있습니다 그리고 지금까지 우리가이 기사의 첫 단락을 가지고 있음을 알았습니다 아마 HTML의 단일 요소 일 것입니다 – 제발, 우리는 사진이있는 섹션과이 사진의 일부 단락이 있습니다

그녀는 여기에 그런 단서로 여기에서 분리되어 있습니다 그리고 여기에서 우리는 또 다른 헤더, 또 다른 헤드 라인, 다음 단락, 다음 단락 및이 단원은 바닥 글입니다 즉, 전체가 바닥 글이 될 것이며, 바닥 글의 개별 요소는 메뉴의 링크가있는 목록이고 일부 회사 로고와 저작권은 따라서 처음에는 평소와 같이 페이지를 단순히 개별 요소로 나눕니다 이런 식으로, 정상에서 몰 때, 부호는 쓰여지고, 그래서 나는이 페이지를보고 "Okay, 이것이 머리말이다 이것은 제목, 부제, 저자에 대한 정보가 있기 때문에 전체 기사의 헤드 라인입니다

그리고 아직도이 기사를 꾸미는 어떤 종류의 사진이 있습니다 그래서 당신은 이것이 기사의 헤드 라인이라고 말할 수 있습니다 " 메뉴와 로고가 있기 전에 – 이것이 첫 번째 질문입니까? 일반적으로 로고와 메뉴, 우리가 맨 위에서 가면 정말로 로고이고 메뉴는 페이지의 구조상 처음입니다 그래서 우리는 편집장에게 가서 글을 씁니다 우리는 어떻게 든이 두 요소를 포함해야합니다

그리고 이것은 또한 전체 요소처럼 헤드 라인이 될 것입니다 여기에있는 것들은 기사 머리글의 일부이며, 그리고 차례로 여기 두 가지가 전체 페이지의 제목입니다 즉, 가장 외부에있는 단일 기사가 아닌 전체 페이지에서부터 시작할 가치가 있습니다 즉, 헤더와 헤더 닫기를 작성합니다 좋아, 내가 쓴 것은 머리말이다

이제이 머리글에는 로고가있는 두 가지가 있습니다 그것은 아마 우리를 어디인가에 데려 갈 것이다 탐색이 탐색 될 때 또는 탐색이 닫힐 때와 같은 방식으로 표시되는 탐색 왼쪽부터 시작하여 로고를 구현해 보겠습니다 글쎄, 내가 클릭 할 수 있다고 말하면 링크가 될거야 예를 들어 제목을 완성합니다

일반적으로, 이러한 유형의 로고 등을 좌상단에서 클릭하는 것으로 가정되었지만, 우리가 메인 페이지로 이동한다는 사실과 관련이 있습니다 글쎄, 아마도이 링크는 제목이 있고 나는 그것을 닫을지도 모른다 그리고 안에 뭐가 있니? 내부에 이미지가 있습니다 이제 placeholder img를 만들자 나중에 우리가 구현해야 할 때 다시 올 것이다

다음은 뭐야? 다음은이 탐색입니다 다음은 햄버거 다 우리가 햄버거를 눌러 (우리 햄버거가 조금 불완전하다면)이 메뉴가 개발 될 것입니다 그래서 일반적으로 우리 웹 사이트에서 네비게이션이 될 것입니다 이러한 모든 요소를 ​​통해 어떻게 든 탐색 할 수 있습니다

"가격"을 클릭하면 가격 목록으로 이동합니다 '정보'클릭 – '회사 소개'섹션 등으로 이동하십시오 이것은 모든 탐색이며 특별한 태그가 탐색을 위해 만들어졌습니다 우리는 해군에서 무엇을 가지고 있나? 우리의 전체 탐색에서? 음, 우리 탐색은이 버튼으로 이루어져 있습니다 그리고 우리가 뛰어 넘을 수있는 링크의 목록 인 메뉴에서, 이 목록을 구현해 보겠습니다

지금은 링크를 모릅니다 그런 다음 더 쉽게 작업 할 것입니다 나는 그것을 쓰지 않을 것이고, 나는 그것을 단순히 복사 할 것이다 이 목록을 만들었지, 그렇지? 우리는 "기능", "가격", "정보"및 "가입" 나는 매번 제목을 건너 뛰지 않았다는 것을보십시오, 클릭하는 내용을 아는 것이 중요합니다 링크에 설명이 있어야 함 이제 나는 상쾌 해졌습니다

– 뭔가가 나타났습니다 이제이 링크를보고 싶습니다 예를 들면 다음과 같습니다 링크에 대한 설명이 나와 있습니다 여기에서 정의한 것과 정확히 일치합니다

필자가 글을 쓰면 나는 "ㅋ ㅋ"를 잘 모른다 나는 아직도 구원을 얻고 새로 고침해야한다 – "ㅋ blah"가있다 그러나 우리는 사용자에게 더 합리적이고 도움이되는 어떤 것을 이야기하고 있습니다 그리고 우리는 링크 목록을 가지고 있습니다

그러나 나는 디자인을 다시 참조하고, 글쎄,이게 바로 버튼이야 이 불완전한 햄버거는 누구입니까 – 해보겠습니다 – 여기도 정의 해 봅시다 <button type = "button"> (그리고 그는 또한 내부에 무언가를 가지고 있으며 지금은 그냥 햄버거가되게하십시오), 이 버튼에서 단지 두 줄만 보아라 X 기호도 있었으므로 CSS 등에서 시각적 인 측면에서 작업 할 때 물론 알 수 있습니다 우리는 그대로두고 일부 제목은 "열기 메뉴"에 유용 할 것입니다 좋아, 그럴거야

버튼이 나타났습니다 음, 우리는 더 나아가고 있습니다 우리는 항상이 의미 계층을 다루고 있습니다 우리는 엄격하게 CSS에 손대지 않는다 자, 근본적으로, 우리가 무슨 일이 일어나고 있는지, 두 요소는 기사의 세부 사항이며, 여기 기사가 시작됩니다

우리는 기사를 가지고 있습니다 따라서이 모든 상자는 무엇이며, 우리는 기사를 아래로 스크롤하고 있습니다 원칙적으로 이것은 우리 사이트의 주요 내용이기도합니다 왜냐하면이 기사를 제외하고는 아무것도 없기 때문에, 스크롤을 참조하십시오 실제로이 페이지는 단일 아티클에 대해서만 생성되며, 그래서 우리는 이제 우리 사이트의 주요 내용 인 이름표를 시작한다고 말할 수 있습니다

이제 기사를 구현하기 시작했습니다 나는 꽤 자발적 인 <aricle> </ article>을 쓰고 있는데, 그리고 내가 처음에 말했듯이 그 기사에는 또한 그 자체의 헤드 라인이있다 이 요소들 각각이 헤드 라인을 만든다는 것을 본다 제목이 있고 자막이 있습니다 그래서 정상에서 평소와 같이 가고, 우리는 본다 – 좋아, 우리는 제목이있다 – 그러나 (내가 말했듯이)이 모든 것들이 제목이다

그리고이 기사 헤더는 이런 방식으로 쓰여졌습니다 즉, 괜찮습니다 이제 헤더가 헤더에 있습니다 이 제목은 모든 것이 여기에있는 것입니다 그 기사는 내가 나 자신을 위해 취하는 제목이다

이것은 h2 태그 일 수 있습니다 h2가 아닌 이유는 무엇입니까? 우리는 모든 의미를 다할 때 그 점에 도달 할 것입니다 물론 h1 태그가 페이지에 표시되어야하므로, 그러나 우리는 그것에 도달 할 것이다 아직 거기에 없으며, 이것이 좋은 질문입니다 이것은 기사의 일부 리드 또는 소개 일 것이며, 우리는 단락에서 다시 그것을 할 수 있습니다, 여기 포토샵에서 붙여 넣은 것들에주의를 기울이지 마라

그리고 무엇? 그리고이 모든 것들은 저자와 관련이 있습니다 그러한 모든 데이터, 메타 데이터, 글쎄, 당신은 그것이 div 일 것이라고 말할 수 있습니다 세 가지를 하나의 div로 묶으십시오 이 여가에서 그것은 가능할 수 있습니다 – 원칙적으로 – 사진, 즉 img / author-thumbjpg 폴더에 내 사진이 있습니다

글쎄요, 여기보세요로드되지 않는 경우를 대비 한 대안 메시지입니다 글쎄, 아마 이런 식으로 그리고 더 나아가 그럼 우리는 무엇을 가지고 있을까요? 다음으로 우리는 저자의 이름을 가지고 있습니다 그래서 저와 우리는 여전히 시간이 있습니다 이 기사가 작성된 날짜, 여기서 우리는 time 태그를 사용합니다

datetime 속성을가집니다 여기에 그것이 제시되는 날짜가 결정됩니다 2005 년, 10 월, 10 월 16 일, 예를 들면 25 시간 전에 헤더에 관해서는 충분하다 그런 헤더 물건들에 대한 것이 아무것도 없다는 것을 알기를, 우리는 머리띠로 끝났습니다 예 – 여전히 점이 있지만이 점은 의미가 없습니다

나는 CSS에서 그것을했고, 우리는 더 나아 갔다 기사가 시작됩니다 그래서 우리는 괜찮다고 쓰고, 그것은 div, 어쩌면 우리가 시작하는 디바없이 텍스트가있는 단락이 있습니다 직접 복사 할 것입니다 그리고 그것은 첫 단락이 될 것입니다, 이제이 섹션은이 대시로 구분되어 시작됩니다

나는 무관 한 내용, 기사의 부차적 인 내용, 나는 옆으로 사용하고 예를 들어 주로이 이미지를 구현하지만, 그림 태그가이 용도로 사용됩니다 그리고 지금 img src 거기의 그림 제 집에서 무엇을 사용 했습니까? 집에서 나는 그런 것을 사용했다 나는 그것을 간단히 복사 할 것이다 그리고 alt, 그것은 일반적으로 숲 alt = "숲은 가을에 위대합니다" 그리고 이제 서명 <figcaption> 그림 1 설명 </ figcaption> 좋아요 3 단락의 텍스트가 있습니다

복사합니다 그리고 그것이 나타 났는지, 우리의 아름다운 그림인지, 우리는 더 낮아진다 그리고 우리는 마지막 단락으로 왔습니다 예를 들어, 와우, 아직 복사 할 수 없지만 제목은 제목은 h2이므로 모든 하위 섹션에는 h3, 이 제목은 기사의 제목에 따라 다르며 순위가 h3 인 것처럼 우리가 기사의 제목과 같은 수준에 있다면, 물론 우리는 h2를 사용할 것입니다 이것이 제목의 제목 인 반면에 이제는 h3을 가지고 우리 단락을 복사합니다 좋아요, 다른 디자인은? 섹션이 끝났습니다

기사의 바닥 글이 종료되었습니다 꼬리말에는 색상 등이 표시되어 있으며 상단에는 비슷한 메뉴가 있습니다 글쎄, 가자 마치 우리가 바닥 글을 사용하는 것처럼 발에, 그러나, 내가 여기에서 주목할 가치가있다, 이것은 더 이상 페이지의 주요 내용이 아닙니다 전체 페이지의 꼬리말과 같습니다

그래서 여기에 기사가 여기에서 주된 역할을합니다, 그래서 우리는 주된 것 뒤에 푸터를 정의해야합니다 마찬가지로, 우리는 같은 목록을 가지고 있습니다 그래서 나는 여기에 자신을 복사 할 것이고, 로고도 제공합니다 여기서는 자리 표시자를 만들고 저작권을 부여합니다 JSa가없는 CSS가없는 완전히 깨끗한 페이지임을 확인하십시오

그리고 이것은 검색 엔진과 같이 읽는 것입니다 물론 점점 나아지고 있습니다 그러나 일반적으로 검색 엔진 (예 : 인터넷)은 웹 사이트에 쓰여진 내용을 고려하고, 검색 엔진에서 볼 수있는 버전과 비슷합니다 이것은 또한 일부 독자 등이 보는 버전이기 때문에이 HTML 의미 론적으로 만들려고 노력할 가치가 있습니다 현재로서는 접근성 문제를 간과 한 상태입니다

나는 우리가 변화하는 것을 볼 수있을 때까지, 그리고 왜 우리가 변화하고 있는지, 그리고 왜 그러나 HTML의 기본 버전이 그 순간에 만들어진 것처럼, 나는 그 의미, 어쩌면 어딘가에서 실수를 저질렀습니다 나는이 텍스트의 목적 때문에이 텍스트가 다소 비슷하게 보일 것이라고 생각하지만, 여기에 우리가 가지고있는 모든 요소들 자,이 순간에 CSS 작성을 시작하는 것이 좋을 것입니다 나는 전달이 훌라와 같은지 알 것이다 이미 65 명의 시청자가 있습니다 안녕하세요

몇 가지 의견이 있습니다 이 스트림을 보아서 다시 한 번 모두를 환영합니다 CSS를 쓰기 시작할 것입니다 나는 maincss가 완전히 비어있다, 나는 전에 여기에 아무것도 쓰지 않았다

정확성을 위해서 그렇습니다 저는 외부 프레임 워크를 사용하고 싶지 않습니다 부트 스트랩 없음, 재설정 없음, 정상화 없음 등 나는 처음부터 그것을 쓰고 싶다 내가 하나님의 온 세상에 대해서 알지 못하고 나 자신을 무언가 쓸 수 있다면, 나는이 과정을 밟고 싶다 당신이 할 첫 번째 일은 물론 여백 등을 재설정하는 것입니다

그래서 여백 : 0, 안쪽 여백 : 0, 페이지가 왼쪽 가장자리에 붙어 있는지 확인하십시오 그런 일을하면서 여기서해야 할 일이 있습니까? 글쎄, 당연히, 우선, 글꼴, 맞습니까? 글꼴 및 사용하는 값 ​​등으로 무엇을해야합니까? 나는 이전에 그것을 측정했기 때문에 나는 여기에 없을 것이다 그러나 포토샵에서 무언가를 측정하고 싶다면, 텍스트가 어떻게 보이는지, 텍스트의 속성은 무엇인지, 여기서 타이포그래피 탭에는 텍스트 줄, 줄 간격, 크기, 유형 및 변형 등의 다양한 값이 있습니다이 모든 정보는 여기에 포함되어 있습니다 우리는 Open Sansa를 사용하고 있습니다

나는 또한 그것을 일찍 적재 했으므로 나는 먼저 몸을 쓸 것이다 기본 색상 인 # 3747F 즉이 텍스트의 색상 인 여기 Open Sans를 사용합니다 당신은 또한 그것을 여기에서 볼 수 있습니다 그래서 이것은 색과 폰트입니다 폰트의 크기는 얼마입니까? 음,이 디자인의 기본 (예 : 16px) 우리는 여기에 32px를 가지고 있으며, 이것은 또한 작은 호기심, 즉 실제로 16px이며, 디자인이 Retina 디스플레이에서 설계 되었기 때문에, 모든 것이 모두 수정 된 것입니다

맞습니까? 따라서이 값은 2 배 더 크며, 우리가 망막에서 디자인한다면, 일반적으로 저는 그것들을 나눌 필요가 있습니다이 모든 것을 여기 2에서, 일반 화면의 경우 16px가됩니다 그런 호기심이있는 반면 – 나는 여기서 렘을 사용하고 싶었지만, 물론 픽셀을 사용할 수 있기 때문에 ems를 사용할 수 있습니다 그런 값 (vh)을 사용할 수도 있습니다 이 경우 V- 포트의 크기, 고도와 관련하여, 반면 나는 rems를 사용하고 싶었고, 예를 들어 remach에서 16px는 이런 식으로 표현 될 것이고, 하지만 우리는 한 가지 더해야만합니다

여러분은 가장 높은 루트 요소 인 소위 말하는 것을 작성해야합니다 HTML, 그 글꼴 크기 : 625 % 그리고 그런 기록을 좋아해라 적절한 비율 덕분에 – 일부 기사에서 어떻게 작동하는지 읽을 수 있습니다 -이 협약 덕분에 16 remow는 실제로 16px입니다 우리가 20px를 원한다면 2 remy를 할 것입니다

음, 다른 사람들과 기본적으로 그것에 관한 것입니다 예를 들어 우리 웹 사이트를 표시하는 디스플레이 (원칙적으로 장치)를 원한다면 유용합니다 우리가 모든 글꼴을 확대한다면, 우리는 가지 않습니다 (우리가 여기에 선택기를 많이 가지고 있다면) 그리고 우리는 각 요소를 개별적으로 바꾸지 않습니다, 소스에서 주 글꼴 ​​크기를 간단히 변경할 수 있습니다 즉, 모든 요소는 그에 따라 비례 적으로 조정됩니다 또한 멋지지만, 물론 여러 가지 변형이 있습니다

글꼴 크기 및 단위에 관한 한 많은 변형 글쎄, 난 그런 식으로하고있어, 알았어 거기에 몇 가지 명령이있다 그리고 다음은? 우두머리부터 시작하는 것이 옳습니다 맞습니까? 그것은 로고를 보여주는 것 같아요, 여기에 Functionite가 표시되지 않는지 확인하십시오 검사관에서 끝나면, 알았어, img는 비어있는거야, 그렇지? 음, 여기 많은 학교들이 있습니다

그래서 말하자면, 어떻게 할 것인가? img / logosvg alt = "" 그러면 svg 로고가로드되지만 sg를 직접 대체 할 수도 있습니다 그리고 그것은 우리에게 몇 가지 것을 줄 것이므로 로고가 기본적으로 흰색인지 확인하십시오 그러나 메뉴를 열면 로고가 검은 색으로 표시되며 햄버거 나 십자가에도 동일하게 적용됩니다 음, 좋아,이 두 개의 다른 로고가 Photoshop에서 삭제되었음을 알게됩니다 메뉴가 열렸는지 닫혀 있는지에 따라 어떻게 든 표시합니다

색상을 바꿀 로고가 하나뿐입니다 맞습니까? 참고로, 이것들은 같은 치수, 동일합니다 음, 모든 것이 동일합니다

기본적으로이 두 개의 로고는 색상이 다릅니다 – 오직 독점적으로 우리가 이렇게하면, 우리는이 색을 바꾸지 않을 것입니다 일반적으로 우리는 다음과 같이 쓰고 있습니다 : style = color, 또는 style = "fill : red"또는 style : "fill : white" 불행히도 그때는 작동하지 않을 것입니다 그래서 제가갔습니다 이것은 또한이 연습을위한 나의 선택입니다 – 문서에 직접 svg를 붙여 넣으려면 어떻게해야합니까? 이미 어딘가에서 해본 솔루션에서 복사 할 것입니다 음, 길기 때문에 최적화 할 수 있습니다

반면에이 운동의 필요성 때문에 나는 그런 것을 사용했다 나는 쓴다 좋아, 다음은 뭐야? 그리고 지금 보니, 저는이 svg에 페이지 로고 클래스를주었습니다 어떻게 할까 page-logo {fill : red; } 작동해야합니다 – 오, 빨간색입니다, 맞습니까? 몇 가지 변형이 필요하지 않으므로 나중에 유용 할 것입니다

다음은 뭐야? 좋아, 우리는이 페이지를 가지고있다 나는 그렇게 생각한다 이 경우에도이 햄버거를 가질 수 있습니다 우리가 이미 svg에있는 것처럼,이 햄버거는 두 줄 또는 십자가입니다 그리고 나는 여기에 svg 기술을 사용할 것이다

물론 이러한 것들을 CSS에서 할 수 있습니다 몇 가지 다른 것들은 그림처럼 대체 할 수 있습니다 그러나, 나는 이것을 위해 svg를 사용하고 싶다 그리고 나는 또한 전에 그런 svg를 준비했다 여기 가자

그리고 대신에, 햄버거를 먹고 볼게요, 우리는 여기에 두 가지 svg가 있습니다 첫 번째 svg 즉, 이미 특수한 등급의 햄버거 아이콘을 표시했습니다 두 번째 svg 파일은 닫기 아이콘이고, 이것은 X입니다 두 개의 svg 파일은 두 개의 햄버거 라인입니다 그리고 이것은 닫는 버튼입니다, 그리고보세요, 여기 좋았습니다, 그게 그 것입니다, 그건 그렇고, 그것이 일어난 방법입니다, 그런데, 회색 배경 등이있어 사라지게 할 수 있습니다

기본적으로 보이지 않게하고 싶습니다 기본적으로 버튼처럼 보입니다 그는 약간의 회색 그라디언트와 경계선을 가지고 있습니다 하지만 나는 그것을 원하지 않는다 예를 들어 CSS에서 버튼을 사용하여 다른 모양으로 꾸밀 수 있습니다

그래서 나는 class = "hamburger"라고 쓸 수있다 그건 그렇고, 우리가 수업을 듣고있을 때 몇 가지 다른 요소를 표시 할 수 있습니다 이것은 탐색이며, page-nav 클래스를 갖게합니다 어쩌면 여기에 차례대로 헤더가 있고 페이지 헤더가 될 것입니다 맞습니까? 이것은 전체 페이지 헤더이므로 페이지 헤더 대시가 합당한 선택입니다

여기 페이지 로고가 있습니다 페이지 탐색, 잘 됐네 좋아, 그럼이 햄버거를 다시 놓고 싶다 우리가 작성할 수있는 page-nav

hamburger {border : 0 background : 0 o – 실종 – 위대한 그건 그렇고,이 메뉴가 어떻게 표시되는지보십시오 그렇지 않아, 확실히, 글쎄,이 메뉴를 보자 이 메뉴는 페이지 탐색에 있으며 이것은 ulka입니다 글쎄, 문제는 여기에 클래스로 표시할지, 우리는 다음과 같이 요약 할 수 있습니다 : <ul class = "navigation-menu"> 그리고 지금 page-nav

navigation-menu {list-style : none} 우리는 더 이상이 점들이 없으며 항상 그렇습니다 들여 쓰기가 있음을 확인하십시오 즉 들여 쓰기를 다시 설정해야합니다 음, 여백, 패딩, 오 – 괜찮아 좋아, 어떻게 든 괜찮은 것처럼 보이게해라

어쩌면 이제 우리는 그 밖의 모든 것들을 넣을 것입니다 (나는 처음부터 그것을해야합니다) 나는 iPhone 6보기를 켰습니다 일반적으로 켜져 있습니다 – 기본적으로 그게 맞습니까? Google 크롬에서, 당신은 "요소 검사 (Inspect Element)"를 클릭합니다이 아이콘은 셀룰러 장치와 함께 여기에 있습니다 원하는 전화기를 선택하고 장치를 에뮬레이션합니다

iPhone 6이 있습니다 지금은 iPhone 6에서 어떻게 보이나요? 글쎄, 뭔가를하는 것이 좋을거야 이걸 좀 다르게 보이게 만들려고, 나 스스로 할거야 어쩌면 로고는 약간 작고 흰색 일 것입니다 왜냐하면 기본적으로 흰색이기 때문에입니다

내가 할게 page-logo {fill : #FFFFFF} 기록에 충실하는 것도 중요합니다 즉, 프로젝트의 표준이 단순히 6 자리의 16 진수 표기법 인 경우가 종종 있습니다 그런 식으로 사용할 수 있다면 팀 전체에서 글쓰기가 가득한 이름을 사용하는 것이 좋습니다 그리고 지금은 흰색이야, 너는 볼 수 없어 어쩌면 너비 : 100px, 좋아,하지만 이제 로고가 사라 졌어, 항상 여기에있어, 하지만 우리는 흰색과 같은 배경이 있기 때문에 그것을 볼 수 없습니다

빠른 점검 없음 – Functionite, 우리는이 사진을 여기에서 사용하고 싶습니다 그래서 그것이 잘 작동하려면이 텍스트의 배경이 될 것입니다, 그러면 어쩌면 제가 기사의 전체 머리글에 대한 배경을 바로 설정 하겠지만, 여기에 우리가 스타일을 정할 때, 그것은 기사가 될 것이며, 여기서는 기사 머리글, 이제 우리는 article article-header를 쓸 수있다 그리고 여기에 내가 여기있는 사진이 있습니다

배경 : url ( / img / header-bgrjpg); 더 반복하지 붐! – 뭔가있어, 그렇지? 불완전한 이 배경이 전혀 시작되지 않는다는 것을 알 수 있습니다

이런 모습으로 보이기 위해 당신은 무엇을 할 것입니까? 글쎄, 아마 몇 가지 속성을 설정할거야 평균은 평균으로 보입니다 background-size : 표지, 오, 조금 나아졌지만 여전히 가난합니다 아직 여기에 없으며 100 % 너비가 아닌 이유에 대해 궁금합니다 오, 예, 그는 그것을 밀어 냈습니다

이 사진이 무언가를 저기에서 내 렸습니다 하지만 뭐라구? 좋아, 알았어, 우리는 배경이 더 많거나 적은 헤더를 가지고있다 어쩌면 배경 위치 : 50 %, 오, 그게 바로 중간에있는 해파리이고, 지금부터 여기에서 시작하겠습니다 왜 그걸 내려 왔지? 처음에는 전체 페이지의 헤더가 있기 때문에, 그는 여기있다, 그는 단지 페이지의 흐름과 함께 간다 그리고 처음에는 머리말이 있습니다

여기에는 151px의 높이 (여기 참조) 그 이후로, 그런 다음 나머지 모든 것과 같습니다 예를 들어이 헤더 페이지를 수행 할 수 있도록이 작업이 수행됩니다page-header {position : absolute} 그리고 봐, 그는 이제 다르게 떠 다니고있어, 그렇지? 그건 그렇고, 어딘가에 항상 어딘가에 공백이 있습니다 그러나 이것이 우리가 잠깐 동안 돌볼 것입니다

그런 빠른 확인, 아마도 여기 뭔가 어딘가에 푸시됩니다 나는 네가 어떻게 볼지를 안다고 생각한다 오, 여기 h2는 우리에게 하얀 여백을 갖게하고, 어쩌면 그 일에 대해 걱정하지 않아도되고, 즉시 해보겠습니까? 좋아요, 이건 "article-title"기사의 제목이고,이 여백은 0입니다 Voilà, 좋은 일들이 더 좋아 보이고, 겹치지 않도록 조금 떨어 뜨린다면 좋을 것입니다 그렇죠? 우리는 기사의 로고와 제목이 겹치기 때문에 다른 것을 바꿀 수 있습니까? 여기에 약간의 패딩, 하지만 패딩은이 장소에 있어야합니다, 그렇죠? 여기부터 시작하기 때문에, okej, 기사 헤더, paddnig-top : 100px, 물론, 나는 모자에서 이러한 값을 가져 가지 않습니다, 나는 포토샵 등에서 그들을 측정했습니다, 나는 비전에서 그것을하고 싶지 않습니다

여기에 100 명이있을 것입니다 더 이상 여기에 오지 않는다는 것을 확인하십시오 이 메뉴는 항상 표시되므로 숨길 수 있습니다 페이지 탐색 탐색 메뉴 {표시 : 없음} 기본적으로 숨겨져 있습니다

오, 괜찮아 그건 그렇고, 여기서 모든 것은 가장자리에 붙어있는 것을 보아라 여기를 보는 방법을 살펴 보겠습니다 여기 그리고 여기에서 우리는 헤딩을위한 오른쪽 패딩을 설정해야한다 이 경우 전체 페이지, 즉 여기 예 : 20 픽셀, 그리고 상단에서 아마 28px, 오 – 이제 좋아 보인다

햄버거의이 부분을 오른쪽으로 떨어 뜨리는 것이 좋을 것입니다 따라서 이러한 속성 외에도 절대적으로 위치해야합니다 예를 들어 오른쪽 20px로 설정하면 오, 정말로, 정말로 이제 질문은, 왜 단지 여기에 있을까요? 보세요, 너비가 너무 커서 아마 즉 140px, 폭 : 100 %, 더 좋고, 좋으며, 즉, 요소가 너비가 부족합니다 약간 더 좋습니다 그러나 여하튼 우리는 지역 저쪽에 갔다 왜 그것은 잘 났는가? 우리가 폭 : 100 %를 주었던 것뿐만 아니라 패딩 : 20px, 실제로이 페이지 헤더의 전체 너비입니다 (예 : 100 % 뷰포트)

20px 왼쪽 패딩과 20px 패딩 오른쪽 그 100 %도이 덧씌우기에 맞을 것입니다 여러분은이 속성을 모든 사람이 예상했던대로 사용해야합니다 : 상자 크기 그리고이 시점에서이 패딩이 적용되어 헤드 밴드의 전체 너비가 접 힙니다 그 밖의 무엇이 좋을지 어떻게 든 던져 주실 수 있습니까? 오,이 햄버거는 아, 지금은 백인이에요 우선, 기본적으로 숨겨진 X와 비슷합니다

맞습니까? 음, 나는 그것을 숨기고이 X가 무엇인지 보려고 노력할 것입니다 X는 가까운 아이콘이고 그는 햄버거에 있습니다 그래서 우리는 편지를 씁니다 좋아, 페이지 탐색, 햄버거 및 닫기 아이콘으로 시작합시다 이제 우리는이 요소를 여기에두고 숨 깁니다

좋아, 훨씬 나아 졌어 그건 그렇고,이 햄버거는 여전히 약해 보입니다 그걸 가지고 뭔가를 해봅시다 왜냐하면 여기보다 훨씬 크기 때문에, 또한 값을 측정했으며 햄버거 아이콘, 너비 : 18px, 높이 : 6px라고합시다 괜찮아

그리고 그것은 모두 백인입니다 그런데 햄버거 전체가 측정되는 한 이미 측정 된 바 있습니다 30×30 픽셀 크기의 정사각형이 될 것입니다이 전체 버튼은 여기에 있습니다 지금은 훨씬 나아

오, 저기, 그런 개요가있어, 음,이 그림이 비행기를 망칠 때마다 항상 괜찮아 글쎄, 어쩌면 우리가이 사진을 보살 피는 것처럼 보일 정도로 추한 것처럼 보일 수도 있습니다 -이 그림은 어디에 있습니까? 그림 asida, 기사와 관련이없는 내용이라고 가정 해 봅시다 그리고 여기에는 수업이 없습니다

그래서 기사 쪽과 클래스 = 기사 그림이되도록하십시오 음, 이제 우리는이 그림을 제한하기 위해 이것을 쓸 수 있습니다article-sidebar에 그것을 쓰자article-picture, max-width : 100 %를 찾는다 최소한 폭 등을 제한해야합니다하지만 여기서 무슨 일이 일어 났습니까? 오, 네, 우리는 숫자를 제한했습니다 그리고 훨씬 더 나은 것은 그림 자체가 있습니다 따라서 정상적인 차원을 말하면, 페이지가 늘어나지 않으면 나중에 다시 방문 할 것입니다

벌써 개발하는 것이 훨씬 낫습니다 그리고 우리는 항상이 햄버거를 가지고 있습니다 이제는 클릭하면 아무 것도주지 못하는 것을 볼 수 있습니다 그러나 왜 그것을주지 못합니까? 우리는 JS를 작성하지 않았기 때문에 JS를 작성하기 전에 잠시 계시 해 보시고,이 탐색 메뉴를 표시하십시오 기본적으로, 우리가 여기를 클릭하는 방법을 보여 주어야합니다, 맞습니까? 음, 지금은 그래픽이 어떻게 바뀌 었는지 멀리 보입니다

조금 다르므로이 메뉴가 괜찮아 보이는지주의합시다 여기에 우리가 본 것처럼 보이는 것을 정의했습니다 내가 여기서 뭘 할 수 있니? 우선, 그들 중 일부는 너비가 100 %가되게하고 여전히 표시합니다 : none, o – 셀렉터가 손실되었습니다 좋아요, 우리는 두 개의 셀렉터가 같은 것은 원하지 않습니다 그것을 표시하게하십시오 : none,하지만 우리는 표시를 해제 할 것입니다

좋아, 이제는 이렇게 생겼어 그것은 색 등을 사용할 수 있습니다 흑인, 색은 무엇입니까? 블랙, 알았어 그래서 링크가 검은 색이되도록하십시오 o, 나는이 방법으로 글을 씁니다

메뉴의 링크는 검은 색이어야합니다 좋아요, 우리는 밑줄을 제거합니다, font 14, font-size : 14rem, 좋아, 그들은 중심에있다 이것은 menu text-align : center, 모든 것이 중간에 있다면, 그것은 흰 배경에 좋을 것입니다, 그렇죠? 메뉴가 열려 있어야하고 말하듯이 이상하게 들리지만, 그래서 예를 들어 여기서 운전하는 것이 유용 할 것입니다 예를 들어, nav-opened 클래스를 설정하면이 헤더가 탐색이 열려있는 상태에 있음을 의미합니다 네비게이션이 열려 있으면

그것은 활동적입니다 – 열려 있고 용서하십시오 그래서 우리는 이것을 할 수 있습니다 : nav-opened and now 이 두 클래스가 겹치면 즉, 동시에 설정됩니다 즉,이 방법으로 저장하면됩니다이 전체 머리글의 배경, 즉 여기에서 보는 부분이 흰색이됩니다 배경 : FFFFFF 오, 멋지다 – 그러나 보아라, 지금이 모든 아이콘은 우리에게서 사라졌다 또한 개선 할 가치가 있습니다

따라서 이러한 상태의 로고는 검은 색이됩니다 이 물건들과 같은, 당신도 할 수있어, 나는 그것이 효과가 있다고 생각한다page 헤더-NAV 오픈 그래서 헤더가 상태에 있다면 그것은 헤더 상태와 같습니다 즉 내비게이션이 열려있는 상태에서 햄버거를 먹으면 검은 색으로 표시됩니다

단지 그것이 햄버거 X가되는 것을 의미하지 않는다는 것, 즉 우리의 내비게이션이 활성 인 경우, 햄버거 아이콘을 숨겨 둡시다 – 알았어요 그리고 차례로 버튼을 닫거나 아이콘이 보이게하십시오 그건 그렇고, 너무 크고, 고칠 수도 있고, 즉, 여기에 나는 그 정의를 가지고있다 너비 : 14px – 괜찮아

이제 이러한 요소의 스타일링을 마무리하겠습니다 여기서 뭘 할 거니? 글쎄, 국경이있다 우리는이 선택기를 사용합니다 그가 여기에서 취할 것이고, 그는이 요소에서 시작할 것입니다 그는이 요소를 취할 것입니다

그는 거머리를 찾을거야 – 오, 모든 거머리들 그것들을 보시오, 각각의 요소들 : 그것은 리, 그것은 리이고 그것은 리, 그들은 회색 테두리를 가지고 있습니다 이 테두리의 색은 – o, 글자 그대로, 또는 1px, 그리고 표준에 충실합시다 – 오, 여기서 모든 거리는 조정되어야합니다 패딩 상단을 15px로 설정하고 패딩 하단을 15px로 설정했습니다 이제는 더 좋습니다

그런데 여기서 마지막 항목을 수행하는 것이 가치가 있습니다 여하튼, 그가 정말로 보는 것처럼, 가입 할 기호와 같습니다 일부 버튼을 클릭하고 수업을 만들어 봅니다 두 가지 방법으로 수행 할 수 있습니다 글쎄, 당신은 뭔가를 할 수 있습니다 – 그들 모두와 마지막 또는 마지막 아이를 위해 – 이것은 마지막으로 볼, 그것이 등록입니다 -이 녹색 경계선을 설정하십시오

그러나이 가입은 여러 장소에있을 수 있습니다 어쩌면 누군가가 그를 갑자기 이곳으로 옮길 것이고이 마지막 아이는 더 이상 최신 정보가 될 수 없습니다 특수 클래스를 제공할만한 가치가있을 것입니다 클래스 = 가입 그리고 이제 그런 가입은 흥미로운 것들을 가질 것입니다 우선 국경 : 0, 이봐, 보르도가있는 사람이야

오, 그렇지 않아 그리고 그러한 가입에 대한 링크는 국경을 가질 것입니다 그래서 그것은 될 것입니다 : 2px solid (그리고이 테두리의 색깔) # 00BAA5 – 멋지다 하지만 여전히 할 일이 많습니다 여기 어떻게 든이 모서리를 둥글게 만들어야합니다

border-radius : 25px로 보겠습니다 좋아, 여기가 더 좋아 보이지만, 항상 패딩이 설정되어 있지 않다 이 주변 공간 나는 이미 그것을 측정했다, 등등 이것은 패딩 오른쪽이다 : 20px, 패딩 – 왼쪽 20px, 오, 더 좋아 보인다 글쎄, 여기 조금 더 큰 마진이 있기 때문에,이 가입을 위해 마진 – 상단 : 30px, 지금은 약간의 달리기입니다

그리고 아마도이 메뉴에 관해서는 충분할 것입니다 (물론 모양에 관한 것입니다) 그리고 한 가지 더 – 여기 보이는 것은 원칙적으로 그다지 겸손하지 않은 그늘입니다 어떻게 든 구현할 가치가있다 이것은 박스 섀도우 (box-shadow)이며,이 상자 그림자는이 헤더의 어딘가에 추가되어야합니다 맞습니까? 여기, 상자 그림자가 나타납니다 글쎄, 나는 열린 머리글로 갈거야, 여기 글쎄, 나는이 상자 그림자 정의를 일찍 준비했다

그것은 아주 복잡하다 그는 다소 비슷하게 보일 것입니다 그러한 불투명도를 지닌 색상은 검은 색으로 저장됩니다 여기에이 그림자의 속성이 있습니다 음, 여기 전체적인 메뉴와 같은 배경이 있습니다

하지만 요즘은 운동을 시작하는 것처럼 모든 것이 빠져 든다 상자 그림자 (또는 어쩌면 상자 그림자에 관해 말할 것입니다)에 관해서는, 아마 그것을 사용했습니다, 여기 그림자의 다른 값을 설정할 수 있습니다 이것은 사용할 수있는 많은 웹 사이트 중 하나입니다 그림자 등의 색상을 설정할 수 있으므로 추천합니다 물론, Photoshop에서 어떻게 구현되는지 제안해야합니다

그리고 또 뭐야? 좋아, 이제 우리가 여기서 해낸다면, 그들은 메뉴가 활성화 된 상태를 제거했다 – 좋아, 나는 바뀌고있다 오, 나타나고, 사라지고, 나타나고, 사라지고, 그래서 클릭하면 정말이 클래스에 달려 있습니다이 클래스 삭제하기 – 메뉴가 없습니다 오, 남은 게있어 무슨 일이 일어나는지 보자

음,이 디스플레이 : 아무 것도 설정되어 있지 않아야합니다 좋아, 다시 갈 수있어 오 나는 여전히 nav-opened를 삭제해야한다 오, 이제 클릭 할 때 아무 일도 일어나지 않습니다

내 예를 살펴보면 다음과 같이 구현했습니다 클릭하면 모든 것이 멋지게 변합니다 클릭하기 위해 자바 스크립트가 필요합니다 여기에 글을 씁니다, 잘 모르겠습니다 – mainjs 그리고이 js를 문서에 넣으십시오, 맨 끝에 – js / main

js jQuery 등을 사용하지 않습니다 우리가 이것을 클릭하면, 헤더는 여분의 클래스를 얻게 될 것이고, 그러면 그것이 열려 있다는 것을 알게 될 것입니다 그래서 우리는 그것을 클릭하기를 원합니다 (그것은 햄버거 클래스를 가지고 있습니다), 그래서 우리는 var 햄버거를 할 수 있습니다 이제 우리는 문서 다음에 querySelector를 찾고이 클래스를 가진 요소는 우리에게 관심의 대상이며 우리가 그것을 발견했는지 확인합니다 나 conslelog, 콘솔에 나에게 편지를 쓸거야 – 총으로 조금 화면을 찍을거야 – 좋아, 여기 봐, 우리가 가지고있어

음, 이제 우리는 (누군가가 클릭하면) hamburgeraddEventListener, 이것은 JS의 마지막 함수입니다 누군가 클릭하거나 클릭 한 다음이 기능을 시작하십시오 나는 여기에 그것을 썼다 그것은 비어있다

안에는 아무것도 없다 함수가 어떻게 쓰여지는지, 끝에서 거짓인지, 예를 들어 다음과 같이하십시오 우리가 클래스를 추가 한 것, 즉 page-header를 다운로드하고, page-header를 가져 와서 클래스를 추가하고, 이것은 classListadd에 의해 수행되고 우리 클래스는

nav-opened 나는 점검한다 – 그것이 나타났다, 그러나 아직까지는 완벽하다 내가 클릭했을 때 무슨 일이 일어 났는지보고, nav 열 클래스가 추가되었습니다 이것은 항상 숨겨져 있지만 표시가 있습니다 : none, 그것은 어떻게 든 그것을 보여주는 것이 좋을 것이고, 그래서 우리는 그것을 다시 nav-opened하고 지금 navigation 메뉴를한다 표시 : 블록 그것은,하지만 아무것도 보지

한 번만 클릭하면 닫을 수 없습니다 어쩌면 여기서 뭔가를 바꿀 필요가 있습니다 예 – 제가이 수업을 추가 할 때마다, 메뉴를 닫고 싶다면 삭제해야합니다

수동으로 여기에서 삭제하고 있습니다 메뉴가 사라 졌으므로 JS에서 동일한 작업을 수행해야합니다 글쎄, 너 그렇게 할 수있어, 토글 할 수있어, 그렇지? 토글 (Toggle)은 호출기 – 헤더에 없거나 탐색기가 이미있는 경우 제거 될 경우 nav-opened 메서드입니다 그래서 그것은 우리에게 완벽합니다 컷 – 컷, 컷 – 컷, 컷 – 컷, 컷 – 컷, 컷 – 컷 그리고 이것은 메뉴입니다

저는이 효과가 있습니다 멋지다 어쩌면 마지막에이 효과를 추가하자 기본 버전과 비슷하다 이제 기사의 머리글을 날카롭게 할 시간입니다

그래서, 우리의 머리글은 어디에 있습니까? 이것은 우리의 머리말이며, 여기에있는 것이 없습니다 왜냐하면보세요, 프로젝트에서는 모두 흰색입니다 그런 다음 머리글로 가서 흰 색을 추가하십시오 더 나은 점은 모든 것이 여기에 집중되어 있습니다 텍스트 정렬을 추가합니다 : center – okay 이 헤더의 크기는 기사의 헤드 피스의 의미에서 일반적으로 높이입니다

즉, 60 % 뷰포트 또는 60vh로 설정합니다 뷰포트 여기에서 온 것을 볼 때까지 뷰포트이고 60 % 그러나 나는 높이를 정했다 때로는이 콘텐츠가 간단하게 될 수 있습니다 제목은 길거나, 부제 등일 수 있습니다 아마도 최소 높이 일 수도 있고, 스스로 늘릴 수도 있습니다

지금은 뻗어있다 그런 호기심을 가지고 아직도 우리가 여기서 무엇을 할 수 있을까요? 일부 패딩은 여기에서 할 수 있습니다 오른쪽에서부터, 그리고 왼쪽에서부터, 아래에서부터 약간의 패딩 아, 지금은 더 좋습니다 – 프로젝트 에서처럼이 제목은 Open Sans Regular 글꼴입니다 그리고 당신이 우리를 보면,이 제목은 어떤 식 으로든, 그것은 보인다 – 정확하게, font-weight : 굵게, 이것은 Fonta의 일반적인 변형이 아니므로,이 제목을 정말로 일반적인 무게로 만들기 위해 뭔가를 설정해야합니다 그가 선출되지 않을 것이라고 우리는 어디에서이 칭호를 얻을 수 있습니까? 우리는 그것을 여기에 가지고 있습니다

좋아요 글꼴 체중은 정상이며, 모양이 다릅니다 우리는 어떻게 든이 그림을 바꿀 수 있습니다 이 사진은 너무 높고 너무 큽니다 좋아요,이 사진에 기사 작성자 사진이 있습니다

이 사진의 최대 너비를 설정하고 60 픽셀이되도록하십시오 border-radius와 이제는 흥미로운 것입니다 왜냐하면 여기 보면 둥근 것입니다 그리고 더 일찍, 몇 년 전, 아마 5 개 이상, 국경 반경이 없었고, 이미 둥근 같은 그림을 잘라내는 것이 필요했습니다 하지만 이제 경계 반경을 50 %로 작성하고 자동으로 그러한 그림을 반올림합니다

우리는 아직도해야 할 일을 더해야합니다 이 글꼴 크기는 맞습니까? 이것은 41px : 82/2 = 41이며, 아니 글꼴 크기 : 4,1 렘, 더있다 – 오케이 이것은 차례로 42입니다 즉, 클래스가 없으므로 class = "article-lead"입니다 글꼴 크기 : (우리가 측정 한대로) 2,1rem, 훨씬 더 좋습니다 이것 역시 Open Sans Light입니다

오픈 샌즈 라이트는 무게가 고정되어있는 방식으로 이루어집니다 – 글꼴 무게와 300은 빛입니다, 정확하게 기억한다면, 오, 네, 바뀌 었습니다 메뉴가 작동합니까? 그것은 작동 좋아, 이제는 초록색이야, 말하자면, 저자, 저자 저자명은 할 수 있고, 여기에 색은 그렇게 될 것입니다 좋습니다, 이것은 우리의 저자, ​​14px 폰트 크기, 여기 16px, 즉 글꼴 크기 : 1,4rem np, timem과 동일합니다 즉, 클래스는

article-date라고하며, 또한 날카롭게하기 위해 article-date를 사용해야합니다 그래서 그것도 font-size를 가지고 있었다 : 1,4rem 그리고, 자르십시오 여전히 점이 하나 있는데 이것도 흥미 롭습니다 좋은 질문입니다

어떻게 보이게 할 수 있겠습니까? 일반적으로, 이것은 기사의 작성 후에 tfu라는 기사 다음에 발생합니다 이것은 CSSie에서 멋지게 수행 할 수 있습니다이 작성자와 그 후,이 점을 CSS로 완전히 생성하도록 말하십시오 그리고 그것이 바로 이것입니다 이전에, 물론, 나는이 기록을 발견 했으므로 나는 여기서 기억하지 않는다

이것은 바로 그런 점의 기록임을 의미합니다 봐요 – 나타 났지만 아래에 나타나야합니다 그래서 당신은 디스플레이를 할 수 있습니다 : 블록을 새로운 행으로 떨어 뜨리십시오 – 아, 여기 있습니다 글쎄, 그녀는 녹색이 아니 어야지, 백인 괜찮아요 아마 여기있을 겁니다, 조금 더 크게 할 수있을 겁니다

font size : 2rem, 글쎄, 조금 더 크지 만, 여기서 가장 중요한 것은 무엇입니까? 그것은 모두 너무 혼란스럽게 배열되어 있습니다 맞습니까? 섹션 사이의 여백은 완전히 무작위로 설정되며, 그리고 나는 그것을 원할 것이다 – 내가이 마진 등을 측정하기 전에, 나는 그것이 모두 유연 해지기를 바란다 flex처럼 CSS flexbox가 이들 요소가 어떻게 heirer에있을 것인지 처리합니다 예, 교육 등을 위해서 flex에서이 모든 것을 수행 할 수도 있습니다

글쎄, 나는 그런 식으로 뭔가를했다 : 플렉스, 그리고 봐, 그것은 모두 서로 옆에 세워져있다 플렉스의 방향을 바꿀 수 있고 플렉스 방향을 지정할 수 있습니다 : column 그리고 지금, 모든 것이 다른 것의 아래에 하나씩 겹쳐졌습니다 그럼 여기서 뭘 할게 좋을까? 이 요소들이 어떻게 성장할 것인지, flex가 어떻게이 전체 헤더의 공간을 여기에서 나눌 것인지, 얼마나 많은 제목이 걸리는지, 얼마만큼의 자막을 가져야하는지, 얼마나 많은 항목을 가져야하는지, 그래서 우리는 모두 비례 적으로 1 : 1이되도록 설정합니다 각 요소가 동일하지 않다는 의미에서, 이 시점에서 아무 것도 변하지 않았습니다 마치 어떤 요소가 더 많은 공간을 원한다면 어떻게 될지 알려주는 것처럼 말입니다

그리고이 모든 것을 여기에 설정하는 것이 좋을 것입니다이 모든 크기, 거리감은 의미에서, 그리고 그것은, 잘, 내가 여기까지 준비 했으므로, 제목은 패딩 아래쪽에있다 : 24px, 그런 거리는있다, 차례 차례로이지도에는 패딩 바닥이있다 : 44px 아,이 부분은 많이 바뀌었지만이 플렉스에서는 여전히 중요한 부분입니다 이것이 항상 마진이기 때문에 사실,이 마진은 말하자면 크기와 거리가 변하기 때문에 여기를 0으로 설정합시다 아, 이제 패딩 거리가 있습니다 다음은 무엇입니까? 다음으로, 우리는 여기서 이러한 것들을 돌봐야 만합니다 – 뭔가 잘못되었습니다 – 기사 작성자도 있습니다

마진이 있습니다, 당신은 그들을 재설정해야합니다 – O를 음, 여기 거리는 항상 동일합니다 또한 이전에했던 일을 봅니다 그런 속임수 시트, 그래서 많은 시간이 걸릴 것이기 때문에 여기 등에서 살지 않는 것에 대해 실례합니다

예,이 그림이 아직 너무 멀다고 생각합니다 이 사진의 여백을 25px로 지정하겠습니다 오, 괜찮아 그 밖의 무엇을 바꿀 수 있습니까? 아니면 헤더에 패딩이 있는지 등을 확인합니다 여기에 모든 것이 복잡합니까? 그리고 테두리 상자가 없습니다

다시 한 번 보겠습니다 나는 의도적으로이 경계 상자를주지 않았다 왜냐하면 거기에는 논쟁이 있기 때문에, 말하자면 나는 그것을 필요로 할 때 나는 경계 상자를 사용하고 싶다 다시 필요할 것이기 때문에 60도 필요하다 그렇지 않으면이 패딩,이 패딩은 조금 더 길게 전체 섹션, 그런 다음 어쩌면 테두리 상자와 상자 크기를 지정해 보겠습니다

좋아요 헤더에 모든 것을 추가했는지 계속 확인하고 있습니다 기껏해야 우리는 나중에 그것을 점검 할 것이다 나는 그 대화를 보게 될 것이다 오두막집에서의 온 – 톱 채팅

그래서 우린 아마 멀어 질거야 메뉴가 열립니다 좋아, 이제 텍스트 – 텍스트가, 무엇보다도 왼쪽, 오른쪽 등에서 어떤 거리가없는 것 나는 내 패딩과 함께 그것을 어떻게 여기에서 할 수 있 었는가? 오, 여기는 우리 기사이고, 그는 여기를보아야합니다 왼쪽과 오른쪽에 약간의 들여 쓰기, 일부 여유 공간이 있지만 일반적인 선택기를 작성하고 싶지는 않습니다

"이봐, 각 기사에 대해 약간의 여백 설정" 어쩌면이 단락을 여기에 넣어 보자 (더 많은 것들이 있다면 여기에), 여기에 놓자 그리고 이것을 위해 용기 컨테이너는 패딩을 설정했다 패딩은 무엇입니까? 15px – o, is 폰타의 크기는 여기에서이 거리 정도입니다 보세요 – 여기에는 아무것도 없어요

어떻게 해야할지 괜찮아요 기사에 여백이 있고, 안쪽 여백이 있으므로 위의 여백은 82px가됩니다

우리는 더 나아가, 선 높이 여기,이 높이는, 선 사이에 매우 큰 공간이 있습니다 이는 항상 52/2, 즉 26 픽셀 선 높이이며, 이것에 우리는 기사 – 컨테이너에 대해 설정할 수 있습니다, 거기에 26 – 오, 이제 더 좋아 보인다 우리는 지금 마진을 삭제할 수도 있습니다

아마도 위부터 만 가능할 것입니다 다음은 무엇입니까? 그런 컷씬이 있고 거기에 간간이있다 글쎄, 당신은 그것을 다르게 할 수있다, 나는 그것을 CSSem으로 예를 들면 할 것이다 그리고 나에게 말하게해라, 이것, 이것을 제쳐두고 여기에 그렇게 국경을 가라 또한 border-bottom, 즉 나는

article-sidebar에 들어간다, 나는 여기에 사이드 바를 가지고있다 음, 어쩌면 시작과 경계면에서 : 1px solid, okay 좋아, 여기 아래쪽에서 이쪽으로, 나는 그것을 직접 측정했는데, 즉 padding-top : 82px, 패딩 : 하단 : 82px, 다른 방법으로 마진이 나타났습니다 : 위쪽에서 104 픽셀, 아래쪽에서 마진 – 아래쪽 : 104 픽셀 저기, 이미이 공간이 있긴하지만, 여기에 패딩이 없다 컨테이너에 대해 여기에 설정 한 것과 동일한 패딩을 사용하면 사이드 바에 대해 설정할 가치가 있습니다 글쎄, 그것입니다 기사 – 사이드 바, 움직여 보겠습니다

이 두 선택자를합시다 이제이 두 요소에 대한 패딩은 15 픽셀이됩니다 그건 그렇고, 뭔가가 덮어 씌여 졌어, 어쩌면 내가 옮길거야 오 어떻게 보았는지 알게 될거야

그리고 지금은이 라인이 넓다는 문제도 있습니다 지금까지 작은 어린이 침대, 나는 모든 것을 전에처럼 보이기를 바란다 나는 아직도 여기있다, 내가 무엇을 할 수 있냐? 그것은 왼쪽에서 오른쪽으로 전체 라인이 될 것입니다, 거기에 어떤 것이 있어야합니다, 약간의 공간이 있어야합니다, 어쩌면 내가 할 수 있을지도 모르지만, 그게 아니야, 그건 제쳐두고 네, 그렇습니다

그리고 이것은 상자 크기 조정이 전역에 설정된 이유에 대한 이상적인 예이기도합니다 상자 크기를 설정하는 것을 잊었으며 이제 패딩이 전체 컨테이너를 각면에 추가 15px로 확장했습니다 국경 상자를 말하자면 무엇을해야할까요? 글쎄, 그리고 기본적으로 현재 최대 폭입니다 또는 아마이 번호를 사용할 것입니다 : 100 %에서 30px까지 – 오, 이것이 최고 일 것입니다 30px는 왼쪽과 오른쪽의 여백 값의 합계입니다

여기서 설정되며 전체 사이드 바의 너비를 100 %로 설정합니다 그래서 30px는 합계이고 모든 것이 가운데에 놓이기를 원하기 때문에 다음과 같이 씁니다 : max-width 여기 계산은 매우 영리합니다 IE10, IE9, IE9에서 대부분의 브라우저에서 작동합니다 아 – 아홉 살, 전체적으로, 배경 위치뿐 아니라 흥미로운 것 뭐라구? 그리고 margin-auto는 모든 것을 중심에두고, 자식이다 그리고 나머지는 텍스트와 함께 컨테이너에 대해서도 동일한 작업을 수행해야합니다

예를 들어, 데스크톱으로 갈 때 유용 할 것입니다 좋습니다 아직도 패딩, 단락의 여백, 말 : 35px 네, 기사 사이드 바 p, 기사 ​​컨테이너 p, 여백 하단 : 35px 물론 이것은 더 많이 행해질 수 있습니다 그래서 의도적으로 말하면서, 제가 여기에 논리를 가지고있는 것처럼 복제하고 있기 때문에, 여기 어딘가에 줄 수 있습니다 : div class = article-content 그리고 그것을 모두 넣어 라 오 이제 필자는 기사 – 컨텐츠 p를 쓸 수 있습니다 그러면이 셀렉터를 다시 변경할 필요가 없습니다 좋아, 이제 남은 건 뭐지? 그리고이 그림은 이상하게 보입니다

여기서 무슨 일이 일어 났습니까? 오, 그 그림에는 이상한 여백이 있습니다 어디입니까? 어쩌면 그곳에 명령이 있었을지도 몰라 오,이 서명을 선명하게하기 위해 아직 여기 있습니다, 그것은이 요소 일 것입니다, 자막을 저장하자 그러면 그 색상이 될 것이고 글꼴은 기울임 꼴이 될 것이다 글꼴 스타일 : 기울임 꼴 물론, 여기에는 수업이 없으며 어떻게 든 센터를 배치 할 수 있습니다

그것을 중심에 두는 방법? 텍스트 정렬 : 가운데 오, 여기도 좀 쉬어야 해 20px 마진, 오늘의 모습보기 괜찮아요 그냥이 휴식을 취하겠습니다 블록을 설정하지 않으면이 서명과 그림 사이의 작은 차이가 있습니다 그 이유는 이미지가 완전히 다른 디스플레이 모드를 가지고 있기 때문입니다

이것이 바로이 흰색의 여유 공간, 즉 정말로 어딘가에 들어가거나 HTML의 코드에 직접 쓰여진 공간입니다 오, 아마 여기에이 하얀 표지가 있겠지? 그러나 무엇이든 블록을 설정해야하며 블록을 설정할 수 있습니다 실생활에 틀린이 순간 이제이 이미지에 약간의 여백이 생기면 20px가 있고 괜찮습니다

그리고 지금이 모든 수치는 70px 마진 아래에 있어야합니다 좋아, 나는 조금 더 빨리 뛰어날거야 우리가 2 시간을 준비했기 때문이야 아마 우리가있는 곳에서 볼 때 약 30 분 정도 연장 될 것입니다 그러나 나는 가속화 될 것이고, 아마도 세부 사항 등에서는 어떤 것들을 놓칠 것이고, 또 여기 실례합니다

전체적으로, 나는 이미 나쁘게 구현했다는 것을 이미 알아 챘다 왜냐하면이 공간 (여기 왼쪽)이 여기와 같기 때문이다 그래서 여기에 더 많은 패딩이있는 이유는 무엇입니까? 오, 아마도 뭔가 – 아,이 패딩 왼쪽으로 가져 가자 오, 그렇게해야합니다 그래서, 기사 – 사이드 바, 여기 padding-left를 주어야합니다 : 0과 padding-right : 0 ] 그리고이 시점에서이 분배 자,이 경계는 괜찮습니다

그리고이 패딩은 잘 정해져 있습니다 마치 옆으로, 우리 기사가 더 깊게 가지 않았던 것처럼, 일정한 패딩 왼쪽과 오른쪽이있다 – 여기와 여기 좋아요, 이제는 꼬리말입니다 바닥 글은 여기에 있습니다 물론 페이지 바닥 글과 클래스 = 탐색 메뉴 설정 뭐라구? page – 바닥 글; 클래스 = 탐색 메뉴 그리고 우리는 똑같은 일을합니다

우리는 각 요소에 대해 이러한 점을 필요로하지 않습니다 여백, 패딩, 우리는 아직도 무엇을 필요로합니까? 이 요소들 각각은 디스플레이를 가지고있는 것과 같습니다 : 블록 리, 여기 설계 상으로는 하나가 다른 것보다 아래에 설정되어 있기 때문입니다 그래서 display : block을 설정하고, 오하지만 전에 오, 그래, 하나님, 기본적으로, 물론, 그것은 기본값입니다, 다른 하나 아래에 표시하는 방법 아마도이 전시물 : 우리가 사용할 필요가있는 표지판 – 나는 즉시 볼 것입니다 당신은 그것을 중심에 두어야 할 것입니다 아마도 모든 내용이 중심에 위치한다는 것을 볼 수 있습니다

전체 페이지 바닥 글을 텍스트 맞춤으로 지정하십시오 : center, text, okay 그리고 지금 나는 링크를 위해이 초록색을 주어야한다 그리고 물론 나는 밑줄과 약간의 여백을 제거합니다 보기 때문에, 그들은 몹시 짜내는 : 마진 바닥 : 35px, 오, 좋아 그리고 무엇보다도, 배경을 설정해야합니다, 여기에 배경이 있습니다 배경색, 아마 그렇지 않을거야, 알았어 나쁘게 복사 됐어, 알았어

그리고 전체 메뉴로 설정하고 전체 바닥 글에 넣고 싶습니다 그래서 움직입니다, 오, 지금은 모든 것이 있습니다 여기 아래에 몇 가지가 있습니다 – 오,이 여백을보십시오, 이것이 디자인의 것입니다, class = copyright 할 수있다 글쎄, 바닥 글 – page-footercopyright; margin : 0, 괜찮아

음, 그동안이 전체 꼬리말에는 아래에서 위로부터 패딩 등이 있으며, 그 사이에 나는 등을 측정합니다 74px, 48px, 좋아, 좋아 색상, 그리고 저작권을 찾는 것이 좋을 것입니다 이것은 사본 표시입니다 o – 로고가 이제 건너 뜁니다

아니면 그냥 온통 svg를 붙여 넣을거야 물론, 내 방법은 너무 약해서 필자는 그러한 큰 영역의 텍스트를 붙여야 만합니다 로고를 보여 주기만하면되지만, 로고에 링크하고 별도의 파일로 연결할 수도 있습니다 (예 : 어디 보자, 알았어 흰 색이야 회색으로 할 수업을 여기에 내 보자

예를 들어 회사 로고가됩니다 이제 page-footer company-logo fill을 사용하고 여기에 색상을 지정해 보겠습니다 오 예, 조금 너무 넓습니다 : 105, 좋아요

55px와 같이이 공간을 계획하는 것이 좋을 것입니다 어떻게 생겼습니까? 오, 마지막 하나가 너무 많아, 알았어 그것은 우리가 필요로하는 것 중 가장 먼저, 모든 요소 li가 35 마진 아래에있는 것을 원하지 않습니다 또는 마지막 자식 마진 : 0, 그래서 우리는 마지막 하나를 리셋합니다 – o 이제는 여기에 아주 가깝습니다

그리고 어쩌면 전체 목록을 단순히 탐색 메뉴, 여백 하단을 보자 : 55px 아, 그러면 어떻게되어야할까요 Okej, 모바일 장치 용 버전입니다 2 시간 안에 들어갈 수 있습니다 계속 데스크톱을 계속 사용하고 싶은지 궁금합니다 바탕 화면에 대한 순간을 어떻게 보는지 보겠습니다

선호도가 있거나 끝내기를 원한다면 계속 채팅에 글을 씁니다 그 동안 그 모습이 보일거야, 알았어, 알았어 꽤 잘, 그것은 우리가 가지고있는 시간을 사용하여 오늘 할 수 있다고 생각합니다 기본적으로 15 분을 말하자 알았어

하지만 모바일 버전을 살펴볼거야 알았어 마치 거기에서 창조하는 과정이 2 시간 동안 지속되지 않는 것처럼, 그것은 또한 훨씬 더 긴 과정입니다 나는 개념에 그것을 보여주고 싶다, 나는 어딘가에서 잃어버린 것이었고, 디테일링에 관해서는 약간의 세부 사항이 있다고 확신한다 약간의 거리는 여전히 어딘가에서 교정되어야하지만, 당신은 이미이 감각이 보존되어 있음을 보았습니다

이제 데스크톱에 집중하겠습니다 우리는 데스크톱 용 모바일 버전을 만들었습니다 데스크톱 디자인이 어떤 모습인지, 특히 데스크톱에서 보자 메뉴이고, 항상 눈에 보이는 햄버거가 있으니 좋습니다, 그래서 미디어 쿼리를 쓰고 있습니다 40보다 큰 너비의 무언가를 만들고 싶습니다 아마도 640px이고 왜 emy입니까? 나는이 "breakpoints"와 같은 멋진 기사를 읽었다 오, 이건,이 기사를 읽는 것을 추천합니다

왜 우리는 브레이크 포인트가 마음에 드는지, 그는 여기에 모든 것을 설명합니다 일반적으로 픽셀이이 사이트에서 설정되는 방법에 대한 것이고 효과는 한 지점 (주어진 중단 점의 경우)에있었습니다 다른 한편으로는, 그들은 설치되었다, 모두는 이런 식으로, 정확하게 표시되었다 그래서 우리는 일반적으로 폰트의 크기 등에 의존합니다 또한 여기에 마지막 두 항목이 적합하지 않은 것으로 판명되었습니다 결과적으로 픽셀의 고장이 효과적이지 않고 emy를 기반으로하는 중단 점이 있으면 효과적으로 메뉴를 표시합니다

뭐라구? 그리고 우선, 햄버거 대신이 메뉴를 보여 드리겠습니다 이 중단 점이 작동하는지 확인합니다 – 배경 : 빨간색, 괜찮아요 그리고 여기, 아니, 괜찮아 음, 우선, 햄버거를 숨기 자구 – 페이지 탐색

햄버거 햄버거는 어디 있니? 오, 여기에 복사해서 바탕 화면 버전의 햄버거를 숨기고 640px보다 큰 디스플레이 버전을 숨기려고합니다 글쎄, 같이 가자 나는 햄버거를 숨 깁니다 – 전시 : none 좋아, 햄버거가 없지만 메뉴도 없으니이 메뉴를 보여줘야 해 그리고 우리는 무엇을 할 수 있습니까?

page-nav navigation-menu, 이것이 메뉴이기 때문에 display : none, o, let 's show – display : block 글쎄, 그건 정말 약해서, 말하자면, 우리는 그 모습을 원하지 않는다 우리는 이것을 이렇게 보이기를 원합니다 그래서 그것은 무엇보다도 한 줄에있을 것입니다 글쎄, 우리는이 모든 요소들 li을 가져와 디스플레이를 설정합니다 : 인라인 블록, 물론, 서로 옆에 이러한 요소를 설정하기위한 많은 옵션이 있습니다

아마 flexbox가 작동 할 것이고, 나는 인라인 블록을 선택했습니다 하지만 아마 Flexbox로 무엇이든 볼 것입니다 그는 항상 여기있어,이 페이지 – nav을 설정하려고 할 수도 있습니다; 위치 : 절대; 상단 : 20px; 오른쪽 : 20px 좋아, 여기 어딘가에 갔어 항상 국경이있어 0 – 나는 그들을 제거했다

이것의 색, 즉 흰색, 즉 색 : 흰색, 이 여백들 각각은 서로 분리되어 있으며, 이들 요소들 각각은, 그래서 그것은 margin-right 일 것이다 : 48px, 오, 그것은 이미 훨씬 더 좋다 여기에 무엇을 추가 하시겠습니까? 어떻게 보이는지 보자, 알았어 이 등록은 아마 불필요하게 마진을 가지고 있습니다 여기에서 우리가 할 수있는 마지막 아이는 없습니다 사인 업 (sign up)에 의존하지 않기 때문에 마진 : 0, 괜찮아

오, 멋지다 멋지다 그리고 거기에 무엇이 있으며 재미있는 것은 무엇입니까? 이 위에서 아래까지의 거리는 제가 확인한 것과 약간 다릅니다 나는 실수하지 않았 으면 좋겠다 그래서 이것은 30px입니다

그래서 우리는 HTML로 코드를 작성하는 순서를 유지하기 위해 여기에 페이지 머리글을 씁니다 페이지 머리글에는 패딩 윗부분이 있습니다 30px, 글쎄, 아무것도 변경되지 않았습니다 어쩌면 내가 전에 설정 한거야? 오, 28px입니다 오케이, 기본적으로 말이 아닙니다, 알았습니다

어쩌면 빠른 측정 문제 일 수도 있습니다 여기에 또 뭐야 ? 오,이 페이지를 확장하지는 않지만, 여기 펼쳐져 있습니다

디자인에서,이 디자인은 아무데도, 2040px, 그래서이 디자인의 너비는 2040/2 = 1020으로 나누는 두 가지입니다 이것은 제가 망막을 생각 나게하는 프로젝트입니다 우리는 여기에서 그런 헤더의 최대 너비를 할 수 있습니다 1020이되게합시다, 좋습니다 그러나 이제 우리는이 한계를 1020으로 보았습니다

바로 그 것입니다 만, 모든 것이 왼쪽에 있으므로, 모든 것을 집중시키는 것이 좋을 것입니다 나는 마진을한다 : 차, 새로 고침과 아무것도 일어나지 않는다, 왜 아무 일도 일어나지 않는가? 페이지 머리글이기 때문에, 그는 여기에 위치합니다 : 절대적이고 불행히도 당신은 여전히 ​​그를 왼쪽으로 0과 오른쪽으로 설정해야합니다 : 0, 그렇게 똑똑하게 중심에 둘 것입니다 그리고 나는 그것을 여기에 쓰고, 모든 것은 괜찮아요, 이제는 내용을위한 시간입니다 똑같은 일을 해봅시다 너비를 1020 픽셀로 만들고 전체 창 너비 밖으로 펼치지 말고, 그래서? 우리는 여기에 같은 기사 내용을 가지고 있습니다

예를 들어 최대 너비를 너무 많이 할 수 있습니다 무슨 일이 일어날 지 궁금합니다 여백 : 자동차, O – 모든 것이이 시점에서 중심에있다 또 다른 점은 이러한 모바일 버전과 데스크톱 버전의 차이점은 무엇입니까? 모바일에서 모든 것을 볼 수 있습니다 바탕 화면에있는 반면, 거기에 열 레이아웃이며, 일반적인 역사와 함께, 당신은 적어도 세 가지 방법으로 그것을 할 수 있기 때문에, 또는 네 가지, 이상, 그리고 두 가지를 제시 할 것입니다

첫 번째는 CSS 열을 사용하는 것으로, caniusecom에서 어떻게 보이는지 알 수 있습니다 CSS의 열은 텍스트를 열로 나누기 위해 작성되었으므로이 모양은 매우 합리적으로 보입니다 기껏해야 접두어를 사용해야하므로 어쩌면 시도해보십시오 우리는이 컨테이너를 원하기 때문에 모든 것을 열로 나타내려고합니다

글쎄 webkit-column-count는 2이고, 웹킷이 아니라면 물론 모질라를 잊어 버렸을 것입니다 물론 오, 이봐 요, 본문은 칼럼으로 나뉘어져 있습니다

여기, 그동안 불행하게도이 헤더는 불행하게도 여기에서 사라졌습니다 이 시점에서 당신은 무엇을 할 수 있습니까? 이 헤더는 열 레이아웃에 포함되면 안됩니다

따라서 컨테이너 파일의이 요소에 CSSu 열을 설정하는 것은 그렇게하지 않습니다 양자 택일로, 우리는 그것을 할 수 있습니다 어떻게이 일을 할 수 있습니까? 당신은 이런 식으로 할 수 있습니다 – h3 조금 이동, 오 예 또는 아니오입니까? 무슨 일이 있었는지 보자

여기 무슨 일 있었 니? 기사 컨테이너에는이 패딩이 있습니다이 패딩은 아직 모바일 버전에서 제공되므로,이 패딩을 제거하십시오 오, 이제 훨씬 좋아 보입니다 글쎄,이 열은 CSS 열을 사용하는 것과 같지만 여전히 다르게 할 수 있습니다 너는 그것을 할 수있다, 보라, 나는 그것을 여기에서 할 것이다, 나는이 칼럼 – 카운트를 제거하고있다 그래서 우리는 헤어졌다 그리고 저는 디스플레이합니다 : flex and voilà,이 텍스트를 자동으로 열보기로 설정합니다

그래서 이것은 볼 일입니다 flex 또는 CSS 열을 사용하고 싶습니까? 우리가 한 요소, 한 단락, 그는 칼럼에 넣지 않을 것이다 이것이이 솔루션의 단점이기 때문에 우리는 CSS 컬럼을 그 순간 만 남겨 둘 것입니다 누군가 플렉스를 실험하고 싶다면, display : flex를 설정할 수도 있고 나머지 매개 변수를 처리 할 필요가 없습니다 말하자면 두 개의 기둥으로 설정 될 것입니다

좋아 우리가 아직 여기에 뭐가 있니? 이 사이드 바의 크기는 680 픽셀이며, 평소와 같이 두 개로 나뉩니다 나는 눈금자에서 1360 픽셀로 측정했지만, 2 픽셀, 즉 680 픽셀에서 최대 너비를 제외하고 설정해야합니다 나는 그것을 어떻게 할 것이냐? 최대 너비 : 680px, o 글쎄, 그리고 여기서 일하는 것이 있다면, 다시 쓰겠습니다 데스크톱과 태블릿을위한 미디어 쿼리입니다

이 파탄이 작기 때문에, 즉, 나는 그 행사에서 여전히 태블릿을 가져갈 것이고 그것은 기사 – 사이드 바일 것이다 최대 너비 : 680px 좋아요 그런데 여기 뭔가가 그 마진을 깨뜨린 것을 보았습니다 그것은 디자인 버전에서 다르게 보입니다 여기 무엇이 고장 났는가? 오,이 패딩이 내 비행기를 망가 뜨 렸어

padding-left : 0, padding-right, 그래서 위의 그림을 망치지 않습니다 여기 서커스가 생겼어 글쎄요, 아마도 기사 컨테이너 일 것입니다, 저기에 마진이 있다고합시다 : 40px, yes, 160, margin-bottom : 80px, 좋아요 아, 모든게 효과가있는 것 같습니다 확실하게 fakapa가 있기 때문에 확실히해야 할 일이 있습니다

무엇보다이 선의 문제,이 회색 경계, 보시다시피 – 이런 식의 디자인입니다 여기서 무슨 일이 일어날 수 있니? 글쎄, 아마 우리가 할 수 있을지도 모르지만 최대 너비를 다운로드 한 것처럼 최대 너비로 만들었습니다 그런 다음, 뭔가 잘못되었습니다 오, 약간의 여백, 여백 : 0 이봐 요, 괜찮아요, 패딩을 한 것처럼 패딩을 할 수 있습니다 왼쪽 : 100px 및 패딩 오른쪽 : 100px, 아니요 예 전체를 중앙에 배치해야하며 전체 요소의 너비를 100 %로 유지해야합니다

센터 안의 모든 것 650, 680px, 그럼 아마도 스타일링의 목적을 위해 여기에 컨테이너를 설정할 것입니다 그런 빠른 샷 – 사이드 바 콘텐츠 여기에있는 모든 것들을 넣었습니다 좋아요 사이드 바 – 내용에는이 요소와 여백이 있습니다 자동차, 오,이 사이드 바는 왼쪽 및 오른쪽 여백을 제거하도록되어있었습니다

오키, 잘 됐어 글쎄, 알았어 조금만 보라 왜 내가 flex를 입혔는지 이미 생각 나게하는구나 마치이 헤더가 가운데에있는 것처럼, 말하자면, 예를 들어 아래로 중심에 있지 않습니다

여기에서 위쪽에서 아래쪽으로 약간의 공간이 있음을 확인하십시오 나는이 모든 요소들을 영리하게 원했다 즉 전체 기사 머리글, 아래로 위치 내가 성공할 것인지 말 것인지 궁금해 그것을하는 방법, 나는 그것을 직접 볼 것이다, aha 우리는 여전히 약간의 패딩을 바꾸어야 할 것 같습니다 예, 그렇습니다

이 머리말은 여전히 ​​남아 있고, 약간의 패딩을 시작했습니다 우리가 여기서 패딩을했다면, 그러나 우리는 flex를 사용하지 않을 것입니다 어쩌면 다른 시간, 이 요소들을 어떻게 배열 할 수 있는지를보기 위해, 하지만 우리가 여기서 패딩을하는 것처럼, 오, 훨씬 나아질거야 글쎄, 아직도 이걸 여기에 넣어야 해 좋아, 그게 첫째로, 기사의 헤더에 패딩을 설정합니다

패딩 상단 : 200 픽셀 및 패딩 하단 : 92 픽셀, 괜찮아요 이제는 작은 부정확성이 있습니다 예,이 리드는 다릅니다 이 리드에도 기사 리드에는 패딩 하단이 있습니다 바탕 화면에 65px가 있습니다

오 이런 식입니다 오, 그리고이 공간은 아마도 여기 조금 작을 것입니다 하지만 어쩌면 이번이 다음 번입니다 왜냐하면 우리가 이미 시야에서 2 시간 20 분이라는 것을 알기 때문입니다 좋은,이 디자인의 기본 버전에 관해서는 충분할 것입니다

당신은 아직도 많은 것을 바꿔야합니다 나는 플러그 – 인을 연습하고 피하기 위해 더 많거나 적게 구현했습니다 반면에 아직해야 할 일은 무엇입니까? 이 메뉴를 수행하고, 애니메이션을 만들고, 불투명하게 만들었습니다 나는이 메뉴의 투명성을 여기에 설정했다 또한 전체 헤더로의 전환을 설정합니다 오, 여기를보십시오 나는 배경을위한 전환을한다

기회의 상자 그림자를 위해, 그래서이 상자 그림자는 우리를 떠나지 않을 것이고 몇 가지 것들, 나는 여기서하고 있다고 생각합니다 글쎄, 나는 불투명도를 설정했다 닫힌 경우 0으로 불투명합니다 그리고 포인터 이벤트 등을 설정해야합니다 그래서 우리는 불투명도를 0으로 설정하지만, 종종 요소가되기 때문에, 볼 수없는 경우에도 항상 클릭 가능합니다

표시 : 여기 아무도 완전히 숨겼습니다 클릭 할 수 없기 때문에 불투명도가 0 일 때 포인터 이벤트 같은 것을 설정해야합니다 모든 마우스 이벤트가이 요소에 적용되지 않습니다 page-nav ul 그리고 무엇보다도 아리아는 여기에 아리아 레이블, 확장, 컨트롤 등 많은 예술을 추가했습니다 어딘가에 숨겨져 있거나 사용자가 클릭 한 물건을 가지고 있다면주의를 기울이는 것이 매우 중요합니다

당신이 사용해야만하는 그런 속성이 몇 가지 있습니다 그런 훌륭한 기사를 사용했습니다 진보적 인 햄버거 같은 것이 있습니다 이 유형의 작업을 수행하는 방법에 대한 전체 설명을 볼 수 있습니다 어쩌면 다음 녹음을위한 좋은 주제 일지 모르지만, 아마도 지금은 30 분 정도 걸릴 것입니다

소스의 가용성은 위젯에 매우 중요하지만, 말하자면, 어딘가에 대화 형이 있습니다 우리가 그 밖에 무엇을 할 것이냐? 그게 내가 어떻게 보이는지, 우리가 코드를 확인했는지, 나는 손가락에서, 기억에서, 그리고 직관, 우리가 가진 코드는 당신은 아마도 아직 정리해야 할 것입니다, 여기 많은 것들이 청소해야합니다, 그래서 항상이 첫 번째 코딩 후에, 당신은 단지 잠에 가서 잠잠한 후에 돌아옵니다 그리고 뭔가 더 잘 할 수 있다면 그냥 신선하게 확인합니다 맞습니까? 아니면 div가 너무 많을 수도 있습니다 나는 아마도이 수업을 다르게 부르면 좋겠다

기사 – 컨테이너 어쩌면, 같은 열보기, 또는 이것이 열보기를 만드는 div 일뿐입니다 누구나 생각할 수도 있고, 무엇보다도 생각할 수 있습니다 생각할 것은 문서의 개요 또는이 의미론입니다 내가 다시 돌아가고 싶었던 것 – h1에,보기, 나는 나의 개요를 점검한다 그리고 나는 무엇인가 원한다

독자, 검색 엔진, 독자는 이런 식으로 배열 된 문서의 구조를보고, 첫 번째 학위 표제가 없습니다 제목없는 섹션이 있습니다 좋아, 이건 우리 기사의 제목이야 다시 제목없는 섹션이 있으며 모든 제목을이 방법으로 보완해야합니다 이 모든 것이 의미가있을 것입니다

예를 들어 여기에 h1이라는 이름을 이미 지정할 수 있습니다 마치 "기능 – 회사 웹 사이트"를 모르는 것처럼, 이것이 h1이 될 것입니다 내가 아웃 라이너를 다시 확인하면 괜찮아 질거야 다음으로 제목없는 섹션이 있습니다이 섹션은 모두 소위 말하는 이러한 요소를 말합니다

우리가 사용한 절개 도구들 중 하나는 nav 우리가 h2로 이동하고 "사이트 탐색"을하면 오, 그러면 모든 것이 알려 졌음을 알 수 있습니까? 이 웹 사이트로 나뉘는 섹션 그래서 우리는 : 주요 헤드 라인, 즉, 우리 회사의 개요 인 Functionite, 그리고 네비게이션, 즉 네비게이션이 있으며, 그 다음에는 기사가 있습니다 기사 안에는 제목없는 섹션이 하나 더 있습니다이 섹션은 제쳐두고, 그렇지 않습니까? 그녀는 여기에 헤드 라인이 있어야합니다 예, 그녀는 h2에 있어야합니다 즉, h2가 있어야합니다

즉, 일부는 마치 침입이 기사 자체를 참조하는 것처럼, 그러나 조금 덜 중요합니다 아마도 "숲에 관한 것"일 것입니다 왜냐하면 어떤 종류의 것이 있기 때문에, 어떤 숲이 있습니다 글쎄, 우리가 어떻게 확인합니까, 아 – ​​개략은 이미 수리 됐습니다, 그렇죠? 그리고 그것이 여러분이 글을 쓰는 방법이며, 여러분이 좋은 윤곽을 잡는 방법입니다 하지만 지금 보시라

어떻게이 페이지를 보시겠습니까? 오, 이제 우리가 준 헤더는 모두 보입니다 그리고 이제 당신은 단지 그것들을 숨겨야 만합니다 어떤 디스플레이 : nonem 또는 무엇인가, 그들은 브라우저에 보이지 않는 텍스트 식별자, CSS를 잘 해석하지만 다른 모든 독자들도 CSS를 처리 할 수 ​​없기 때문에 HTML을 가져 와서 독자적인 방식으로 표시합니다 이 모든 것이 손과 다리를 가질 것입니다이 사이트를 Kindel이나 그와 비슷한 곳에 넣으려면 먼저 "Functionite – company site"와 Kindel과 같은 모든 것을이 레이아웃으로 작성하십시오

글쎄, 아마도 내 버전의이 버전을 숨겨 놨을 것이다 "Functionite – / h1", page-title, 나는 그냥 숨겼다 디스플레이 및 나는 그것이 JS, 브라우저의 자바 스크립트인지 여부에 의존하게 만들었다 볼 수 있다면 여기에 JS를 활성화시키는 스크립트가있다 JS 클래스를 몸에 추가한다

시체가 맨 위에 오면, 예를 들어, "js"가 내가 여기서 한 일을 숨길 수 있다고 설명 할 수 있습니다 방법은 다음과 같습니다js

페이지 제목과 숨기기, JSem과의 sts의 경우 이러한 것들이 켜지지 않는 것처럼 또한 이것은 디자이너가 이런 유형의 일에 대비하고, 그러한 상황을위한 페이지를 디자인하고, 페이지가 독자 등에 의해 읽힐 때, 그것은 또한 매우 중요합니다 왜냐하면 그것은 또한 독자에게 잘 보이기 때문에 사용자는 잃어 버릴 수 없기 때문입니다, 맞습니까? 이 CSS가 없으므로 JS가 없으므로 탐색이 실제로 잘 수행되어야합니다 그렇습니다 그러면 충분할 것입니다, 저는 여전히 여기에 액세스 감사를 할 플러그인을 가지고 있습니다 나는 그녀가 여기 있지 않은 것을 본다

나는 왜 그런지 궁금하다 나는 그것을 설치하지 않았다 이것은이 플러그인과 비슷합니다 설치하면 이제는 감사를 입력하고 새로운 액세스 가능성 지점이 나타나면 선택을 해제하고 실행을 클릭합니다 우리가이 플러그인의 어딘가에서했던 유틸리티 테스트가있는 것처럼 여기를보세요

링크의 대비 등을 돌볼 가치가 있다고 경고합니다 초점에 문제가 있습니다 가용성에 관해서도 개선 할 수있는 많은 것들이 있습니다 너는 그것을 보지 않는다 다른 것은 또한 링크입니다, 디자이너는 원칙적으로 이것이 좋은 규칙이지만, 불행하게도 항상 그렇지는 않습니다

디자이너는 자신의 디자인을 준비해야합니다 그래서 모든 버튼 상태를 트레이에 놓고 초점을 클릭하면, 버튼이 활성화되어 있으면 여기에 없었던 모든 것들이 일어나야합니다 즉, 어떻게 생겼는지 정의하십시오 예를 들어 여기 Github에서 마우스 커서를 가리키면 버튼이 어떻게 보이는지 정의되었습니다 불행히도, 그런 것은 없습니다

그래서 여러분은이 모든 것을 돌보고 이런 식으로 여러분을 위해 준비되어 있는지 확인해야합니다 그래서 여러분은 여러분 자신의 방식으로 이런 종류의 상호 작용을 발명 할 필요가 없습니다 왜냐하면 프런트 엔드 개발자는 코드를 작성하는 반면 그래픽 디자이너는 이러한 유형의 디자인을위한 디자이너이기 때문입니다 다른 사람들이 내 말을 들으면 충분히 재미있을거야 그는 듣고있다, 오 – 아직도 사람들이있다

들어 봐요, 혹시 질문이 있으시면 어쩌면 5 분 정도의 그런 질문 세션이있을 것입니다 – 대답, 당신은 채팅방이나 댓글에서 이러한 질문을 할 수 있습니다 정확히 어떻게 작동하는지 모르겠습니다 어딘가에 코드가있는 프로젝트를 만들 수 있습니까? 내 생각에, 그래, 내가 할 수있을 것 같아 잠시 후에 기쓰 술에 던져 버릴거야 이벤트 나 그룹 "First Steps

"에 관계없이 어딘가에 링크를 제공하십시오 그게 그룹에 관한 것입니다 나는 그녀가 페이스 북에 있는지 궁금해? 그 외에 내가 무엇을 권하겠습니까? "HTML5 및 CSS3 첫 단계" 나는 당신에게 책을 추천합니다

불행히도 Chromy의 새로운 프로필에 대해 이야기하고 있습니다 불행히도 나는 이야기가 없지만, 책을 권하고 싶습니다 (모르는 경우) 모든 것이 시작된 것처럼 여기에서 의미, HTML 및 CSS에 중점을두고 기본 사항을 배울 것입니다 그러나 많은 것을 염두에 두어야합니다 누군가가 외부에서 온 경우이 그룹을 추천합니다

"HTML5 및 CSS3 – 첫 단계"여기에는 실제로 많은 사람들이 있으며 많은 사람들이 매일 질문을합니다 멋진 답변을 얻고 나 또한이 그룹을 초대합니다 나는이 질문을보고 지연이있다 의미 론적으로 맞으면 확실한가요? 일반적으로 – 보겠습니다 아마 실수를했을 수도 있습니다

"<aside> 요소는 접선 방향의 페이지를 나타냅니다 내용과 관련하여, 요소 일반적으로이 디자인이 대단히 일반적이라는 것을 알 수 있습니다 이론적으로는 나는 그것을 기사 나 광고, 또는 완전히 독립적으로 포함 된 것으로 취급했다 반면에 – 그것은 또한 섹션이 될 수 있는데, 일반적으로 이것이 옆에있는 기사와 관련이 있다면 그래서 우리는 섹션을 사용할 수 있습니다 중간에있는이 모든 컨텐츠가 여기에있는 것과 관련되지 않는다면 우리는 사용할 수 있습니다 그렇게 좋았던 것처럼 – 경계심을 가져 주셔서 감사합니다 설명이 필요했습니다

글쎄, 그건 해석의 문제 야 그래서 큰 실수가 없기를 바란다 그러나, 당신이 볼 수 있습니다, 여기에 설명되어 있습니다, 당신은 어떻게 그것이 W3C에서 문서를 볼 수 있습니다 음, 대체로 사이드 바 맞지? 나는 이것을 사이드 바 (sidebar)로 취급 했으므로 이것이 나의 해석이다 나는 코멘트를 읽는다 좋아, 너에게 즐거운 저녁 되길 바란다

내가 마지막으로 그랬 으면 좋겠다 그리고 그것은 당신에게 흥미 롭다고 오늘, 목이 많이 아파서 25 시간은 나를위한 엄청난 영웅적 노력입니다 그래서 다시와 줘서 고마워 당신은이 방송을 보았고 우리는 그것을 보았습니다

나는 당신이 채팅에서 쓴 것을보고 매우 기뻐할 것입니다 그것이 떨어지는 방법 등등과 우리는 볼 것이다, 아마 다음 에피소드가 곧있을 것이다, 이 일이나 다른 일로 감사합니다, 좋은 저녁, 당분간

Dreamweaver CC 2018 – Introduction to responsive web design

안녕하세요, 제 이름은 댄 스콧입니다 이 비디오에서 우리는 웹 영웅에서 웹 영웅으로 당신을 돌릴 것입니다

Dreamweaver를 사용하여 가장 반응이 빠른 웹 페이지를 구축하십시오 이제이 자습서를 완벽하게 따라갈 수 있습니다 운동 파일을 다운로드하면됩니다

설명 아래에 링크가 있으며 무료로 다운로드 할 수 있습니다 가서 비디오를 일시 중지하고 파일을받은 다음 다시 찾아 오십시오 따라서이 튜토리얼의 목표는 현대 웹 디자인에 당신을 노출시키는 것입니다 반응 형, HTML5 및 CSS3과 같은 용어를 살펴 보겠습니다 그들은 공상에 들리지만 일단 당신이 그들을 이해하면 실제로는 꽤 쉽습니다

우리는 또한 어떻게 볼 것인가 Dreamweaver를 사용하면 매우 쉽게 작업 할 수 있습니다 사실 내가이 비디오에서 얻길 정말로 원한다면

잘하면 결국 끝에 지점에 도착하는 것입니다 네가 좋아하는 곳에서, "사실, 내가 생각했던 것만 큼 힘들지는 않다" "나는 더 많이 배우고, 배우는 것에 대해 꽤 흥분된다 내 사이트 만들기 " 이제 시작해서 일을 시작하십시오 먼저, 프로세스에 대해 이야기 해 봅시다

처음에는 웹 사이트를 먼저 디자인해야합니다 포토샵이나 일러스트 레이터 같은 무언가 당신은 여기에서 볼 수 있습니다, 나는 내 웹 사이트가 데스크톱에서와 같이 보이도록 디자인했습니다 태블릿에서의 모습과 모바일에서의 모습 당신은 볼 수 있습니다, 그들은 매우 비슷합니다 각 디자인 종류는 장치 크기를 가장 잘 사용합니다

그것은 단지 몇 가지 글꼴 크기 변경 사항입니다 다른 장치에서 보이게하기 위해 상자를 다시 정렬합니다 그리고 이것은 우리가 반응 형이라고 부르는 것입니다

그래서 웹 사이트가 모양을 바꾸고 형태를 조금 바꿀 것입니다 모바일, 태블릿 또는 데스크톱 여부에 따라 다릅니다 그래서 이것이 우리의 첫 번째 큰 의미입니다

반응 형 웹 디자인은 단지 웹 사이트가 기기를 가장 잘 사용하도록 변경됩니다 그래서 상관 없어요, 포토샵이나 일러스트 레이터 하지만 Photoshop에서 제 설계를 했었습니다

이제 이것을 번역해야합니다 이것은 우리 웹 사이트의 완성 된 버전입니다 데스크톱 용 내 포토샵 모의와 일치하는 곳

하지만 태블릿으로 내려 가면 거기에 변화가 생기고, 나는 내 브라우저를 드래그 아웃하고있다 글꼴 크기가 변경된 것을 볼 수 있습니다 열은 3에서 2로 바뀝니다 그래서 그것은 우리의 반응이라는 용어이며, 우리는 이것을 만들 것입니다 그리고 그것은 단지 1에 걸쳐서 뻗고있는 Mobile에 도착합니다 우리는 또한 당신이 그것을 알아 차릴 수있는 것들을 할 것입니다 태블릿에는 6 개가 있지만 모바일에는 4 개뿐입니다 그래서 우리는 그들 중 일부를 비활성화 할 것입니다 우리는 또한 여기에있는 메뉴를 변경하려고합니다 당신은 볼 수 있습니다, 내 Photoshop 모형, 그들은 모두 똑바로 바탕 화면에 그러나 그들은 작은 장치에서 다른 버전으로 붕괴됩니다 그래서 우리는 Responsive가 의미하는 것을 해결했습니다

우리는 우리가 무엇을 만들지를 알고 있습니다 이제 가자 그리고 건물을 짓기 시작하자 먼저 Dreamweaver를 엽니 다 처음에는 종종 몇 가지 질문을합니다 배경색을 원하는 색상이 무엇인지 당신이 디자이너 이건 개발자이든간에 그래서 당신이하고 싶은 것은이 경우에 대해 '개발자'를 선택하는 것입니다

올바른 옵션을 선택하지 않았다면 계속 진행하십시오 그런 다음 다시 변경할 수 있습니다 여기 오른쪽 상단에 '개발자'를 선택하십시오 그리고 그것은 내 것과 같이 보일 것입니다 다음으로해야 할 일은 크기를 정의하는 것입니다

그래서 '사이트', '새 사이트'로 이동하십시오 우리는 모든 새로운 웹 사이트에 대해이 작업을 수행해야합니다 그래서 만약 당신이 방금 하나를 가지고 있다면, 당신은 한번 이것을해야 할 것입니다 하지만 나 같은 사람이고 많은 웹 사이트를 구축한다면 모든 새로운 사이트를 정의해야합니다 그래서 이름을 지어주세요, 저는 제 전화를 'Roar Cycles'라고 부릅니다

우리가 일하는 회사 야 하드 드라이브가 어디에 있는지 결정해야합니다 우리는이 웹 사이트를 유지할 것입니다 왜냐하면 우리의 모든 이미지와 모든 HTML 우리가이 웹 사이트를 위해 만드는 모든 것들이이 같은 폴더에 보관되어야합니다 그래서 우리가 할 일은 '로컬 사이트'폴더로 이동하는 것입니다

이 '찾아보기'버튼을 클릭하십시오 그리고 당신은 당신 자신의 것을 만들 수 있습니다 운동 파일이 이미 있으므로 다운로드 할 수 있습니다 설명의 링크에서 다운로드 한 파일 'Responsive Exercise Files'로 가서이 폴더를 선택하십시오 조금이라도 더 깊이 들어갈 필요가 없습니다 계속 나아 가기 전에해야 할 다른 일은 '고급 설정'으로 이동합니다 여기 '기본 이미지'폴더가있는 곳으로 이동하십시오 내가 만든 이미지 폴더를 선택하십시오

직접 사이트를 만드는 경우 자신 만의 이미지 폴더가있는 폴더를 만들 수 있습니다 우리는이 과정에서 반응이 빠른 것들로 이동할 시간을 절약 할뿐입니다

'선택'을 클릭하고 '저장'을 누르십시오 그래서 일을 빠르게하기 위해 한 것은 웹 사이트를 시작한 것입니다 우리가 반응 할 수있는 부분으로 뛰어들 수 있도록 우리를 데려 가기 만하면됩니다 이제 'index1html'로가 보겠습니다

그리고 이것은 우리 페이지가 코드에서 보이는 것과 같습니다 우리는 브라우저에서 어떻게 보이는지보고 싶습니다 여기 아래쪽 아래로, 아래쪽으로 내려갑니다 '실시간 브라우저 미리보기'라는 것이 있습니다 이런 종류의 오른쪽 아이콘입니다 클릭 한 다음 'Google 크롬'을 클릭하십시오 Chrome을 설치하지 않았다면 지금 설치하고 설치하는 것이 가장 좋습니다 가장 일반적인 웹 브라우저입니다

그리고 그것은 당신이 당신의 테스트의 대부분을해야만하는 것입니다 사파리 또는 다른 기능을 사용할 수 있지만 크롬은 우리의 사람입니다 그래서 지금까지 내가 한 일이야

내 브라우저에서 로컬로 미리보기 만하면됩니다 로고,이 내비게이션 및이 큰 핑크색 상자를 추가했습니다 구조를 올바르게 얻으려면 그래서 우리는 그것이 반응하는 것을 보면서 시작할 수 있습니다 그 순간에 내가이 가장자리를 잡으면 그것은 전혀 반응이 없으며 그냥 거기 앉아 있습니다 Dreamweaver로 돌아가서 우리의 첫 번째 비트를 추가하겠습니다 우리는 헤딩에 넣을거야 우리는 어디에서 그것을 넣을 것인가? 이제 여기에 헤더가 있습니다

여기에는 내 로고와 내 탐색이 포함됩니다 그 세 개의 작은 버튼을 보시죠? 그런 다음 다른 덩어리 인 Main이 있습니다 메인은 웹 사이트의 중간 부분입니다 헤더는 일반적으로 Google 로고 및 탐색만으로 이루어집니다 그래서 메인에는 이미 내 영웅 박스가 있습니다 그리고 그것은 내가 이미 창조 한 큰 분홍색 상자입니다 이 사람이 여기 있습니다 그래서 거기에는 내 표제가 필요한 곳이 있습니다

여기서 우리는이 표제를 디자인 할 것입니다 'roarX, 지금 선주문하세요' 그래서 Heading에 넣기 위해서는 H1이라는 것을 넣을 필요가 있습니다

H1은 Heading1이고 Heading1은 페이지에서 가장 중요한 제목입니다 그래서 문법은 다음과 같이 말합니다 이 메인은 여기에 '메인'이라고 쓰여있어 이 꺽쇠 괄호 '<>'안에 있습니다 그것을 닫기위한 '/ main'이 있습니다

그래서 우리는 우리 H1을 위해 똑같은 일을 할 필요가 있습니다 그래서 꺽쇠 괄호 '<>'를 M 키로 누르십시오 'H1'을 입력 한 다음 닫습니다 여기 Main과 마찬가지로 시작 부분입니다 두 번째 부분은 같은 단어입니다

하지만 앞에는 슬래시 (/)가 있습니다 그래서 우리는 '</'를 입력 할 것입니다 도움이되는 오래된 Dreamweaver가 우리를 위해 그것을 채워 넣었습니다 이것이 Dreamweaver의 특혜 중 하나입니다 텍스트가 내부로 들어가서이 두 텍스트의 중간에 위치합니다

두 개의 태그 사이에 커서가 깜박이도록하십시오 그리고 우리는 'roarX'를 입력 할 것입니다 그것은 우리가 시작하고있는 우리 새로운 자전거의 이름입니다

그리고 우리는 '선주문'을하시기 바랍니다 또는 '지금 선주문' '저장'을 눌러 '파일', '저장'을 누르십시오 가서 실시간 브라우저 미리보기를 확인해주십시오 이제 Chrome으로 다시 돌아와서 다시 확인할 수 있습니다

그것은 자동으로 업데이트 또는 원할 경우 여기를 클릭하십시오 Chrome을 다시 클릭하십시오

어느 쪽이든, 우리의 브라우저에 가자 당신은 여기에서 볼 수 있습니다, 내 H1, 'roarX pre-order now'가 있습니다 기본적으로 검은 색이며 굵게 표시되며 특정 크기입니다 그리고 저의 친구들은 HTML의 첫 번째 비트입니다 웹 디자인을 처음 접한다면 잘하게됩니다

이것은 코딩의 첫 번째 단계입니다 다음으로해야 할 일은 기본 색상, 크기 및 글꼴을 변경하는 것입니다 포토샵에서 우리의 목업과 일치하는 것으로 이제 CSS라는 것을 배우고 배우자를 배우자 그래서 우리는 HTML이 무엇인지 배웠습니다 우리는 H1을 추가했고 텍스트를 HTML에 추가했습니다 이것은 HTML입니다 이제 스타일을 지정하기 위해 CSS라는 것을 사용합니다 여기 CSS 시트를 만들었습니다

'관련 문서'바에서 클릭하십시오 그리고 저는 이미 기본적인 것들을했습니다 내가 말했듯이, 우리가 만든 영웅의 상자

나는 그에게 높이를 주었고 나는 그 배경색에 분홍색을 주었다 이제부터 시작하기에 필요한 것들이 있습니다 지금 우리 자신의 CSS를 만들어 보겠습니다 따라서이 중괄호 밑에 'return'을 누르십시오 CSS 나 HTML에서는 반환 값이 중요하지 않습니다

당신은 그 반환을 필요로하지 않는다, 나는 다만 그 (것)들을 밖으로 조금 밖으로 나누고 싶다 그냥 당신이 쉽게 볼 수 있도록 따라서 CSS에 관해서는 따라야 할 기본 구문이 있습니다 기본적으로 여기에있는 내용을 복사 할 수 있습니다 그래서 이것이 H1이라는 이름입니다

공간이 있고, 당신은 볼 수 있습니다 시작과 끝 부분에 중괄호가 있습니다 그래서 우리가 할 일은 첫 번째 중괄호를 입력하십시오

Dreamweaver는 정말 영리합니다 너는 결코 닫히지 않고 단지 개통을 결코 가지지 않는다 그래서 그것은 당신을 위해 거기에 그것을 채 웁니다 그래서 그것은 우리를 위해 결말에 넣어졌습니다 'return'을 넣자

물건을 쓰는 것이 더 좋은 공간이기 때문에 돌아 오는 이처럼 높이와 색 구문의 첫 번째 비트, 중괄호

시작과 끝을 잊지 말고 삭제하지 마십시오 우리가 할 다음 일은 속성이라고 불리는이 CSS를 제공합니다

속성은 단지 색상과 같은 것을 제공 할 것임을 의미합니다 또는 글꼴 크기 일 수 있습니다이 속성은 모두 속성이라고합니다 당신은 거기에서 볼 수 있습니다, 나는 '공동'이라고 타이핑했고, 색깔로 미리 채웠습니다 그리고 나는 'return'을 치고, 그것이 한 것은 그것을 채우고 콜론 ':'을 추가했습니다 그래서 결장이 들어갈 필요가 있습니다

다음은 색상을 선택하는 것입니다 이제 Dreamweaver의 멋진 점은 색상 선택기가 있다는 점입니다 또는 도서관에서 선택하십시오 정말 멋집니다 그럼 '색상 선택기'를 클릭합시다

그리고 우리가 할 일은이 원을 여기 끌어다 놓는 것입니다 우리는 그것을 끌고, 우리는 색조로 놀 수 있습니다 하지만 내가 원하는 것은 왼쪽 상단 구석에 있어야한다는 것입니다

그리고 그것은 백인이 될 것입니다 그래서 그것을 위로 끌면, 우리는 흰색을 사용할 것입니다 끔찍하게 잘못되면 '#FFFFFF'라고 입력하면됩니다 그것은 흰색을 나타내는 코드입니다 이제 마지막으로, 많은 사람들이 잊어 버리는 것

그들은 CSS에 새로운 브랜드 일 때 당신은 세미 콜론을 칠 필요가 있습니까 '; 결국 이것이 CSS에 필요한 모든 구문입니다 중괄호가 있고 처음에는 하나가 있어야합니다 끝에 하나가 있어야합니다 속성에 입력하면 우리의 경우 글꼴 색이됩니다

그리고 나중에 콜론 ':'을 넣습니다 우리의 경우, Dreamweaver가이를 수행했습니다 세미 콜론 ';'을 잊지 마라 결국 가자

저장하되, '파일', '모두 저장'을 사용합시다 CSS와 HTML을 동시에 저장하므로 편리합니다 실제로는 별도의 파일이므로 HTML 인 '소스 코드'로 검색합니다 이 하나는 내 CSS이고, 실제로는 내 웹 사이트에서 개별 파일입니다 그래서, 당신이 배우는 동안, '파일', '모두 저장'을 선택하는 것이 낫습니다

모든 것이 저장되었는지 확인한 다음 브라우저로 이동하십시오 준비 되었나요? 우리는 H1이라는 일부 HTML을 추가하고 텍스트를 추가했습니다 그런 다음 CSS를 사용하여 H1을 스타일링했습니다 웹 디자이너가 되려고합니다 안정되고

가기 굉장해, 응? HTML을 추가 했으므로 CSS를 사용하여 해당 HTML의 스타일을 지정할 수 있습니다 그것이 모든 웹 디자인의 기본입니다

우리는 우리의 실물 모형과 일치하는지 확인하기 위해 몇 가지 다른 작업을 수행 할 것입니다 그런 다음 특정 Responsive Web Design을 살펴 보겠습니다 그러니 가자 그래서 우리의 실물 크기에 맞게, 우리는 몇 가지 일을 할 것입니다 여기 포토샵에서 타입 툴을 잡으러 갈 것입니다, 나는 클릭 할 것입니다 나는 글꼴 62 포인트를 원한다는 것을 알고, 맨 아래로 밀어 내고 싶다

여기 왼쪽에서 멀어져 이제 CSS에서 해보 죠 여기 Dreamweaver에서 'return'을 입력하고 글꼴을 입력 해 봅시다

보시다시피, 그것은 미리 채워진 옵션을 제공합니다 나는 글꼴 크기를 원한다 당신은 볼 수 있습니다, 그것은 콜론 ':'을 우리를 위해 거기에 넣었습니다 자, 우리 사건에서 우리는 62 실제로 나는 마음이 바뀌었고 55 픽셀을 사용하려고합니다 그저 작은 것이기를 바랍니다 그리고 나는 세미콜론을 추가하는 것을 잊지 않았다 '; 결국 새로운 일이 많이 생길 때

'돌아와', 우리는 몇 가지 다른 일을 할 것입니다 '패딩'을 입력 할 것입니다 그래서 '패드'를 타이핑했는데 Dreamweaver가 도움이 될 것 같습니다 "당신은 이것들을 의미합니까?"라고 말하면서, "네,"상단을 클릭하십시오 그리고 맨 위에는 120 픽셀을 할 것입니다

세미콜론 ';'을 기억하십시오 결국 그리고 마지막 것은 Padding이 될 것이고, 나는 'Left'를 할 것입니다

그리고 왼쪽에서 60 픽셀 정도 떨어져 있습니다 '저장'을 눌러 보겠습니다 그리고 '모두 저장' 브라우저에 들어가서 확인해 봅시다 굉장해, 응! 그래서 그것은 기본적입니다

우리는 H1 인 우리의 HTML을 버렸습니다 CSS에서 많은 시간을 보냈습니다 그것을 스타일링하고, 우리가 원하는 것을보고 그것을 얻는 것

그러나 지금은 반응 형 디자인이하는 것을보아야 할 때입니다 이제 응답 성은 설명하는 데 사용되는 포괄적 인 용어입니다 코드에서 다른 화면 크기에 맞게 조정할 수 있습니다 코드에서하는 일 중 하나는 아마도 주요한 것은 미디어 쿼리 (Media Query)라고하는 것입니다 이제 Media Query가 트리거라고 생각합니다 화면 크기가 활성화 될 때만 설정됩니다 그럼 내가 전에 만들었던 것을 살펴 봅시다 이것이 우리가 창작하려고하는 것인데, 미디어 쿼리 (Media Query)라고 불리는 것입니다

그리고 화면 크기가 768 픽셀 이하일 때이 H1을 트리거하면됩니다 그러나 그것이 그보다 더 크다면 그것에 대해 걱정하지 말고 무시하십시오 그것이 바로 그것이 방아쇠입니다 화면이 특정 너비 일 때만 활성화됩니다 여기에 모바일 버전이 있습니다

400 픽셀 이하인 경우에만이 H1을 트리거하십시오 이제 우리 버전에서 만들어 보겠습니다 어디로 간다? 우리는 그것을 H1 밑에 놓을 것입니다 몇 가지 '반품'을하십시오 그리고 이것은 당신이 쓰려는 구문 중 가장 어려운 비트입니다

저는 약속합니다 그렇게 힘들지는 않지만, 그것을 그대로 입력하고, 그대로 따라 와야합니다 '@'기호가 있으며 '미디어'를 입력 할 것입니다 그런 다음, 우리는 괄호 '()'를 타이프 ​​할 것입니다 이 대괄호 안에 'max-width'라고 입력 할 것입니다

우리는 다음에 콜론 ':'을 넣어야하는데, 콜론이 아닌 세미 콜론이되도록하십시오 이제 태블릿이 얼마나 커질 지 결정해야합니다 이제 여기에서 크기를 선택할 수 있습니다 정말로 일반적인 태블릿 크기 또는 iPad 크기는 768 픽셀입니다 우리는이 미디어 질의가 여기에 태블릿을위한 것이라고 말하고 있습니다

그리고 그것은 그것이 크기를 얻는 것이다 이제 시간이 지남에 따라이 기본값이 변경됩니다 다른 사이트를 찾을 수 있습니다

Tablet에서 약간 다른 픽셀 너비 사용 하지만 정말 일반적인 크기이므로 잠시 사용하십시오 그러나 그것은 절대 규칙이 아니라는 것을 알고 있습니다 이 마지막 괄호 뒤에 우리가해야 할 마지막 일은 중괄호에 넣는다

그래서 우리는 중괄호를 추가합니다 반환에 넣어, 그것은 미디어 쿼리입니다 이제는 조금 어려워졌습니다

구문을 많이 들었습니다 하지만 앞으로 할 수있는 일은 복사하여 붙여 넣기 만하면됩니다 내가하는 것처럼, 그리고 다른 모든 일을해라

자,이 미디어 쿼리는 어떻게 될 것입니까? 원하는 모든 작업을 수행 할 수 있지만 Tablet에서만 실행됩니다 내가 뭘하고 싶은지 글꼴 크기를 변경하는 것입니다 당신이 여기 볼 수 있다면, 내 버전 그것은 왼쪽 정렬에서 꽤 큰 글꼴 크기가 이 작은 크기로, 그리고 중심에 그래서 그게 제가하고 싶은 일입니다 폭이 Tablet에 도달하면 이 H1을 바꿔주세요 그냥 크기와 위치를 변경하십시오 당신이 색깔을 바꾸지 않기를 바랍니다, 색깔은 괜찮습니다, 그래서 우리는 그것을 떠날 것입니다 크기와 위치 만 알려주므로 CSS에서 살펴 보겠습니다 이 두 중괄호 사이에있는 한 당신이 필요한 것은

바로 여기에 'H1'을 입력 할 것입니다 그리고 우리가 위에서 한 것처럼 우리는 우리의 중괄호를 넣고 안으로 귀환해야합니다 그리고 이제 우리는 가서 스타일을 적용 할 것입니다 나는 Font Size와 같은 것을 말하고 싶다 40 픽셀로 떨어 뜨리고 싶습니다

세미콜론 ';'을 기억하십시오 결국 구문이 올바른지 확인하십시오 당신은 중괄호를 가지고 있습니다 거기에는 콜론이 있고 거기에는 세미콜론이 있습니다 작동하는지 봅시다 '저장'을 눌러 보겠습니다 우리 자신을 준비합시다

미지의 응답 영역에 들어갈 예정이기 때문에 당신을 위해 있을지도 모릅니다 이제 브라우저에서 확인해 보겠습니다 그리고 테스트하는 방법은, 우리는 여기서 데스크탑보기를보고 있습니다, 그것은 꽤 넓습니다 하지만 768 픽셀까지 내려 가면 그게 어디 있니? 네가 알아낼 때까지 끌고있어 조심해, 내려와

이 글꼴을보고, 나는 그것을 가리키고있다, 당신은 나를 가리키는 것을 볼 수 없다 저것 봐 내 친구, 모든 반응 웹 디자인입니다 다른 것들이 있지만 그것의 핵심 핵심 부분입니다 특정 폭에서 미디어 쿼리 트리거가

CSS가 변경되면 HTML도 똑같습니다 텍스트는 바뀌지 않고 CSS 만 변경됩니다 그리고 그것은 우리의 미디어 쿼리로 시작됩니다

잘 했어, 너 네가 흥분했으면 좋겠다 나는 처음에 이것을 알아 냈을 때 꽤 흥분했다는 것을 기억합니다 자, 가서 몇 가지 다른 일을 해봅시다 Dreamweaver로 돌아갑니다

제가하고 싶은 것은, 기억하십시오, 우리는 몇 가지 일을해야했습니다 우리는 텍스트 정렬을해야했습니다 그래서, 코드에서는 '텍스트 정렬'입니다

거기에 맨 위에 있습니다 '센터'를 클릭하겠습니다 Dreamweaver에 대한 좋은 점은 알 수 있습니다 나는 그것을 입력하거나 구문을 기억할 필요가 없다 이걸 클릭하면됩니다

그리고 내가 기억해야 할 모든 것은 이 모든 줄의 마지막에 무엇이 마지막일까요? 모두가 잊어 버렸습니까? 세미콜론 ';' 굉장해! '저장', '모두 저장', 미리보기 이제는 중심입니다 그것은 일종의 센터링입니다 여기 H1에 있기 때문에

이 H1이 내 타블렛으로 촉발 된 것입니다 하지만 여기의 상단에있는이 H1은 60 픽셀의 패딩 왼쪽을 말하는 것입니다 그래서 그것을 사용하고 있습니다 그래서 중앙에 위치하게되고 측면에 60 픽셀이 더해집니다 그래서 우리는 그것을 무시할 수 있습니다, 실제로, 나는 그것을 원하지 않습니다 왼쪽 패딩 때문에 0 픽셀이되고 싶습니다

세미콜론 ';' 결국, '저장', 그것을 확인, 이제 우리는 좋은거야 굉장해! 그래서 중심에 있고, 새로운 글꼴 크기입니다 그것을 끌어 내라 이제 모바일 용 미디어 쿼리를 한 번 더 해보겠습니다 폰트 크기가 더 작아지는 것을 제외하고는 아무 것도 많이 변하지 않기 때문에

그래서 그것이 우리가해야 할 일입니다 이제 Dreamweaver에 들어가 보겠습니다 Dreamweaver 내부에서이 모든 것을 다시 입력 할 수 있습니다

또는 우리는 단지 게으름을 피우고 그것을 모두 선택할 수 있습니다 마지막 중괄호를 포함하여 미디어 쿼리 사람들은 항상 그걸 잊어 버리고 '복사하기' 또는 '편집', '복사' 나는 여기에 두 개의 리턴을 넣어 '붙여 넣기'를 할 것입니다

그리고 내가하고 싶은 것은, 몇 가지 일입니다 하나는,이 최대 너비를 변경하고 싶습니다 Tablet에서 768로 변경하고 싶습니다 실제 일반 모바일 크기 인 400 픽셀입니다 이것은 꽤 많이 바뀝니다 매우 다양한 휴대 전화 크기가 있습니다 내가 찾은 400은 정말 좋은 종류의 은폐입니다 나는 새로운 아이폰이 375 픽셀 너비라고 생각한다 그러나 더 큰 LG 전자, 삼성 전화 중 일부는 약간 더 넓다 그래서 나는 그 전화기들을 모두 커버하기 위해 조금 더 크게 만들었습니다 왼쪽에 무엇이 필요합니까? 왼쪽 패딩은 필요 없어

텍스트 정렬이 필요하지 않습니다 내가하고 싶었던 것은 글꼴 크기를 바꾸는 것뿐입니다 그래서 나는 그것들을 모두 지우고 있습니다

나는 당신을 20 픽셀로 바꾸고 싶다 '저장'을 눌러 브라우저를 체크인합시다 데스크톱

태블릿 변하기 쉬운 아마도 조금 작을 것입니다 28 픽셀이라고 가정 해 보겠습니다 조금 더 커

따라서 모든 다른 크기의 미디어 쿼리가 가능합니다 우리는이 수업에서 3 학년으로 단순하게 지내고 있습니다 그리고 종종 작은 웹 사이트를 위해서, 내가해야 할 모든 것입니다 일부 웹 사이트는 조금 더 세게 가고, 7 가지 크기를 설명합니다 그래서 그들은 7 가지 미디어 쿼리를 가지고 있으며, 그것은 당신에게 달렸습니다

저는 기본, 데스크톱, 태블릿 및 모바일만을 사용하고 있습니다 우리가 CSS에서 할 일은 우리가 계속하기 전에 우리는 몇 가지 CSS 주석을 추가 할 것입니다

이 모든게 의미하는 것은 내가 이걸 만들었 기 때문이다 이 일이하는 일,이 남자가 여기서하는 일

하지만 나 자신에게 몇 가지 메모를 추가하고 싶습니다 내 미래의 댄의 자아에게 그냥이 일들이하는 일을 기억합니다 그래서, 바로 앞에 커서를 놓으면

여기에 대한 '@ 미디어'쿼리, 768 내가 여기 왼쪽 편에 갈거야 '댓글 적용'이라고 말한 것을 클릭 한 상태로 유지하십시오 그것은 CSS의 주석입니다

클릭하십시오 별로 아무 일도 일어나지 않는다 당신은 볼 수 있습니다, 거기에 슬래시 '/'와 두 개의 별표 '**' 하지만 여기서 '타블렛'을 타이프하면 이것은 단지 브라우저가 무시하는 것을 의미합니다 아무도 그것을 보지 않으며, 그것은 단지 인간을위한 것입니다 그것은 다른 웹 디자이너를위한거야 당신이 말하는 것을 아는 것은 미래의 자신을위한 것입니다 나는 그것을 복사해서 여기에서 사용하려고합니다 나는 이것을 '모바일'이라고 부를 것입니다

이제 '파일', '모두 저장'으로 이동하십시오 브라우저에서 작동하는지 확인하십시오 네가 아니라면 그리고 당신은 태블릿으로 내려 가지 않고,이 H1을 위해 모바일 크기로 내려갑니다 '재설정'버튼을 누르면됩니다 그럼 모두 그렇게합시다 당신은 필요가 없습니다 네가 일하고 있다면, 계속해라

따라서 'index1'을 닫고 'index3'까지 올라갈 수 있습니다 거기에있는 것을 클릭하십시오 브라우저에서 미리보기 그리고 그것은 우리가 잠깐 전에 그것을 정확히 가지고 있어야합니다 좋은! 그래서 네가 끔찍하게 잘못하면

여기를 열면 재설정하고 여기에서이 부분으로 돌아갑니다 우리의 반응 우산의 다음 부분은 미디어 쿼리를 살펴 보았습니다 응답 성이 고려되었습니다 또 다른 하나는 반응 형 이미지입니다 그리고 그것이 의미하는 전부는, 제가 여기서 마지막 예제 중 하나를 확인한다면

즉, 브라우저의 크기를 조정하거나 다른 장치로 이동하면 이미지는 실제로 크기가 재조정됩니다 보시다시피,이 배경이 맨 위로 이동합니다 그리고이 모든 것들은 제공된 공간에 가장 잘 맞는 크기의 재사용도 가능합니다

그래서 우리는이 배경 이미지를 먼저 살펴볼 것입니다 그러면 우리는이 이미지들을 아래쪽에서 보게 될 것입니다 둘 다 우리가 접근하는 방식이 약간 다릅니다

Dreamweaver로 돌아가서 '스타일'을여십시오 우리가 찾고있는 것은 영웅 박스입니다 그게 내가 가지고있는 큰 상자 야 우리가 작업하고있는 것을 보자 보시다시피, 제가 이미 우리를 위해 만든 큰 핑크색 상자입니다

그리고 제가 한 것은 높이와 배경색을 분홍색으로주었습니다 나는 또한 그것을하고 싶다 그래서 저는 '배경'을 입력하고 있습니다 여기서 '배경 이미지'로 이동할 수 있습니다 지금 내가해야 할 일은 'url'을 사용하고 'return'을 누르는 것입니다

이것은 먼 길입니다, 이미지, 나는 'im'을 타이핑하기 시작했습니다 이것은 정말 편리합니다 사전 준비가되었습니다 특히 여기서 내려올 때, 당신은이 이미지들을 선택할 수 있습니다 그리고 당신은 그 (것)들의 위 공중 선회에 얻고, 당신을 위해 그 (것)들을 시사 할 것이다

Dreamweaver가 사용하는 더 빠른 방법이 있습니다 그래서 나는 그 모든 것을 취소 할 것입니다 당신까지, 당신은 그 긴 방법으로 그것을 타이프 할 수 있습니다 정말 좋은 코드가 있습니까? 이 경우 'bgi', 즉 '배경 이미지'입니다 그리고 내가해야 할 일은 돌아 오는 것 대신에

또는 해당 옵션 중 하나를 클릭하십시오 내 키보드에서 '탭'을 누르기 만하면됩니다 우리의 배경 이미지 인 콜론 ';'을 채워서 필요한 URL을 추가했습니다

그리고 타이핑을 시작할 준비가되었습니다 당신이 새로운 사람이라면 익숙해지기 위해 모든 것을 타이핑 할 수도 있습니다 하지만 일단 가면

전체 단어 '배경 이미지'를 입력하고 URL을 그것을 기억하는 것은 어려울 수 있습니다 그냥 'bgi'라고 치고 'Tab'을 누르십시오 우리가하고 싶은 것은 이미지 폴더에서 이미지를 가져오고 싶기 때문에 'i'라고 입력했습니다 Dreamweaver, 감사합니다 그리고 그것은 단지 내 이미지 폴더를보고 내가 가지고있는 이미지를 볼 수 있습니다 이 배경 이미지를 배경 이미지라고합니다 그 위에 마우스를 올리면 내가 원하는 것을 배경으로 볼 수 있습니다

끝에 세미콜론을 추가했습니다 그래서 저장하고 브라우저에서 확인해 보겠습니다 작동하지 않을 것입니다 거기에 있지만 반응이 없습니다 나는 그것이 모든 신축성이 있고 배경을 채우기를 원합니다

우리는 CSS 속성을 사용하여 그렇게 할 것입니다 CSS3 속성입니다 사람들이 HTML5와 CSS3에 관해 이야기 할 때

그들이 진짜로 의미하는 것은 새로운 것들 중 일부일뿐입니다 우리는 전에 할 수 없었던 CSS로 할 수 있습니다 이전에는 HTML4와 CSS2가있었습니다 그래서 그것은 단지 새로운 버전이지만 꽤 상상력이 풍부하고 위협적입니다 그러나 정말로 그들은 이것과 같은 단지 새로운 것들입니다 최신 CSS 기능 중 하나는 배경입니다

나는 '배경 크기'라고 불리는 것을 원한다 거기에있다 '표지'라는 옵션이 있습니다

정말 멋진 CSS3 기능입니다 세미 콜론 ';'을 추가하십시오 마지막에 '저장'을 클릭하고 브라우저를 체크인하십시오 이제 우리는 말하고 있습니다, 이제는 모두 반응 적입니다 제공되는 공간을 채우는 종류 모든 신축성을 얻는다

CSS3의 기능인 '표지'와 '배경 크기'입니다 그래서 우리는 새로운 현대 웹 디자인의 비밀 중 하나를 공개했습니다 그리고 이것이 CSS3라고 불리는 것입니다 당신은 많은 부분에서 그것을 보았습니다, 그러나 실제로 그것은 우리가 할 수있는 새로운 것들입니다 이전 버전의 CSS에서는 이전에 할 수 없었던 이제 그것이 끔찍하게 잘못되어, 당신의 것이 작동하지 않는다면 – 나는 그것을 저장하고 닫을 것이다

– 'index4'를여십시오 그리고 그것은 똑같은 지점으로 당신을 돌려 보내야합니다 조금만 쉬면 브라우저에서 체크인하십시오

그리고 네, 완벽하게 작동합니다 너의 것이 잘 작동한다면, 당신은 다시 설정할 필요가 없다 과정 전체에서 색인 1을 계속 수행하십시오 길을 잃으면이 작은 리셋으로 나를 따라갈 수 있습니다 그래서 다음으로하고 싶은 일은 – 우리는 이런 종류의 최고의 부분을 가지고 있습니다

이 작은 이미지 그룹을 여기 아래쪽에 구축하고 싶습니다 그래서 우리는이 이미지들이 들어가기위한 상자에 넣어야 할 것입니다 Dreamweaver에서 살펴 보겠습니다

이 상자는 일반적으로 Divs라고합니다 우리에게는 Div가 이미 있습니다 Div 영웅 상자라고하는 사람이 있습니다 그것은 분홍색 이었지만 지금은 신축성있는 이미지 배경을 가지고 있습니다 그래서 우리는 우리 자신을 위해 이들 중 하나를 만들어야 할 것입니다

그래서 우리의 영웅 상자 밑에 '돌아 오는'것을 넣으십시오 우리는 Div에 입력 할 것입니다 그래서 우리는 꺽쇠 괄호로 들어가서 Div, '<div 를 입력합니다

클래스 이름도 지정합니다 클래스는 우리가 제공하는 고유 한 이름입니다 그리고 모든 문법은 미리 채워 져야합니다 'class'라는 단어를 입력하면 마우스를 클릭하면 볼 수 있습니다 구문을 채 웁니다

나는 그것에게 이름을 줄 것이다 당신은 그것을 어떤 종류의 이름이라도 갖게됩니다 대문자 나 공백을 사용하지 않도록하십시오 우리는 칼럼 (column)을 짧게하는 칼럼을 호출 할 것입니다 이 용어를 사용하는 것이 일반적입니다

끝내려면 꺽쇠 괄호 '>'를 넣어야합니다 마지막 꺾쇠 괄호 '<'를 엽니 다 우리 H1을 기억하고, 우리는 그 슬래시 '/'를 넣습니다 그리고 그것은 우리를 위해 그것을 끝낸다 이것이 영웅의 상자가 만든 것입니다

우리는 col이라는 버전을 만들었습니다 이제 HTML로 좀 더 진보했다면 "남자, 긴 여정이야

나는 더 짧은 길이 있었으면 좋겠어" 'col'을 입력하면됩니다 도트 '' 그것의 시작 부분에 그냥 클래스 이름을 말합니다

그리고 'return'대신 'tab'을 누르면 그냥 당신이 컬 클래스 Div 클래스를 의미한다고 생각 그리고 모든 것을 채 웁니다 그래서 빠르고 쉽습니다 새로운 것이라면 먼 길을 타이핑하면됩니다 구문에 익숙해 져야합니다 어쨌든, Dreamweaver는 지금 당장 큰 도움이됩니다 이 안에는 내 이미지를 넣고 싶습니다 그래서 상자를 만들었지 만 상자는 아직 아무 것도하지 않습니다

그것은 단지 빈 상자에요, 그 안에 이미지를 넣고 싶습니다 길을가는 길, 먼 길을 이것이 정말로 길기 때문에 당신이 그렇게하는 것을 원하지 않습니다

<img src 를 입력합니다 그 src 내부에서 우리는 벗어나 우리의 이미지를 찾는다

그런 다음 대체 텍스트를 추가합니다 단순한 이미지를 넣기 위해 필요한 모든 다른 것들이 있습니다 당신은 거기서 볼 수 있습니다, 나는 이미 그것을 했으므로, 'image src' 이미지가 있습니다 그런 다음 대체 텍스트를 입력해야합니다 그래서 조금 길어 나는 그것을 취소 할 것이고, 내가 할 일은 우리의 슈퍼 비밀 드림위버 awesomeness를 사용하고, 단지 'img'를 입력하십시오 '입력'이 아닌 '탭'누르기

보시다시피, 저를 위해 그 모든 것들이 저 안에 있습니다 자,이 '근원 안에, 내 이미지는 어디서 오는거야? 나는 이미지 폴더에 대한 '나는'을 입력 고마워, 드림위버 내 이미지 폴더를보고 말하길, "너, 이거?" 그리고 나는 말합니다

"예, 저기, 이미지 1이 필요합니다" 'Save All'을 누르면 브라우저에서 점프 해 보겠습니다 그리고 그는 거기에있어, 그는 아직 반응이 없습니다 우리는 단지 HTML 이미지를 넣었 기 때문에 다른 어떤 것도하지 않았습니다 그러나 이것이 우리의 이미지에 담긴 첫 번째 부분입니다 이제 우리는 그를 반응시켜야합니다 우리는 CSS로 이것을 수행합니다 조금 봅시다

우리가 해낸 첫 번째 방법과 약간 다른 방식으로합니다 왜냐하면 첫 번째 옵션은 배경 이미지가되고 싶었 기 때문입니다 기억해,이 녀석은 배경이되어야 해

그래서 약간 다르게 작동합니다 그래서 우리가하고 싶은 것은 우리의 'stylescss'로 이동하는 것입니다 그럼 바닥에 내려 놓고 싶습니다 Tablet이 아닌 데스크탑보기의 스타일

그래서 나는 몇 가지 'return'을 내 최고의 'h1'밑에두고 있습니다 그러나 태블릿 앞에 당신이 준비 됐으면 좋겠다

우리는 Compound Selector라는 멋진 것을 배울 것입니다 그래서 Selector는 우리의 H1 Selector입니다 그것은 Selector였습니다 이것들은 모두 Selector입니다 그래서 제가하고 싶은 것은 Compound Selector입니다

나는 그것을 이미지로하고 싶다 모든 이미지를 반응 적으로 만들고 싶지만 모든 이미지가 아닌 우리의 칼럼 안에있는 이미지 만 원합니다

그것은 Compound Selector라고 불리며, 이미지를 의미합니다 모든 페이지의 모든 이미지와 모든 웹 사이트가 아닌 우리가 콜이라고 부르는 그 안에있는 이미지들 우리는 그것을 col라는 클래스라고 불렀습니다 이제 CSS에서 클래스를 참조하기 위해 전체 중지 '' 처음에는 네가 직접 쓰는 것들

아무 데서도 만든 것이 정면에 정차합니다 HTML에 미리 존재하는 것은 종종 그렇지 않습니다 너는 볼 수있다,이 하나, 나는 이것을 영웅 박스라고 불렀다 그래서 정면에 정차합니다 하지만이 H1은, 내가 만들지 않았고, 그것은 단지 기존의 HTML 셀렉터였습니다 그래서 우리는 그것을 가지고 있지 않습니다 우리 콜의 이미지들, 내가하고 싶은게 저는 중괄호를 넣고 돌아올 것입니다

반응이 좋도록하기 위해 내가하고 싶은 것은 폭을 넓히고 싶습니다 그냥 '위'라고 입력하고 내려주세요 그리고 나는 100 % 너비를 만들고 싶다

세미콜론을 잊지 마라 '; 결국 이제 대부분의 작업이 그러나 그것을 만들기위한 몇 가지 다른 것들이 있습니다

모든 브라우저에서 조금 더 잘 지원됩니다 '높이'를 넣고 높이는 '자동'이어야합니다 그리고 우리가해야 할 마지막 일은 '전시입니다

블록;' 그들이 모든 브라우저를 도울 것이기 때문에 다만 그 (것)들을하십시오 반응 형 이미지 처리

그것은 대부분의 일을하는 사람입니다 'width : 100 %' 우리 브라우저에서 좀 어울려 보자 거기에 멋지다, 그가있다, 그는 반응하는 이미지 다 제가 그를 축소 시키면, 당신은 그가 브라우저로 더 작아진다는 것을 알 수 있습니다

브라우저가 커질수록 더 커집니다 그래서 우리가 원하는 것은 정확히 아닙니다 우리는 그를 특정 높이, 더 크지 않게 만들어야 할 것입니다 그러나 이것이 반응 형 이미지가 수행되는 방법입니다 그리고 Compound Selector 사용에 관한 멋진 점은

우리가 말한 곳에서, 컬럼 내부의 이미지 여기이 이미지를 망치고 있는게 아니야 내 로고는이 배경의 모든 이미지입니다 그것은 단지 내 칼럼 안에있는 이미지를 다루는 것입니다 우리가 가기 전에 우리의 실물 크기에 맞는 너비를주세요 우리가 할 일은 몇 번 반복하는 것입니다 거기에있는 모든 이미지를 얻으려면 Dreamweaver로 돌아가 소스 코드로 이동하십시오 소스 코드는 HTML입니다

대신 소스 코드라고합니다 우리가하고 싶은 것은이 칼을 복제하는 것입니다 그래서 나는 그들 중 여섯 명이 여기에 맞춰 주길 바란다 보시다시피, 저는이 상자들 중 여섯 개를 가지고 있습니다 그래서 우리가 할 일은 전체 라인을 복사하여 붙여 넣는 것입니다

Dreamweaver에서 가장 쉬운 방법은 이미지의 아무 곳이나 클릭하는 것입니다 PC에서 'Control D'를 누르거나 Mac에서 'Command D'를 누르십시오 너는 볼 수있다, 다만 사본을 만들 n 다 왜냐하면 내가 원하는 것은 단지 이미지의 중복이 아니라 뿐만 아니라 외부 주위의 기둥 여기를 클릭하면 총 6 개가 필요합니다

그럼 당신이 통과하고, image1 대신에 image2가 있습니다 여기 아래에 이미지 3이 있습니다 당신은 밖으로 클릭하고, 다시 클릭하십시오, 4 보시다시피, 저를 위해 미리보기입니다 굉장해! Dreamweaver, 감사합니다

5, 6 굉장해! '저장'을 눌러 브라우저에서 미리보기를 해봅시다 이제 우리는 첫 반응 형 이미지를 얻었습니다 하지만 이제는 모두 준비 됐습니다 Dreamweaver로 다시 이동하여 '저장'을 누르십시오 네가 일하고 있다면, 끝내라 너의 것이 아니고 완전히 작동하지 않는다면 우리가 열어 놓은 것을 닫고 index5를여십시오 그건 우리를 돌려 줄거야 브라우저에서 미리 보시고 지금 우리가있는 곳으로 돌아가십시오 우리가해야 할 일은 우리의 실물 모형을 보면 실제로 – 보시다시피,이 이미지는이 큰 것입니다

그러나 현재의 실물 크기 모형에서는 전체 크기로 늘어납니다 그래서 우리가해야 할 일은 그 안에있는 컨테이너를 기억해 두었다가 우리는 이것을 콜 클래스라고 불렀다 우리는 "이봐 콜, 너는 33 %가되어야 해"라고 말할 필요가있다 당신이 순간에있는 것처럼 100 %가 아닙니다

" 그래서 33 %가 우리 블록을 구성합니다, 333 이제 어떻게 할 지 살펴 보겠습니다

Dreamweaver로 다시 돌아갑니다 그래서 Dreamweaver에서 '스타일'로 들어가 보겠습니다 내 데스크톱보기에서 할 수있는 일은 Tablet이 아니라 그래서 제가 그 사람 바로 앞에 태블릿을 찾으면 몇 가지 'return'을 넣으면 'col '을 넣을 것입니다 그래서 나는 'col'을 여기에 넣고 싶습니다

중괄호는 여러분이 폭이되도록하겠습니다 나는 333 %의 비율을 사용할 것입니다 끝에 세미 콜론을 기억하십시오 문법이 올바른지 확인하십시오

종종 사람들을 가르 칠 때, 그들은 – 우리는 333 %의 이상한 것을하고 있습니다 그래서 제 모습이 맞는지 확인하십시오 '저장'을 누르면 브라우저에서 확인해 봅니다 그래서 작동합니다

모두 333 %입니다 정말 고마워요 그러나 기본적으로 그들은 서로 위에 겹쳐서 쌓아 놓습니다 그래서 우리는 여기에서 'col'밑에 'return'을 넣을 수 있습니다

'너비'아래 그리고 말하자면, 왼쪽으로 떠돌아 다닙니다 '저장'하고 미리보기하면 이제는 모두 서로 옆에 쌓여 있습니다 오 세상에, 너 정말 끝이야! 내가보기에 상관없이 모두 333 %입니다

데스크톱 용입니다 나중에 Padding을 추가하겠습니다 그러나 그것이 우리의 데스크탑 뷰를 위해 Div의 크기를 재조정하는 방법입니다

잘 했어 우리가해야 할 다음 일은 당신이 볼 수있는 것입니다 여기 내 목에서 데스크톱에서 실제로 333 %이지만, 실제로는 50 %입니다 모바일에있을 때는 100 %입니다 이것이 바로 우리가 지금 할 일입니다 Dreamweaver에서 우리가 할 일은 여기 Tablet입니다

닫는 것 전에 우리 'h1'밑에 왜냐하면 Dreamweaver가이를 유용하게 강조하기 때문입니다 내가 이것들 중 하나를 클릭하면 시작 또는 끝나는 것을 볼 수 있습니다 당신은 볼 수 있습니다, 그것이 래퍼입니다

그래서 우리는이 두 중괄호 안에 모든 것을 유지하기를 원합니다 그래서 'h1'아래에 있지만,이 닫는 것 앞에 우리는 "콜을 원해" 중괄호, 반환, 나는 그것이 폭이되고 싶다 – 우리가 위에서 한 것처럼 우리가 말하려는 것, 너비, 우리의 경우 태블릿은 50 %입니다 끝에 세미 콜론 나는 떠있는 말을 할 필요가 없다 상단의이 하나가 이미 그것을 말하고 있기 때문입니다 우리는 단지 한 번만 말해야합니다 그러나 폭에 관해서, 우리는 말하고 싶습니다 실제로 태블릿은 333 %를 무시하고 50 %가됩니다 조금만 보죠 33

3 %, 나는 그 말을하기가 어렵다 태블릿으로 내려갑니다 준비된? 이제 포토샵에서 우리가 원하는 방식으로 쌓아 올리고 있습니다 그리고 그것은 50 %에 걸쳐 있습니다 나 지금 네가 이걸 멈추길 바래

너 혼자서 모바일에 갈 수 있는지 알아봐 멈춰,가,해라, 너 아직 감히 못 간다면, 같이 가자 당신의 것이 끔찍하게 잘못 될 경우, 내 것을 지켜보십시오 네가하지 않았다면 네가 해냈고 네가 멈추고 일하고있어

자신을 매우 자랑스럽게 생각하고, 배웠습니다 아주 짧은 시간에 많은 반응 웹 디자인 당신은 최고입니다 그래서 내가해야 할 일은 모바일에서 똑같은 '콜'을 사용하고 싶습니다 중괄호

나는 단지 100 % 너비라고 말할 것입니다 세미 콜론을 잊지 마십시오 '저장해

브라우저에서 미리보기 태블릿, 50이야 모바일, 100 %입니다 우리는 새로운 세기의 Responsive Web Designers입니다 좋아, 좀 흥분 되긴하지만, 네가 조금 더 흥분했으면 좋겠어

우리가 정말로 배우고 있기 때문에 반응 형 웹 디자인의 기본 다른 모든 것, 우리는 간지럽 히고 일을합니다

그러나 우리는 이미 진정한 기초가 완성되었습니다 그 기초는 미디어 쿼리 우리는 Responsive Backgrounds를 보았습니다 우리는 영웅 배경으로했습니다 우리가 배경 이미지를 한 것을 기억하십시오 우리는 'cover'라는 새로운 CSS3 옵션을 사용했습니다 그것은 굉장했다 그렇지만 우리는 그것을 약간 다르게 사용하고 싶었습니다 배경이 아니라 보통의 오래된 이미지처럼 그리고 우리가해야 할 일은 복합 선택자를 배우는 것입니다 그러나 정말로, 주요 부분은 이것 (우리가 말했던 곳 (폭 100 %))이었다 그리고 'auto'의 높이와 'block'의 표시 그것은 반응 형 이미지입니다 그리고 우리가 방금 배운 마지막 것은 말했습니다 "Hey column, 바탕 화면에 너가이 너비가되기를 바란다

멋진 미디어 쿼리를 사용하면 50 %가되기를 바랍니다 기본적으로 우리가 할 반응적인 변화는 이 일을하는 데 단지 되풀이 될 것입니다 미디어 쿼리 선택, 우리가 변경하고자하는 것을 제어하는 ​​것을 선택

그런 다음 몇 가지 변경 사항을 수행 중입니다 태블릿 또는 모바일에 따라 다릅니다 네가 아직도 완전히 작동하지 않는다면 작동하지 않고 재설정을하고 계속 진행하십시오

그럼 index5를 내려서 index6을 열자 끝까지 접근하기 바라건대, 브라우저에서 미리보기를하면 100 % 작동합니다 데스크톱 용 태블릿, 50 %, 333 % 그래서 제가하고 싶은 것은, 제가하고 싶은 것입니다 정말로 나에게 짜증나는 것은 여기에 아무런 격차가 없다는 것입니다 반면 내 디자인에는 모든면에 멋진 흰색 틈이 있습니다 자, 가자 덧붙여 마진이라 불리는 것 여기 Dreamweaver에서 'styles

css'로 이동합니다 우리가 원하는 것은 칼럼 주위에 그것을 추가하는 것입니다 우리는 지금 3 개의 기둥을 가지고있다, 그렇지? 이 상위 버전이 내 데스크탑 버전인데, 가장 상위 버전입니다

최고 버전 인 글로벌 (Global)이라고도합니다 그럼 여기서, 제 태블릿에는 또 다른 것이 있고 또 다른 열이 있습니다 그래서 제가해야 할 일은 여기에서 가장 중요한 것입니다 내가 할 말은 이 칼럼에서 소문자로 1 %의 마진을 주셨으면합니다 그리고 그것은 모든 칼럼의 바깥쪽에 1 %를 넣을 것입니다 그리고 그것은 우리에게 초기 문제를 조금 일으킬 것입니다 저장하여 끝 부분에 세미콜론이 있는지 확인하십시오

너 나쁘다고 말하고 있니, 그렇지? 브라우저로 뛰어 들어 봅시다 그것은 일종의 작품입니다 1 % 밖에서 경계선이 하지만 거기에 1 %가 있기 때문에 333 % 여기에 플러스 1 % 플러스 또 다른 1 %

방이 충분하지 않습니다 항상 우리가 할 수없는 최대 100 % 이상입니다 그래서 1 %의 여백을 추가 할 때마다

너비 너비를 빼야하고, 양쪽에 1 %가 있습니다 보시다시피 1 %, 거기에 1 %가 있습니다 따라서 마이너스 2를 원합니다

따라서 313 %입니다 '저장'을 누르자 그것을 확인하고, 지금, 그것은 충분한 공간이 적합합니다 그래서 우리 모두는 똑같이해야합니다

우리가 타블렛에 가면 똑같은 일을하지, 충분한 방을하지 그래서 우리가해야 할 일은 우리 태블릿의 마이너스 2입니다 그럼 48 %로 내려 가자 그것을 확인, 잘 작동, 모든 고정 이제 모바일에 대해 알아 보겠습니다

모바일은 여전히 ​​일종의 작품인데, 왜 그런지 모르겠습니다 우리는 98 %로 내려갈 것입니다 그래서 모든 것이 맞고 가장자리 주변의 경계를 볼 수 있습니다 잘 하셨어요 자네가 내 것 같으면 거기서 90을 볼 수있다

나는 그것이 Dreamweaver의 베타 버전을 가지고 있기 때문이라고 생각합니다 다시 시작하고 사라졌습니다 나 한테 조금씩 일어난다 그러나 그것은 내 컴퓨터의 버그 일뿐입니다 당신이보고 있을지도 모르는 물건 중의 1 개와 나 또한 결함이있다

우리 주변에 여백을두기 때문에 더 이상 그걸로 일종의 정렬되지 않습니다 상단에서 조금 더 커지면 그래서 우리는이 div 태그의 상단에 1 % 경계를 추가해야합니다 우리가 부른 것을 기억하니? 영웅 상자라고 불렀습니다 영웅 상자를 여기에서 찾으십시오, 여기 있습니다 그리고 너는 내 친구에게 이윤을 남겼다

그래서 마진 1 %, 세미콜론 ';', '저장' 이제 조금 더 멋지게 보입니다 우리는 그 주변에서도 마진을 봅니다

우리가 그에게 폭을주지 않았기 때문에 그는 모든 것을 빼앗길 필요가 없습니다 보시다시피, 그는 어디에도 너비가 없습니다

그가 그렇게한다면, 우리는 다른 사람들처럼 그렇게 마이너스해야합니다 하지만 우리는 그렇게하지 않으므로 그는 괜찮습니다 마지막으로 중요한 것은, 내가하고 싶은 것은 네비게이션을 살펴 보겠습니다 당신은 내 모의 – 여기에 볼 수 있습니다 그것은 나란히 스택, 여기 데스크탑 그러나 태블릿과 모바일에서는 서로 위에 있습니다

하지만 지금은 모두 서로 겹쳐 쌓여 있습니다 그래서, 제가하고 싶은 것은, 데스크탑보기에서 말하고 싶습니다 내 탐색, 이미 여기에 복합 수업을 만들었 어

내 탐색 스타일 처음부터 시간을 절약하기 위해서입니다 내가하고 싶은 건

당신은 'nav ul li'라고 말하는 것을 찾고 있습니다 그것은 내 탐색을위한 나의 목록입니다 내가 말하고자하는 것은, 당신이 전시하고 싶습니다

'인라인 블록 (Inline-block)'이라고 불리는이 작업을 해 주시기 바랍니다 즉, 그들은 서로 옆에 쌓아 올 것입니다 세미콜론을 잊지 마라 '저장'을 눌러보세요 굉장해! 유일한 문제는 Tablet에 도착하면

그 또한 인라인 블록을 유지 그리고 조금 더러워지면 로고를 넣을 공간이 없습니다 그래서 그것은 아래에 스택 따라서 태블릿으로 전환하면 다시 전환해야합니다

우리가 가지고있는 다른 방법들 위에 쌓아 놓은 것 우리가해야 할 일은 'nav ul li'을 찾는 것뿐입니다 존재하지 않는 Tablet에 여기 있습니다

그래서 우리가 할 일은 '칼럼'아래에 'nav ul li {'이라고 불리는이 것을 넣을 것입니다 그리고 나는 그것이 여기에 도착할 때 말하고 싶다 이제 블록을 보여 주셨으면합니다 그리고 그것은 그들이 서로의 위에 겹쳐 쌓일 것이라는 것을 의미합니다

'저장'을 눌러 브라우저에서 미리보기를 해봅시다 굉장해! 그래서 데스크톱은 줄을 서서 놓았습니다 그리고 여기서, 모바일과 동일한 스택 블록입니다 글쎄, 내 친구, 우리가 반응하는 여행을 떠날거야 Responsive Web Design에 대한 놀라운 자료들을 배웠 으면합니다

간단히 요약하자면, 반응 형은 일종의 우산 용어입니다 웹 디자인의 몇 가지 특정 사항을 설명하는 데 사용됩니다 '스타일'아래에있는 큰 것 중 하나는 미디어 쿼리입니다

그리고 이것은 다른 브라우저 너비에서 시작됩니다 그리고 그 미디어 쿼리에서 우리는 일을 바꿀 수 있습니다 글꼴 크기와 높이가 비슷합니다

우리는 또한 상자 일부의 너비를 변경합니다 우리의 경우, columnm, 우리는 백분율을 사용하여 그것의 너비를 변경했습니다 데스크톱, 태블릿 또는 모바일인지 여부에 따라 다릅니다

반응 형 용어 중 또 다른 하나는 반응 형 이미지였습니다 우리는 두 가지 버전을 보았습니다 배경 이미지가있었습니다 여기서 우리는 '표지'라는 CSS3 속성을 사용했습니다 우리는 또한 반응적인 정규 이미지를 보았습니다 그들은 단지 페이지에 앉아

배경이 아니라 기본적으로 100 % 너비입니다 우리는 또한 자동차의 높이와 그들을 작동하게하는 블록의 디스플레이를 추가했습니다 당신은 Responsive Web Design을 위해 많은 일이 CSS에서 행해졌다는 것을 알아 채실 것입니다

여기에있는 HTML은 멋지고 깨끗하며 쉽고 멋지게 작동합니다 우리의 CSS 스타일은 밖으로 퍼져 나가고, 몇 가지 다른 스타일을 포함합니다 하지만 당신은 볼 수 있습니다, CSS의 구문은 특히 어렵지 않다 특히 당신이 그것을 직접 만들었을 때

이제 시작하기 위해 몇 가지 사항을 건너 뛰었습니다 이 비디오가 아주 오래되었는지 확인하십시오 더 많은 것을 배우고 싶다면, 나는 많은 과정을 가지고있다 bringyourownlaptopcom에서 그들을 확인하십시오 Dreamweaver에 많은 코스가 있습니다

기타 웹, 비디오 및 그래픽 디자인 제품을 많이 포함하고 있습니다 가서 확인해보세요 bringyourownlaptop

com 설명에 링크가있을 것입니다 좋아, 그게 다야 haere rā, 좋은 YouTube 사람들 다른 비디오에서 보자 내가 좋아하는 것을 잊지 마라

안녕