Beginning Graphic Design: Fundamentals

'디자인의 기초'는 미술부터 현대 웹 디자인까지 모든 시각 매체의 기반입니다 대부분을 차지하는 글꼴부터 아주 작은 세부사항도 예외는 없죠

이 예시들의 공통점이 보이시나요? 아주 기본적인 요소로 이루어져있죠 선, 도형, 형체, 질감, 균형 혼자 있을 때는 그 역할이 미미해보이지만 합쳐지면 우리가 보고 만들어내는 거의 모든 것에서 큰 역할을 합니다 스스로를 예술가라고 생각하지 않는 분들에게는 특히 이 기초들이 어렵게 느껴질 수 있어요 하지만 그 기초들로부터 다양한 재료를 활용하는 방법과 간단한 시각 효과를 만드는 방법에 관해 배울 수 있어요

가장 기본적인 요소부터 시작해볼까요 '선'입니다 선이란 두개 이상의 점을 연결한 형태입니다

두툼하거나 가늘기도 하고 구불거리거나 뾰족뾰족하기도 하죠 각각의 특징을 살려 조금씩 다른 느낌을 줄 수도 있고요

디자인에서 선은 굉장히 자주 등장합니다 소묘와 삽화에도 있고 그래픽 디자인 속 질감과 패턴 안에도 있죠 선은 텍스트 구성에 있어서도 많이 활용됩니다 선으로 강조를 더할 수도 있고, 내용을 나누거나 조직화할 수도 있어요 나아가 독자의 시선을 안내하는 역할도 하죠

선을 다룰 때는 무게감, 색감, 질감, 그리고 스타일에 집중하세요 디자인을 전달할 때는 이런 미묘한 자질들이 큰 효과를 내거든요 어디에 선이 숨어있는지 찾아보세요 예를 들면 글자 속에도 선이 있습니다 심지어 서체 안에서도, 다양한 선의 형태를 활용해보면 놀라울 정도로 신기한 작품을 만들 수 있어요

'도형'은 분명한 경계가 있는 임의의 2차원 위 면적입니다 원, 사각형, 삼각형, 그리고 많은 모양을 포함합니다 도형은 크게 둘로 나뉩니다 기하학적 형태 (정형正形) 이거나, 유기적 형태 (자유형自由刑) 입니다 도형은 생각을 시각화하는 것에 있어 필수적인 요소입니다

이미지의 영향력을 키우고 눈에 띄게 만들죠 우리가 도로 표지판과 상징, 나아가 추상미술을 이해할 수 있는 것은 도형 덕분입니다 도형은 일상 속에서 놀라울 정도로 많이 사용됩니다 도형은 내용을 구성하거나 분리하는 것을 도와줍니다 그 외에도 간단한 삽화를 만들거나, 그저 작업물에 재미를 더할 때에도 활용되죠

도형은 너무나 많은 것들의 바탕이기 때문에 중요하다고 말할 수밖에 없어요 디자인 속 도형을 찾아보세요 없는 곳이 없다는 걸 금방 눈치채실 거에요 도형이 3D가 되면, '형체'라고 부릅니다 형체는 3차원으로 현실에 존재할 수도 있고, 함축적으로 표현될 수도 있습니다

이런 경우 빛과 그림자, 그리고 시점으로 깊이를 표현합니다 형체는 2차원의 디자인에 사실성을 더해줍니다 형체가 없다면, 통통 튀는 고무공은 그저 빨간 원에 불과하겠죠 3D 건축물은 직사각형의 연속에 불과하고요 심지어 플랫 디자인에서도 형체와 깊이를 표현하기 위해 미묘한 기술을 활용한답니다

(역자 주: 플랫 디자인, 입체감을 없애고 평면에 붙은 듯한 디자인 기법) 일상 속 형체는 같은 역할을 하지만 규모가 작아집니다 예를 들어 단순한 그림자를 층이 있는 것 같이 보이게 만들거나 대상에 공간감을 부여하는 데 쓰이죠 기본 형체를 활용하면 사실성이 커질 거에요 적절히 활용하면 정말 강력한 도구가 되죠

'질감'은 표면의 물리적인 특징입니다 형체와 마찬가지로, 3차원 – 즉 보고 만질 수 있는 – 이거나 함축적으로 표현될 수 있습니다 현실에 존재했다면 이러한 질감이 있었을 것이다, 고 제시하는 거죠 디자인에서 질감은 평평해 보이는 이미지에 깊이감과 감촉을 더합니다 활용된 요소에 따라 부드럽거나, 거칠거나, 단단하거나 부드럽게 보이게 됩니다

초심자라면 배경이미지에서 질감을 활용해 보세요 그리고 작업물이 얼마나 흥미로워지는지 경험해 보세요 자세히 살펴보면 전혀 예상치 못한 곳에서 질감을 찾아낼 수 있을 거에요 낡아보이는 글꼴이나 반질반질한 아이콘에도 있죠 너무 멀리 가지 않도록 주의하세요

한 디자인 안에서 질감 표현을 과하게 사용하면 디자인이 쉽게 망가집니다 '균형'은 시각적 무게의 균등한 분배입니다 다시 말해서, 독자의 눈을 사로잡는 요소가 무엇인지와 그들이 가지는 무게감을 말하죠 균형은 색감, 크기, 개수, 그리고 여백에 쉽게 영향을 받습니다 초심자라면 균형을 다루는 것이 조금 어려울 수 있습니다

일종의 직관이 필요하거든요 다행히도, 디자인 세계에는 균형의 수많은 변이형을 쉽게 이해하도록 도와주는 예시가 아주 많습니다 대칭형 디자인은 축의 양쪽이 같거나 비슷합니다 양쪽이 같거나 충분히 비슷하게 구성되어서 균형있다는 느낌을 주죠 비대칭형 디자인은 다릅니다

그러나 무게감은 여전히 균등하게 분배되어 있죠 중요한 것들에 강조점을 주었을 뿐, 이 역시 균형있다고 할 수 있습니다 주로 '3분할 원칙'이라는 전략이 활용됩니다 작업 공간이 3×3 그리드로 나뉘어져 있다고 상상하는 거에요 이미지의 중심이 이 선들의 위에 있거나 혹은 가까이 있어야 나머지 공간과 시각적인 균형을 이룬다는 겁니다

이러한 구성이 효과적인 이유는, 연구에 의하면 인간의 눈이 디자인을 스캔할 때 자연스럽게 위와 같은 순서를 따르기 때문이라고 해요 '디자인의 기초'는 결국 큰그림에 관한 이야기입니다 다시 말해 모든 작업물의 작은 세부사항들까지 감상하는 법을 배우는 것이죠 이런 통찰은 거의 모든 프로젝트에 적용할 수 있어요 자신만의 그래픽을 만들어내거나, 작품을 간단히 개선하고 싶을 때에도 쓸 수 있어요

'디자인의 기초' 영상을 즐겁게 봐주셔서 감사합니다 컬러, 타이포그래피, 그 외의 다양한 주제의 영상도 확인해보세요!

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 그리고 다시 우리가 시작하려고하는 닫는 태그가 있습니다 이것을 의미 론적 구조로 바꾸면 그것이 내가 가장 좋아하는 부분이라는 것을 알게된다

Sketch App Tutorial – Design a simple landing page in Sketch

이봐 요! 저는 Skillthrive의 Hunter이고이 과정에서 방문 페이지를 디자인 할 것입니다 스케치에

1 단원에서는 대지 시작과 같은 기본 사항을 다루고 모양 만들기, 텍스트 만들기, 레이어 그룹화, 그림자 추가 등이 있습니다 시작하자 안녕하세요, 저는 Skillthrive의 Hunter입니다 어떻게하는지에 대한 첫 번째 강의에 오신 것을 환영합니다 Sketch에서이 방문 페이지를 만듭니다

우리가하고 싶은 첫 번째 일은 실제로 우리가 상륙 페이지를 만들 예정인 대지를 만듭니다 이를 위해 Sketch에서 'A'를 클릭하면 대지 도구를 빠르게 그냥 여기로 나와 아트 보드를 드래그하면됩니다 또는 대지 도구를 사용하고있을 때 프리셋을 위해 여기에 드롭 다운하십시오 즉시 사용할 수있는 다른 프리셋이 있습니다

하지만 실제로 내려와 맞춤 사전 설정을 만들고 싶습니다 그렇게하면 이것을 다시 사용하고 싶습니다 그냥 대지를 만든 다음 크기를 조절할 필요가 없습니다 이 버튼을 클릭하기 만하면됩니다 우리는해야만한다

실제로 사용자 정의 크기를 생성하므로 여기로 내려갑니다 이것을 클릭하면 사냥꾼 표준과 같은 이름으로 지정됩니다 웹 페이지 너비를 1200, 높이를 700으로 설정하고 구하다 자, 이제 우리는이 커스텀 아트 보드 프리셋을 가지고 있음을 볼 수 있습니다

여기를 클릭하면 프로젝트에 추가됩니다 나는 갈거야 실제로 이름을 바꾸려면 홈페이지 1과 같은 이름을 지정하겠습니다 우리가 실제로이 대지에서 작업하기 전에, 나는 색상에 대한 참조로 사용될 셰이프 몇 개 그런 식으로 당신은 그들을 볼 수 있고 당신이 이것에 들어올 때 그들이 무엇인지에 대한 생각을 가질 수 있습니다

계획 키보드에서 "R"을 누르면 우리는 사각형도 마찬가지입니다 클릭하고 드래그 한 다음 Shift 키를 누른 상태에서 광장 이 픽셀을 200 픽셀 정도 밖으로 드래그하면됩니다 하자 국경을 벗어나면 다시 선택하겠습니다

hold 옵션 다음 밖으로 드래그하십시오 여기에 사각형을 복제 할 것입니다 먼저 채우기 색상을 우리가 사용하는 색상으로 설정해 보겠습니다 이 프로젝트에 사용할 예정입니다

여기에있는 첫 번째 것은이 검은 색이 될 것입니다 우리는 텍스트를 위해 사용할 것입니다 그럼 우리는 좋은 오렌지색을 사용하려고합니다 우리가 사용하려고하는 진한 파란색을 사용합니다 그라디언트 및 이제는 밝은 파란색을 사용하여 그라디언트에도 사용할 수 있습니다

명심해야 할 점 중 하나는 이러한 색상을 저장할 수 있다는 것입니다 팔레트에 여기에 와서이 채우기를 클릭하면 볼 수 있습니다 여기에 전 세계적인 색채가 저장되었습니다 마지막으로 내가 여기있는 네 가지 색은 우리가 이걸 위해 사용하는 색이다

계획 예를 들어 새 색상을 만들고 싶다고 가정 해 봅시다 새 채우기를 만들고이 채색을이 채우기 원한다고합시다 뭐 당신은 할 수있어오고이 더하기 기호를 클릭하면 이제 그걸 볼 수 있습니다 색상이 선택됩니다

따라서 16 진 코드를 기억하거나 입력하는 대신 그 때마다, 당신은 단지 당신이 원하는 색상을 선택하고 올 수 있습니다 나는이 텍스트를 검정색으로 사용하고 싶습니다 당신은 그것이 있다는 것을 볼 수 있습니다 우리가 지금 원하는 색으로 바뀌 었습니다 여기에 채울 필요가 없으므로 데모로 그냥 끄십시오

당신이하고 있는지 확인하십시오 프로세스 속도를 높이고 싶다면 제일 먼저 실제로 홈페이지를 만들려는 것은 다각형을 만드는 것입니다 이쪽으로 내려와 내려오고 나서 이것을 채우십시오 이를 위해 실제로는 다각형을 만들 것입니다 6면

모양을 삽입하고 다각형을 선택하십시오 나는 그냥 갈거야 클릭하고 밖으로 드래그하십시오 그런 다음 교대를 유지하고 그냥 만드십시오 어떤 크기이든간에 꽤 큰데

나는 국경을 벗어날거야 그리고 옆면에서 볼 수있다 다섯 권리 나는 앞으로 나아가고 그걸 6 개까지 뛰어 올릴거야 나는 또한 모퉁이를 약간 둥글게하고 싶습니다

그런 식으로 그들은 어려운 지점으로 오지 않을 것입니다 이렇게하려면 모양을 두 번 클릭하면됩니다 이제이 모양을 볼 수 있습니다 모서리가 선택되었습니다 와서 조정할 수 있어요

그 구석의 진원이 여기에 있습니다 이제는 매번 하나씩하고 싶지 않습니다 이는 다소 비효율적이기 때문입니다 내가 할 수있는 일은 모양을 클릭 한 다음 클릭하고 드래그하십시오 우리의 모든 모서리를 모양을 만들고 나서 우리는 넘어서서 50을 좋아하는 값을 설정할 수 있습니다

이제보실 수 있습니다 그들 모두는 동시에 바뀌었다 내가 제일 먼저하고 싶은 일 캔버스를 가득 채울 수 있도록 훨씬 더 크게 만들어야합니다 당신 비율에 비례하지 않아도됩니다 실제로 당신이 원하는 지점으로 드래그하십시오

나는 실제로 돌리고 싶어한다 이것은 조금 그렇게 그렇게하자 그렇게 빨리하려면 명령 -R과 옆으로와 아이콘 변경을 볼 수 있습니다 그것을 회전시킬 수 있습니다

계속해 다음으로 이동하십시오 이 같은 것을 그냥 더 크게 만들 수 있습니다 좋아요, 그래서 그것은 내가 가고있는 모양과 같습니다 이제 우리는 필요하다 그라디언트로 채우기 위해 원하는 색상을 얻을 수 있습니다

할 것 그 모양을 클릭하고 채우기로 이동하십시오 바로 지금, 우리는 이것을 선택하면 단색으로 채워집니다 바로 옆에있는 것은 선형입니다 그래디언트를 선택하겠습니다 여기서 우리가 할 수있는 것을 볼 수 있습니다

우리의 색상을 설정하십시오 그래서이 색상을 선택하십시오 색상을 선택하거나 사용할 16 진 코드를 설정하십시오 더 진한 16 진수 코드 여야합니다 어서 이걸로 설정하면된다

바로 여기에 그런 다음 우리는이 다음 지점으로 가서 더 약한 16 진수 코드를 사용할 수 있습니다 우리가 채우는 것처럼 우리는이 그라디언트를 실제로 저장할 수 있습니다 이제 내가 실제로 이걸 구해 주었다는 것을 알 수 있습니다 이것을 다시 클릭하면 우리가 사용하고자하는 그라디언트가 생성됩니다

이제이 그라디언트가 여기에서 출발점임을 알 수 있습니다 더 어두운 색으로 가면서 밝은 색으로 내려갑니다 내가 실제로 원하는 것 해야 할 점은 밝은 쪽을 위쪽으로 설정하고 어두운 곳을 아래로 내립니다 이리 나는 그것이 어둡기를 원하지 않는다

그래서 내가 할 수있는 것은 실제로 이것을 확장하는 것이다 조금만 더 내려 가면 어두운 곳이 더 멀어 질 것입니다 멀리, 그래서 이것은 어둡지 않을 것입니다 나는 이런 느낌이 정말 좋다고 생각한다 나는 갈거야

앞으로 나가서 Enter / Return 키를 누르면 이제 여기에 텍스트 상자가 생성됩니다 나는 실제로 두 개의 오픈 소스를 사용하고있다 코스 파일 Skilldrive에서 무료로 제공되는 회원이라면 아직 컴퓨터에 설치하지 않은 경우 다운로드하십시오 첫 번째 내가하고 싶은 것은 실제로 "T"를 치면 텍스트 도구를 가져올 것입니다

그런 다음 아트 보드 내부를 클릭하기 만하면됩니다 할거다 먼저 서체를 Bree Serif로 변경하십시오 크기를 45로 설정하고 선을 62로 설정하려고합니다 그리고 실제로 이것을 돌리고 싶습니다 네가하고 싶은 말에 실제로 말하면, "네 차례 야

온라인 비즈니스에 대한 열정 " 원하는 위치에 배치하십시오 나는 아마 이것으로 주위를 어지럽히 야 할거야 우리가 서브 텍스트와 여기에있는 모든 것을 얻은 후에 조금 더 지금 당장은 괜찮습니다

다시 T를 칠거야 새 세금 계층을 만듭니다 Open Sans에 실제로이 서체를 설정하고 싶습니다 이 크기를 17로 설정하고 다음 행을로 설정합니다 23

가중치를 설정해 봅시다 먼저 빛을 시험해 봅시다 나는 이것에 대한 더미 텍스트를 만들려고합니다 그리고 이것을 그냥 복사 할 것입니다 축소하면 텍스트가 확장됩니다

정말 멀리 이 문제를 해결하려면이 자리에 오셔서 텍스트가 상자에 들어가기 시작합니다 너는 우리의 너비가 여기에서 볼 수있다 457이므로이 너비를 457로 설정해 보겠습니다 그런 식으로 진행됩니다

그것이 잘 정렬 될 것이라는 것을 우리가 알 때 줄 지어 쉬워지기 쉽습니다 이제 우리가 할 수있는 일은 여기에 다음 요소를 만드는 것입니다 그게이 작은 모의 검색 막대와 같을거야 우리가 원하는 것을하기 위해서 우리 타원 도구로 들어가거나, 타원 모양을 만들 수 있습니다 그렇게하려면 그냥 와서 모양을 찾은 다음 타원형으로 내려갑니다

나는 끌기 위하여 실제로 갈 것이다 우리는 타원을 만들고 싶지 않습니다 둥근 사각형 도구를 사용하고 싶습니다 그것을 밖으로 끕니다 먼저 폭을 457로 설정해 보겠습니다

뿐만 아니라 국경을 해제합시다 다음을 두 번 클릭하고 우리는 다시 코너를 볼 수 있습니다 이렇게 다시 모서리를 모두 선택하고 모서리를 끝까지 위로 올립니다 이제 너는 할 수있다 왜 그것이 타원형이라고 생각하는지 보시죠

하지만 사각형이있는 둥근 사각형 도구입니다 모서리가 둥글고 둥글다 나는 실제로 갈거야 여기에 높이를 훨씬 더 작게 설정하십시오 조금이라도 55를 좋아할 것입니다

이 부분을 살펴보면 검색 창에 큰 것처럼 그래서 실제로 그것을 약간 여기서 축소하려고합니다 단지 그것이 다른 모든 것에 비해 얼마나 큰지에 대한 아이디어를 얻는 것입니다 나는 그것이 꽤 좋은 크기라고 생각한다

나는 실제로이 채우기를 순수한 흰색으로 설정하려고합니다 배경 우리가 실제로 볼 수 있도록 그림자를 추가 할 것입니다 배경 여기에서 우리는 우리의 색, X & Y, 블러 및 퍼짐을 설정할 수 있음을 알 수 있습니다

원하는 값을 얻을 때까지 여기에서이 값들을 가지고 놀아 볼 것입니다 내가 원하는 효과 색상이 들어오고 불투명도가 상당히 떨어집니다 흐림을 버리십시오 좋아, 그렇게 생각하는 것 같은데 정말 멋지다

저는 이제이 동일한 글꼴 크기 인 17 Open Sans Light를 사용할 것입니다 나는 "T"를 칠거야 여기에 '이메일 입력 '과 같이 입력하십시오 이 둥근 직사각형에 센터를 시도하고 중심에 놓습니다 이전에 생성되었습니다 이제이 두 그룹을 실제로 그룹화하여 하나의 단위처럼 행동한다 이 레이어를 선택하고 누르고 있습니다

시프트 이 것을 선택한 다음 G로 명령하고이 그룹의 이름을 짓습니다 '검색 창'과 같은 것입니다 그렇게하면 우리가 이것을 숨기고 싶으면 숨길 수 있습니다 전체 그룹을 함께 사용하면 본질적으로 이것을 정렬하는 것이 더 쉽습니다

스케치는 다음과 같이 알고 있습니다 "이봐,이 두 가지는 하나의 요소이므로, 갑시다 이 직사각형에이 텍스트를 정렬하십시오 " 여기에 중심에 있다고 표시되어 있습니다 우리가 이것을 끌어 내면 당신은 볼 수 있습니다

이 빨간 선은 중심에 있다고 말하지만, 실제로는 그걸 내미는거야 두 픽셀과 같습니다 또 다른 빠른 팁은 제가 처음에 정말 스케치했을 때 좋았던 점이었습니다 그것을 사용하기 시작했다는 것은 선택한 요소를 여기에 저장할 수 있다는 사실이었습니다 hold 옵션을 선택하면 거리가 멀어집니다

너 나 알 수있어 실제로 이것을 2 픽셀 아래로 이동 시켰고 실제로 중심에있었습니다 이 둥근 사각형의 가장자리에서 25 픽셀, 그 다음에서 16 픽셀입니다 위쪽과 아래쪽 그리고이 가장자리로부터 255 나는 그것이 정말로 보인다라고 생각한다

좋은 내가하고 싶은 다음 일은 실제로 여기에 버튼처럼 만들면됩니다 그렇게하기 위해, 내가하고 싶은 것은 실제로 이 직사각형을 복제하십시오 그렇게하려면 명령 C를 누른 다음 명령 V를 누르십시오 그리고 그것의 위에 이중화되어 있습니다

그럼 내가 할 일이 다가왔다 이걸 가지고 그냥 끌고 가세요하지만 그 크기를 계속 지켜 볼 것입니다 여기이 모양의 왼쪽 하단에 있습니다 지금은 119시 55 분에 와서 55로 55 싶습니다

그래서 난 그냥 앞으로 가서 스트레칭까지 그것은 그 번호이고 그 다음에 풀어 놓습니다 나는이 오렌지색을 채울거야 우리가 고른 색깔 그것은 내가 기억하는 것보다 조금 어둡게 보입니다 음, 그것은 올바른 색입니다 나는 그것보다 조금 더 어둡게 보일 것 같다 여기,하지만 그건 괜찮아 아, 그게 뭔지 알지? 그림자를 돌려 보자

떨어져서 우리가 간다 차가워 요 내가 할 일은 다음과 같이 추가하는 것입니다 여기 작은 아이콘

파일이 있다면 우리는이 파일을 볼 수 있습니다 봉투 PNG 및 당신이 와서 이것을 안으로 끌 수 있습니다 바로 지금이야 분명히 너무 큽니다 그러니 계속 시도해 보시고이 크기를 40으로 낮추십시오

아마도 심지어 그보다 작습니다 그러니 계속 해보고 25하십시오 가운데에 나는 alt를 잡고 그것이 15 픽셀임을 알 수있다 원안의 각면은 중앙에 있음을 의미합니다

좋아, 그렇게 우리가 그렇게 할거야 가서 보자 이 둘 사이의 간격 우리는 이것은 20 픽셀이며 실제로 작동한다고 생각합니다 이 하나는 35입니다 그래서이 검색 창을 움직여 봅시다

약 5 픽셀 아래로 그냥 내 화살을 사용해서 5 시까 지 내려갈거야 너는 40 픽셀 떨어져 있다는 것을 알 수있다 나는 멋지다고 생각한다 가자 앞으로이 세 가지 요소를 실제로 하나로 묶으십시오

이제, 나는 갈거야 실제로이 이름을 헤더 이름 인 subtext로 바꿉니다 그런 다음 검색을 접습니다 바 그런 다음이 세 개의 레이어 인 명령 G를 선택하고 왼쪽 내용 만 수행하십시오

그렇게하면 이것이 이제는 그 자체의 요소이며 중심을 중심으로 이것을 움직일 수 있습니다 그것 이 레이어를 선택한 상태에서 스냅 할 때까지이 레이어를 이동합니다 센터에 약 60 픽셀 떨어진 곳으로 옮길 것입니다

지금은 70, 그래서 나는 교대를하고 왼쪽 화살을 잡을거야 10을 뛰어 넘을거야 픽셀 그런 다음이를 확인하여 60 픽셀 떨어진 거리에서 볼 수 있습니다 나는 이것을 20 픽셀 더 늘리면 다시 움직여서 두 번 남았습니다

나는 그것이 센터를 말했지만, 단지 이것을 내려라 나는이 텍스트를 전체 요소보다 중심에 더 많은 요소가 있으므로이 요소를 아래로 이동할 수 있습니다 그냥 내가 실제로 좋아하는 것을보고 아이디어를 얻으세요 나는 생각한다 216 상단의 픽셀이 꽤 좋아 보입니다 바로 지금, 다음으로하고 싶은 일 로고를 추가하십시오

나 자신의 로고를 사용하고 있으며 코스 파일이 있다면 당신도 그것을 볼 수 있습니다 계속해서 자산, Skillthrive 로고 가져오고 높이를 31로 설정합니다 여기에서 확대하십시오 나는 그것으로부터 같은 거리를두고 싶다 이것으로 남았습니다

40 픽셀 및 상단에서 약 20 픽셀 나는 좋게 보일 것이라고 생각한다 사실, 조금 내려 놓으세요 shift 키를 누른 다음 아래쪽 화살표 키를 30으로 이동합니다 나는 그것이 좋게 보인다라고 생각한다 우리가하기 전에 내가 할 다음 일은 실제로 전화를 만들고 모든 물건은 실제로 전화를 가지고 있습니다

다시 코스 파일을 가지고 있다면, 내가 무료로 제공 한 것을 볼 수있을 것이다 훌륭한 리소스 인 SketchAppResourcecom에서 여기에 리소스를 스케치하십시오 사용할 웹 사이트

그것은 전 세계의 디자이너들로부터 무료로 제공되는 것들을 가지고 있습니다 사용할 수 있습니다 당신은 우리가이 iPhone X를 가지고 있다는 것을 볼 수 있습니다 어둡거나 가벼운 평면 마크 업 내가 실제로 할 일은 두 번 클릭하고 여는 것뿐입니다

이것이 접혀 있으면 그냥 펼쳐서이 흰색을 선택하고, 그 다음에 명령 C를 사용하십시오 저는 우리 홈 페이지 1에 들어가서 V 명령 만 들어올 것입니다 그걸 붙여 넣으 려구요 이번에는 K 명령을하고 높이까지 내려 간다 거기에 우리가 간다

그래서 여기에 와서 크기를 조정하는 대신에 우리는 비례 적으로 비율을 조정하고 모든 요소가 서로 상대적으로 축척됩니다 그런 식으로 네가 아니야 우리가 방금 얻은 것 같은 그 funkiness를 얻는 것 여기 어딘가에이 위치를 정하십시오 나는 그것을 생각한다 꽤 좋아 보인다

좀 더 작게 만들어서 앞으로 나아갈 것입니다 K 명령을 다시 실행하십시오 450을 좋아할만한 것으로 설정하십시오 당신은 당신이 그것을 설정할 것입니다 사실 이걸 아래로 옮길거야

안구 조금 다음 단원에서 우리는 올 것이다 실제로 이것을 디자인하고 있지만, 지금 당장 걱정하지 마십시오 하자 실제로 들어 와서 나머지 구성 요소를 마칩니다 가장 쉬운 방법 해야 할 일은 계속 진행하고 상단의 탐색 링크를 두드리면됩니다

텍스트 도구를 얻으려면 T를 다시 누르십시오 나는 여기를 클릭 할 것이다 흰색으로 색상을 설정하고 크기를 조금 작게 설정하고 싶습니다 14로 입력하십시오 너의 네비게이션에서 페이지까지 사용할 수있는 것들 웹 사이트

나는 "about"을 가지고있을 수도 있고 alt 나 option을 유지할 것입니다 이것을 끌어 내십시오 나는 실제로 빛에 무게가있는 대신에 갈거야, 세미 보그와 같은 무언가를 펼쳐 보도록하겠습니다 조금 더보기 쉽다 그런 다음이 것을 선택하고 다음과 같은 것을하고 싶습니다

행동 이 두 가지를 모두 선택하고 꺼냅니다 '일정', '연락처'와 같이 변경합니다 다시 복제하고 "로그인"하십시오 그럼 나는 갈거야

서로 20 픽셀 간격으로 공간을 둡니다 이걸 드래그하면 할 수 있어요 23, 20, 20 번 참조 스케치가 있다는 것을 알 수 있습니다 스케치는 또 다른 이유입니다

너무 좋았습니다 나는 그 사람들이 20 명씩 떨어져 있기를 바랐다 그래서 나는이 둘을 20 분 간격으로 띄울 때 "그는 아마 이들 중 나머지는 20 분 간격으로 배치됩니다 " 지능적으로 실제로이 모든 것을 그룹으로 묶어 보겠습니다

저는 여기로 와서 교대를 유지하고이 층들, 명령 G를 선택 할 것입니다 이것을 "탐색"이라고 부르십시오 이 "화이트"에 나는 이것을 실제로 명명하려고합니다 아이폰 그래서 조금 더 설명 내가 이걸 원해

이 로고와 같이 맨 위부터 같은 거리에 있습니다 30 4 픽셀 위로 이동하십시오 이 전화의 왼쪽에 줄이 있기를 바랍니다 그래서 여기에서 볼 수 있습니다

물었다 빨간색 마크에서 전화를 중심으로 볼 수 있습니다 30 픽셀 올라간다하지만 조금 더 올 필요가 있다고 생각한다 이 상자의 위쪽에서 30 픽셀을 측정하고 있습니다

조금 그래서 25 나는 그것이 꽤 좋게 보인다라고 생각한다

좋아 이 방문 페이지 모형에서 내가하고 싶은 것보다 더 많이 추가해야합니다 회전 목마를 나타낼 수있는 여기에있는 서클과 같은 두 가지가 있습니다 그렇게하기 위해 저는 실제로 원을 만들고 타원형 도구로 들어갈 것입니다 확대하고 여기에 서클을 그립니다

계속해서 클릭하고 드래그 한 다음 완벽하게 전환하십시오 15 또는 16 픽셀을 선호하도록 설정하겠습니다 테두리를 끕니다 실제로이 색을 약간 설정하려고합니다 밝은 흰색

그런 다음 옵션을 누른 다음 복제 할 것입니다 약 10 픽셀 떨어진이 하나 그런 다음 나는이 두 가지의 불투명도를 떨어 뜨릴 것입니다 나는 70을 좋아하지 않습니다 아마도

이 하얀 색의 불투명도를 90도 떨어 뜨릴 수 있습니다 조금 큽니다하지만 제가 할 수있는 일은 실제로 이것들을 선택하는 것입니다 커맨드 K와 나는 그것을 백분율로 축소 할 수 있습니다 계속해서 규모를 조정 해 보겠습니다

그것은 80 % 척도만큼 떨어졌습니다 미리 볼 수 있습니다 70 번 가자 나는 70이 멋지다고 생각한다 확인을 클릭하겠습니다

이들이 선택되면서 앞으로 그들을 그룹화하십시오, 그래서 G 명령하고이 "회전 목마를 지명하십시오" 가자 실제 아트 보드와 옆에서 약 40 픽셀 이동하십시오 나는 아직도 이것들이 아주 구별되지 않는다고 생각한다 그래서 앞으로 나아가 자

실제로이 두 가지로 들어가서 50 개의 불투명도를 떨어 뜨리십시오 좋아, 나는 생각한다 그들은 조금 다르다는 것을 알기가 쉽습니다 선택된 먼저 여기를 축소 해 보겠습니다

이것 좀보세요 그게 다야! 완료했습니다 첫번째 교훈, 그리고 우리가해야 할 일은 실제로이 일에 들어갑니다 전화를 걸고 사용자 인터페이스를 디자인하십시오 그 말로, 나는 다음에 너를 만날거야! 2 단원에서는 1 단원에서 배운 개념을 적용하여 iPhone 앱 사용자 인터페이스

또한 기호 사용에 대한 소개를 얻을 수 있습니다 이미지로 도형을 채우는 방법을 배웁니다 시작하자 안녕하세요, 저는 Skillthrive의 Hunter이고 이것을 만드는 방법에 대한 마지막 비디오에 오신 것을 환영합니다 스케치의 방문 페이지 이 비디오에서 우리가 집중하고 싶은 것은 실제로 전화 UI를 만듭니다

우리가하고 싶은 첫 번째 일은 전화 레이어 및이 마스크 레이어를보십시오 이 마스크 레이어 -이 기능을 켜면 전화 화면에있는 것과 같습니다 우리가 여기서하고 싶은 것은 실제로 이 마스크 레이어를 심볼로 만듭니다 기호에 익숙하지 않은 경우, 본질적으로 상징은 당신이 우리의 전화 화면을 나타내는이 마스크와 같은 객체입니다 우리가 이 대지의 복제본

각 대지에 들어가기보다는 하나의 인스턴스 만 변경하면 업데이트됩니다 모든 대지 이 프로젝트가 성장함에 따라 Sketch에서 효율적으로 작업하고 싶다면 익숙합니다 하기 위해서, 계속해서 이것을 상징으로 만드십시오 우리가 할 수있는 일은 우리가 할 수있는 일입니다

마우스 오른쪽 버튼을 클릭하면 기호 만들기를 말할 수 있습니다 우리가 원하는 것을 물어볼 것입니다 이 아이폰 화면의 이름을 "심볼 페이지로 보내기"라고 할 수 있습니다 가 선택됩니다 확인을 클릭하고 여기에이 새 페이지를 만듭니다

라는 기호 여기에 iPhone이라는 새로운 기호가 있음을 알 수 있습니다 화면 예를 들어 우리가 돌아 가면 무슨 일이 일어날 지 보여 주자 우리는이 전화를 복제했고 우리는 그것을 여기에서 새로운 대지로 뽑았습니다

새로운 대지를 만들어이 대지로 드래그하자 아트 보드 이제 우리는 두 가지 경우가 있습니다 가는 대신 각 대지에 넣고 변경하면 기호에서 할 수있는 것은 만들 수있는 것입니다 여기 하나가 바뀐다

배경을 바꾸자 업데이트 된 것을 볼 수 있습니다 두 휴대폰 용 예를 들어, 그런 일이 일어나기를 원하지 않는다고 가정 해 봅시다 자, 명령 Z를 쳐서 회색으로 돌아가 보자

여기에 오면 두 번 클릭하고 "질량" 여기에 iPhone 화면이라는 드롭 다운이 있습니다 이는 상징 이제 자물쇠를 풀거나 묶어 두지 않으려는 경우 이것으로 들어 와서 상징에서 분리라고 말할 수 있습니다 우리가 기호를 입력하고 채우기 색상을 변경하면 해당 색상이 변경 될 것임을 알 수 있습니다 그것은 여전히 ​​상징에 묶여 있지만, 우리는 그 상징으로부터 단절된 상징이 아닙니다

상징 – 그래서 스케치를 할 때 정말 중요한 개념 이죠 기호가 작동하는 방식을 이해하기 시작합니다 가자 이 대지를 지우면 Z를 다시 실행하고 삭제하도록 명령 할 것입니다 아트 보드

실제로이 작업을 해봅시다 페이지, 나는 우리의 상징에 가고 이것에 종사하기 위하여 다만 시작하고있다 제일 먼저하고 싶은 것은 프로필 이미지를 만들고 싶다는 것입니다 우리 소스 파일에서 나는 당신이 끌어 들일 수있는 우리 자산에 여기에 프로필 그림을 가지고 있습니다 65 픽셀 × 65 픽셀 크기로 조정 해 보겠습니다

앞서 여기에 대한 좋은 장소를 찾아 내십시오 이런 식으로 항상 움직일 수 있습니다 그럼 T를 치자 텍스트 도구 나는 실제로이 색을 우리가 가지고있는이 어두운 색으로 설정하려고합니다

브랜드 색상을 골라 내고 이것을 열어 sans를 엽니 다 일반 글꼴 크기 10으로 설정합니다 그런 다음 일반 이름을 입력하고, "존 파커" 이것을 대략 10 픽셀 또는 5 픽셀로 만듭니다 윤곽

우리가 옵션을 잡으면 5 픽셀이라는 것을 알 수 있습니다 이 프로필의 하단 그런 다음 T를 다시 눌러 텍스트 도구와이 도구를 구하십시오 실제로 크기를 8로 줄이십시오 이것을 대신 설정하십시오

일반, 빛에 그것을 설정하자 이것은 단순한 종류의 정보처럼 될 것입니다 섹션 "Photoshop 및 일러스트 레이터"와 같은 것을 입력 해 봅시다 이들 이 강사가 다루는 주제가 될 수 있습니다

가자 이것을 중심에두고 실제로 옮겨라 이걸로 플러시하십시오 이 텍스트 상자에 맞는지 확인할 수 있습니다 이제 다른 요소를 추가해 보겠습니다

어쩌면 우리는 추종자를 원하고 Instagram 또는 지저귀다 다시 한번 T를 치고 여기에 새로운 것을 만들어 보자 실제로 이것을 동일한 서체로 설정하십시오 세미 볼드와 실제로 이것을 12 개까지 늘려 보겠습니다 다음과 같이 숫자를 입력 할 수 있습니다

435 그리고 나는 다시 T를 칠 수있다 semibold 대신 이것을 설정해 보겠습니다 다시 규칙적인 것으로 설정하십시오 크기를 10으로 설정하고 입력 해 봅시다 "추종자들"

저는 이것을 실제로 함께 그룹화 할 것입니다 먼저, 명령 G를 실행하고이 추종자를 호출하십시오 계속 팔로어를 집중 435 당신은 그것이 꼭 있어야한다는 것을 볼 수 있습니다 실제로는 실제로 이상한 지금

축소하고 거기서 시도해 봅시다 좋아, 그렇게 될거야 뿐만 아니라 그것을 플러시 수 있습니다 나는 실제로 가서 추종자들을 내릴지도 모른다 우리가 여기서 열거 하던데 ~ 그래, 그럼 이걸로 크기를 줄이자

10으로하고 그것을 다시 언급하십시오 알았어 이제 내가 할 수있는 일이 너무 평평 해 이 추종자를 복제하는 것입니다 이 층을 선택하겠습니다

명령 C, 명령 V를 누르고 다음을 수행하십시오 이걸 옮기고 가자 앞으로이 번호를 변경하십시오 123을 알고 다음을이 번호로 변경하십시오 그것이 123 인 중앙에 있는지 확인하십시오

둘 다 21211이에요 이러한 문제를 지나치게 눈 감아 주도록하십시오 이것은 대략이다 측면에서 29 픽셀 215

217 나는 이것에 대한 아이디어를 얻으려면 축소하려고합니다 나는 실제로 가져올지도 모른다 이것들은 조금 더 많아서, 오른쪽으로 시프트해서 오른쪽으로 시프트하십시오 가서 G를 명령하십시오 나는 "stats"라고 이름을 지어서 괜찮을 거라고 생각합니다

저는 사실 이것을 한 픽셀처럼 움직일 것입니다 그것은 닮았다 그것은 오른쪽으로 조금 올 필요가 있습니다 그래서 그냥 조금씩 움직이기를 원합니다 끝났어

지금은 중심에있는 것처럼 보입니다 어쩌면 한번 더 움직여 여기에 우리가 가진이 새로운 요소를 볼 수 있습니다 이제 우리가하고 싶은 일 몇 가지 요소 만 추가하면됩니다 나는 실제로 가서 시작하려고합니다

이들 중 일부를 그룹으로 묶어서이 세 가지를 선택하고 G 명령을 실행 해 봅시다 이 이름을 "프로필"과 같이 지정하십시오 그렇게하면 프로파일 섹션이됩니다 우리는 이것이 어떻게 간격을 두 었는지에 만족합니다 그래서 우리가 이것을 움직이고 싶다면 우리는 단지 이 세 가지 요소를 하나로 합치려는 이유입니다

이 카드를 만들어 봅시다 그렇게하기 위해 우리는 들어올 수 있습니다 실제로 둥근 사각형을 다시 수행하십시오 계속해서 너비를 175 여기에서 국경을 끄고 전진하고 복제 할 것입니다

이 세 번처럼 나는이 두 요소를 실제로 움직일 것입니다 이것을 서로 약 15 픽셀 이동시킨 다음 한 번 더 복제하십시오 그것은 꽤 좋아 보인다 이것들을 채우기 위해 영상

이 작업에는 여러 가지 방법이 있지만 내가하고 싶은 한 가지 방법은 실제로 채우기로이 아이콘을 선택하십시오 그런 다음 이미지를 선택하고 당신은 당신이 사용할 수 있고 열린 것을 클릭 할 수있는 당신을위한 몇 가지 이미지가 있음을 알게 될 것입니다 여기에 적용 할 것입니다 그리고 지금은 너무 큽니다 우리는 할 수있는 것은 실제로 이것에 와서 채우기 만하면됩니다

이미지를이 섹션에 추가하십시오 이것들을 계속 진행해 봅시다 다시 실제로 우리 페이지 1로 돌아가서 이것이 무엇을 보이기 시작하는지 봅시다 꽤 멋지다 그 효과가 그 심볼 페이지가 이제 적용되어 여기에 옮겨졌습니다

내가하고 싶은 몇 가지 더 있습니다 내가 실제로하고 싶은 한 가지는 내가 원하는 것이다 이 흰색 배경에있을 기호로 돌아가서 이것을 순수한 흰색으로 바꿔라 그래도 우리가 이렇게하면 순수한 흰색 배경과 흰색 전화, 그래서 우리가 할 수있는 것은 우리의 기본 계층에 여기에 와서 이 채우기를 변경하십시오

우리는 색상을 약간 오프셋 할 수 있습니다 따라서 F2F2F2 16 진수 코드입니다 마지막으로 할 일은 그냥 복사하는 것입니다 이 16 진수 코드를 여기에있는이 술집에 적용하면됩니다 새로운 iPhone 10에 다시 채워 넣고 붙이면됩니다

정상으로 보입니다 당신이하고 싶은 다음 것은 작은 마음을 추가하는 것입니다 그런 다음 시간과 같은 이유로 전화 구성 요소 중 일부를 여기에 추가하십시오 너의 셀룰라 전화 서비스를위한 신호 및 재료 당신이 내가 다른 스케치 리소스를 가지고있는 것을 본 코스 파일 iPhone X 노치 오버레이라는 무료입니다

이걸 열어 보겠습니다 나는 이걸 끌어 놓을거야 여기에 우리가 사용할 수있는 몇 가지 노치가 있음을 알 수 있습니다 순수한 흰색을 사용하고 싶습니다 그래서이 것을 선택하고 나는 우리의 상징에 와서 여기에 붙여 넣을 것입니다

너무 컸다는 것을 알 수 있습니다 그래서 우리가 할 수있는 일은 당신이 우리의 대지에 들어온 것입니다 너비가 201 인 것을 볼 수 있습니다 그래서 우리가 원하는 넓이입니다 상태 표시 줄은 그렇게하기 위해 K 명령을 명중 시키면 비율에 비례하여 너비를 201로 설정하고 확인을 클릭하십시오

그럼 우리가 할 수있는 일 이것을 우리가 원하는 곳으로 옮기십시오 우리가 우리 페이지로 돌아 가면 그 변화가 이어졌다 내가하고 싶은 또 하나의 일은 우리가이 사람을 따라 가고 싶으면 좋아 우리의 상징과 다시 자산에 나는 두려운 마음을 가지고있다 어서 드래그하세요

이걸로 축소 해 봅시다 우리가 실제로 볼 수 있도록 채우기를 변경하십시오 그것 이 항목을 선택하고 15 픽셀로 스케일을 내립니다 바로 지금 당신은 심장의 바닥이 이 프로필 사진의 맨 위에는이 카드들과 같은 거리에 있습니다

그래서 그것은 좋고 중심에있다 페이지로 돌아가서 그 내용을 봅시다 보이는 것처럼, 좋아, 나는 그것이 정말로 좋게 보인다라고 생각한다 한 가지 더 있어요 나는이 일을하고 싶다

그리고 그것은 최후의 그림을 퇴색시키는 것이다 떨어져서 그것이 계속되는 혼합 인 것처럼 그것은 본다 그렇게하기 위해, 여기에서 직사각형을 만드는 것입니다 난 그냥 해요 직사각형을 만들려고합니다 나는 그것을 더 작게 만들고 그것을 끌 것이다

실제로 국경을 끄고 채우기 위해 나는에 들어갈 것입니다 구배 나는 이것을 설정하려고합니다 – 실제로 이것을 조금 더 크게 만들고 싶습니다 나는 그것을이 꼭대기에 원하는 그라데이션에서이 밑색을 원한다 순수한 흰색

나는 다음 것을 순수한 흰색으로하고 싶지만 불투명도를 설정하고 싶다 0으로 우리가 할 수있는 일은 이것을 연장 할 수 있다는 것입니다 이걸 움직여 이런 종류의 효과를줍니다

다른 지점을 여기에 설정하고 순수한 흰색이지만 어쩌면 조금 증가시킬 수도 있습니다 그런 것 이제 너는 그 말의 의미를 알 수있을거야 테이퍼 오프 효과 우리 페이지로 돌아와서 효과가 적용됩니다

이걸 감싸기 전에 내가하고 싶은 한가지 더 있습니다 이것은 우리가 만든이 다각형에 그림자를 추가하는 것입니다 하기 위해서 그냥 그림자로 들어가면 멋진 미묘한 그림자가 추가되었음을 알 수 있습니다 나는이 값들을 가지고 장난하고있다 그래서 나는 실제로 흐릿함을 켜고 그것을 집어 넣을 것입니다

그런 식으로 그 모양을 조금 더 깊게 만듭니다 배경 – 조금 더 멋지게 보입니다 내 의견 다시 말하지만, 어떤 아이디어가 있으면 아이디어를 얻기 위해 축소하려고합니다 최종 변경 사항

이 레이어를 10 픽셀 위로 가져 와서 움직일 수도 있습니다 이것은 약 10 픽셀 이상이되었습니다 이제 모든 것들이 어떻게되는지 아이디어를 얻으실 수 있습니다 정렬 차갑고, 그게 다야! 이 방문 페이지에서 일하는 축하해

스케치에 Sketch를 처음 사용하는 경우 어떻게 보았 으면합니다 이것으로 정말 쉽게 프로토 타입을 만들 수 있으며 왜 그렇게 많은 사람들이 가지고 있습니까? 포토샵과 일러스트 레이터에서 이것을 전환했습니다 포토샵 자체가있다 현재 경쟁자이거나이 경쟁자 인 Adobe XD입니다

나는하지 않는다 XD는 아직 스케치가 어디에 있는지는 모르겠지만, 미래에는 아마도 그것이 나 일 것입니다 그것도 튜토리얼을해라 다시 한 번 말씀 드리지만 이것을 볼 시간! YouTube에서 YouTube를 팔로우하지 않은 경우해야합니다 그것도 Skilldrive의 무료 회원이됩니다

다시, 나는 Skillthrive에서 사냥꾼이다 그리고 나는 다음에 너를 볼거야!

The first secret of great design | Tony Fadell

번역: ChulGi Han 검토: JunYoung Lee 1980년대 유명한 영화중에 "블루스 브라더스" 아시나요? 존이 댄을 만나러 시카고에 있는 그의 아파트에 가는 장면이 있습니다 매우 비좁은 장소에 기차 선로에서 아주 가까웠죠

존이 댄의 침대에 앉자마자 기차가 하나 지나갔고, 방이 요동쳤습니다 존이 묻길, "하루에 기차가 몇대나 지나가?" 댄이 "자주, 너는 알아채지도 못할꺼야" 라고 대답했습니다 그리고 벽에서 뭔가가 떨어졌습니다 우리는 모두 그가 말하고자 하는 것을 알고 있습니다 인간으로써, 우리는 주변 환경에 매우 빠르게 적응합니다

제품 디자이너로써, 제 일은 주변 모든 것을 보고, 느끼고 향상시키는 것입니다 예를 들면요, 이 과일 보이시죠? 이 작은 스티커도 보이시죠? 이 스티커는 제가 어렸을 때는 없었습니다 하지만 세월이 흐르고, 누간가가 과일에 스티커를 붙이는 놀라운 생각을 해낸거죠 왜일까요? 그것은 우리가 슈퍼마켓에서 과일을 확인하기 쉽게 도와주기 때문입니다 훌륭합니다

우리는 빠르게 쇼핑을 할 수 있게 되었습니다 하지만, 새로운 문제가 있습니다 우리가 집에오고 배가고플때 과일을 발견하면 우리는 그저 잡아서 바로 먹고싶죠 당장은 아닙니다 우리는 그 전에 스티커를 봐야만하고 우리의 손톱으로 과일에 손상을 주면서 스티커를 파내야 합니다

스티커가 손톱에 들러붙죠 무슨말이신지 아시죠? 그리고 손가락에 붙어있는 스티커를 때어내려고 안간힘을 써야됩니다 (박수) 그건 재밌지 않아요, 전혀요 하지만 흥미로운 점이 있습니다 처음에 여러분이 스티커를 때어낼때, 그러한 나쁜 느낌이 들껍니다

그냥 과일을 바로 먹고싶었죠 화가났고, 매우 성가셨습니다 하지만 10번 반복하면, 당신은 화가 덜나고 그저 라벨을 뜯어내기 시작하죠 100번 쯤 반복하면, 저 같은 경우에는 일상생활이 됩니다 그저 과일을 잡고 손톱으로 스티커를 뜯고, 그리고 문득 궁금해하죠, "다른 스티커가 있었나?" 왜 그럴까요? 왜 우리들은 모든 것에 적응할까요? 우리 인간은, 뇌의 용량이 제한됩니다

그래서 우리 뇌는 모든 일상생활을 습관화 하며 그래서 우리는 새로운 것을 배울 수 있습니다 이 것을 습관화의 과정이라고 합니다 그리고 이것은 인간으로써 우리가 배우는 가장 기본적인 방법중의 하나입니다 습관화는 그렇게 나쁘지 않습니다 운전하는 법을 배운 기억이 있나요? 저는 확실히 기억납니다

손을 핸들에 꽉 고정시키고, 시야의 모든 것들을 뚫어지게 봤죠 자동차들, 불빛들, 보행자들 매우 초초한 경험이었습니다 너무 초초해서 차 안에 누구와도 대화할 수 없었죠 음악도 들을 수 없었고 하지만 무언가 흥미로운 일이 생겼습니다

몇주가 지나면서, 운전이 점점 쉬워졌습니다 습관화 된거죠 재미있어지고 자연스러워졌습니다 그러면, 동승하고 있는 친구들과 대화할 수 있고 음악도 들을 수 있습니다 이 것이 습관화의 좋은 이유 중 하나입니다

습관화 없이는, 우리는 항상 모든 것을 알아채야하기 때문이죠 그것은 매우 피곤할 겁니다 그리고 우리는 새로운 것을 배울 수 없겠죠 하지만 가끔식은, 습관화는 좋지 않습니다 그것은 우리 주변의 문제들을 파악하지 못하게 하기 때문이죠

그건 나쁜점이죠 그리고 그것이 파악뿐만 아니라 문제를 고치지 못하게 한다면, 그건 정말 나쁜 점입니다 코미디언들은 이것에 대해 잘 압니다 제리의 커리어는 모든 사소한 점을 인식하는 것으로 시작했습니다 그의 백치같은 행동들은 우리가 매일 했으며 기억조차 못하는 것이죠

그는 그가 그의 친구들을 만났던 시간을 우리에게 말했습니다 그는 그때 그저 편안한 샤워를 하고 싶었습니다 그는 손잡이를 잡고 약간 돌렸는데, 100도가 넘게 뜨거워져버렸죠 그리고 반대로 살작돌리자, 100도가 넘게 차가워졌습니다 그는 그저 편안한 샤워를 하고 싶었습니다

우리는 모두 그러하였지만 그저 기억을 못하는 것입니다 하지만 제리는 했고, 그것이 코미디언이 할 수 있는 일입니다 하지만 디자이너, 혁신가 그리고 기업가들은 그것을 알아차리는 것 뿐만 아니라 한걸음 더 나아가 그것들을 고치려고 노력하기 까지 해야 합니다 이 사람을 보세요 이 사람은 메리 앤더슨입니다 1902년 뉴욕, 그녀는 방문 중이었습니다

매우 춥고 습하고 눈이오는 날이었고 그녀는 전차 안에 있었습니다 그녀가 도착치에 가고 있을때, 운전사가 운전을 안전하게 하기 위해서 창문을 열고 있다는 것을 알았습니다 그렇지만 그가 창문을 열었을때 모든 젖고 차가운 공기가 들어왔습니다 모든 승객의 인상이 찌뿌려졌죠 아마도, 거의 모든 승객들은 이렇게 생각했을 겁니다

"이건 삶의 일부야, 그는 깨끗히 하기 위해서 어쩔수 없었어" 하지만 메리는 그렇지 않았습니다 메리는 생각했습니다 "만약에 운전자가 앞유리를 창문을 열지 않고도 깨끗하게 할수 있으면 운전도 안전하게 할 수 있고 승객들도 따뜻하게 할 수 있을텐데" 그래서 그녀는 스케치북을 들고 첫 번째 와이퍼가 될 작품을 그리기 시작했습니다 이제 제품 디자이너 로서 저 또한 메리처럼 생각하려고 합니다

세상을 있는 그대로 보는 방식입니다 우리가 생각하는 방식 말구요 왜냐구요? 왜냐하면 모두가 보는 문제는 풀기 쉽지만, 거의 모두가 보지 못하는 문제는 해결하기 어렵기 때문이죠 몇몇 사람들은 이것이 타고난 능력이라고 생각합니다 메리의 경우처럼 타고난 재능을 가졌다고 말이죠

하지만 저는 아닙니다 연습해야만 했죠 애플에서 일하는 동안, 스티브 잡스는 매일 사무실로와서 제품을 고객의 눈으로 보도록 요구했습니다 새로운 고객이죠, 그들은 제품에 대해 공포심과 절망감을 가질 수 있고 새로운 제품에 대해 들뜬 기분을 가집니다 그는 그것을 초심에 머물기라고 불렀고, 우리가 아주 작은 부분에 초점을 맞춰서 빠르고 쉽게 새로운 고객에게 접근하도록 주문했습니다

저는 아이팟 초창기 시절을 똑똑히 기억합니다 90년대로 돌아가서 기계괴짜인 시절에 저는 최근 상품을 위해서 상점으로 돌진했습니다 그곳으로 가기 위해서 오랜 시간을 투자한 뒤에 다시 집에 와서 개봉 했습니다 그러면 조그만 스티커가 붙어있습니다 이렇게 적혀있죠, "충전후에 사용하세요

" 뭐! 믿을수가 없네! 이걸 사려고 하루 종일 걸렸는데 이제 충전까지 해야 사용가능 하다니 새로운 장난감을 사용하려고 어마어마한 시간을 기다린 것 같았습니다 완전히 미쳤죠 이거 아시나요? 그 시절의 모든 상품은 그랬습니다 배터리를 내장했다면 사용하기전에 충전해야 했죠 스티브는 그것을 알았고 말했습니다

"우리 제품에는 그런일이 일어나지 않을 것이다" 우리는 어떻게 했을까요? 일반적으로 상품에 하드드라이브가 탑재되어있으면, 공장에서 30분동안정도 테스트를 합니다 몇년 후에 구매할 고객들을 위해 하드드라이브가 잘 실행되도록 말입니다 대신에 우리는 어떻게 했을까요? 우리는 2시간 넘게 테스트를 했습니다 왜냐구요? 첫 번째로 우리는 더 높은 수준의 제품을 만들기 원했고 그것이 고객들에게 훌륭하길 바랬습니다

하지만 가장 중요한 점은 배터리가 충분히 충전되어서 고객에게 전달되길 바랬습니다 우리 상품을 구매한 들떠있는 고객에게 바로 부팅할 수 있게 말이죠 그 생각은 훌륭했고, 성공했습니다 사람들이 좋아했습니다 요즘은 거의 모든 상품들이 완전히 충전된 상태로 출시됩니다

하드드라이브가 없더라도 말이죠 하지만 그 당시에는, 우리는 그 사소한 부분을 알아채고 수정했습니다 그리고 이제 모두들 그렇게 하는 것이죠 "사용하기 전에 충전하세요" 라는 문구는 더이상 없습니다

왜 제가 이 이야기를 했을까요? 보이지 않는 문제점들을 보는 것은 명백한 문제 뿐만이 아니라, 물론 그것도 중요하지만 상품 디자인을 위해서 뿐만도 아니고, 주변의 모든 것을 위한 것입니다 보다시피, 우리 주면에는 무수한 안 보이는 문제점들이 있습니다 우리가 다 해결할 수 있는 것이죠 먼저 그것들을 보아야하고, 느껴야 합니다 저는 정신과학이나 심리학에 관해서 여러분들에게 팁을 주는 것이 부담스럽습니다

왜냐하면 TED강연자 중에서 저보다 훨씬 경험많고 많이 알고 있는 사람이 있기 때문이죠 하지만 습관화와 대적하기 위해서 우리가 할 수 있는 팁을 몇가지 여러분께 알려드린다면, 첫번째는 넓게 보는 것입니다 여러분이 어떤 문제에 봉착하면 그 문제를 해결하기까지 많은 단계가 있습니다 가끔씩은, 그 이후로도 더 있죠 만약 여러분이 한발자국 떨어져서 넓게 본다면, 여러분은 문제해결전의 몇가지 단계들을 조절할 수 있을 겁니다

그것들을 혼합할 수도 있죠 그것들은 모두 제거하고 더 좋은 방향으로 이끌 수도 있습니다 자동온도조절기를 예로들면, 1900년대에, 그것이 처음 나왔을 때 그것은 간편하게 사용가능 했습니다 키거나 끄면 됐죠 모두들 이해했습니다

하지만 1970년대에, 에너지 문제가 생겼고 고객들은 어떻게 에너지를 절약할까 생각했습니다 무슨일이 일어났을까요? 자동온도조절기 디자이너들은 새로운 단계를 고안해냈습니다 키고 끄는것에 추가해서 고객들은 프로그래밍을 해야 했습니다 그래서 특정 시간에 원하는 온도를 입력할 수 있었죠 매우 좋아보입니다

모든 자동온도조절기에 그 기능이 추가되었습니다 하지만 그 기능은 에너지 절약에 어떠한 도움도 되지 못했습니다 왜 그럴까요? 우리들은 미래를 예측할 수 없습니다 그들은 그들의 시간과 계절 그리고 연도가 어떻게 변할지 알수 없었습니다 그래서 누구도 에너지를 절약하지 않았습니다

그리고 무슨일이 벌어졌을까요? 자동온도조절기 디자이너들을 다시 스케치를 시작했습니다 프로그래밍 단계에 집중했습니다 그들은 더 좋은 사용자 인터페이스를 만들었습니다 더 좋은 설명서를 많들었고 하지만 여전히 사람들은 에너지 절약을 하지 않습니다 왜냐하면 그들은 미래를 예측할 수 없기 때문입니다

그래서 우리는 어떻게 했을까요? 우리는 프로그래밍 대신에 알고리즘을 삽입했습니다 그것은 여러분이 자동온도조절기를 켜고 끄는 것을 추적해서 여러분이 좋아하는 온도를 찾아내는 겁니다 혹은 싫어하는 온도도요 어떻게 됬을까요? 그것은 잘 작동했습니다 사람들은 어떠한 프로그래밍 없이도 에너지를 절약했습니다

그러니까 당신히 하는 일과 상관없이 만약 여러분이 한발자국 떨어져서 모든 문제들을 본다면 해결까지이 단계들 중에 필요없거나 합쳐야 할 것들이 있을 겁니다 전반적인 과정을 간단하게 만들 수 있죠 이것이 저의 첫 번째 팁입니다 넓게 보자는 것이죠 저의 두 번째 팁은, 가까이 보자는 겁니다

저의 가장 훌륭한 선생님들 중 한 분은 저의 할아버지입니다 그는 제게 세계에 대해서 알려줬습니다 모든 것들이 어떻게 지어졌고 수리됬는지 말이죠 도구들과 기술들은 성공적인 프로젝트를 위해서 필수적이라고 알려줬습니다 저는 그가 나사에 대해서 말한 이야기를 기억합니다

그리고 어떻게 작업에 필요한 나사를 고를 수 있을지도 말이죠 정말 다양한 종류의 나사가 있습니다 나무 나사, 금속 나사, 나선형 나사, 콘크리트 나사, 굉장히 다양하죠 우리의 역할은 상품이 고객 누구에게나 쉽게 설치될 수 있도록 하는 것입니다 어떠한 전문기술이 필요없도록 말이죠

우리가 어떻게 했을까요? 저는 할아버지가 제게 했던 말을 떠올렸고, 생각했습니다 "우리가 상자에 얼마나 다른 나사들을 넣을 수 있을까? 2개, 3개, 4개, 5개? 왜냐하면 너무도 다른 벽 종류들이 있기 때문이죠" 우리는 그것에 대해서 생각했고, 최적점을 찾았습니다 3가지의 다른 나사들은 상자에 넣었습니다 우리는 그 방법이 문제를 해결할 것이라 생각했지만 그렇지 않았습니다

우리는 제품을 배송했고 고객들은 경험이 풍부하지 않았습니다 우리가 어떻게 했을까요? 우리는 다시 스케치를 시작해서 우리가 제대로 하지 못한 부분을 찾았습니다 그리고 우리는 고객들을 위한 특별한 나사를 만들었습니다 그건 사실 투자자들을 화나게 만들었죠 그들은 "왜 그 작은 나사만드는데 그토록 많은 시간을 들이냐고" 말했죠

당장 나가서 영업을 더 하라면서 말이죠 그리고 우리는 "이 나사를 만들면 지금보다 훨씬 더 많이 팔 수 있을겁니다" 라고 말했고 우리는 해냈습니다 박스 안에는 우리가 개발한 나사 한 종류만 있었죠 우리 상품에 쉽게 적용 가능했습니다

우리가 만약 그 보이지 않는 작은 부분에 신경쓴다면 우리는 이 말쳐럼 그 것들을 볼 수 있습니다 "그것들이 중요한지 아니면 우리가 이미 진행한 부분인지? 아마도 그것들을 빼고 할 방법이 있을 지도 몰라" 제가 여러분께 전달하고 싶은 마지막 조언은 젊게 생각하라는 것입니다 매일 저는 저의 세 아이들에게 흥미로운 질문들을 받습니다 이런 종류의 질문들이죠, "왜 자동차들은 날지 못하죠?" 혹은, "왜 제 신발끈은 벨크로가 없나요?" 가끔식은, 그런 질문들은 뛰어납니다

제 아들이 언젠가 제게 왔고 저는 이렇게 말했습니다 "가서 우편함을 체크하고 와봐" 그는 저를 보고 말했습니다 "왜 우편함이 스스로 점검하고 우리에게 알려주지 못하나요?" (웃음) 그건 꽤 좋은 질문이었죠 정말 많은 질문들이 있었습니다

그래고 가끔씩은 대답하기 어려운 질문도 있었습니다 저는 그져, "아들, 그건 그냥 그렇게 되는거야" 라고 말했죠 그러니까 우리가 더 많은 것에 노출될수록 우리는 더 익숙해집니다 하지만 아이들은 모든 것이 익숙해질 만큼 오래 살지 않았습니다

그래서 그들이 문제에 봉착하면 즉시 해결하려고 합니다 가끔씩은 더 좋은 방법을 찾아내죠 그 방법들은 정말 뛰어납니다 그러니까 제 조언은 당신의 팀에 어린 팀원을 받아드리거나 젊은 생각를 가진 사람을 받아들이는 겁니다 왜냐하면 그런 젊음 생각이 있다면 팀원 모두가 젊게 생각할 것이기 때문이죠 피카소는 이렇게 말했습니다

"모든 아이들은 예술가다 문제는 그들이 자라고 난 뒤 어떻게 예술가로 머무르는지 여부이다" 우리는 처음봤을때 모든 것을 가장 정확하게 볼 수 있습니다 습관화되기 전 보다 말이죠 우리의 도전은 그 시점으로 돌아가는 것입니다

좌절감을 느끼고 작은 세밀한 부분들을 보는 것입니다 넓게 보고 가까이 보면서 젊게 생각하며 초심자의 마음을 유지하는 것입니다 이 것은 쉽지 않습니다 이 것은 우리가 세상을 만든 가장 기본적인 방법인 습관화에 역행합니다 하지만 우리가 한다면, 우리는 놀라운 일들을 할 수 있습니다

제 경우에는 더 뛰어난 상품 디자인을 할 수 있습니다 여러분이라면 다른 어떤 강력한 것을 의미할 것입니다 우리의 도전은 매일 아침 일어나서 말하는 것입니다 "어떻게 더 좋은 세상을 경험할 수 있을까?" 그리고 우리가 그 도전을 한다면 우리는 아마도 과일에 부착된 작고 멍청한 스티커를 제거할 수 있을 것입니다 감사합니다

(박수)

Top 5 Web Design Trends in 2019

안녕하세요 빨간색 스테이플러에 오신 것을 환영합니다

이 비디오의 채널에 대해 이야기 할 것입니다 2019 년의 상위 5 개 웹 디자인 추세는 다음과 같은 굉장한 웹 사이트의 예입니다 그들을 사용하여 그것을 확인하자 비디오 배경은 우리가 볼 수있는 최고의 디자인 동향 중 하나입니다 2019 년에 점점 많은 마케터들이 비디오 배경을 사용하여 방문자에게 첫인상을주고 캡처 한 이유를 현대적으로 보여줍니다

같은 시간에 그들의 관심을 몇 가지 예입니다 그리드 레이아웃은 지난 몇 년 동안 매우 인기가 있었으며 최근까지 웹 디자인을위한 고토 레이아웃이되었습니다 비대칭 레이아웃 또는 깨진 그리드 레이아웃이 트렌드는 여전히 강하게 진행되고 있습니다 우리는 많은 유명 브랜드가 자신의 사이트에서이 브랜드를 사용하기 시작할 것으로 기대하고 있습니다 시차 스크롤링은 수년 전부터 있었지만 최근에는 이 기술을 많은 사람들과 결합시키는 점점 더 창의적인 웹 사이트 굉장한 아이디어는 얼마간 좋았다 약간은 좋아졌다 그럼에도 불구하고 우리는 볼 예정이다 더 많은 웹 사이트가 2019 년에 비 전통적 스크롤을 구현했습니다

당신이 빠른 시차 스크롤 자습서를 찾고 있다면 CSS는 아래의 채널 및 링크에서 자습서 비디오를 확인합니다 우리는 대화 형 콘텐츠가있는 더 많은 웹 사이트를 보게 될 것입니다 애니메이션 및 마우스 제어 가능한 컨텐츠 웹 사이트는 정적이 아닙니다 더 이상 발표가 아니라 그들의 관심을 끌기위한 매체 여기에 내용과 상호 작용하는 것이 좋은 예입니다 미니멀리즘 트 렌은 여전히 ​​강하다

2019 년에는 그런대로 머물러있게 될 것이다 더 빠르고 깨끗한 디자인으로 웹 사이트가 더 빨리로드되고 더 나은 상태를 유지할 수 있습니다 화면 호환성 때문에 사용자에게 우아한 느낌을주는 이유는 여기에 몇 가지 샘플이 있습니다 그래서 그것은이 비디오를위한 것입니다 멋진 CSS 디자인에 관심이 있다면 튜토리얼 주간 자습서 비디오를위한 우리의 채널을 확인하십시오

다음번에 뵈요 안녕히 계세요

Beginning Graphic Design: Color

색깔 색은 디자인과 일상에서 필수적인 역할을 합니다

이미지로 눈길을 이끌기도 하고 특정한 기분이나 감정이 들게도 하고 심지어는 단어를 일체 쓰지 않아도 의사소통을 가능하게 합니다 그렇다면 어떤 색들은 조화롭고 어떤 색들은 아닌지 어떻게 알 수 있을까요? 답은 간단합니다: 색채 이론이죠 예술가와 디자이너는 수 세기 동안 색채 이론을 지켜왔습니다 그리고 누구나 배울 수 있어요

디자인을 위해 색을 고르거나, 입을 옷을 고를 때와 같은 다양한 상황에서 색채 이론을 활용하면 자신감을 가질 수 있습니다 약간의 통찰만 있다면, 색을 완전히 새로운 방식으로 보게 될 거에요 기초부터 시작해볼까요, 아주 기초부터? 기초 교육과정을 떠올려 보세요 학교에서 원색과 동화색(2원색을 혼합한 색) 배운 거 기억하시나요? 그렇다면 이미 색채 이론에 대한 지식을 갖고 있는 거나 마찬가지에요 빨강과 노랑은 주황을 만들고, 노랑과 파랑은 초록을 만들고, 파랑과 빨강은 보라를 만들죠

이 색들을 섞으면, 중간 빛깔을 더 많이 만들 수 있어요 다홍색이나 라임색처럼요 모두 모이면, 색상환(고리 도표)을 형성합니다 (이름이 어디에서 유래되었는지 알겠죠?) 이제 한 걸음 나아가서, 색상, 채도, 명도에 관해 알아볼게요 일상에서 접할 법한 용어는 아니지만, 색의 미묘한 차이를 이해하는데 도움이 됩니다

인테리어 상점의 페인트 칩들의 색처럼 다양할 때요 색상이 가장 쉽습니다; '색'의 다른 말일 뿐이에요 채도는 강도를 의미합니다 다른 말로는 색이 얼마나 은은한지 혹은 선명한지를 말해요 명도는 색의 어두움과 밝음에 관련이 있어요

검은색과 흰색 사이에서 판단하죠 보시는 것과 같이, 명도는 다양한 빛깔을 만들어낼 수 있어요 붉은빛 도는 어두운 갈색에서부터, 밝은 파스텔 분홍색까지요 그렇다면 색을 전문적으로 사용하는 것처럼 보이기 위해서 이들을 어떻게 활용해야 할까요? 사실 색의 조화에 기초해서 만들어진 믿을 만한 공식이 이미 존재해요 큰 도움이 되죠

색상환만 있으면 된답니다 가장 쉬운 조화 공식은 단색 설계입니다 한 가지의 색만 사용하니까요 색상환에서 한 부분을 선택하고, 채도와 명도에 관한 지식으로 변화를 만들어내면 됩니다 단색 설계의 최대 장점은 조화가 보장된다는 점이죠

유사색 설계는 색상환에서 이웃한 색들을 사용합니다 빨강과 주황 혹은 파랑과 초록 같은 좀 더 차가운 색들이 있겠죠

색깔들을 가지고 실험해보는 것을 두려워 하지 말고, 자신만의 특별한 해석을 보여주세요 사실 이 공식은 단지 당신에게 영감을 주는 시작점일 뿐입니다 보색은 색상환의 정반대에 위치합니다 파랑과 주황처럼요 혹은 클래식한 빨강과 초록처럼요

지나치게 단순한 보색 설계를 벗어나고 싶다면, 더 밝거나 어둡거나 채도를 낮춘 색들로 변화를 줘 보세요 인접 보색 설계는 보색의 양 옆의 색을 활용합니다 비슷한 대비 효과를 주면서도, 더 다양한 색으로 작업할 수 있어요 (더 흥미로운 결과가 나오기도 합니다) 삼색 설계는 동일한 간격 상의 세가지 색을 활용합니다

색상환에서 완벽한 삼각형을 이루죠 이 조합은 꽤나 인상적입니다 특히 원색 혹은 동화색을 포함하면 더 그렇죠 작업에 활용할 때 염두에 두세요 사색 설계는 색상환에서 직사각형을 형성합니다

하나가 아닌 두 보색 조합을 활용하죠 이 공식은 한 가지 색을 주색으로 삼고 다른 색들을 강조용으로 활용할 때 가장 조화롭습니다 색에 있어서는 몇 가지 고전적인 '할 일과 말 일'이 존재합니다 예를 들면, 같이 쓰였을 때 확 튀어버리는 색들을 본 적이 있나요? (이렇게!)(미안해요) 해결책은 완화시키는 것입니다

말 그대로에요 아주 간단한 방법이 있죠 한 가지 색으로 시작해서 그 색의 밝기, 어둡기, 혹은 채도를 조정해보세요 가끔은 지나친 대비가 독이 될 때도 있답니다 가독성은 모든 디자인에서 중요한 요소입니다

당신이 쓰는 색들은 또렷하면서도 눈에 쉽게 들어와야 합니다 때때로 색을 사용하지 않는 방법도 있죠 아니면 적어도 모든 디테일에 쓰지는 않는다거나 검은색, 흰색, 회색과 같은 무채색은 디자인의 균형을 맞춰줍니다 당신이 색을 실제로 사용할 때, 아주 유용하죠

모든 색은 메세지를 담고 있습니다 프로젝트의 분위기를 고려해서 적절한 색을 선택하는 것이 중요해요 예를 들어, 밝은 색들은 재미있고 현대적인 분위기를 연출합니다 채도가 낮은 색들은 좀 더 형식적인 느낌을 줍니다 내용에 따라 달라지기도 해요

색이라는 것이 얼마나 유연한지 놀랍지 않나요? 색감 설계에 관한 아이디어는 모든 곳에서 얻을 수 있어요 광고, 브랜딩, 유명한 예술 작품에서도 아니면 웹에서 컬러 팔레트를 검색하거나 직접 만들 수도 있어요 경력 많은 디자이너들도 그들 주변에서 영감을 얻는답니다 자신이 좋아하는 걸 찾아서 자기 것으로 만드는 데에는 아무 잘못도 없어요

어디를 보아도 색, 색, 더 많은 색이 있습니다 당신의 작업에 활용하는게 겁이 날 수도 있지만, 그럴 필요 없어요 오늘 색채 이론에 대해 배운 것을 기억하면서 계속 실험해보세요 머지않아 조화로운 색을 선택하는게 천성이었던 것처럼 쉬워질 거에요! 색의 기초에 관한 영상, 즐겁게 보셨길 바랍니다 타이포그래피, 이미지, 구성과 같은 다른 디자인 영상도 확인해보세요!

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 % 좋은보다 아직 설정합니다

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

Web Design – HTML Basic Class | Hello World

안녕하세요 안녕하세요

오늘의 수업 HTML 기본 수업 처음에는 PC 또는 Computer Setup에 대해 알 수 있습니다 우리는 폴더를 만들었습니다 자, 폴더 안에있는 상단보기를 클릭하십시오 그런 다음 옵션을 클릭하십시오 그런 다음 새 폴더 옵션 탭이 열립니다

다시보기를 클릭하십시오 이제 알려진 파일 형식의 확장명 숨기기 왼쪽에 똑딱 거리는 것은 제거되어야합니다 그런 다음 확인 버튼을 클릭하십시오 당신의 일이 끝났습니다 PC 설정이 완료되었습니다

텍스트 문서에서 새 파일을 만듭니다 이제 이름은 indexhtml입니다 우리의 확장은 이제 쉽게 볼 수 있습니다 왜냐하면, 우리는보기로 이동하기 때문에 확장 숨기기 옵션에서 확장이 제거되었습니다

웹 디자인이란 무엇입니까? 즉, 웹 디자인이란 무엇입니까? 즉, 웹 디자인, 웹 사이트는 어떻게 생겼습니까? 웹 디자이너로서의 당신의 직업 완벽한 웹 사이트 템플릿을 만드십시오 즉, 헤더가 메뉴를 가질 것인지, 사이드 바가 있어야하는지, 꼬리말은 무엇을 의미합니까? 코드 편집기 코드 편집기 란, 어디에서 어떤 코드를 작성해야합니다 즉, 웹 디자인을하기 위해서는 코드를 알고 배우거나 우리는 코드 편집기를 선택했다 비주얼 코드 스튜디오 할 수있는 일이 많이 있습니다

코드 편집기를 사용할 수 있습니다 예를 들면 : Notepad ++ 숭고한 코드 편집기 등 코드 편집기 다운로드 및 설치 HTML이란 무엇입니까? 즉, HTML이란 무엇입니까? HTML은 하이퍼 텍스트 마크 업 언어입니다

그렇지 않으면 웹 디자인을 할 수 없습니다 태그 열기 및 닫기 HTML을 우리에게 쓸 때 태그를 여는 것이 필요합니다 그리고 닫는 태그를 사용하십시오 태그 : 제목 및 단락 우리는 H1에서 H6으로 시작합니다

총 6 개의 표제 태그를 사용할 수 있습니다 첫 번째 태그부터 마지막 ​​태그까지의 제목 태그 연속 쓰기는 계속 작을 것입니다 즉, 내가 H1에서 내려 오 자마자, 텍스트가 작을수록 좋습니다 이 수업은 오늘 여기서 끝날 것입니다 다음 학급에서 다시보세요

Text Animation | HTML and CSS Tutorial | Web Design Tutorial 2019

CSS와 HTML을 사용하여 우리의 비디오를보고 웹 디자인을 배우십시오

좋아, 시작하자 그것은 최고의 텍스트 애니메이션입니다 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서

텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션

웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019

HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션

웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019

HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019

최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션

웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019

최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션

웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019

최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션

웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019

최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션

웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

감사합니다 구독하십시오

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에 도달하면 스타일 미디어 쿼리를 사용하여 서로 다른 요소의 글꼴 크기 화면 크기 당신 이 비디오를 시청 해 주셔서 감사합니다 [음악]