Responsive Portfolio Grid CSS Website Layout (PART 2)

이봐 요, 픽셀! 이 반응 형 포트폴리오 웹 사이트 자습서의 제 2 부로 돌아가십시오 이 비디오에서는 이렇게 반응이 좋은 깨끗한 현대 한 페이지 포트폴리오를 코딩하는 방법을 보여 드리겠습니다

웹 개발의 최신 기술을 사용하는 웹 사이트 Flexbox 및 CSS Grid는 전세계 웹 개발자를위한 게임을 변화 시켰습니다 이전과는 다른 복잡한 레이아웃을 코드 작성하기가 훨씬 쉬워졌습니다 오늘날 세계에 존재하는 스크린 따라서 더 이상 지체하지 않고 시작하십시오! 이 웹 사이트에서는 배경 도형, 세로 사진을 내보낼 것입니다

소셜 미디어 아이콘은 웹 사이트의 이미지 폴더에 저장됩니다 먼저, 배경 도형을 클릭하고 파일> 내보내기> 선택으로 이동하십시오 형식이 PNG로 설정되고 "내보내기 대상"이 "웹"으로 설정되어 있는지 확인하십시오 세로 사진을 내보내려면 동일한 작업을 수행하십시오 SVG 버전의 소셜 미디어 아이콘도 내보낼 예정입니다

모든 아이콘을 선택하십시오 (쉽게 선택하려면 그룹을 해제해야 할 수도 있음) 그런 다음 파일로 이동하십시오 > 내보내기> 이미지 폴더로 내보내기를 선택했습니다 형식이 SVG 임베드인지 확인하고 "파일 크기 최적화 (축소)"를 선택하십시오 이제 모든 자산이 웹 사이트의 이미지 폴더로 내보내 졌으므로 점프 할 수 있습니다

바로 코딩으로 먼저 클래스 이름이 "container"인 div를 생성합니다 이 div 내에서 우리는 다음과 같은 클래스로 세 개의 div를 추가로 만들 것입니다 : sidebar, 내용, 꼬리말 사이드 바 div 내에서 nav 태그를 사용하고 정렬되지 않은 목록을 만듭니다 메뉴 링크

이 시리즈의 Part 1에서이 메뉴를 디자인했음을 상기하자 이제 코드를 작성 했으므로 주요 컨텐츠 영역을 코딩 할 수 있습니다 콘텐츠 div에는 클래스 이름이 "hero"인 섹션이 포함되어 있습니다 이 섹션에서는 img 태그를 사용하여 인물 사진에 연결합니다 img 태그 아래에 "hero-content"클래스로 div를 생성 할 것입니다

이 div 내에서 h1 태그와 단락 태그를 사용하여 영웅 제목을 추가합니다 그리고 blurb 마지막으로 앵커 태그를 사용하여 "Hire Me"버튼을 만듭니다 클래스 이름을 "action-btn"으로 지정하고 앵커 텍스트로 "Hire me"라고 씁니다 마지막으로 우리는 바닥 글 영역을 코딩 할 것입니다

바닥 글 div 내에서 바닥 글 태그를 사용하여 순서가 지정되지 않은 목록은 우리의 소셜 미디어 아이콘이 될 것입니다 이를 위해 정렬되지 않은 목록 태그, 목록 태그, 앵커 태그 및 그런 다음 앵커 태그 내에서 단락 태그를 추가하여 소셜 미디어 통계 Command 또는 CTRL + D를 눌러 네 개의 소셜 사회에 대해이 코드 줄을 네 번 복제합니다 미디어 아이콘 그런 다음 이미지 폴더를 열고 svg 아이콘을 선택하고 svg 코드를 복사 한 다음 그런 다음 첫 번째 목록 항목 내에 붙여 넣으십시오

다른 목록 항목에 대해서도이 작업을 반복하십시오 그것이 HTML을위한 모든 것입니다 이제 CSS 파일을 스타일링하기 위해 머리를 숙일 시간입니다 응답 성이 뛰어난 한 페이지 포트폴리오 포트폴리오 웹 사이트의 스타일을 지정하기 위해 최신 웹 개발 : Flexbox 및 CSS Grid 모바일 우선 코딩을 시작한 다음 미디어를 사용한다는 점에 유의해야합니다

큰 화면 크기를 위해 디자인 할 쿼리 시작하겠습니다 알다시피 "Nunito"라는 Google 글꼴을 이미 가져 왔습니다 스타일 300, 400 및 700 또한 Nunito를 글꼴 패밀리로 선언하고 제공함으로써 사이트의 본문을 스타일링했습니다 그것은 우아한 배경

위로 HTML 파일에서 우리는 주요 레이아웃 영역의 구조를 설정했습니다 내용 영역, 세로 막대 영역 및 바닥 글 영역이 있습니다 이제 우리는 CSS 격자를 사용하여 "격자 영역"속성을 사용하여이 영역의 이름을 지정합니다 우리는 배경 도형, 그라데이션 및 색상을 추가 할 예정입니다 1을이 레이아웃 영역에 추가합니다

그라디언트를 허용하는 선형 그래디언트 속성에서 "오른쪽으로"추가했습니다 작은 화면에서 볼 때 오른쪽에서 왼쪽으로 시작합니다 사이드 바, 내용 및 바닥 글이 포함 된 컨테이너 div를 선택합니다 글꼴 크기를 15em, 너비를 100 %, 높이를 100vh로 설정하여 브라우저 창의 전체 높이를 올리십시오

CSS 그리드 레이아웃을 만들려면 display : grid 선언을 사용하기 만하면됩니다 또한 우리는 그리드 템플릿 영역의 이름을 지정하려고합니다 여기에는 사이드 바, 컨텐츠 및 보행인 그리드 템플릿 열을 1fr로 설정하고 세 개의 그리드 템플릿 행을 130px로 크기를 조정합니다 800px 및 250px 마지막으로 세 개의 템플릿 영역을 모두 선택하고 패딩을 1em으로 설정합니다

이제 우리는 일반적인 포트폴리오 요소에 스타일을 적용 할 것입니다 사이드 바에서 메뉴 항목의 스타일을 지정하려면 nav ul을 선택하고 여백을 제거합니다 그리고 padding을 사용하고, flexbox를 사용하여 nav 메뉴 항목을 쉽게 응답하게 만듭니다 display : flex 선언을 사용합니다 다음 코드 행에서는 탐색 목록 항목과 앵커의 스타일을 제거하여 목록 항목 글 머리 기호, 채우기, 링크 색상 및 기타 글꼴 스타일 조정 이 시리즈의 파트 1에서 우리의 디자인 실물 모형과 유사합니다

또한 3s 전환을 추가하고 호버 불투명도를 1로 설정하여 링크가 맴돌 았고 흰색으로 바뀌고 그렇지 않을 때는 불투명합니다 또한 주요 콘텐츠로 구성된 주요 콘텐츠 요소의 스타일을 지정합니다 섹션, 영웅 텍스트 영역 및 영웅 이미지 영웅 이미지 너비를 200 픽셀로 설정하고 글꼴 크기와 글꼴 두께 및 색상을 적용합니다

그에 따라 텍스트 마지막으로 "action-btn"이라는 클래스 이름을 부여한 클릭 유도 문안 버튼의 스타일을 지정합니다 우리 html로, 글꼴, 패딩, 테두리 반경 및 색상을 지정하여 앵커를 설정하십시오 대담한 "Hire me"버튼으로 연결하십시오 0

3 초의 전환을 추가하여 그림자가 생기게합니다 마우스를 올리면 단추 뒤에 나타납니다 이제 포트폴리오 웹 사이트의 바닥 글 섹션에 스타일을 적용 할 수 있습니다 이것은 우리의 소셜 미디어 아이콘과 통계가 살아있는 곳입니다 보시다시피 nav와 마찬가지로 flexbox를 사용하여 소셜 미디어 아이콘을 만듭니다 반응 형

svg 태그를 선택하고 소셜 미디어 svg의 너비를 40 %로 조정하십시오 앞에서 언급했듯이 위의 스타일은 모바일 우선이므로 우리는 이제 미디어 쿼리를 사용하여 웹 사이트가 더 큰 브라우저 창에서 어떻게 보이는지 수정하십시오 브라우저의 최소 너비가 1040 픽셀 일 때의 미디어 쿼리를 작성해 보겠습니다 먼저 웹 사이트 컨테이너를 선택하고 그리드 템플릿 영역을 선언하십시오 대형 화면에서는 사이드 바가 내용 격자 및 바닥 글 격자 영역 옆에 있습니다

두 개의 그리드 템플릿 열은 300px 1fr과 두 개의 그리드 템플릿 행으로 설정됩니다 1fr auto로 설정됩니다 다음 코드 행에서는 다른 요소 (예 : nav, 영웅 텍스트 및 바닥 글 소셜 아이콘 nav ul에 대해서는 flex-direction을 column으로 변경하고 제거했습니다 선형 그라데이션 속성에서 "오른쪽에서"오른쪽으로 시작하여 위에서 아래로 시작합니다

포트폴리오 이미지의 플로트를 오른쪽으로 변경하고 footer ul을 960px로 변경하고 svg의 너비를 20 %로 줄였습니다 이것이 최신 웹 개발을 사용하여 반응이 빠른 한 페이지 포트폴리오 웹 사이트를 코딩하는 방법입니다 기술, CSS 그리드 및 Flexbox XO PIXEL에 가입하면 이처럼 더 훌륭한 디자인, 코드 및 기술 비디오를 얻을 수 있습니다 마음에 드시면이 비디오에 큰 점수를주십시오

보고 주셔서 감사합니다 다음 동영상에서 보겠습니다

Dreamweaver CC 2017/2018 Responsive Design Bootstrap 1 (3)

너는 이걸 듣는 것에 지칠 지 모르지만 우리가 할 일은 처음이다 체크는 사이트 관리 웹 140을 확인하는 것입니다

내 웹 140 루트 폴더 결코 더 깊은 다음 웹 140 그렇지 않은 경우 바로 거기 너가 틀린 장소에 있으면 그것은 처음에 이것을한다 그것은 매우 쉬울 것이다 부트 스트랩으로 피클에 들어가서 확인하고 다시 확인하십시오 Dreamweaver CC 2017의 교실 114 페이지에있는 교실 새 파일을 선택한 다음 부트 스트랩 템플릿을 선택하여 이 중 아주 청초한 것도 우리의 필요를 충족시키지 않을 것이므로 새 문서로 이동하기 HTML을 부트 스트랩으로 클릭 할 것입니다 기존의 것을 사용하는 것보다 중요하다

우리는 새로 생성하기를 클릭 할 것이다 미리 빌드 된 것을 포함시키지 않으려면 클릭하십시오 레이아웃을 클릭하고 이제 사용자 정의를 클릭하여 사실 여기에 정보는 내가하는 일을하는 것이 좋습니다 색인 카드에 적어 두거나 휴대 전화에서 카메라를 꺼내고 그것이 나중에 유용 할 것이기 때문에 이것을 빨리 찍어 라 공과에서 언급하고 돌아가서 그것을 볼 수 있다면 너에게 더 의미가있다

그래서 너는 그 일을 다시 한 번 제안 할 것이다 선택을 취소하면 미리 빌드 된 레이아웃이 포함 된 다음이 레이아웃을 모두 남겨 두게됩니다 이번에는 요소를 그대로두고 지금 create ok를 클릭하겠습니다 책을 자주 사용하는 것이 좋습니다 라이브보기 나는 항상 당신을 위해 생방송으로 일하지 않는 것이 좋습니다

나는 항상 원합니다 코드에서 정확히 무슨 일이 일어나는지 지켜봐야합니다 당신의 일이 당신에게 나타나지 않는다면 우리는보기를 나누기 위해 클릭 할 것입니다 그 (것)들을 창에 가기 위하여 나타나고 그 후에 작업 공간 배치에오고 그런 다음 표준 재설정을 클릭하여 원하는 개발자 모드가 아닌지 확인하십시오 그 표준에 도달하면 더 친숙하게 돌아갈 것입니다

어떤 경우에는 아이콘 아래로 보았지만 그렇지 않은 환경 이 순간에 우리가 여기서 할 첫 번째 일은 이건 내 레이아웃으로 HTML을 그래서 우리는 파일을 저장거야 당신이 귀하의 강의 0-5 폴더 안에 저장됩니다 지금은 아주 잘 여기있을 수 있습니다 그것은 당신이 5과에 아래로 스크롤하고 싶은지 원하지 않는 곳입니다 당신은 당신의 수업 중에 저축하고 있습니다 내 레이아웃 및 그것은 HTML 페이지이므로 자동으로 생성됩니다 이제는 폴더를 하나 더 사용한다는 사실을 알았을 때 시동기 페이지 우리는 3 개의 여분 폴더를 여기에서 가지고 있고 가사를 위해 가지고있다 목적 나는 그것들을 모두 한 곳에 모아두고 싶습니다 시간은 업데이 트를 클릭하십시오 그리고 난 아래로 스크롤거야 그리고 글꼴 폴더 및 수업 5에만 해당 폴더가 있는지 확인하십시오

그리고 마지막으로 CSS 폴더를 마지막으로 그리고 나서 예 – 모든 것을 실제 세계에서 환경에서이 파일을 사용하여 루트에서 간단한 작업을 할 것입니다 우리가하고있는 버전은 아마 문제가되지 않을 것입니다 이 단원에서이 단원과 관련된 모든 것을 지키면 더 쉽습니다 폴더 우리가 파일을 모두 저장하고 우리가 볼거야 이 페인트에 다른 파일이 첨부되어 이제 시작할 준비가되었습니다 우리가 클릭하고 싶은 라이브 뷰에서 먼저 클릭하려는 부트 스트랩 레이아웃 우리의 라이브 뷰 페이지는 코드 페이지가 아니라 라이브 뷰에서 우리가 원하기 때문에 이 body 태그가 나타나서 body 요소가 선택되어 이제 첫 번째 우리가 할 일 HTML의 오른쪽에있는 드롭 다운 화살표를 클릭하고 부트 스트랩 구성 요소를 선택하여 본문이 있는지 확인합니다

이 드롭 다운 메뉴에서 선택한 컨테이너 상단을 클릭합니다 미디어 쿼리 인터페이스에서 오른쪽 너비 768 옵션을 클릭합니다 최소 너비 768 최대 너비 991 그냥 최소 너비 768 그래서 그것을 클릭하십시오 컴퓨터 화면의 크기에 따라 코드를 닫아야 할 수도 있습니다 최소 1,100 픽셀 너비가 있어야하므로 라이브 뷰를 클릭하여보기 모든 미디어 쿼리 옵션을 볼 수 있도록 표시하여 여기에 우리의 소규모 미디어 쿼리 옵션 인 768이 있습니다 그게 우리가 선택하기를 원하는 것입니다

그래서 그것을 선택하면 다시 돌아갈 수 있습니다 분할보기를 클릭하고 이제 열 항목이있는 표 행을 클릭 할 것입니다 삽입 패널 둥지 옵션을 클릭하겠습니다 번호를 변경하려고합니다 3에서 1까지의 열을 입력 한 다음 확인을 클릭하여 여기를 살펴보고 두 가지가 보이는지 확인하십시오

당신이 방금 생성 한 것은 컨테이너를 중첩 한 컨테이너 내부에있는 것입니다 작고 작은 열 12를 볼 수 있습니다 이제 알았습니다 이번에 만 열 컴포넌트를 사용하여 그리드 행을 다시 클릭하십시오 기둥 수에 대해 하나를 입력하려고하지만 나중에 나중에 선택하고 확인을 클릭하십시오

이제 코드에서 살펴보고 실제로 행 뒤에 있는지 확인하십시오 이전에 칼럼을 작게 만들었습니다 우리는 그리드 행을 클릭하여 다른 그리드 행을 삽입 할 것입니다 이제 이번에는 기본값 인 세 개의 열이 생길 것입니다 우리는 다시 한번 선택한 다음 OK를 클릭 할 것입니다

그래서 당신이 보는 것은 우리가 모든 것을 둘러싸고 있기 때문에 당신이 원하는 것입니다 아래로 스크롤하면 올바르게 작성된 것을 볼 수 있습니다 div 컨테이너에 모든 것을 담아두면 먼저 div 클래스 행이 있습니다 우리가 div 클래스 행 div 클래스를 가지고 div 클래스 열을 작은 12 가지고 열 12 작은 후 우리는 div 클래스 행을 가지고 그 div 클래스의 내부 우리가 3 개의 열을보고 대신 12 개를 보는 행 우리는 세 개가 있기 때문에 네 개와 네 개가 네 개이고 네 개는 네 개입니다 마지막 추가를하기 전에 커서가 올바른 위치에 있고 당신은 당신의 커서가 마지막 두 마감 사이에있게하고 싶습니다

그리고 당신은 가고 있습니다 열이있는 그리드 행을 클릭하고 한 열에 세 개의 열을 입력하면 그 다음에 클릭하고 괜찮아 질 것입니다 닫힌 태그를 모두 가지고있는 컨테이너를 볼 수 있습니다 하나의 열이 작은 첫 번째 행이 있습니다 12 우리는 두 번째 행에 하나가 있습니다

작은 열 12 우리는 네 열 네 열 네 열이있는 세 번째 행을 가지고 있습니다 12를 3 등분하고 마지막으로 마지막 행을 한 열 12 그리고 다시 우리가 시작하려고하는 닫는 태그가 있습니다 이것을 의미 론적 구조로 바꾸면 그것이 내가 가장 좋아하는 부분이라는 것을 알게된다

Como hacer una Pagina Mobile First y Responsive Design 26 | Layout del video

다음으로 이동 한 후 와서 우리는 그들이 트위터 및 비디오 박스 공유 페이스 북을위한 버튼, 공유 가야이 부분을 만들 것입니다 다음은이 응답 종로가 나타납니다에 표시되지 않습니다해야, 가로 스크롤 것을 볼 수 있지만이 걱정하지 마세요 나는 사실, 여기에 비디오 태그를 사용하고 있기 때문에이기 때문에이 삭제 여기 와서 당신이 더 이상 나타나지 볼 업데이트 할 경우 그러나 결국 나는 다른 코드는 그게 유튜브 준다 삽입 않을 경우 그 비디오 태그가 사용되는 것이 아니다 당신에게 그 마지막으로 사용하지 않을 나타나기 때문에 내가 여부 줄을 상관하지 않기 때문에 그래서 당신은 여기에 플레이어를 볼 수 있습니다 그래서 어디 보자, 여기에이 권리는 우리가 개발해야 할 것입니다 단순히 모두 동일 넣어 가고 있기 때문에 음이 아니라, 우선 현재 코드를 공유 모두 동일한 배경 색상을 가지고 있지만 그들이 이해하기 때문에 어이가 문제가되지 않지만 잘 하나 어떤 다른 것입니다 하지만 이렇게 코드를 저장하고,이 부분은 매우 간단하기 때문에 지금은 비디오 공유, 괜찮아요을 공유하러 온 난 그냥 아니라, 오히려 내가 그렇게 할 것입니다, 여기에서 복사합니다

그리고 여기에 공유 수준의 비디오에서 난 단지 위치를 제공합니다 : 상대를 나는 그것이 내가하고 측면에 10px 아무것도 아래로 넣어 것 100 % 폭과 여백을 차지 말할 것이다, 지금 그래서 나는 이러한이 아무것도하지 않는 것입니다 만약 내가 코스를 할당 할 필요가 고정 된 높이로 볼 흰색으로 배경 여기를 넣어 경우 의 헤이, 250 픽셀을 상상하자! 아니, 많이 될 것 그래서 음이 나는이에 600PX을주지 헤더가 더 당신을 줄 것입니다 사실 헤더 나는 이미 만 수용 할 수 있기 때문에 제거하는거야

내가 좋아,이 공유의 일부가 될 것입니다, 잘 넣어 지금은 여기 와서 다음을 수행, 우리는 각각의 버튼을 놓을 게요, 그래서 나는 이것을 복사하여 여기에 나는 주 비디오 쓰기 페이스 북 버튼, 두 가지를 될 것입니다 내가 잘 걸었습니다와 트위터가 동일한 특성을 갖는 것, 그들은 폭을 모두 차지합니다 (100) 그래서 폭이 100 %가 될 것이고, 픽셀 (10)의 상하에 의해 서로 분리 될 넣어 배경이 파란색과 높이를 착용하는 것입니다, 당신은 100 픽셀 각각의 높이를 넣을 수 있습니다 업데이트를 여기가 나는 두 개의 막대가 이봐! 용서 만 100 픽셀 위아래로 내가 총 100 말했듯이 내가 떠날 이유가입니다 그러나 잘, 아마 (100)는 많은 수 있습니다 내가, 내가 좋아하는 경우에, 조금 더 합리적이라고, 잘, 60, 60 (120)보다 여백을 60 놓을 게요, 내가 넣어거야

물론, 이것과는 사실에 맞게 제거합니다 이봐, 왜 그녀는 간다? 우리는 여기에 (150)의 높이를 넣어 것입니다 저장, 보관하지 않습니다 그렇지 않은 경우, 음, 그 crazy'm는 한 나는 그것을 제거하기 위해 계속 당신을 당신이 무엇을하고 있는지 볼 수 있지만 싶은 호기심이있다 여기에 버튼이 이제 동영상 플레이어를 누락, 그래서 내용 비디오 것을 여기에 넣어 보자 이 내용 요소의 비디오는 여기에, 우리는 폭 100 %, 너비의 100 %를 차지주고 더 마진이없는 것 단지 위로 및 측면에 20 픽셀 0 아래로, 높이가 300 픽셀 예에 의한 할당합니다 그리고 우리는 배경을 넣을 예정 눈에 띄는 아니라 그 동영상입니다로서 배경이 그렇게 녹색 넣어 것입니다

죄송합니다, 여기에 비디오 거기에, 음, 다음이 그 것이다 지금, 응답 버전에서 내가 원하는 것은 다음 물론 서로이 두 개의 버튼을 배치하는 것입니다 이것이 가능하기 그때 디스플레이 인라인 블록과 수직 정렬 여기에 놓을 게요 나는 상단에 넣어 갈거야 지금은 여기에 와서 내가이 복사거야 미안, 나는이 두 가지 요소를 참조 할 필요 해요 무엇을 말해주지 내가 지금 여기 와서 나는이, 나는 이 그가 그렇게 추한 왜 그 열쇠를 닫습니다 것은 여기에서 말하는거야 말할 것이다, 나는 키를 닫습니다 나는 각각의 폭은 45 %가 될 것이라고합니다

다음은 업데이트 여기 저기 상승이 45 %를 가지고 있지만, 어떻게됩니까? 나는 중간에 여기에 공간을 유지하려고합니다 그래서 내가 무엇을 할 거 야하는 것은 이것이다 나는 여백 말할 것입니다 버튼 페이스 북 아래 왼쪽 10px의 0 픽셀에, 4 % ~ 4 %의 권리를 통해, 10 픽셀 이상입니다 그리고 지금 버튼 트위터 나는 같은 말을 하지만 공은 오른쪽에,이 측면에있을 것입니다, 그래서 완전히 붙어 권리 이동의 차이 0과 그리고 여기 왼쪽에 4 %를 줄 것이다 내가 업그레이드 할 때, 나는 그것을있다

글쎄, 나는 내가 좋아 좋아 좋아 사실, 나는 그것이 작동하지 않을 것입니다 알고 나는 그것이 작동하지 않습니다 생각, 내가 나쁜거야 난 5 %를주고 여기에 시도 할 것이다 그러나 당신이 머물 경우가 4 % 좋은보다 아직 설정합니다

그 때문에 확인 음, 즉, 모든 여러분의 비디오 부분에서 이미 반응이다 그리고 이제 코스 타이틀 정보의이 섹션, 이전, 다음 등 연습을 유지하기 위해 다시 이리와 여기에서 왼쪽으로

MSIT, NwSSU: WIS HTML-CSS Responsive Web Design Tutorial

안녕 얘들 아이 튜토리얼에 대한 CSS를 사용한 반응 형 웹 디자인 너는 나에게서 배운다 지금부터 시작하자

그래서 왜 하나의 저장 웹 디자인은 중요한 목표는 반응 형 디자인은 불필요한 크기 조정 스크롤 확대 / 축소 또는 사이트에서 발생하는 패닝 다른 용도로 최적화되지 않았다 장치 웹 페이지는 다음을 사용하여 볼 수 있습니다 데스크톱과 같은 다양한 장치 태블릿 및 휴대 전화 웹 페이지가 있어야합니다 좋아 보이고 관계없이 사용하기 쉽다 웹 사이트가있을 때 장치의 반응 형 디자인으로 쉽고 빠르게 변경됩니다

변화를 걱정할 필요가있다 이러한 유연성은 웹 사이트에 큰 영향을 미칩니다 당신이 빨리하고 싶을 때 이점 당신의 편에 오타를 꼬집거나 수정하십시오 한 번 시작하면됩니다 다음을 포함하는 폴더를 만듭니다

HTML 파일을 색인화하고 CSS 스타일 지정 우리의 인덱스에서 HTML 파일을 추가하자 HTML 구조를 추가하면 제목은 이제 가장 중요한 것으로 반응 형 웹 사이트에 대한 추가는 메타 태그 html5가 메소드를 도입했습니다 웹 디자이너가 제어권을 갖도록 허용 메타 태그를 통해 뷰포트 메타 뷰포트 요소를 포함해야합니다 우리가 말할 때 모든 웹 페이지에서 뷰포트는 사용자가 볼 수있는 영역입니다 웹 페이지는 장치에 따라 다릅니다

더 작은 장치를 사용하는 경우 뷰포트가 컴퓨터보다 작다 width 속성이 화면을 제어합니다 뷰포트의 크기는 너비와 같은 특정 픽셀 수 600에 해당하는 특수 값 장치 CSS의 화면 너비입니다 100 % 스케일의 픽셀 initial-scale 속성은 페이지가 처음로드 될 때 줌 레벨 많은 웹 페이지가 그리드보기를 기반으로합니다 이는 페이지가 분할됨을 의미합니다 n 개의 반응 그리드보기를 컬럼으로 12 개의 열을 가지며 총 너비는 100 % 축소되고 확장 될 것입니다

브라우저 창 크기를 조정할 때 웹 디자인에 중요한 역할을한다 놓기가 더 쉽기 때문에 페이지를 페이지의 요소를 반응 형 그리드보기를 통해 모든 HTML 요소에는 상자 크기 조정 기능이 있습니다 속성은 테두리 상자 값을 설정합니다 패딩과 경계를 확인합니다 총 폭과 요소를 추가하는 높이 CSS를 만들어야합니다

스타일 시트를 찾아서 색인에 삽입하십시오 이제 해당 HTML 파일을 상자에 추가 할 수 있습니다 테두리 상자 볼륨으로 크기 조정 속성 내부에 두 개의 열을 추가해 봅시다 HTML 파일의 한 행 HTML 태그를 추가 한 후 반응 형 스타일 이 모든 항목이 표시되는 것처럼 이 때문에 왼쪽으로 떠있었습니다 열 안의 요소가 사용됩니다

페이지의 흐름을 방지하기 위해 우리가 스타일을 추가해야만하는 상황에서 애프터 셀렉터가있는 행에서 우리는 두 값이 모두 들어있는 clear 속성 새 행이 아래에 추가됩니다 첫 번째 행은 우리가 만든 예제를 보여줍니다 당신은 % value를 사용해야합니다 특별히 요소의 너비 이전에 언급 한 것처럼 지금 열 웹에 총 12 개의 열이 있습니다 12 열을 만들자

수업을하고 반응 형 웹에 사용 페이지 이 열은 모두 부동이어야합니다 왼쪽에는 15px의 패딩이 있어야합니다 국경도 간단한 웹 페이지를 만들어 보겠습니다 머리글과 바닥 글을 추가합니다 이제 섹션 내부에 2 개의 행을 추가 할 것입니다

우리는 섹션 태그를 사용하고 section 태그에 두 개의 div 요소를 추가합니다 수업 행과 함께 첫 번째 행 안쪽에 두 개가 추가됩니다 열을 추가하고 각각 내부에 항목을 추가하십시오 기둥 두 번째 행에 3을 더할 수 있습니다 열을 추가하고 각각 내부에 텍스트를 추가하십시오

기둥 당신 좋아 이제 웹 페이지가 생겼어 당신 웹 페이지에 이미지를 추가 해보자 만들어진 브라우저에서 확인해 봅시다 이미 반응 적이다 이미지가 없기 때문에 여전히 혼란 스럽다

비율의와 그것의 적합하지 않았다 우리는 무엇을해야 고정 된 일을해야 하는가? 내가 말한대로 그것을 반응하게 만든다 이전에 칼럼 내부의 요소 만들기 우리는 반응 형의 이 경우 너비 속성은 이미지 요소가 우리 칼럼에 잘 맞춰서 최대 너비 속성이있는 이미지 추가 100 퍼센트 가치 좋아, 나는 그것이 모두 좋다라고 생각한다 좋아, 그래서 미디어 쿼리 미디어 쿼리 무엇입니까 css3에서 소개 된 CSS 기술로서 @media 규칙을 사용하여 블록을 포함합니다 특정 경우에만 CSS 속성 조건은 이것보다 일찍 참이다 튜토리얼 우리는 행이있는 웹 페이지를 만들었습니다

및 열 및 그것은 반응했지만 그것은 작은 화면에서 좋지 않았다 미디어 쿼리는 우리가 할 수있는 것을 도울 수 있습니다 브레이크 포인트를 추가합니다 디자인이 다르게 작동합니다 거기에 브레이크 포인트의 각면이있다

수많은 스크린과 장치 높이와 너비가 다르기 때문에 에 대한 정확한 중단 점을 만들기가 어렵다 각 장치는 물건을 간단하게 유지하기 위해 여분의 5 개 그룹을 목표로 할 수있다 장치들 소형 장치 중간 장치 대형 장치 초대형 기기는 @media 규칙을 사용하는 다른 중단 점 개발에 사용할 수있는 먼저이 타일을 추가하여 모든 열의 너비가 100 %로 변경됩니다 소형 장치에 도달했을 때 그 (것)들을 사용하여 성분을 은폐하는 것을 시도하자 미디어 쿼리 이렇게하면 반드시 모든 이미지가 숨겨집니다

너비가 600px 미만인 경우 웹 페이지 이제 글꼴 스타일을 미디어 쿼리를 사용하는 태그 텍스트의 글꼴 변경 스타일이 600px에 도달하면 스타일 미디어 쿼리를 사용하여 서로 다른 요소의 글꼴 크기 화면 크기 당신 이 비디오를 시청 해 주셔서 감사합니다 [음악]

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으로 크기를 조정할 수 있습니다 그리고 나서 우리는 계속 진행할 수 있습니다 이것을 실제 대지로 옮기십시오

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