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

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

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

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

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

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

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

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

Shop Web Design – Adobe XD to HTML CSS Tutorial (Part 1/2)

안녕 모두들 인도네시아에서 Angga Risky에 오신 것을 환영합니다 어떻게 지내십니까? 이번에는 디자인을 공부하고 HTML 및 CSS에 디자인을 적용하는 법을 배웁니다 그래서 우리는 Adobe XD Software를 사용하여 처음 디자인 할 것입니다 그 다음엔 부트 스트랩으로 HTML과 CSS로 디자인을 만들 것입니다 좋아요

시작하기 전에 오늘의 질문이 있습니다) 어제 저는 채널 커뮤니티에서 많은 질문을 받았습니다 그리고 하나씩 대답하고 싶습니다 그래서 지금 질문은 그래픽 디자이너가 된 기분이 어떻습니까? 그래, 그게 내가 가진 질문이야 자이 디, 그 전에 2005 년에는 그래픽 디자이너로 일했습니다 그리고 저는 마케팅에 대해 많은 것을 배웠습니다 그리고 인터페이스와 비주얼 디자인에 대해서도 마찬가지입니다 그래서 나는 내 자신의 디자인 기술을 향상시킬 수있는 것들로부터 또한 관계 및 네트워크 기술 향상 (관계 속) 또한 마케팅에서의 카피 라이팅 기술에 대한 전문성을 높입니다 그것은 어때? 나는 행복하고 매우 혼란 스럽다 때로는 관리자가 둘 이상 있기 때문에 때때로 디자인 A를하면 갑자기 매니저가 A 디자인을 변경하라고합니다 하지만, 다른 관리자 그는 그가 A 디자인을 좋아한다고 말한다 What and so ?? 어떻게하면이 프로젝트를 끝낼 수 있으며, 심지어 이것이 항상 불완전해진다 거기에 많은 관리자가 있다는 것을 알고 있습니다 하지만, 지금 내 제안은

최고 직책을 가진 관리자의 지시를 따르십시오 때로는 제품 또는 회사의 소유자이기 때문에 최고 관리자의 목소리를 따를 것입니다 가장 낮은 관리자가 아닙니다 예를 들어 관리자가 3 명이므로 가장 높은 방향을 따를 수 있습니다 그래서, 그는 너를 도울거야

회사 소유자에게 디자인을 확인하려면 결론은, 최고 관리자의 방향을 따르고 디자인은 제품 소유자가 확인합니다 좋아요

이번에는 비디오에 대해 계속하겠습니다 오늘은 Adobe XD 및 HTML CSS를 사용하여 디자인 할 것입니다 하지만 매우 길기를 원하지 않기 때문에 2 개의 비디오로 만들 것입니다 그래,이 비디오에서 우리는 첫 번째 비디오를 만들 것입니다 디자인을 HTML 및 CSS (Bootstrap)로 구현하려면 알았어, 그냥 가자

좋아, 내 데스크톱에 오신 것을 환영하며 디자인을 위해 1 개의 그림을 준비했습니다 전자 상거래 웹 사이트에서 가져온 것입니다 먼저 사진이나 제품 사진을 준비 할 수 있습니다 그래서 이것은 Adobe XD입니다 그래서 우리는 중간 크기의 아트 보드를 만들 것입니다

그런 다음 문서를 먼저 저장합니다 그 후 우리는 Adobe XD에서 그리드 시스템을 사용합니다 또한 사용하는 CSS 프레임 워크를 기반으로 사용자 정의 할 수 있습니다

그래서 Bootstrap 프레임 워크를 사용하여 더 쉽고 빠르게 만들 것입니다 메뉴의 왼쪽과 오른쪽에 로고가 있어야합니다 나중에 우리 제품에서 얻을 수있는 주요 색상은 나중에 더 적합합니다

Photoshop CC 2015 Tutorial: What is Technically Possible in Web Design | Adobe tutorial 2017 16/48

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

그래서 당신이 좋아하면 설명에 링크가 있습니다 그러나 지금은 우리가 가진 것을 무료로 보자 이 비디오에서 우리는 우리를 도울 수있는 것들을 볼 것입니다 우리가 Photoshop 후에 웹을 만들 때 Photoshop에는 무한한 가능성이 있습니다

우리는 음영이있는 그라디언트를 가질 수 있습니다 유니콘과 모든 종류의 물건을 날고 불에 태워라 우리는 포토샵에서 그렇게 할 수 있습니다 그것은 그러한 종류의 프로그램입니다 하지만 웹 디자인에 관해서는 꽤 제한되어 있습니다

코드에 의해 웹에 어떤 것들이 놓일 수 있는지에 관해서 무엇보다도 브라우저에 달려 있으며 브라우저의 나이는 얼마입니까? 그것이 견딜 수있는 것과 불가능한 것 유니콘 비행? 아니요, CSS 기능은 없습니다 그러나 그라데이션 및 평행 음영을위한 함수가 있습니다 우리는이 웹 사이트 "caniuse

com"을 사용할 수 있습니다 이 유형의 페이지가 더 있습니다 나는 이것을 좋아한다 그래디언트를 사용한다고 가정 해 봅시다 그라디언트를 쓸 때 CSS 그래디언트 Opera Mini를 제외한 모든 제품에서 작동합니다

Opera Mini와 호환되는 경우 그라디언트를 사용하여 재검토하십시오 그라디언트는 지금 스타일이 아니고, 평면 디자인이 수행되고, 그래디언트가 필요하다고 상상해보십시오 Opera Mini와 호환되어야하는 경우 당신은 CSS 그래디언트없이해야 할 것입니다 당신이 알아야 할 또 하나의 것은 이전 브라우저와 호환되어야하는 경우 웹 사이트를 만들고 표준이 호환 가능한 경우 적어도 Internet Explorer 9에서는 CSS 그래디언트가 없습니다

그것은 당신이 그들을 사용할 수 없다는 것을 의미하는 것이 아니라 단지 나타나지 않는다는 것을 의미합니다 그래디언트를 적용하지 않으면 평평한 배경을 만들 수 있습니다 일반 배경색과 아무런 일도 일어나지 않는다 그것은 배경에 있기 때문에 중요하지 않습니다 우리는 그림자를 찾을 것입니다

몇 가지 유형의 그림자가 있습니다 상자의 그림자 : <div> 태그의 측면에 매달려 있습니다 그들은 일률적으로 작동합니다 문자 그림자를 보자 IE 9와 호환되지 않습니다

결정할 수 있기 때문에 이것은 더 중요합니다 흰색 배경에 밝은 파란색 텍스트가, 그 뒤에 그림자가 있지 않으면 완전히 읽을 수 없습니다 당신은 그 그림자를 가지고있어서 당신은 텍스트를 읽을 수 있습니다 그리고 그것은 Internet Explorer 9에서 일어날 것입니다 흰색 배경에 흐리게 표시된 텍스트가 표시됩니다

이것은 더 중요합니다 이 사이트를 한번보세요 웹 사이트에서 무언가를 할 수 있는지 묻는 질문 : "사용할 수 있습니까?" 웹의 또 다른 특징은 다음과 같습니다 여기에서 나는 내가 아일랜드에 있다는 것을 발견한다 그것은 내가 지금 녹음하고있는 곳이다

가져 오기를 클릭하면 다음과 같은 메시지가 나타납니다 기본적으로이 데이터는 나에게 글로벌 데이터를 제공하며 현재는 아일랜드의 데이터를 제공합니다 전 세계적으로 90 % 호환되는 것을 볼 수 있습니다 아일랜드에서는 97 %가 호환됩니다 전 세계에는 모든 국가가 포함되며 아일랜드 최신, 기술적으로, 현재 브라우저 및 컴퓨터와 더 많은 호환성이 있습니다

개발 도상국을 위해 특별히 웹 사이트를 만드는 경우 당신은 여기서 매우 다른 비율을 가지게 될 것이고, 그것은 훨씬 더 작아 질 것입니다 이 기능 중 일부는 여기에서 사용할 수 없습니다 그리고 이것은 "사용할 수 있습니까?"웹 사이트였습니다 공유하고 싶기 때문에이 무료 동영상을 만들었습니다 비록 내가 당신이 풀코스 과정을 계속하기를 원한다면, 50 개 이상의 동영상이 있습니다

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

Shop Web Design – Adobe XD HTML CSS Tutorial Part (2/2)

안녕 모두 다시 돌아 왔고 이전 비디오의 비디오 연결입니다 이 비디오에서 우리는이 디자인을 계속할 것입니다

HTML 템플릿에 부트 스트랩 프레임 워크 사용 그리고 현재로서는 웹 사이트에서 사용할 자산의 일부부터 시작해야합니다 이번에는 Part 1에서 비디오까지 시청 해 주셔서 감사합니다 이제이 비디오에 대해 조언을 해주시기 바랍니다

그래서이 비디오가 당신에게 좋은 것이라고 생각한다면 나에게 말해줘 그리고 그것이 충분하지 않다면, 당신은 또한 나에게 그것을 향상시키는 방법을 말할 수있다 Ok, 인도네시아 인사, 나는 Angga 위험하다, 다시 너희들을 만난다 🙂

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 용 픽스입니다 다음 비디오에서는 반응 형 탐색 메뉴를 작성하는 방법, 반응 형 이미지 및 비디오, 반응 형 배경 및 요소를 숨기는 방법

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

Sketch Tutorial Web Design: Team Page Design Concept

Skillthrive의 Hunter이고이 튜토리얼에서는 Sketch to Sketch를 사용합니다 웹 사이트 디자인을 위해이 팀 섹션을 만듭니다

주말이야, 그래서 나는 모자! 오늘의 튜토리얼에서 나와 함께 따라하고 싶다면, Skillthrivecom에서 무료 회원이되어 코스 파일을 다운로드하십시오 저기있다 설명의 링크를 클릭하면 등록 페이지로 이동할 수 있습니다 어울리다

그렇게 말하면 스케치에 뛰어 들어가서 오늘 시작하겠습니다 지도 시간 스케치에서 제일 먼저하고 싶은 것은 아트 보드를 만드는 것입니다 그렇게하기 위해서 키보드에서 '대문자'를 클릭하여 대지 도구를 불러옵니다 할거다 아트 보드를 만들려면 클릭 한 후 누르고 드래그하십시오

그럼 나올 수있어 여기에 너비를 1,800, 높이를 800으로 설정하십시오 대지를 '팀 섹션'과 같은 이름으로 바꿉니다 그럼 이걸로 대발 판이 여전히 선택되었습니다 배경색으로 올 수 있습니다

이것이 확실한지 확인하십시오 체크 했어 여기이 팔레트에 들어 와서 순수한 흰색 대신에 흰색 파란색을 띄게하십시오 그래서 나는 F7FAFB의 16 진수 코드를 할 수 있습니다 그런 다음 문서 색상 -이 아이콘이 닫혀 있으면이 아이콘을 클릭하면 확장하면 더하기 아이콘이 표시됩니다

그런 다음 내가 이것을 열면 항상 이것을 열 수 있습니다 파일 또는 다른 사람이이 파일을 열고 특정 색상 표를 볼 수 있습니다 나는이 프로젝트에 사용하고있다 간단히 참조 할 수 있습니다 재사용하고 싶은 색상

자 이제 여기를 축소 해 보겠습니다 아이콘 제목과 자막 부분을 만드는 데 중점을 둡니다 그래서, 나는 처음이다 해야 할 일은 아이콘을 만드는 것입니다 그래서 확대하고 'O'를 눌러 타원형 도구를 가져옵니다

나는 완전한 원형을 만들기 위해 Shift 키를 누른 다음 약 74로 만듭니다 픽셀 그럼 내가 할 일은 '심볼 만들기'를 오른쪽 클릭하는 것입니다 나는 만들거야 '심볼을 심볼로 보내기'페이지가 선택되어 있는지 확인한 다음, 이름을 바꿉니다

이 '라운드 아이콘'으로 이동 한 다음 확인을 클릭하십시오 그런 다음 스케치가 여기서 라운드 아이콘을 볼 수있는 기호 페이지가 있습니다 자, 네가 친숙하지 않다면 심볼은 무엇인가? 그들은 본질적으로 재사용 가능한 아이템이다 의사를 스케치하거나 스케치 생태계 전반에 걸쳐 예를 들어 웹 디자인 전체에서 사용하려는 원형 아이콘이 있습니다

그래서 대신 복사 및 붙여 넣기 또는 다시 디자인하면 기호로 그리고 그것은 당신이 그것을 삽입 할 수 있다는 것을 의미합니다 아이콘을 모두 변경하는 대신 모든 아이콘으로 변경하십시오 개별적으로 하나의 인스턴스 만 변경하면 전체 프로젝트 효율적으로 작업하고 빠르게 작업 할 수있는 정말 좋은 방법입니다

스케치 자, 이제 우리가 할 수있는 일은 가자 여기에서 국경을 그냥 끈다 이 타원에 그런 다음 채우기로 들어가서이 색상으로 들어가서 두 번째 오프 화이트, 그래서 16 진수 코드에 걸쳐 모든 길을 'FA'

히트 리턴 및 문서 색상에 추가해 보겠습니다 그래서 지금은 조금보기가 힘들 기 때문에,이를 해결하기 위해 우리가 할 수있는 것은 그림자를 추가하는 것입니다 그런 다음 우리는이 색으로 여기에 와서 이것을 내려 놓을 수 있습니다 20, 그러면 우리는 Y와 함께 놀 수 있습니다 어쩌면 보급이 조금 있습니다

그런 일을하십시오 그래서 0,4, 4, 그리고 마이너스 1이 내 값으로 설정되었습니다 나는 언제든지 들어 와서 그것을 바꿀 수 있습니다 가자 여기에 우리가 사용할 수있는 아이콘이 있습니다

이제는이 아이콘을 하나만 사용하려고합니다 디자인하지만,이 튜토리얼에서는 실제로 4 개의 아이콘과 심볼에서 오버라이드가 작동하는 방식을 보여줍니다 다시 한번 정말 멋지죠 Sketch에서 여기에있는 기능 그럼 코스 파일로 돌아와서 스케치 한 다음 내가 만든 '아이콘'스케치 파일을 엽니 다

그럼 내가 할 일은 이미이 디자인을 복사하는 것입니다 심볼, 그래서 Command-C 이 Sketch 파일로 이동 한 다음 내 기호 페이지 아래로 이동하십시오 Command-V를 붙여 넣으십시오 이제 오버라이드는 정말 멋진 방법입니다

비슷한 다른 종류의 참조를 사용하고 빠르게 변경하십시오 지금에 주문을 만들려면 동일한 대지의 항목을 사용해야합니다 크기 따라서 모든 대창은 30×30 픽셀입니다 그 이 '일반 사용자'를 사용할 때 Sketch는 내가 할 수있는 것을 알게 될 것입니다

'Edit'Symbol, 'Comment'Symbol 또는 'Check'Symbol으로 대체하십시오 그러니 가자 그 일을하는 방법을 보여주세요 하지만 그렇게하기 전에 저는 실제로 지금 당장 나는 다른 것을 가지고 있다고 지적한다 나는 색깔을 상징으로 사용하고있다

그리고 그 일은 내가 이걸 바꿀 때 파란색의 모든 경우가 하이라이트 색상이 변경 될 것입니다 그래서 여기에서 볼 수 있습니다 '레귤러 User '우리는이 색상 강조 기호를 사용했습니다이 기호는 이것을 참조하고 있습니다 예 이제이 색상을 변경하여 어떻게 작동하는지 보여줍니다

이제 Fill을 살펴 보겠습니다이 16 진수 코드를 파란색으로 변경해 봅시다 1BDDF2를 입력 한 다음 Return을 클릭하십시오 이제 모든 인스턴스가 표시됩니다 그것의 변화했다

우리가 이걸 실제로 움직일 필요가있는 것처럼 보입니다 우리가 간다 그리고 이것도 역시 위로 움직일 필요가 있습니다 우리는 거기에 갈 이제는 하나의 심볼 또는 색상을 변경하는 것만으로도 알 수 있습니다

Sketch에서 즉시 네 가지 항목으로 변경되었습니다 시원한! 이제 심볼을 사용합시다 다른 상징 안에 그러기 위해서 저는 Insert, Document, Regular에 들어갈 수 있습니다 여기에 정기적 인 디자인을 언급하고 있음을 명심하십시오

이것이 규칙적인 방법을 알 수 있습니다 그러면이 드롭 다운을 얻을 수 있습니까? 이것들이 너무 그룹화되어 있기 때문입니다 이 '규칙적인'규칙에 따라 따라서 '정규 / 사용자'라고 여기에서 볼 수 있습니다 'Regular / Edit'및 명명 규칙이 여기에 어떻게 설정되어 있는지 이들은이 드롭 다운 내에서 구성됩니다 그럼 이걸 버리자

'사용자'로 여기를 클릭하여 프로젝트에 집중시킬 수 있습니다 이제 우리가 해냈습니다 우리 페이지로 돌아가서 여기에 우리가 이것을 볼 수 있습니다 상징 그리고 이것은 Overrides와 같은 것들이 정말로 멋지게되는 곳입니다

이제 보시면 이 Overrides 섹션을 살펴보면 '일반 / 사용자'드롭 다운이 있으며,이 항목을 열면 나만 볼 수 있음을 알 수 있습니다 빠르게 다른 아이콘 디자인으로 전환하면 사이징과 간격은 모두 이월 될 것입니다 그게 내가 어떻게 일할 수 있는지 알 수있어 이 프로젝트가 정말로 커지면 효율적으로 자, 이제 가보겠습니다 다시 '일반 / 사용자'로 돌아가서 제목을 만든 다음 자막 섹션

키보드의 'T'를 눌러 텍스트 도구로 전환하십시오 나는 여기를 클릭하고 계속해서 'like'와 같이 입력 해 보겠습니다 최고의 전문 디자이너 " 내가 할 수있는 일은이 모든 것을 선택하는 것입니다 그것을 정당화해라

나는 서체라는 것을 쓸 것이다 Open Sans는 무료 오픈 소스 텍스트입니다 무게에 대해서는 가자 Semibold와 그 크기에 대해서는 조금 더 커 보이겠습니다 45로 설정하겠습니다

문자 간격을 2로 설정하십시오 색상으로 들어가 보겠습니다 여기에 맞춤 색상으로 설정해 보겠습니다 어두운 보라색처럼 보자 4F5163의 16 진수 코드를 사용해 봅시다

그런 다음 추가해 보겠습니다 문서 색상 그리고 나서 이걸 옮기고 에 대해 따라서 중앙에 있는지 확인하려면 여기를 클릭하십시오 하자 우리 아이콘에 대해서도 똑같은 것을하고,이 텍스트를 옮기면 20 픽셀 서로에게서

그런 다음 하위 텍스트 섹션을 추가하십시오 그럼 다시 'T'를 치자 클릭하십시오이 페이지에서 실제로 내 코스 파일에 들어가기로했습니다 'text'폴더에 'filler-text

txt'가 있습니다 그래서 나는 그것을 열어서 일부를 복사 할 수 있습니다 이 필러 Lorem Ipsum 텍스트, Command-C를 입력 한 다음 붙여 넣습니다 그런 다음 이것을 선택하고 크기를 25로 바꾸고 Regular로 설정하자 그리고 문자 간격을 1로 설정하십시오

색상에 다른 맞춤 색상을 사용합시다 여기에서도 마찬가지로 '96'과 같은 회색과 같습니다 우리 색상에 추가하십시오 팔레트도 그리고 우리가 그것을 바꿔 놓았는지 확인해 봅시다

25의 크기 우리는 거기에 간다 그 다음에 센터에 있는지 확인하십시오 또한 20 픽셀 밖에 떨어져 있지 않습니다 여기에서 축소하여 무엇을 볼 수 있습니까? 그 모습입니다 좋아, 나는 그것이 좋게 보인다라고 생각한다! 나는 실제로 들어올거야

그 기간을 털어 놓으십시오 이제 이들을 그룹화 해 보겠습니다 Command-G를 눌러 'Title & Subtitle'이라고 부르십시오 시원한! 이제 우리 코스 파일로 돌아가서 그 사람들을 데려 오자 그래서 우리가하는 일은 '사람들'아래의 코스 파일에 들어갑니다

나는이 다섯 가지를 가지고 있습니다 png는 사실 내가 찍은 사진 촬영 이미지입니다 전에 나는 실제로 이것을 카메라에서 꺼내 Photoshop에서 열어 본 다음 Photoshop에서 선택 영역과 투명한 PNG를 만들었습니다 그럼 그냥 드래그하자

이것들을 스케치로 여기에서 볼 수 있습니다 서로의 상단 그러나이 사람들이 축소되었음을 명심하십시오 그러나 우리는 그들이 실제로 얼마나 큰 지에 관한 상대적인 위치를 유지하기를 원합니다 그래서 우리가 할 수있는 것은 수평 가이드를 만들고 그 가이드를 통과 시키십시오 비슷한 점을 알고 있으므로 발목과 비슷합니다

그런 다음이를 참조로 사용하십시오 서로의 상대적 높이로 설정되어 있는지 확인하십시오 그럼 우리가 할 수있는 일 이 통치자에게 다가와서, 당신이 그것을 보지 못한다면, 당신은 '보기'에 올 수 있습니다 '캔버스'로 이동 한 다음 '눈금자 표시'가 선택 해제되어 있는지 확인하십시오 그래서 여기를 가리키면됩니다

가자 이 사람들을 주변에 배치하십시오 그래서 나는 그녀가 중심에 있기를 바란다 그래서 그런 식으로 나는 그녀가 오른쪽으로 가고 싶다

나는 이런 종류의 발의 중심으로 이동합니다 나는이 남자가 왼쪽에 있기를 바란다 그런 식으로 그, 나는 멀리 왼쪽 편에 있고 싶다 나는 중심을 지나고 싶다

이제, 나는 그를 실제로 위치시킬거야 내가 그 사람이되기를 바란다 그의 머리가 친절 해지기 바로 전에, 너도 알다시피, 측면에서 잘랐다 이 녀석에 관해서는 바로 여기 그리고 나는 실제로 그를 뒤집어 놓을 것이고 그래서 그는 그가 보이는 것처럼 보입니다 다른 방향을보고

그래서 그렇게하기 위해 나는 뒤집어서 지금 그가 좋아하는 것 같이 보이고 그걸보고있는 것처럼 보입니다 방향 그리고 그냥 조금만 움직여 봅시다 가자 그를 위로

시원한! 이제 모든 사람들이 위아래로 정렬되어 있음을 볼 수 있습니다 그들이 실제로 얼마나 키가 크지는 않습니다 그리고이 남자를 조금 움직여 보자 그의 머리가 시작되기 바로 직전에 더 많이 오른쪽에서 더 잘랐다 모서리

그런 다음이 위치를 설정 한 다음이 위치를 설정해 보겠습니다 하나는 우리가이 사람들을 중심에두고 싶은 곳으로 설정되어 있습니다 둘 다 그럼, 우리가 할 수있는 것은이 세 가지 레이어를 선택하는 것입니다 및 '가로로 분포하십시오

' '하위 픽셀에 배치'를 클릭하면 그 위치에 대해 여기에 전체가 아닌 값을 붙이십시오 그리고 그녀가 스냅하는 걸 볼 수 있습니다 제자리에 그런 다음 우리는이 사람에게 똑같은 일을합니다 3 개의 레이어를 선택하거나, 균등하게 또는 하위 픽셀로 배포하고, 지금은 우리는이 사람들을 멋지게 배치했습니다

자, 이걸 선택하십시오 사람들, Command-G, 그리고 이것을 '팀'이라고 부릅니다 그리고 나서 화살표 키를 사용하고 싶습니다 교대를 지키면서, 내가 좋아하는 곳으로 이걸 옮기는거야, 아마도 그런 식으로 이 제목 섹션을 약 30 픽셀 이동하십시오

꼭대기에서, 그래서 나는 그것 같이 보이는 무언가가 좋게 본다 이제 add-make하자 이 사람들은 왼쪽과 오른쪽에 있습니다 불투명 그래서 우리가 할 수있는 일은 '팀'에오고,이 네 사람에 대해서 저는 올 수 있습니다

이상을 선택하고 색상 조정으로 이동하십시오 그리고 포화 상태에서 저쪽으로 가져와 그런 다음 불투명도를 20까지 떨어 뜨릴 수 있습니다 가장자리에있는이 녀석들을 내려 놓을 수 있고, 10 살이되자 그게 뭔지 보자

보이는 군 그래서 좀 더 가벼워서 이걸로 10도하자 시원한! 그래서 지금 우리가 해냈다 고하자 여기에 작은 섹션을 추가하자 이것이 누구인지, 위치가 무엇인지, 어디에서 왔는지 등

그러니 가자 이 가이드를 제거하면 더 이상 필요하지 않습니다 좋습니다 확대 / 축소 여기에 'U'를 치면 둥근 사각형이 생기고 클릭 만하면됩니다 드래그하여 이런 식으로 만듭니다

여기 모퉁이에서 우리는 이것을 조정할 수 있습니다 우리가 원할 정도의 둥근 정도에 근거하여, 지금은 6으로 설정하려고합니다 Border를 끄고 Fill으로 들어가서 그 자리를 선택하십시오 off-white 'FA'가 줄 지어있다 그런 다음 그림자를 추가하여 조금 더 잘 볼 수 있습니다

Y를 높이고 흐리게 효과를 높이십시오 조금, 스프레드를 줄이고, 알파를 가져와 우리가 간다, 나는 그것이 좋게 보인다라고 생각한다 그렇다면 우리는 앞뒤로 갈 수 있습니다 센터 내 키보드 'T'를 치면 키가됩니다

텍스트 도구 여기를 클릭하고 'Sarah'와 같은 이름을 입력하십시오 이것을 선택하고 글꼴 크기를 18로 설정하십시오 규칙적으로 유지합시다 색상에 대해서는이 어두운 색상을 선택하겠습니다

그리고 가자 지금 당장 – 실제로, Regular 대신 Semibold로 설정해 보겠습니다 조금 더 대담 해져서 우리가 그 물건보다 조금 더 중요하다는 걸 압니다 우리가 그 아래에 놓기를 원합니다 그럼, 그렇게 하죠

다시 'T'를 칠거야 이 중 하나를 이것을 Regular로 변경합니다 그녀의 입장을 입력 할 수 있습니다 'UX 디자이너 '를 입력 한 다음 위치 정보를 입력하십시오 그런 다음 애틀란타 파트에서 우리가 사용했던 그 푸른 색으로 변합니다

자, 실제로 그걸 내 색으로 저장하는 것을 잊어 버렸으므로 우리가 할 수있는 일은 바로 앞으로 나아가는 것입니다 다시 16 진 코드를 입력하면 1BDDF2가됩니다 그리고 나서 가보자 이를 문서 색상에 추가하십시오 우리는 거기에 갈

그럼 가서 이것들을 밖으로 내 보냅니다 명령 -G 계속 진행하고 '이름', ' 위치' 우리는 그것을 상자 안에 놓을 수 있습니다 이 픽셀을 더 넓게 만들자

우리는 가득한 30를 얻는다 그런 다음이 전체를 그룹화하면됩니다 그걸 '콜 아웃'이라고 부르세요 내가하고 싶었던 것이 한 가지 더 있습니다

'Insert', 'Shape'및 그 다음 'Triangle' 그리고 여기에 작은 삼각형처럼 보자 보더를 끄고, 채우기 위해 들어오고, 꺼져 버리고, 둘 다 선택할 수 있습니다 이 모양들 중 'Union'이라고 말하면이 단색 모양을 만듭니다 그럼 우리는 언제든지 들어 와서 크기를 조정하십시오

그래서 그런 짓을하자 그것을 중심에 놓으십시오 나는 그것이 좋게 보인다라고 생각한다 이제 우리는 앞으로 나아갈 수 있고 움직일 수 있습니다 우리가 좋아하는 장소에서 불러 내십시오

그래서 그것이 중심에 있는지 확인하십시오 약 40 하단에서 픽셀 축소하고 그 모습을 확인해 봅시다 실제로, 위로 움직여 봅시다 아래에서 90 픽셀을 보겠습니다

내 생각에는 좋아 보인다 시원한! 그래서 거기에 내가하고 싶었던 한가지 더 있습니다 좀 더 시각적으로 재미있게 만들려면 몇 가지를 추가해야합니다 사람 주위의 타원, 중심에있는 사람 그리고 나는 그것이 단지하려고 생각하고있다

조금 더 매력적으로 보이게하십시오 그래서, 여기를 확대 할 것입니다 'O'를 눌러 타원형 도구를 가져오고 Shift 키를 누릅니다 드래그하여 원 Borde를 끄고 Fill으로 들어가서 여기에서이 색을 고르십시오

그리고 우리는 우리가 원하지만 이것들을 다시 가져올 수 있습니다 복제 옵션 보류 그러면이 크기를 조정할 수 있습니다 이걸 이쪽으로 옮겨서 이걸 만들어 보자 조금 작아 이걸 조금 더 크게 만들고 나서 내가 할 일은, 너도 알다시피, 더 많은 것을 복제해라

대신에, 같은 색을 유지하면서, 나는 할 수있다 실제로 들어가서 불투명도를 줄이십시오 약간 그래서 저는 사실이 과정을 계속하고 속도를 빠르게 할 것입니다 실시간으로보기를 원합니다

그런 다음 우리가 끝내면, 우리는이 타원으로 들어 와서 그것들을 선택할 수 있습니다, Command-G, '서클 악센트 (Circle Accents)'와 같이 호출하면됩니다

Photoshop CC 2015 Web Design Tutorial – How to Used Measuring & Spacing Tools Part 10/48

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

그래서 당신이 좋아하면 설명에 링크가 있습니다 그러나 지금은 우리가 가진 것을 무료로 보자 이 비디오에서 우리는 규칙과 측정 도구에 대해 이야기 할 것입니다 우리는 두 가지 이유로 그것을한다 : 우리는 상자들 사이에 공백이 같기를 원하기 때문에 또한 웹을 만드는 사람이 우리가 아니라면, 물건이 얼마나 멀리 있는지 알 수있는 조치를 원할 수 있습니다 또는 객체간에 얼마나 많은 공간이 있는지 확인합니다

공식적인 방법과 내가 사용하는 방법은 두 가지가 있습니다 공식적인 방법은 규칙을 사용하는 것입니다 규칙은 스포이드 아래에 숨겨져 있습니다 클리 코, 나는 여기있다 나는 규칙을 선택한다

이 상자와 아래 상자 사이의 거리를 측정한다고 가정 해 봅시다 내가하는 일은 클릭하고 잡고 쥐는 것입니다 왼쪽에는 응용 프로그램 표시 줄, 나는 그것을 끌 때 측정치가 변한다 기본적으로, 그래서 내가하는 일은 교대를 유지하는 것이다 이 수직 위치에 고정시킨다

이 둘 사이에 77 픽셀로 고정되어 있습니다 이제 우리는 그것이 아주 가깝도록하기 위해 좀 더 가까이에 있습니다 왜냐하면 내가 멀리서 한 것처럼 완벽하지 않기 때문이다 클릭하고 고정하고 드래그하여 문제를 해결합니다 이제 81 픽셀을 갖습니다

이것은 공식적인 방법입니다 이제 규칙을 제거 할 것입니다 Command 또는 Control과 Minus를 눌러 이동합니다 이것이 공식적인 측정 도구이며, 그러나 더 나은 것은 Rectangle을 사용하는 것입니다 이것은 페이지의 사물 가장자리에 붙어있는 장점이 있습니다

우리가 약간의 조정을하기 전에 규칙이 잘 측정되었는지 확인하십시오 그래서,이 거리를 측정 할 것입니다 클릭하고 드래그합니다 사방에 나타나는 분홍색 선을보고, 그것은 그가 문서의 여러 가지와 정렬하려고하기 때문입니다 내 물건에는 여러 가지 요소가 있습니다

그러나 가장자리에 아주 잘 붙어 있습니다 나는 그것을 아래로 끕니다 나쁘지는 않지만 81 픽셀을 사용했습니다 나는 그것을 다시 확인하기 위해 접근 할 것입니다 그것은 붙어있다

사각형은 공간 객체에도 매우 좋습니다 나는 이것을 지울 것이고 나는 조금 떠날 것입니다 그리고 나는 스페이스 바를 눌러 내려 간다 클릭하고 드래그합니다 여기서 포트폴리오를 확대 / 축소 해 보겠습니다

여기에는이 두 객체 사이에 공간이 있습니다 열 너비를 사용하고 있습니다 Vista> Show로 이동하면 가이드가 활성화됩니다 내가 열 사이의 공간을 사용했다는 것을 알 수 있습니다 이제는 여기의 간격이 동일한 지 확인하고 싶습니다

그것이 완벽하지 않다는 것이 분명합니다 사각형을 사용하고, 클릭하고, 누르고,이 둘 사이를 드래그 할 수 있습니다 그것이 가장자리에 붙어있는 것을 볼 수 있습니다 하지만 나는 그것이 완벽한 광장이되기를 원한다 그래서 편집> 뒤로에서 되돌릴 것입니다

직사각형을 그릴 때 Shift 키를 누릅니다 한계가 차단되었습니다 30×30 픽셀이라는 것을 알 수 있습니다 이제 이동 도구를 사용합니다 클릭하고 누른 채로 끌어서 구분 기호로 사용합니다

나는 그것을 하단 가장자리에 붙이고이 이미지를 업로드합니다 때로는이 경우처럼 붙지 않습니다 당신이 할 수있는 것은 키보드의 화살표를 사용하는 것입니다 업로드에 사용하겠습니다 사각형은 알아야 할 좋은 방법입니다

이러한 이미지와 아래 이미지의 내부 여백이 동일한 경우 유일한 결점은 그들이 육체적이라는 것입니다 즉, 인쇄가 가능하거나 스케치에 나타납니다 따라서 완료되면 레이어 패널에서 선택하고 지우십시오 이것이 포토샵에서 측정되는 방식입니다 공유하고 싶기 때문에이 무료 동영상을 만들었습니다

비록 내가 당신이 풀코스 과정을 계속하기를 원한다면, 50 개 이상의 동영상이 있습니다 설명에 할인 코드가 있습니다 제발, "좋아"하고 구독하십시오 나중에 YouTube에서 멋진 사람들과 만나십시오 나는 내 손으로 작별 인사를하고 있지만, 너는 그것을 보지 못했다

그렇지?

Create a Website using HTML and CSS : Web Design Tutorial Part 1

안녕하세요 친구 곧바로 시작하자 첫 번째 HTML 웹 페이지를 만드십시오

나는있을거야 숭고한 텍스트라는 텍스트 편집기 사용 그것은 꽤 인기있는 전문 세계 나는 너를 안내 할 것이다 단계별 프로세스를 통해 생성은 처음부터 HTML 사이트입니다 먼저 새 프로젝트 폴더를 만듭니다

우리의 웹 사이트 나는 그것을 "처음" 데스크톱에서 직접 만들어 보겠습니다 그래서 새로운 폴더와 그것의 이름을 짓 자고하자 "먼저" 원하는대로 이름을 지정할 수 있습니다

에 이 예제를 위해 "첫 번째" 좋아, 이제 폴더를 열어 보자 여기에 세 개의 폴더가 생성됩니다 CSS 용 다른 이미지들 나는 그것을 IMG라고 이름을 지을 것이다

그리고 세 번째 자바 스크립트 JS 그리고 이제 모든 것이 이루어져야합니다 잘 보아라 이 방법으로 파일을 정렬하는 것이 가장 좋습니다

새 웹 사이트를 게재하는 대신 단일 폴더에있는 모든 파일 파일을 저장하겠습니다 파일 이름을 정하자 indexhtml 이 파일은 폴더에 저장해야합니다

"첫 번째"라는 이제 빈 HTML이 생겼습니다 파일 나는 바로 마우스 오른쪽 버튼을 클릭하여 열 것이다 브라우저의 파일 이제 너는 파일이 완전하게 보입니다

공백 이 페이지에서 아무 것도 얻지 못한다 우리는 지금까지 아무 것도 입력하지 않았기 때문에 먼저 코드를 입력해야합니다 doctype 선언은 이것을 시작한다

느낌표와 함께 doctype HTML 그런 다음 입력하여 시작합니다 열고 닫는 HTML 태그 이들 태그는 꺾쇠 괄호로 시작합니다 그래서 이것이 시작 HTML 태그입니다 이것은 닫는 HTML 태그입니다

그만큼 회색 글꼴로 표시되는 텍스트는 코멘트 주석을 입력하는 방법입니다 HTML 페이지 이것들은 우리 자신의 참조 용이며 전반적인 웹 페이지와 관련이 없습니다 프로그래밍을 배웠다면 당신이 잘 알고있을 언어 코멘트 지금 안에 HTML 태그, 나는 몸을 열고 닫을 것이다

꼬리표 몸은 주요 내용이 중요한 부분 웹 사이트의 body 태그와 별도로 놓아야하는 머리 꼬리표 body 태그 앞에 헤드 태그는 중요한 태그 다른 CSS 및 JavaScript 파일은 놓았다 head 태그에는 제목 태그 head 태그 안에 메타 문자 집합 태그를 배치합니다

이것은 종종 선언적 종류의 신원을 확인하는 데 사용되는 페이지의 문자 세트 제목 태그는 여기에 언급되어 있습니다 제목 태그를 열고 닫으십시오 나는 단지있다 제목을 문서로 명명했습니다

그리고 지금 body 태그 안에 뭔가를 입력 해 봅시다 나는 문단을 열고 닫고있다 태그를 단락 태그 내에서 나는 단지 "안녕하세요 세상을 쓰고 있어요이게 내 것이에요 첫 번째 HTML 페이지 " 그래서 우리는 여기에 HTML 웹 페이지가 있으므로 저장하고 우리의 브라우저에서 체크인하십시오

사용할 수 있습니다 Ctrl + S Cmd + S를 누르거나 다음으로 이동할 수 있습니다 파일 메뉴를 열고 파일을 저장하십시오 이제 문서 웹 페이지가 어떻게 보이는지 브라우저 좋아, Sublime + Emmet를 사용한다면 코드 작성 기술 속도를 높일 수 있습니다

지금 에밀을 모른다고 알아 Emmet에 대해 다음 별도로 설명하겠습니다 비디오 속도를 낼 수있는 방법을 보여 드리겠습니다 업적 글쓰기 Emmet을 사용하는 코드

나는 단지 할 것이다 코드의이 부분을 삭제하십시오 이제는 바로 가기를 사용하겠습니다 그냥 입력하십시오 HTML 콜론 5와 당신의 히트 탭 키보드 와우! 여기 얼마나 쉬운 지 알 수 있습니다

나는 단락 태그에 글을 쓸 것입니다 이것은 내 첫 번째 HTML 페이지입니다 숭고한 플러스 Emmet 플러그인 그리고 너만 브라우저와 모든 것을 확인할 수 있습니다 잘 작동합니다

그래서 당신은 단지 얼마나 빨리 볼 수 있습니다 Sublime을 사용하여 코드를 작성하는 것이 었습니다 플러스 에멧 Emmet 설치 방법을 다룰 것입니다 별도의 동영상으로 이 구독 신청 채널을 통해 업데이트 및 나는 모든 것을 덮을 것이다

처음부터 웹 사이트 디자인하기 끝까지 나는 또한 보살펴 줄 것이다 와이어 프레임 및 웹 사이트 디자인 방법 Photoshop에서 다음으로 변환합니다 HTML과 CSS 이것은 나중에 올 것이다

부분품 먼저 몇 개의 태그를 더 배우자 좋아, 단락 태그가 학습 된 후에 제목 태그에 대해 이제 h1 이것은 h1 태그

6 개의 태그가 있습니다 제목 h1 ~ h6 h1이 가장 큰 것입니다 font, h2는 두 번째로 큰 글꼴입니다

이것이 h2 태그입니다 h3 태그, h3 태그입니다 h4를 입력하십시오 탭을 누르십시오 이것은 h4 태그입니다

h5 탭 이것은 h5 태그입니다 나는 있어야한다 이 속도가 빨라졌지만 나는 그것이 될 것이라고 생각한다 따라 오면 더 좋습니다

너라면 동영상 속도가 느리면 속도를 높일 수 있습니다 쪽으로 속도가 느린 경우 당신의 YouTube 설정에서 그것을 아래로 당신 그것의 오른쪽 하단 구석에 당신의 비디오 이제 페이지를 열어 보겠습니다

브라우저 여기에서 h1 태그는 가장 큰 것이고 너 h6 꼬마에게 간다 대부분의 사이트는 h1에서 h4를 사용합니다 일부 사이트 만 h5 및 h6을 사용 중일 수 있습니다 가장 일반적인 이 중 h1, h2 및 h3입니다

이제하자 내가 h2 태그를 복사하여 잘라내어 붙인다 h1 태그의 출력에 어떤 차이가 있는지 확인하십시오 당신 왜 궁금해할까요? 실제로 h1 태그 블록 요소 태그입니다 블록 요소는 전체 너비를 사용하는 요소입니다

페이지의 즉 그들은 분리 된 것이 필요하다 그들 자신을위한 라인 따라서 h1 및 h6 태그 태그는 블록 요소입니다 그래서 네가 블록 안에 뭔가를 넣고 싶다 인라인을 사용해야하는 요소 요소

이제 단락 태그, h2 태그, 이들은 블록 요소 태그입니다 필요한 경우 안쪽에 놓을 물건 같은 라인 자체에있는 h2 span 태그가 필요합니다 <SPAN> 보여 드리겠습니다 예를 들어 p 태그도 블록입니다

요소 꼬리표 자, 여기에 span 태그를 입력 해보자 <span> 이것은 인라인 요소입니다 닫을 것이다 span 태그

이제 브라우저를 체크인하면 스팬 태그가 켜져 있음을 알 수 있습니다 h3 태그와 같은 줄 여기 있습니다 너는 분명히 할 수있어 인라인 요소가 왔음을 주목하라

같은 줄에 예상대로 이제 이들은 블록의 예입니다 요소 태그 단락 태그 h1 태그와 div 또는 division 태그가 있습니다 구분 태그는 블록 요소이기도합니다 이제 몇 가지 예를 살펴 보겠습니다

인라인 요소 href 태그, span 태그 및 이미지 태그 이들은 인라인 요소의 예 이제 저기에는 내가 막 통과 할 많은 태그들이있다 이 튜토리얼에서는이 중 일부를 설명합니다

나는있을거야 다른 태그를 자세히 설명하는 우리의 다음 동영상 계속 지켜봐야합니까? 이 비디오 만이 모든오고있다 시리즈의 비디오 나는 완전한 시리즈는 당신을 알게한다

웹 디자인의 모든 측면 그럼 division 태그에 익숙해지기 이제 막 열리고 닫을거야 구분 태그 및 유형 이것은 블록이나 컨테이너 또는 컨테이너 또는 그냥 상상할 수 있습니다 상자

부서는 일종의 상자입니다 너는 할 수있다 이 상자 안에 아무것도 넣지 마라 우리의 모든 콘텐츠를 적절한 방법으로 웹 사이트를 방문하십시오 그게 메인이야

기능 또는 사업부의 유용성 꼬리표 예제를 보여 주기만하면됩니다 제목 태그를 복사하여 붙여 넣기 만합니다 division 태그 내에서 이제 브라우저에서 확인하면 우리가 분할 태그를 스타일링하지 않았지만 여전히 저장하고 브라우저

그래서, 내가 전에 말했듯이 어떤 차이도 보이지 않습니다 이제하자 어떤 스타일링을해라 네가 있을지도 몰라 완전히 새로운 CSS이지만, 하나 또는 두 개의 스타일을 배우십시오

side-by-side HTML을 학습하면 어떻게하면 마스터 할 수있는 큰 도움이 될지 에서 완전한 웹 사이트를 만드십시오 할퀴다 그래서, 저는 여러분에게 예제를 보여 드리겠습니다 CSS 스타일 지정 방법, 인라인 스타일링 그럼 스타일을 지정해 보겠습니다

구분 태그를 먼저 지정하십시오 div 스타일은 다음과 같습니다 나는 콜론 따옴표를 열 것이다 그리고 나는 색깔을 말할 것이다 입력하자

회색 좋아, 그것은 무엇을 할 것인가? 글꼴들 해당 구분 태그 내에서 회색으로 표시됩니다 지금 여기서 모든 h1 태그는 자동으로 회색으로 표시됩니다 내가 스타일을 부여했기 때문이야 에 적용된 구분 태그 모든 내부 h1 태그

이제 배경색을 볼 수 있도록 상자 또는 블록 그래서 배경 색상 16 진수 코드로 입력 해 봅시다 해시시 아니면 그냥 해시 한테 해줄거야 777 이 코드에 대해 많은 것을 걱정하지 마십시오 천천히 그것을 마스터 할 것입니다 이제보실 수 있습니다

그 상자를 볼 수 있습니다 h1 또는 제목 태그는 놓았다 나는 이것이 주어진 것이라고 생각한다 당신은 부서에 대한 전반적인 생각을했습니다 꼬리표

마찬가지로 문단의 스타일을 지정할 수 있습니다 태그를 추가하면됩니다 단락 태그의 스타일을 빨간색으로 표시하고 브라우저 마우스 오른쪽 버튼을 클릭하고 브라우저 및 여기에서 글꼴이 사라 졌음을 알 수 있습니다 빨간

이제 별도의 CSS 파일을 만들어 보겠습니다 스타일 CSS를 복사하고 CSS를 완전히 새로운 페이지 즉 stylecss 입력하자red 다음에 중괄호와 중괄호 안에 색상이있는 스타일링을 입력하거나 그것을 다시하고 색깔을 빨간색으로하십시오 그리고 또 다른 스타일을 만들어 보겠습니다 구분 상자 나는 그 이름을 지을 것이다 ourbox, ourbox와 중괄호를 여기에서 스타일링을 복사 해 봅시다

지금 이것은 전문적인 방법으로 CSS 파일 ie 우리는 자주 링크합니다 그것을주는 대신 외부 파일로 HTML 파일 내의 스타일 이 일을하는 전문적인 방법입니다 그래서 나는 단락을 바꿀 것이다

여기에 태그를 달아 클래스 이름을 지정하고 클래스 이름을 다시 실행합니다 단락 클래스 다시하고 인라인을 바꿀 것입니다 스타일을 변경하고 수업으로 변경하십시오 스타일 ourbox 또는 무언가가 잘못 여기에 나는 생각한다 나는 그저 거기에 스타일을 입력한다

죄송합니다! 나는해야한다 타입 클래스 클래스를 입력 해 봅시다 지금 이제 HTML 파일을 링크해야합니다 그렇지 않으면 CSS 파일을 알 수 없습니다

어디에서 CSS를 얻을 수 있습니다 그래서 헤드 태그 우리는 링크 href를 열 것이다 to, 우리는 css / 스타일 CSS와 rel 관계는 스타일 시트 rel과 같습니다 같음, rel은 스타일 시트와 같습니다 그리고 브라우저에서 확인하십시오

그리고 그것은 완전히 멋지다 만약 너라면 당신이 볼 수있는 뷰 소스를 확인하십시오 당신은 숭고한 텍스트를 입력했습니다 또는 텍스트 편집기와 모든 것 완전히 잘 들여지고 전문적입니다 그래서 이것은 전문적인 방법입니다

웹 페이지를 설계하고 누군가 그들은 당신의 코드를 보게 될 것입니다 당신이 준비한 방식에 깊은 인상을 받았다 사물 너가 뭔가를 배웠 으면 좋겠어 오늘은 아무 것도 명확하지 않다면 그냥 가라

섹션으로 돌아가서 그냥 놀아 라 속도가 빠르다 고 생각한다면 아래로 그리고 비디오를 몇 번이고 다시 보아라, 그것이 완성 될 때까지 설치 방법에 대해 다룰 것입니다 내가 전에 말했던 Emmet은 다음 부분에서 시리즈의 좋아하고 구독하십시오

제발 코멘트하고 의심을 물으십시오 및 아래의 쿼리 나는 너를 돕기 위해 항상 기꺼이한다 아래 검색어에 검색어가 무엇이든간에 마음과 별도의 튜토리얼이 필요한 경우 특정 주제에 대해 의견을 보내 주시면 다시 연락 드리겠습니다 답장

이걸 계속 주셔서 대단히 감사합니다 채널 곧 뵙죠