Sketch Tutorial: HTML and CSS Website Design Course

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sketch App Tutorial – Build a music app landing page in Sketch

안녕하세요, 저는 Skillthrive의 Hunter이고이 자습서에서는 음악 앱을 제작할 것입니다 스케치의 방문 페이지 수업 1에서는 두 가지 모양 레이어를 결합하여 시작합니다

함께 곡선 배경 섹션을 만듭니다 그런 다음 그라디언트를 추가하여 배경, 제목, 부제 및 탐색 다음으로, 텍스트 레이어를 윤곽선으로 전환하여 투명 텍스트가있는 버튼 만들기 및 차이 부울 연산을 사용합니다 마지막으로, 배경에 커플 악센트 서클 Sketch에서 모바일 앱 방문 페이지를 만드는 방법에 대한 첫 번째 강의에 오신 것을 환영합니다 이제 Skillthrive 회원이라면 반드시 코스를 다운로드하십시오

파일을 사용하면 나와 함께 따라 할 수 있습니다 회원이 아니면 걱정할 필요가 없습니다 절대적으로 자유롭게 가입 할 수 있습니다 설명에 링크가 있습니다 너를 데려 갈거야

등록 할 수있는이 수업의 코스 파일 오른쪽에 있습니다 내가 제일 먼저하는거야 할 일은 대지 만들기입니다 키보드에서 "A"를 클릭하면 반응 형 웹 및 드롭 다운 데스크톱 HD에서이 드롭 다운으로 이동합니다 우리는 이것을 가지고있다

데스크탑 HD 레이아웃 이 아트 보드의 이름을 변경하겠습니다 우리는 그것이 무엇인지 깨닫게 될 것입니다 '모바일 앱 방문 페이지 "우리가 먼저하고 싶은 것은 그 배경 섹션을 만드는 것입니다

그것은 약간의 곡률을 가지고 있습니다 그렇게하기 위해 우리는 실제로 경로와 모양을 만든 다음 그 두 가지를 함께 결합하십시오 우리가 제일 먼저하고 싶은 것은 직사각형을 만드는 것입니다, 그래서 우리가 키보드에서 "R"을 치면 우리는 사각형 도구에 액세스 할 것입니다 우리는 계속해서 여기에 사각형 저는 약 650 픽셀 정도를 할 것입니다

나는 국경을 끌 것이다 그리고 지금 우리는 들어올 수 있고, 우리를 선택할 수있다 우리의 펜 도구는 "V"입니다 여기에 경로를 만들 수 있습니다 할거다 여기에 대해 뭔가를 선택하십시오

사실, 내가하기 전에 나는하고 싶다 참조로 선을 만들어서 그 곡률을 잡을 수 있습니다 그래서 "L"을 치면 줄을 긋고 꼭대기까지 올라 와서 그것을 아래로 드래그하면 쉬프트가됩니다 완벽하게 똑바로 그런 다음 그 중심에 있는지 확인하십시오

귀하의 대지와 이제 우리는 펜 도구에 들어가서 그 커브 딸깍 하는 소리 그것은 조금 밖에 있다면 괜찮아요,하지만 그것을 얻으려고 여기 어딘가에서이 가장자리에 가깝습니다 를 클릭하고 와, 쉬프트, 클릭 자, 이번에는 클릭 할 때 그걸 확실히 잡아라

우리는 곡선을 만들기 위해 그 구석을 끌 수 있습니다 클릭하고 나서 그것을 밖으로 드래그하십시오 – 이제 우리는이 오른쪽 포인트와이 왼쪽 포인트를 보았습니다 이 오른쪽 지점에서 마우스를 드래그합니다 손톱을 만들기 위해 그 곡률, 우리가 할 수있는 것은이 왼쪽 지점이 그 라인에 있는지 확인하는 것입니다 우리가 방금 만든거야

얼마나 높거나 낮은가에 따라 얼마나 큰지에 달려 있습니다 커브가 있습니다 내 마우스를 잡고있는 동안 여기를 축소하려고합니다 이 시점에서 그 중심점에 있는지 확인할 것입니다 이제 너

커브가 낮 으면 커브가 실제로 커지는지 알 수 있습니다 커브가 훨씬 적습니다 그래서 나는 여기에 슈퍼 미친 아무것도 원하지 않는다 나는이 구장의 어떤 것이 좋다고 생각한다 나는 그것을 줄 지어 갈거야

내 마우스를 놓고 입력하십시오 그런 다음 선택하여 삭제하고 삭제할 수 있습니다 이 선 – 경로와 직사각형 그리고 나는 합집합을 할 수 있습니다 자, 우리는 우리가 가고있는이 멋진 모양을 가지고 있음을 알 수 있습니다 우리는 실제로 원하는 그라디언트를 만드는 것입니다

이 새로운 결합 형체가 선택되었을 때이 채우기로 넘어 가자 두 번째 상자는 선형 그래디언트입니다 색상을 설정할 수 있습니다 여기에 설정하고자하는 첫 번째 색상은 FF5E62 인 색상입니다 그런 다음 다른 색상을 선택하겠습니다

이 시점에서 나는 설정하려고합니다 ~ FF9966 이걸 조금 뽑아 낼 것입니다 이런 식 으로요 그런 다음이 주황색을 조금만 드래그하면됩니다

많이 당신이 좋아하는 자리에 올 때까지 이걸 가지고 놀아 라 원하는 경우 자신 만의 색상을 사용하십시오 내가 지금 할 일은 내가 이 그라데이션을 저장하십시오 이 그라디언트에서는 아직 그 안에있는 동안을 클릭 할 수 있습니다

여기 이걸 팔레트에 저장하려면 여기를 더하세요 이 버튼을 클릭하면 내가 이것을 추가했음을 알게 될 것이다 옆에있는 두 개의 아이콘도 볼 수 있습니다 비슷한 점은이 프로젝트에서 작업했기 때문에 가능합니다 그것들을 제거하십시오

우리가이 비디오에서 하나를 선택했는지 확인하십시오 계속해서 제목, 하위 텍스트, 버튼, 탐색기 및 로고 소리는 많이 들리지만 정말 빠를 것입니다 우리의 "T" 키보드에서 텍스트 도구를 가져와 여기 어딘가에서 클릭하십시오 아트 보드 실제로 Signika와 Open Sans를 사용하려고합니다

이 둘은 모두 무료입니다 Google의 글꼴이므로 누구나 쉽게 액세스 할 수 있습니다 Signika가 선택된 상태에서 실제로 체중을 가볍고 크기를 54로 설정하고 줄 높이를 67로 설정하고 싶습니다 그런 다음 이것을 선택하고, 색을 입히고, 여기에 색을 FA로 설정하십시오 들어가기 우리는이 팔레트에 추가 할 것이다

여기 몇 번이나이 코스에서 그런 다음 입력 할 것입니다 "당신은 이런 음악을 들어 보지 못했습니다" 이 하위 텍스트를 만들어 보겠습니다 이것이 옳은지 걱정하지 마라

이제 우리는 그것을 우리가 좋아하는 지점에 위치시킬 것입니다 다시 말하지만, 이 하나가 Sans를 엽니 다 이것을 정기적으로 설정하고, 크기를 22로 설정하고, 줄 높이는 29 그런 다음 필자 만의 필사 텍스트 인 lorem ipsum을 선택하려고합니다 여기에 붙여 넣으 려하고 이것을 클릭하겠습니다

이 점을 위로 드래그하십시오이 모서리가이 제목에 먼저 정렬되어 있는지 확인하십시오 그것이 같은 너비라고 나에게 말할 때까지 그것을 위로 드래그하십시오 그게 내가 원하는거야 우리가 할 수있는 다음 일은, 텍스트로 작업하는 동안 nav에 가서 만들 수 있습니다

다시 한번 명중하자 우리 키보드의 "T" 나는 클릭 할 것이고 실제로이 것을 변경하려고합니다 시그 니카와 나는 세미 볼드체로 설정하려고합니다 나는 높이를 돌리고 싶다

실례합니다 크기를 17로 낮 춥니 다 그런 다음 몇 가지를 입력 할 것입니다 여기에 물건 "about"을하고 나서 Enter를 누르십시오, 실례합니다, 실제로는 클릭 만하면됩니다

그러면 실제로 볼 수 있도록 확대 할 것입니다 내가하고있는 것 그냥 + 명령을 치고 확대하는 대신에 command + 2를 클릭하면 오른쪽으로 확대됩니다 조금 지나치지 만, 너는 아이디어를 얻으십시오 그런 다음 옵션을 잡고 끌 수 있습니다

나는 할 것이다 약 4 번 나는 그것을 가지고있다, 그래서 당신이 여기에 일반적인 이름을 안다 "팀" 우리는 "기능"을 사용할 수 있으며이 기능을 "다운로드"라고 명명 할 수 있습니다 이제 우리는 이것을 만들 수 있습니다

서로 약 20 픽셀 떨어져 있습니다 이제 함께 가서 그룹화 해 봅시다 나는 이것을 선택하고 싶다 레이어, 명령 "G"를 누른 다음이 "nav"을 호출하십시오 그런 다음 위에 올려 놓으십시오

하나의 제목,이 하나의 하위 텍스트를 호출,이 결합 된 레이어를 호출 배경 1 이제 우리는 그 설정을 얻었고, 우리가하고 싶은 것은 버튼 그렇게하기 위해 둥근 사각형에 올 수 있습니다 키보드에서 "U"를 치면 얻을 수 있습니다 여기서 모양을 만들 것입니다

나는 국경을 끄고, 우리의 채움에 와서 그 가벼운 팔레트를 고를거야 우리가 여기 있습니다 너비를 170으로 설정하고 높이를 40으로 설정합니다 그런 다음이 모양을 두 번 클릭하여 이것을 얻습니다 여기에서보세요

이 부분에서 실제로이 둥근 모양을 편집 할 수 있습니다 모서리 클릭하고 드래그하여 4 개의 모서리를 모두 선택합니다 이 슬라이더에서 여기까지 드래그하여 맞습니다 그래서 그들은 완벽하게 둥글게됩니다

좋아, 이제 내가하고 싶은 일은 다시 필자는 텍스트 도구를 사용하여 여기를 클릭하고 Signika를 클릭합니다 세미 굵은 글씨가 여전히 선택되었습니다 모든 대문자를 입력 할 것입니다 "다운로드" 우리는 당신이 그것을 볼 수 있도록 이것을 선택할 것입니다

색깔을 바꿔라, 그것은 중요하지 않다 색깔을 바꿀 때까지 잠시 후에 설명 할게 그런 다음 나는 이것을 중심으로 옮기고 이것을 아래쪽으로 옮길 것입니다 의견 그래,이 다운로드를 선택하면 우리가 할 수있는 일은 우리가 옳을 수 있다는 것입니다

클릭하여 개요로 변환하십시오 이것이 할 일은이 텍스트를 변환하는 것입니다 레이어를 모양 레이어로 변환합니다 우리가 그렇게하고 우리가 여기에 와서 이것을 확장한다면, 우리는이 모든 다른 길들을 볼 수 있습니다 이것은 무엇을 할 것인가? 실제로이 경로를 사용하여 여기에 차이점을 만들어 보겠습니다

우리가 이 두 가지를 모두 선택하고 차이점을 클릭하면 그 경로를 택할 것입니다 당신이 그것을 바로 볼 수 있도록 그것을 제거하십시오 이 배경에, 이것은 정말 좋은 효과입니다 그렇게해서 우리는 이 색상과 일치하도록 색상을 변경하면 실제로 색상이 변경됩니다 배경

좋아, 그렇게 잘 생겼어 이 "버튼"이라는 이름을 지으십시오 가자이 공간을 비워 보자 나는 이것을 본다

그 중 하나에서 약 29 픽셀, 그래서 어쩌면 4에서 25로 이동하십시오이 사진은 30 픽셀이므로 한 픽셀 위로 이동하십시오 알았어, 나 그것이 좋아 보인다는 생각 그리고 우리는 이러한 레이어를 선택할 수 있습니다, 명령 G, 그리고 그냥 이것을 "제목 하위 버튼"이라고 부르십시오 좋아요, 그래서 몇 가지 더 있어요 우리가하고 싶은 것들

나는 간단한 로고처럼 여기에서 만들고 싶다 지금, 나는 아니야 슈퍼 멋진 로고를 만드는 데 많은 시간을 할애 할 수 있지만 빠른 효과처럼 우리의 모습으로 나아가고 나서 삼각형 여기에 삼각형을 만들 것입니다

할거다 커맨드 +2를 조금 더 가깝게하십시오 나는 국경을 끌거야 나 채우기 FA로 갈거야 나는 회전을 치고 90을 치러 갈거야 그러면 나는 갈거야

옵션을 선택하고 드래그합니다 그런 다음이 플립을 클릭 한 다음 교대하고 그것을 훨씬 더 작게 만드십시오 좋아, 그럼 이걸 선택해 보자 두 번 클릭하고 모서리를 선택하십시오 이걸 한 픽셀 씩 위로 돌려 보겠습니다

이 두 번 클릭으로 동일한 작업을 수행하고를 선택한 다음 하나로서 모서리 보도록하겠습니다 여기서 축소하면 실제로 간단한 로고 – 그것은 요점을 가로 지른다 계속해서 이것을 선택하고 G 명령을 입력하고이 로고를 호출하면됩니다 이 그룹을 선택하면 명령 "K"

생각보다 조금 더 커 보이겠습니다 130 퍼센트를 보겠습니다 축소하자 예 어쩌면 그다지 크지 않을 수도 있습니다 Let 's just, 명령 "K", 115 나는 그것이 좋게 본다라고 생각한다 약 42 픽셀이므로 움직여 보겠습니다

최대 2 픽셀 이건 30이야,하지만 그것처럼 보이네 이것의 중심에, 그래서 아래로 이동 60 왼쪽에서 60 픽셀, 그리고 위쪽에서 30 픽셀입니다 나는이 삼각형 중심을 중심에 두었다

이 nav 알았어, 그 점을 가로 지른다 로고까지, 너는 알았다 미친 짓은 아니지만 빠른 로고를 만들었습니다 원하는 로고를 넣으십시오

아이디어를 가로 질러 가라 이제 우리가하고 싶은 것은 그 중 일부를 만드는 것입니다 여기서 불투명 한 원 정말 쉽습니다 우리가해야 할 일은 타원형 도구와 완벽한 원을 만들기 위해 교대를 유지하십시오

이제 저는 앞으로 나아갈 것입니다 여기에 우리가 원하는 색상을 선택하십시오 이제이 타원형이 매달려 있습니다 이 바깥에서 우리가해야 할 일은이 배경을 가면으로 만드는 것입니다 이 모든 것들

우리가 할 수있는 일은이 모든 것들을 명령 G로 선택한 다음, "섹션 1을 수행하십시오" 그런 다음 배경 레이어를 선택한 다음 가면을 수행하십시오 이제 우리는이 멋진 가면을 가지고 있습니다 우리는 이것을 확장하고이 타원을 아래로 이동시킬 수 있습니다 바닥

나는 그것을 선택하여 여기로 옮길 수있다 나는 불투명도를 떨어 뜨릴거야 꽤 많이 내려갔습니다 12 % 정도였습니다 나는 그것을 조금 옮길 것이다

그런 다음 옵션을 잡고 다른 옵션을 만듭니다 크기를 조절하면 꽤 작습니다 이걸 조금 더 크게 만드세요 이걸 만들자 그런 식으로

그럼 난 여기 부부를 만들 수있어 글쎄, 이건 꺼내 나는 이걸 멋지게 만들 수 있습니다 내 화살표를 사용하여 주위를 이동 한 다음 조금 더 크게 수행하십시오 여기가 좋아

나는 이들을 배치 할 곳을 너무 많이 생각하지 않는다 그들이 무작위로 배치 된 것처럼 느껴지기를 바란다 이 navbar를 왼쪽으로 약간 이동시킬 수 있습니다 단 몇 픽셀 만 가능합니다 그 가장자리에서 약 220입니다

좋아, 그래서 우리가 다루고 싶은 모든 것 이 수업 다음 강의에서 우리가 할 일은 이 빈 공간에 여기 앉아있을 모바일 UI입니다 그것으로 다음 비디오에서 보자 수업 2에서 음악 앱 인터페이스를 디자인 할 것입니다 내가 만드는 방법을 다룰거야

순환 진행 막대 및 알파 블렌딩 효과를 위해 알파 마스크를 사용하는 방법에 대해 설명합니다 이 모바일 앱 방문 페이지를 만드는 방법에 대한 두 번째 강의에 오신 것을 환영합니다 스케치 이 강의에서는 모바일 UI를 만드는 데 중점을두고 이 본문 오른쪽에 여기 살아라 내가 할 첫 번째 일은 둥근 사각형을 만들어 키보드의 "U"를 치면됩니다

우리는 둥근 사각형 도구를 얻을 것이다 나는 그것을 밖으로 끌어서 크기를 조정할 것입니다 여기 있습니다 너비를 340, 높이를 600으로 설정하고 나서 경계를 해제하고 우리가 구한 FAFAFA로 채우기를 바꿀 것입니다 이제이 배경색을 볼 수있게되었으므로 아트 보드가 있어야합니다

변경되었습니다 우리는 그것을 선택할 수 있습니다, 우리는 여기에 배경을 클릭하고 변경할 수 있습니다 FAFAFA도 마찬가지입니다 이제 그 두 가지 색상은 어울리는 이걸로 돌아가서 내가하고 싶은 일은 전화 UI 용 상태 표시 줄 코스 파일에서 나는 사용할 수있는 여기에있는 자산 인 상태 표시 줄입니다 이 스케치를 열면 파일, 당신은 우리가 이것을 볼 것이고 나는이 어두운 것을 가져올 것입니다

나는 그것을 복사해서 붙여 넣기 위해 C 명령을 할 것입니다 분명히 그것은 너무 길어요 크고이 너비가 340이라고 여기에서 볼 수 있습니다 K 명령을 사용하면 너비를 340으로 설정 한 다음이 위치를 변경할 수 있습니다 우리가 원하는 곳에

나는 이것을 옮길거야 좋아, 이제 우리는 이것을 "상태 표시 줄"로 바꾸자 이 "모바일 배경"이라고 부르십시오 이제 다음으로 넘어갈 수 있습니다 앨범 아트를 만들 예정입니다

계속해서 타원형을 만들거나 원 그래서 "O"타원형을 클릭 한 다음 Shift 키를 누른 상태로 정원 135로 내 크기를 설정 한 다음 border and under fill '이 아이콘으로 가서 여기를 선택합니다 영상 자산에는 몇 장의 앨범 표지가 포함되어 있으므로 레드 핫 칠리 페퍼스

타일 ​​대신에 채우기로 설정하고 채 웁니다 아주 좋아,이 그림자를 추가하는 대신 실제로 이것을 복제 한 다음 Gaussian blur를하십시오 앨범 1, 커맨드 C, 커맨드 V이 맨 아래 레이어에서 앨범 1을 할 것입니다

흐림 그래서 우리는 이것이 흐림임을 안다 그런 다음 나는 Gaussian으로 갈 것입니다 흐림, 그걸 켜고 그냥 5 픽셀처럼 떨어 뜨려 흐림을 준다 하지만 앨범의 실제 색상과는 약간의 차이가 있습니다

조금 생각합니다 더 좋은 모양의 우리는 앨범 1을 그룹화하여 그룹화 할 수 있습니다 이제 우리가 할 일은 실제로 주위에 고리를 만드는 것입니다 노래의 진행 상태 또는 얼마나 많은 노래가 연주되었는지 보여줍니다

그렇게하기 위해, 우리는 실제로 들어갈 수 있습니다 – 저는 실제로이 앨범을 "앨범 커버"라고 명명 할 것입니다 – 여기에있는 앨범 중 하나에 오십시오 꼭대기에있는 것을 해보 죠 명령 C, command V 나는이 그룹에서 이것을 꺼낼 것이고 나는 단지 이름을 짓 겠어 이 하나의 앨범 하나의 반지 하나

" 나는 이걸 밖으로 펴고 사실 저는 채우기를 끝내고 경계선을 켤 것입니다 이걸 스트레칭하겠습니다 조금 커 조금 컸을 수도 있습니다 좋아, 나는 그것이 보인다라고 생각한다

꽤 좋아 나는 국경을위한 색채에 들어갈거야 그리고 나는 단지 약간 밝은 회색을 골라 낼 것입니다 "EA" 잘 작동합니다 이제 이것을 복제하려고합니다

그래서 C 명령, V 명령을 실행하십시오 이 층 나는 이것을 "진보"라고 명명 할 것입니다 우리는 거기에 갈 여기서이 진행률 표시 줄에 색을 추가합니다

이것은 내가 잠시 뒤로 일부 웹 사이트에서 픽업 한 팁이며, 정말 잘 작동하기 때문에 나는 항상 사용하고있는 것입니다 우리는 여기서 할 수있는 것은 우리가 먼저 색을 볼 수 있고 그라데이션을 설정할 수 있다는 것입니다 우리가 구한이 사람에게 그러면 우리가 들어와 두께를 늘릴 수 있습니다 어쩌면 둘로

그런 다음이 아이콘 또는이 톱니 바퀴 아이콘으로 이동하여 모서리와 틈 사이에서 대시는 마술이 일어날 곳입니다 우리가하고자하는 것은이 갭 번호를 생성하는 것입니다 우리는 파생하고자합니다 수학에서이 번호 우리가 할 일은 우리가 이것의 너비는 184이므로 PI 또는 3

14를 곱하십시오 계속해서 계산기 아웃 폭은 184이고, 그 다음에 314 – 57776을 곱합니다

여기에서 1에서 57776 사이의 숫자를 입력하고 싶습니다 이 금액을 얻을 수있는 250과 같은 숫자 만 입력하면 나타납니다 채우는 우리는 300과 같은 것을 할 수 있습니다

우리는 그것을 얻습니다 우리가 원한다면 우리가 할 수있는 일 이것은 센터를 향해 더 많이 시작하는 것입니다 회전하고 회전 만하면됩니다 조금 그런 다음이 값을 280으로 낮추고 다시 회전 시키십시오

그럼 실제로 들어가서 만들 수 있어요 조금 두꺼운 나는 축소하려고합니다 나는 3 명이 정말 멋지다고 생각한다 이는 서클의 일부를 채우는 방법에 대한 간단한 팁입니다

정말 유용합니다 항상 사용하며 정말 멋지다고 생각합니다 나는 희망 그 사실을 모르는 경우에 유용하다는 것을 알게됩니다 다음으로, 나는 만들고 싶다 이런 종류의 시간이 여기 있습니다

이 서클이 있더라도 알고 싶어 할 수도 있습니다 그들이 노래에서 어디에 있는지 "T"를 클릭하고 클릭하고 이동합니다 먼저이 색상을 변경하십시오 나는 "2D"를 가로 질러 줄 것입니다

여기에 그 색을 저장하십시오 이 중 하나에서 저는 시그 니카를 할 것입니다 나는 무게를 위해 빛을 낼거야 그리고 나는 그것을 더 작게 만들거야 그런 다음 여기에 언제든지 입력하여 이와 같은 노래를 의미있게 만드십시오

136 나는이 원에서 약 10 픽셀을 이동시킬 것이다 좋아, 그럼 이제 우리가 필요해 노래의 제목과 아티스트 다시 "T"를 치고 우리가 설정할 수 있습니다

앨범, 또는 실례합니다, 제목 시그 니카를 해보 죠하지만 정기적으로 해보 죠 크기를 26로 늘려 봅시다 노래의 이름을 입력 해 봅시다

이 앨범에서 "Give it Away"는 큰 것입니다 그런 다음 다시 "T"를 칠 수 있습니다 그리고이 중 하나에 나는 Signika, 컵하지만 빛을 할거야 크기를 20으로 설정하십시오 레드 핫 칠리 페퍼스 인 밴드의 이름을 말합니다

그런 다음주고 이 멋진 공간, 아마 5 픽셀 떨어져있을 것입니다 계속해서 그룹화하십시오 나는 "노래 아티스트"를 할거야 이번에는 약 15 픽셀 정도 떨어져 있습니다 좋아, 이제 우리가 움직이기 전에 재생 막대를 사용하는 방법에 대해 알아 보도록하겠습니다

앨범 아트가 오른쪽과 왼쪽에 표시됩니다 대기열에있는 노래 또는 재생 목록에있는 노래 우리의 앨범에 오셔서 앨범 커버, 명령 C, 명령 V 그리고 나서 이것을 끌어 내십시오 가자 이 앨범으로 넘긴 다음 위에 끕니다

사실,이 두 가지를 동시에 드래그하십시오 우리가하고 싶은 것은 이전처럼 우리가 배경을 만들었던 것처럼 모든 것에 대한 가면 (mask for everything) – 우리는 이것을 위해 동일한 작업을 수행하기를 원합니다 이 모바일 UI 외부에 매달려 있습니다 우리가 할 수있는 일은 바로 이것입니다 그런 다음 선택한 그룹으로 가면을하십시오

좋아, 우리가 간다 이제 우리는 이것으로 되돌아 갈 수 있습니다 앨범 커버가 될 그룹 이 앨범은 하나입니다 할거다 여기, 상태 표시 줄을 끕니다

이걸 여기로 돌려 놓으세요 위를 드래그하십시오 이것을 "정보"라고 부르세요 이제 여기로 돌아 왔으므로,이 앨범을 그룹화하고 "앨범 표지를 남겨 둡시다" 나는 K 명령을 할 것이다

나는 그것을 조금 더 작게 만들 것이고, 그래서 그것을 확장 할 것이다 나는 그것이 좋게 보인다라고 생각한다 그것은 중심에있어, 그래서 나는 이 앨범의 중심은 이것의 가장자리에 있습니다 나는 붙잡을거야 옵션을 선택하고 이것을 드래그하여 앞으로 나아가서 똑같은 일을하십시오

어디 보자 앨범이 남았으니 이걸 확인하고 끌어 내라 커맨드 C, 커맨드 V

그런 다음이를 그룹화하여 "앨범 커버 권리"가 될 것입니다 괜찮은지 확인하십시오 우리는 왼쪽으로 나왔고 우린 옳았 어 가자 이것을 "앨범 커버 센터"로 이름을 변경하십시오

그것은 좀 더 조직적입니다 이제 우리가하고 싶은 것은 우리가 이것을 조금 만들고 싶다는 것입니다 보다보기가 어렵다 우리가해야 할 일은, 우리가 실제로 바꾸고 자하는 것입니다 앨범 아트

여기서 채우기를 변경해 보겠습니다 나는 또 다른 앨범을 가지고있다 흐림에서 나는 이것도 바꾸고 싶다 맞은 앨범에 들어가면 이것에 Gaussian blur를 추가하십시오 나는 그것이 5로 설정되었다고 생각한다

fill-let은 Green Day 앨범을합니다 이제 우리는 그것을 가지고 있습니다 우리가 도형 레이어를 만들 수 있다는 것입니다 "R"을 치면 이걸로 우리는 그것을 가려 내야 할 것입니다 Llet은 여기에 직사각형을 그으므로 우리는 테두리를 채운 다음 채우기로 들어간 다음이 그라디언트를 바로 여기로 가져옵니다

나는 갈거야 이런 식으로 센터에 이것을 설정하십시오 그것이 어떤 색깔인지는 중요하지 않기 때문에 우리는 이것을 알파 마스크로 바꿀 것입니다 그래서 그것을 사용하지 않을 것입니다 색상의 정보, 알파 또는 알파가 무엇인지에 대한 정보를 사용할 것입니다

불투명도는 계속해서 더 쉽게 볼 수 있도록 설정하려면 이 둘은 순수한 검은 색을 가리킨다 나는 센터에있는 하나를 두 번 클릭하면 흰색으로 바꿀 것입니다 이걸 설정하려고합니다 하나는 0의 불투명도입니다 이 값을 불투명도 0으로 설정하십시오

나는 그것을 원한다 센터에서 백이되어야합니다 그래서, 이것은 백에 있습니다 우리는 이제 우리는이 두 그룹을 그룹화 할 수 있습니다 이 두 그룹을 바로 묶어 보겠습니다

우리는 이것을 "하위 앨범"이라고 부릅니다 이 직사각형을 사용할 수 있습니다 이 알파 마스크로, 그래서 이것을 선택 마스크를 클릭하십시오 마스크 아래에 레이어, 마스크, 마스크 모드가 있으며 알파 마스크가 있다는 것을 알 수 있습니다 윤곽 마스크를 선택했다면, 이것을 얻을 것입니다

우리가 원하는 것이 아닌 이상한 표정 들어 오기가 중요합니다 알파 마스크가 아닌 경우 알파 마스크로 변경하십시오 이제 당신은 볼 수 있습니다 우리가 어떻게 차가워 져서 흰색으로 점점 가파르게되는지

나는 생각한다 정말 좋네 우리가 원하는 몇 가지 더 있습니다 여기서 해 하나는 아래쪽으로 재생 버튼을 수행하는 것입니다

다시, 나는 그것들을 파일에 포함 시켰습니다 가서 여기에 끌어다 놓으십시오 재생 버튼을 약 35 픽셀로 설정합니다 계속해 보겠습니다 우리는 할 수있다

이 버튼을 27 와이드로 설정하십시오 우리는 커맨드 C, 커맨드 V 그럼 이걸 드래그해서 플립을하고 싶습니다 이제 다음 버튼이됩니다 이걸 약 15 개 옮기자

서로 떨어져있는 픽셀들 우리는 분명히 색상을 변경해야합니다 분홍색이 끔찍한 것처럼 보이기 때문에이 모든 것을 선택하고, 채우고, 여기에서 브랜드 색상을 선택한 다음 불투명도를 떨어 뜨린다 실제로, 그것은 작동하지 않을 것입니다 우리가 할 수있는 일은 실제 색상이 아닌 불투명도를 여기에 놓습니다

레이어의 불투명도, 그냥 떨어 뜨리면 좋아 보인다 우리는 이들을 선택할 수 있습니다 그룹화 – G 명령 "버튼 재생" 우리는 모바일에서도이를 움직일 수 있습니다

우리는 앞으로 나아가서 좋은 모습으로 이것을 설정할 수 있습니다 이것도 내려, 그냥 제목 Let 's do 25 let 's do 50 여기서 멋진 그림자를 추가하여 이 흰색 배경에서 전화 사이의 분리 들어 오십시오 여기에서 가면이 이름을 "모바일 배경"으로 변경하십시오 그림자를 추가하려고합니다

그림자를 보시고 색이 들어가 보겠습니다 먼저이 배경 레이어로 들어갑니다 나는 우리가 이것을 위해 어떤 색깔인지를 알 수있다 주황색 이 16 진수 코드를 복사 한 다음이 코드로 다시 돌아갑니다

선택 될 때까지 여기를 클릭하기 만하면됩니다 여기 그림자로 들어갑니다 이 16 진수 코드를 입력하십시오 난 흐리게 할거야, 그리고 난 불투명도를 꽤 낮출 것입니다 내가 원하기 때문에 10 번 해보자

정말 미묘합니다 그런 다음 Y를 늘린 다음 흐리게 증가시킬 수 있습니다 조금, 그래서 뭔가 미묘한 이것과 여기 배경 좋아요, 그래서이 수업에서 한가지 더요

여기에 정말 빠른 메뉴 바가 있습니다 우리의 둥근 직사각형 툴, 키보드의 "U", 여기에서 이것을 만들 것입니다 내가 원하는 이게이 색깔과 같아 그래서 나는 이것들을 불투명도는 14 %입니다 이것을 브랜드 컬러로 설정 한 다음 드롭 다운합니다

그러면 옵션으로 갈거야 아래로 드래그 해 나는 이걸 조금 만들거야 덜 오래 가서 이것을 그룹화하십시오

우리 모바일 아래서 움직여 보시죠 측면에서 20, 상단에서 40 나는 그것이 좋게 보인다라고 생각한다 축소 해 보겠습니다 좋아, 이제 내가 본 것을 보았으니 이 그림자, 우리는이 배경에 그림자를 추가해야합니다 다시 가자 이 마스크 또는이 백 헤더 배경에 넣고 여기에 그림자와 붙여 넣기 우리는 여전히 이것을 클립 보드에 보관해야합니다

흐림도 증가시켜야합니다 (Y 값일 수도 있습니다) 그런 다음 불투명도를 떨어 뜨려야합니다 여기도 아래로, 12 살을 좋아하니 보자

20 Y를 다시 내려 놓으십시오 – 매우 미묘합니다 너희들은 심지어 동영상에서 동영상을 볼 수는 있지만이 기능을 사용하면 배경, 그리고 조금 더 깊이 알았어, 좋은 측정을 위해서, 이것의 모서리가 전화기 가장자리까지 늘어서 있는지 확인하십시오 우리의 nav 그룹을 선택하십시오

그리고 우리는 이것을 위로부터 40으로 원합니다 이렇게하면 빠른 확인이 가능합니다 확대하면 우리가 여기 와서 가이드와 우리는 단지 "D"가 바로 여기에 있도록 이것을 옮길 수 있습니다 할거다 모든 수직 가이드를 마우스 오른쪽 버튼으로 클릭하여 제거합니다 그것은 모바일 UI를위한 것입니다! 다음 강의에서 우리가 할 일은 최종 결정을 내리는 것입니다

여기 아래로 그 말로, 나는 다음에 너를 만날거야! 강의 3에서 마지막 방문 페이지 섹션을 끝내고 제목을 추가하고 견적 카드 디자인 및 악센트 서클 배치 시작하자 Sketch에서이 모바일 앱 방문 페이지를 만드는 방법에 대한 마지막 강의에 오신 것을 환영합니다 이 맨 아래에서 작업을 시작하기에 앞서 아트 보드 조금 더 크다

이를 위해 아트 보드를 선택할 수 있습니다 너는 볼 수있어 여기 우리는 높이가 있습니다 이 높이를 높이기 위해 1,280과 같은 것 여기서 시작합시다 내가 할 첫 번째 일은 이 섹션의 내용을 설명하는 제목을 작성하십시오

텍스트 도구를 사용하려면 키보드의 "T"를 누르십시오 나는 타이핑 할거야 여기에 뭔가 "5 백만명의 사용자가 전환했습니다" 이걸 선택하겠습니다 여기가 무엇인지 설정하십시오

그건 시그 니카의 빛이야 54의 크기 2D로 색을 선택했는지 확인하고 싶습니다 그러면 우리는 이것을 287 행에 표시 할 수 있습니다 여기서 보도록하겠습니다

이 우리가 줄을 서서 우리가 그곳에 있는지 확인할 수 있도록 할 것입니다 이것을 약 90 픽셀 정도 조금 아래로 옮길 것입니다 이 응용 프로그램의 하단 이제 내가해야 할 일은 견적 카드

나는 이것을 대략 만들 것이다 380에 의해 225 나는 "U"를 칠 것이고 둥글게 될 것이다 구형 우리가 가서 거기에 380에 의해 380에 그것을 설정하자

우리는 작업을 시작할 수 있습니다 이것, 그래서 국경을 없애고 이것에 채우기를 켜 봅시다 파 우리가 실제로 이것을 볼 수 있도록 그림자를 추가하십시오 그림자를 추가 할 것입니다

실제로이 색상을 유지하십시오 우리의 본문이 무엇인지, 그래서 2D가 그렇습니다 약간의 흐림 효과를 더할 수 있습니다 그것을 조금만 움직여 라 나는 그 색깔을 통해 들어 와서 내려 놓을 것이다

불투명도를 꽤 내려 놓으십시오, 그럼 15를합시다 우리는 이것을 "견적 카드 배경"이라고 부를 수 있습니다 – 우리는 거기에 갈 실제로 시도해 보겠습니다 실제로는 견적 크기에 대해 우리가 할 부분은 약 15 인치 크기의 오픈 샌즈입니다 히트작 "T"를 시작합시다

다시 텍스트로 복사 할 수 있습니다 공개 될 수 있습니다 계속해서 이것을 Open Sans regular로 설정하고 크기를 15로 설정하십시오 여기에 와서 경계 상자를 설정해야합니다 왼쪽으로 정렬

그런 식으로 지금은 좋아 보인다 가자 앞으로 타원형을 만들고 이것은 프로필 사진이 될 것입니다 계속해 보겠습니다 대략 40 픽셀 정도입니다 국경을 끄고, 우리의 채우기에 와서, 나는 몇몇 프로필 사진을 포함했다

너희들이 사용할 수있는 것들 그래서, 이미지 1, 채우기 위해 설정하십시오 그런 다음 이 사람의 이름을 여기에 입력하십시오 우리는 Signika semi bold를 할 것입니다 다시, "T"와 여기서 이름을 짓자

모든 모자, "John Paul" 이것을 선택하면 우리가 할 것입니다 Signika 세미 볼드하고 15시에 보관하십시오 이것의 중심이지만이 프로필 사진의 바닥에 조금 내려 앉지 않습니다 5 픽셀 정도면 좋을 것 같습니다

우리를 그룹으로 묶어 놓고 우리가 부를 수 있습니다 이 "프로필 이름" 이 이름을 "견적"이라고 지정하십시오 너는 이걸 가지고있어 25 픽셀

이것을 그룹화하고 "견적 섹션"이라고 할 것입니다 계속해라 중앙에 놓고, 위쪽과 아래쪽에서 50 번, 그리고 측면에서 20 번 나는 앞으로 조금 더 키가 작게 만들어보십시오 200 번 해보십시오

다시 나는 그것이 조금 더 나은 것처럼 보이지만, 많은 공백이 없다고 생각한다 우리는이 두 그룹을 하나로 묶어서 "카드 1"을 할 수 있습니다 할거다 명령 C, 명령 V 두 번 그래서 우리는 세 장의 카드를 가지고 있습니다 카드 3은 실제로 더 내려야합니다

카드 2 필요 여기에 있고 카드 3은 조금 더 내려갈 수 있습니다 그럼 나는 견적을 동일하게 유지하는 것은 필러를위한 것일 뿐이므로 그럼 나는 이것을 바꾸려고합니다 나는 프로필에 올거야, 이것, 그리고 정말 빠르게 이미지를 변경하십시오 이름을 "Sarah Parker"로 변경하고 5로 이동하십시오 거기에서 픽셀

이것도 변경할 수 있습니다 – "Jack Miller"할 수 있습니다 그 부분을 처리합니다 내가 뭘하고 싶은지 이 카드는 우리가 앨범 표지로 여기에서했던 것처럼 비슷한 것을합니다 내가보기에 너무 희미 해지기를 바란다 이 가장자리로 사라집니다

거기에는 더 많은 카드가있어 스크롤 할 수 있습니다 우리가 전에했던 것과 비슷한 것을 해보겠습니다 사각형을 구체적으로 작성해 봅시다 이것을 이동하고 국경을 끕니다 나는 채우기에서 나오고 올 것이다

우리의 선형 그래디언트에이 것을 여기에 설정합니다 이걸로 옮기세요 이 때 포인트, 나는 이것이 알파 0에 있고 이것이 알파 100에 있기를 바란다 그럼 우리가 할 수있는 것은 카드 3과 이것을 선택하고 마스크하십시오 알파 마스크로 이미 적용된 것을 볼 수 있습니다

다시 알파 마스크가 아닌 경우 다음과 같이 보입니다 개요 마스크 너는 그걸 원하지 않아 네가 보이는 것처럼 보이면 레이어, 마스크, 마스크 모드 및 알파 마스크로 이동합니다 그런 다음 실제로 페이드 아웃하는 위치를 변경하려면 항상 마스크로 돌아온 다음 채우기로 돌아가서 이러한 그라디언트를 조정하십시오 이것을 왼쪽으로 이동하면 더 빨리 흰색이됩니다

내 생각 엔 그게 좋은 장소라고 생각해 이제 실제로 하나가 있습니다 내가하고 싶었던 것보다 더 많은 일을 수행하는 것이었다 우리가 여기서 만든이 서클들은 윤곽이됩니다 이 공간에서이 공백의 일부를 채우십시오

가자 원을 만듭니다 타원형 도구로 "O"를 누르고 교대를 유지하고 원을 만듭니다 이번에 채우기를 해제하고 색상 그라디언트로 들어가서 건너 뛸 수 있습니다 우리가 구한이 구배로

그런 다음이 두 지점을 이동할 수 있습니다 우리가 원했던 것입니다 Llet은이 카드들을 하나로 묶어서 명령 G를 on 이들 "견적 카드"를 해봅시다 우리는 서클에서이 작업을 수행하고 "액센트 서클"을 수행합니다

이 "제목 섹션 2"라는 이름으로 이동하겠습니다 얼마나 멀리 보는지 보자 이 카드는 제목에 있습니다 나는 이것을 보시면 내가 제거 할 수 있다고 생각합니다 지금 당장 -이 수직 가이드를 제거하십시오

나는 그것이 조금 올 수 있다고 생각한다 비트, 그래서 그냥 몇 픽셀을 그렇게하자 그래서, 나는 약 20 최대 픽셀 실제로이 두 가지를 모두 진행해 보겠습니다 견적 카드 및 제목 섹션 – 두 개를 모두 10 픽셀만큼 올리십시오

그런 다음 따옴표 카드를 열 개 더 넣으면됩니다 너는 그것이 볼 수있다 15 꽤 괜찮아 보인다 나는 단지 부부하고 싶다고 생각한다

더 많이, 아시다시피, 정렬 여기에 우리의 제목이 정렬되어 있는지 확인합시다 점을 만들어 봅시다 카드가 왼쪽 정렬되었음을 알 수 있습니다이 정렬은 이 그림자를 숨기고있어보기가 어려웠습니다

멋져 보이네 : et는 이것이 그 가장자리에 정렬되어 있는지 확인합니다 축소 나는 이것이 조금 왼쪽에 올 수있는 것 같아요 이 모바일 UI와 탐색을 선택한 다음 이동하십시오

10 픽셀 좋아, 나는 20 이상 그것을 옮겼다 나는 이것을 조금 아래로 움직일지도 모른다 좋아, 좋아 보인다! 나는 우리가 끝난 것 같아 이 모바일 앱 방문 페이지 완료에 대해 축하드립니다

스케치에 이 비디오가 마음에 들면, 엄지 손가락을 올려주세요 구독하십시오 그리고 Skillthrive에서 무료 회원이 될 수 있다는 것을 잊지 마세요 if 당신은이 코스 파일을 다운로드하기를 원합니다 – 링크는 설명에 있습니다 다시, 나는 Skillthrive에서 사냥꾼이고 나는 다음에 너를 만날 것이다!

HTML Full Course – Build a Website Tutorial

안녕하세요, CAD 초안에 오신 것을 환영합니다 내 이름은 마이크입니다

이 강의에서는 시작하기 위해 알아야 할 모든 것을 다룰 것입니다 HTML 작성 HTML은 하이퍼 텍스트를 의미합니다 마크 업 언어 및 기본적으로 웹 페이지를 만드는 데 사용할 수있는 언어입니다 그래서 인터넷에가 본 적이 있다면 인터넷상의 거의 모든 단일 페이지가 HTML이라는이 언어로 작성되었습니다 HTML에서는 일련의 HTML 태그를 정의 할 수 있습니다 귀하의 웹 사이트의 레이아웃과 모양 및 느낌을 정의합니다 따라서 HTML 태그가 무엇인지 알 수 있고 HTML 태그를 넣을 위치와 함께 사용하는 방법을 배울 수 있다면 그런 다음 자신 만의 웹 사이트를 만들 수 있습니다

실제로 사용자 정의 웹 사이트를 구축하는 것보다 훨씬 쉽습니다 사람들이 콘텐츠 관리 시스템처럼 사용하기 위해 달아나거나 웹 사이트 구축을 위해 프로그램을 사용하는 경우가 종종 있습니다 하지만 때로는 들어가서 손을 더럽 히고 처음부터 웹 사이트를 만드는 것이 재미있는 경우가 있습니다 그리고 당신은이 과정에서이 과정에서 어떻게하는지 배우게 될 것입니다 HTML 사용의 기본 사항을 다룰 것입니다

그래서 첫 수업부터 마지막 ​​수업까지 HTML을 작성하여 새 태그를 배우게되고 웹 페이지를 조작하여 새로운 방식으로 태그를 만들 수 있습니다 당신이 html로 원했던 방식을보고 느끼십시오 귀중한 기술입니다 당신의 이력서에 HTML 경험을 넣는 것조차 의미합니다 언젠가 직장을 구할 수 있도록 도울 수도 있고 멋진 친구처럼 자랑 할 수도있는 멋진 일이 될 수 있습니다

그대로 나는 때로는 사람들이 조금씩있을 수 있다고 생각한다 배우고 배우는 것이 너무 복잡해 보이기 때문에 HTML을 배우고 배우는 것이 힘들다 나는 그것이 정말로 실제로 당신에게 말하기 위해 여기에있다 배우기 쉬우 며 전과정 전체에 걸쳐 당신과 함께 할 것입니다 날 믿어 나는 잠시 동안 HTML을 알고 있었기 때문에 배우는 가치가있는 것이 무엇인지 알았고, 우리가 필요로하는 모든 것을 다룰 것입니다

우리는 중요한 모든 것에 대해 이야기 할 것입니다이 과정이 끝날 때까지, 당신은 진실하고 완전한 hTML을 사용하는 방법과 자신의 웹 사이트를 구축하는 방법에 대한 이해 이 튜토리얼에서는 텍스트 편집기를 선택하는 방법에 대해 이야기하고자합니다 HTML을 작성할 때마다 HTML이 이제 HTML 파일이라고 불리는 내부에 실제로 작성됩니다 이 파일은 텍스트 파일과 비슷하지만 점 대신에 파일입니다 Txt 또는 도트 할 CX 확장

우리는 점 HTML 확장자를 가지고 있습니다 그래서 HTML을 사용하면 기본적으로이 HTML 파일을 작성한 다음 웹 브라우저에서 해당 파일을 가져올 수 있습니다 웹 페이지로 표시하고 정말 멋진 것 중 일부입니다 html을 작성하는 첫 번째 단계는 이러한 HTML 파일을 작성하는 데 사용할 수있는 프로그램을 선택하는 것입니다 다양한 옵션이 있습니다

HTML 텍스트 편집기를 선택하려고 할 때 많은 시간이 걸리므로 다소 혼란 스러울 수 있습니다 너무 많은 옵션이 있고 너무 많은 사람들이 서로 다른 의견을 가지고 있기 때문에 조금이라도 압도적입니다 편집자 아시다시피,이 비디오에서 초보자가 할 수있는 가장 좋은 점은 무엇입니까? 나는 당신에게 당신의 선택권이 무엇인지에 대한 개요를주고 싶다 HTML 텍스트 편집기로 어디서부터 시작해야하는지에 관해서는 정말 간단한 텍스트 편집기 만 있으면됩니다 따라서 파일을 편집하고 다양한 형식으로 저장할 수있는 텍스트 편집기는 귀하와 일반적으로 HTML을 작성할 때 워드 프로세싱 프로그램처럼 사용하고 싶지는 않습니다

밖에 워드 프로세서가 많이 있습니다 Microsoft Word Google 문서 도구 LibreOffice 이것들은 큰 워드 프로세서 프로그램과 같습니다 과 이것은 일반적으로 사용하려는 것이 아닙니다 그래서 당신은 당신이 알고있는 Microsoft Word 안에서 당신의 HTML을 타이핑하고 싶지 않습니다 HTML을 실행할 때 잔인 함의 종류는 더 간단합니다

따라서 초보자를위한 많은 시간은 컴퓨터에있는 매우 간단한 텍스트 편집기를 사용하는 것이 좋습니다 Windows에서는 Mac에서 메모장이됩니다 TextEdit과 비슷하며 이것들은 단지 뼈입니다 간단한 텍스트 편집기와 그것은 실제로 필요한 것 이상으로 작성해야합니다 HTML과 마찬가지로 일반적으로 메모장이나 TextEdit 같은 간단한 HTML을 작성하는 초보자를위한 정말 HTML 작성에 집중해야하고 모든 단일 행을 입력하고 모든 것이 올바르게 형식화되어 있는지 확인해야합니다

궁극적으로, 그것은 당신이 정말로 기본을 이해하는 데 도움이 될 것입니다 하지만 메모장이나 TextEdit처럼 사용하고 싶지 않은 사람이라면 실제로 특별히 고안된 도구를 사용할 수 있습니다 프로그램과 인기있는 프로그램 중 일부에서 HTML을 작성하도록 특별히 고안된 이러한 프로그램이 많이 있습니다 원자 숭고라고 불리는 것이 있습니다 대괄호 txt 일반 webstorm

다른 회사에서 개발 한 여러 가지 프로그램이 있습니다 당신은 온라인으로 가서 많은 연구를 할 수 있습니다 본질적으로 이것들은 여러분이 HTML을 작성할 수 있도록 특별히 고안된 프로그램입니다 그래서 그들은 HTML을 가지고 다르게 표시 할 것입니다 HTML을 좀 더 쉽게 작성할 수있는 부가 기능이나 다른 기능을 사용할 수있는 기능을 제공 할 수 있습니다

그러나 그에 대한 벌칙으로 그것들은 또한 사용하기에 조금 더 복잡하고 그래서 나는 초보자를 위해 일반적으로 적은 것을 좋아한다 복잡한 일이 더 좋습니다 따라서 무언가를 간단하게하는면에서 더 많은 것을 잘못하고 싶을 수도 있습니다 그런 다음 다른 프로그램 중 하나에 대한 HTML 이동을 배우게되면 무엇인가 차이가 나는 것을 보여주고 싶습니다 이들은 다음과 같이 보일 것이다

그래서 여기에 TextEdit이 있습니다 이것은 Mac의 텍스트 편집기와 같은 기본값입니다 그래서이 파일을 열면 여기에 파일이 있는데 이것은 실제로 HTML 파일입니다 그래서이 파일 안쪽에 나는 많은 HTML을 작성했으며, 이것은 당신이 볼 수있는 가장 간단한 HTML 문서와 같다 그러나 이것은 HTML을 작성하는 것이 이런 식으로 보일 것입니다

그래서 여기에 더 많은 HTML을 추가하고 싶다면 그냥 입력 할 수 있습니다 알다시피, 그것은 매우 간단합니다 아무 것도 구성 할 필요가 없습니다 당신의 HTML을 써주세요 그러나 더 복잡한 것은 이런 프로그램이 될 것입니다

이것은 아담이라고 불린다 그리고 이것은 제가 이야기하고있는 텍스트 편집기 중 하나입니다 그리고 이것은 당신이 당신을 조금 더 쉽게 알 수있게합니다 HTML 형식을 약간 다르게 설정 한 것을 볼 수 있습니다 그래서 이것은 같은 코드입니다

그래서 여기,이 작은 꼬리표는 색깔입니다 여기가 색칠되어있어 그래서 일반적으로 색깔이 다른 프로그램이 있습니다 이렇게하면 다른 테마를 선택할 수 있으므로 내가 알 수 있습니다 이것의 느낌을 전체적으로 들여다 보도록하십시오

그래서 정말 멋진 옵션이 많이 있습니다 이와 같은 텍스트 편집기에서 사용할 수있는 구성 옵션 그러나 우리는 또한 HTML을 작성하는 것을 이해해야하며 이것은 기능적으로하는 것과 똑같은 일을합니다 이것들은 같은 것이다 그들은 단지 당신이 알고 있습니다, 그것은 우리가 HTML을 작성하는 환경입니다 그래서 여기에 당신에게 추천합니다 나는 확실히 추천 할 것이고 많은 사람들은 이것을 이와 같은 간단한 텍스트 편집기로 시작하는 것을 추천한다

반드시 그럴 필요는 없다 TextEdit하지만 단순하고 전체적인 아이디어 일 수 있습니다 HTML을 처음 배울 때 더 간단할까요? 다른 것들을 구성하거나 무거운 텍스트 편집기로 작업하는 것에 대해 걱정할 필요가 없습니다 당신은 가볍고 간단한 것을 사용하는 것을 압니다 TextEdit은 HTML에 집중할 수있게 해줄 것이며 HTML 작성에 대한 이해를 갖게됩니다

그리고 당신은 정말로 편안하게 느끼고 있습니다 그런 다음 지금 당장이 프로그램으로 이동할 수 있습니다 이것은 분명히 제 추천입니다 너는 내 말을들을 필요가 없다 그리고 이런 프로그램을 선택하고 싶다면 확실히 당신의 연구는 몇 가지 다른 프로그램을 시도해보십시오 당신을 위해 맞는 하나를 참조하십시오 이 텍스트 편집기가 최고라고 말하는 것처럼 온라인에서 많은 사람들이 듣게 될 것입니다

사람들은 항상 그런 것들에 대해 거의 싸움을하지 않습니다 하지만 최고의 텍스트 편집기는 당신에게 맞는 텍스트 편집기입니다 그래서 가장 즐겁게 즐기는 것이죠 다른 사람들이 말하는 것에 너무 귀를 기울이지 마라 선택하는 가장 좋은 방법은 다양한 텍스트 편집기를 사용하는 것입니다

이 과정을 수강하면됩니다 심지어 당신은 다른 것들을 시도해 볼 수 있으며 각각의 것을 어떻게 사용 하는지를 볼 수 있습니다 그러나 초심자를 위해 다시 간단한 hTML을 시작하는 것이 좋습니다 정말 간단한 언어입니다 그래서이 모든 것들과 마찬가지로 플러그인 및 추가 기능과 테마는 웹 개발 및 일반 프로그래밍으로 인해 더 좋아집니다

보통 더 간단하고 더 직설적 인 것이 더 낫습니다 이 튜토리얼에서는 첫 번째 HTML 파일을 만드는 방법에 대해 이야기하고자합니다 HTML 파일을 만드는 방법을 보여 드리겠습니다 웹 브라우저에서 어떻게 HTML 파일을 볼 수 있는지 보여 드리겠습니다 그러면 웹 브라우저에서 HTML 파일을 볼 수있는 방법을 보여 드리겠습니다

HTML 파일을 기본 HTML 코드와 함께 사용하면 제대로 작동합니다 그래서 내가 할 일은 프로젝트를위한 폴더를 만드는 것입니다 그래서 나는 여기에 내 웹 사이트에 대한 내 HTML 파일을 넣을 수있는 폴더를 만들거야 파일 탐색기 난 그냥 새 폴더를 만들거야 그리고 나 지금 이걸 부를거야 GA는 Khadem e 초안 초안 사이트 및 그럼 지금 우리가 할 수있는 일은 내 텍스트 편집기 안에이 폴더를 열어서 여기에 올거야

이 프로젝트 폴더 이제이 폴더 안에 새 파일을 만들겠습니다 그러면 새 파일을 말하고 바로이 파일을 색인 도트 HTML 이제이 파일 인덱스의 HTML을 명명하는 이유는 일반적으로 첫 번째 웹 페이지를 만들 때입니다 당신은 그것의 이름을 색인 도트 HTML로하고 싶다 HTML은 우리가 사용할 수있는 특수한 파일 이름이고, 파일 이름은 indexhtml입니다

폴더의 루트 디렉토리에 있습니다 그런 다음 웹 브라우저는 웹 사이트의 홈 페이지라고 생각합니다 따라서 이와 같은 웹 페이지를 만드는 경우 인덱스라는 이름을 HTML에 지정하는 것이 좋습니다 하지만 정말로 당신이 원하는대로 이름을 지을 수 있습니다 나는 내 이름을 지을거야

indexhtml 및 이제 HTML 파일을 열어 보겠습니다 그래서 이것은 실제로 우리가 웹 브라우저에서 사용하고 볼 수있는 파일 그래서 내가 여기 와서 hello world를 타이핑하면 실제로이 파일을 가져 와서 웹 브라우저에서 열어 보겠습니다 그래서 저는 열어서 열기를 클릭하고 웹 브라우저에서 열어 보겠습니다 Google 크롬으로 열어 보겠습니다

이제 어떤 일이 일어나고이 파일이 웹 브라우저에서 열리고 보일 것입니다 우리는 본문을 가지고 있습니다 그래서 이것은 가장 단순한 것과 같습니다 가장 순수한 형태의 HTML로 HTML 파일 내부에 일부 베어 본 (bare-bones) 텍스트를 타이핑하는 것입니다 여기에 화면에 표시됩니다

그러나 공식 파일과 같은 HTML 파일을 원한다면 제대로 구성됩니다 우리는 실제로 약간의 여분을 추가해야 할 것입니다 여기서 코드를 작성하면이 문제를 해결할 수 있으며 HTML 태그라는 것을 만들 것입니다 이제 hTML은 다음을 정의하는 데 사용되는 언어입니다 웹 페이지 레이아웃 및 레이아웃 정의 가능 태그라는 것을 사용하여 일련의 태그를 만들 수 있으며 태그는 기본적으로 내 웹 브라우저에 알려줍니다

내 웹 사이트를 어떻게 보이게하고 내 웹 사이트에 어떤 콘텐츠를 갖길 원하십니까? 그래서 일종의 HTML 파일 작성을 시작하십시오 우리는 기본적인 것을 만들어야합니다 HTML 태그의 뼈대와 이것들은 모든 HTML 파일이 가질 표준 태그 일 뿐이며 기본적으로 우리 브라우저를 제공 할 것입니다 우리 파일에있는 내용에 대한 다른 정보는 여기에 있습니다 내가 만들고자하는 첫 번째 태그가 호출됩니다 doctype과 기본적으로이 파일의 문서 유형이 무엇인지 정의하고 우리는 HTML 파일을 만들 것입니다

그래서 느낌표를 써야 겠어 똑같이 타이프 e 대문자를 본 다음 HTML을 말하고 싶습니다 이 태그는 기본적으로 내 웹 브라우저에 알려줍니다 이 문서의 유형은 다음과 같습니다 HTML이므로 HTML 문서이며 여기 아래로

컨테이너 태그라는 것을 만들 수 있습니다 이 태그는 하나의 태그입니다 이 태그 중 하나만 필요하지만 HTML 컨테이너 태그라고하는 많은 태그가 있으며 기본적으로 두 개의 태그가 있음을 의미합니다 따라서 시작 태그가 있고 종료 태그가 있고 그 안에 다른 태그를 넣을 수 있습니다 그래서 그들은 콘텐츠 나 다른 HTML 태그를위한 컨테이너 역할을합니다

그리고 우리가 만들 첫 번째 것은 HTML 태그라고하기 때문에 서명하지 않을 것입니다 HTML 및 더 큰 부호 및 지금 나는이 꼬리표를 닫을 수있다 그래서 이것이 시작 태그이고, 끝 태그를 만들고 싶습니다 그래서 나는 그것을 여기에서 만들 예정이다 Tagg을 만드는 방법은 시작 태그의 이름을 취하는 것입니다 기본적으로 앞에 슬래시를 넣은 다음 시작 태그의 이름을 입력합니다

그래서 이것은 이제 한 쌍의 태그이고 당신은 관계를 올바르게 볼 수 있습니까? 그래서 여기 시작 태그가 있습니다 그래서 hTML이이 태그의 이름이고, 이것이 HTML 태그이고 이것이 종료 태그라고 말할 수 있습니다 따라서 같은 이름을 사용하지만이 슬래시 그래서 슬래시는 이것이 종료 태그임을 나타 내기 위해 사용되며이 HTML 태그는 가지고있는 HTML 파일에 필요할 것입니다 이것은 기본적으로 웹 사이트의 최상위 태그와 같습니다

웹 사이트의 전체 컨테이너 태그와 같습니다 그래서 모든 HTML 코드와 HTML 태그가 여기에 들어갑니다 이제는 만들 필요가있는 두 세트의 태그가 있습니다 첫 번째 집합을 head 태그라고하고 두 번째 집합을 body 태그라고합니다 따라서 모든 HTML 파일에는 두 가지 기본 섹션이 있습니다

문서의 머리 부분이 있고 문서의 본문과 문서의 머리 부분이 있습니다 문서에 대한 데이터를 정의하므로 문서의 제목과 같은 것을 정의 할 수 있습니다 설명을 제공 할 수 있습니다 문서와 관련된 다른 속성을 문서와 관련된 이미지처럼 정의 할 수 있습니다 또한 머리를 사용하여 필요한 모든 리소스를 HTML 파일로 가져올 수 있습니다

나중에이 HTML 파일을 다른 유형의 파일에 연결할 수 있다는 것을 알게 될 것입니다 머리 속에서 우리는 그 모든 것을 할 수 있습니다 그래서 머리는 HTML 파일의 설정과 비슷합니다 그것은 명령 센터와 같습니다 이것은 실제 파일에 대한 메타 데이터와 비슷합니다

헤드 태그를 만들어 머리를 만들 수 있습니다 그래서 우리가 머리를 써야 할 것보다 작을 것입니다 이제이 태그를 닫을 수 있습니다 그 것처럼 이제 body 태그를 만들겠습니다 body 태그는 HTML 페이지의 고기와 뼈처럼 넣을 곳입니다

그래서 body 태그는 우리의 모든 HTML 컨텐트가 갈 곳입니다 일반적으로 몸은 머리보다 훨씬 커야합니다 시체는 실제로 웹 페이지의 모든 콘텐츠를 넣는 곳이 될 것입니다 몸에있는 것이 대부분 나타나거나 적어도 브라우저에서 렌더링 될 것입니다 여기 아래로 나는이 시체 꼬리표를 만들거야

그래서 나는 시체를 말하고 다른 닫는 태그를 만들거야 Body와 그래서 나는이 모든 다른 태그들을 정의하고있다 그리고이 파일을 웹 브라우저에서 열면 웹 브라우저는이 모든 태그를 살펴보고 알아낼 수 있습니다 페이지에 관한 정보 그래서 웹 브라우저는 실제로이 모든 다른 태그들을 파싱하는 것을 좋아할 수 있습니다 정의 할 수 있도록 모든 정보 표시 정보 및 태그를 사용하여 해당 정보를 정의하고 해당 정보를 다른 방식으로 배치하는 데 도움을 주며 웹 브라우저는 기본적으로 모든 정보를 파싱 할 수 있습니다

이를 해독하여 웹 사이트를 구축하십시오 정말 멋집니다 이제 제가 지적하고자하는 한 가지 방법은 제가 모든 것을 포맷하는 것입니다 그래서 당신은 내가 여기에있는 HTML 태그와 이러한 HTML 태그 내부 나는이 머리 꼬리표를 가지고 있고, 나는이 꼬리표를 가지고있다

그래서 나는이 모든 태그들 사이의 관계를 지적하고 싶다 그리고 저는 여러분에게 몇몇 용어를 소개 할 것입니다 가장 먼저 주목해야 할 것은 헤드 태그를 들여 쓰고 있다는 것입니다 그리고 body 태그를 들여 쓰기 때문에 여기에 몇 개의 공백이 있음을 볼 수 있습니다 이것은 기본적으로 탭이며 일반적으로 HTML을 작성할 때 모든 파일을 들여 쓰시겠습니까? 들여 쓰기 규칙은 기본적으로 우리가이 컨테이너를 가지고있는 것과 같습니다

맞습니까? 그래서이 HTML 태그와이 HTML 태그가 여기에 있습니다 우리는 몸에 머리가있다 그래서 다른 태그 안에 들어있는 모든 태그를 들여 쓰고 싶습니다 이 머리 태그는이 HTML 태그 안에 있으므로 머리 글자와 동일한 것을 들여 쓰고 있습니다 나는 들여 쓰기를하고 있는데 그것은 기본적으로 시각적으로 태그 간의 관계를 해독하는 데 도움이됩니다

이러한 태그와의 관계 및이를 수행하는 가장 일반적인 방법 중 하나는 다음과 같습니다 가족 용어 따라서이 HTML 태그를이 헤드 태그의 부모로 참조합니다 이 body 태그는 body 태그이므로 body 태그는 HTML 태그의 하위 태그입니다 따라서 HTML 개발자와 같이 이야기하는 경우가 많다면 용어를 사용하게 될 것입니다 그들은 헤드 태그가 HTML 태그의 자식이라고 말할 것입니다

그래서 당신에게 요청할 수 있습니다 이 body 태그의 부모는 무엇이며 body 태그가? HTML 태그 안에는 head 태그와 body 태그를 형제로 정의 할 수도 있습니다 따라서 이들 태그는 형제 태그이므로 동일한 부모를 공유하므로 관계를 이해할 수 있습니다 그래서 만약 내가 여기에 또 다른 태그 안에 일련의 태그를 만들려고한다면 단락처럼 만들 수 있습니다 실제로, 당신은 그것을 머리에 넣기를 원할 것입니다

우리는 그것을 몸에 넣고 싶다 따라서 단락 태그를 만들 수 있으며 단락 태그에 대해 너무 걱정하지 않아도됩니다 하지만 이것은 단락 태그는이 HTML 태그의 손자가됩니다 그리고이 몸체 태그의 자식이 될 것입니다 이 말은 여러분이 많이 들으려는 용어와 비슷합니다

일반적으로 우리는 이것을 정의하고 있습니다 세대 별 구문의 관점에서 HTML 태그를 사용하므로 부모님이 조부모님에게 중요한 점이 있습니다 이제 우리는이 기본 HTML 뼈대를 배치했습니다 우리는 본질적으로 우리가 필요로하는 모든 것을 갖추고 있습니다 이 웹 사이트와 내가 새로 고칠 수 있도록 아니면이 페이지를 저장할 수 있습니다

실제로 브라우저로 향하게됩니다 이제이 페이지를 새로 고치면 아무 일도 일어나지 않습니다 그래서 이것은 완전히 비어 있습니다 HTML 문서는 우리가 쓸 수있는 가장 간단한 HTML 문서와 같습니다 그래서 나는 당신이 사용할 수있는 태그를 하나 더 보여줄 것입니다

이것을 제목 태그라고합니다 그래서 여기에 문서의 머리 부분에 제목이라는 또 다른 태그를 만들겠습니다 이 태그 여기에 정보를 넣을거야 그래서 일반적으로 HTML 태그가있을 때 특정 태그는 컨테이너를 의미합니다

예를 들어,이 HTML 태그 세트는 컨테이너입니다 기본적으로 다른 태그를 보유하는 데 사용되지만 특정 태그는 내용을 담는 데 사용됩니다 따라서이 제목 태그는 텍스트를 담는 데 사용되므로 이러한 제목 태그의 내부에 있습니다 우리는 텍스트를 넣고 싶습니다 그리고 이것은 내 웹 사이트의 제목이 될 것입니다 그래서 저는 마이크의 말처럼 말할 수 있습니다

웹 사이트 및 이것은 이제 우리 웹 사이트의 공식 제목이 될 것이며, 웹 브라우저를 방문하면 이 탭에서 여기를보십시오 여기서 제목을 볼 수 있습니다 Indexhtml 그것이 파일의 이름입니다

하지만이 파일을 새로 고침하면 마이크의 웹 사이트가 업데이트된다는 것을 알 수 있습니다 그래서 이것은 브라우저의 좋은 예입니다 우리의 웹 사이트를 통해 구문 분석 하고이 제목 태그를 읽을 수있어 우리 웹 사이트의 제목이 무엇인지 알아 내십시오 그래서 이것들은 당신이 머리 속에 넣거나 제목 꼬리표를 넣을 수있는 종류의 꼬리표입니다 HTML 문서에 대한 정보를 정의하는 태그를 알고 있습니다 그리고 body 태그 안에 여기에 내 웹 페이지 안에 넣고 싶은 콘텐츠를 넣을 수 있습니다

그래서 나는 다음과 같이 넣을 수있다 안녕 세상 여기 아래로 이제 페이지를 새로 고침하면 웹 브라우저에 표시됩니다 그래서 당신의 웹 사이트에 내용을 쓰고 싶습니다 어떤 내용이든이 바디 태그 내부와이 코스의 나머지 부분을 통과하게 될 것입니다

우리는이 바디 태그 안에 넣을 수있는 모든 멋진 태그에 진지하게 들어갈 것입니다 HTML에는 이러한 멋진 태그가 너무 많으며 놀라운 태그를 사용하여 멋진 것들을 할 수 있습니다 우리 웹 브라우저의 내부 그래서 나는 당신이 주위에 끈기를 바란다 그리고 우리는 물건을 몸에 넣는 법을 배울 것이다

이 튜토리얼에서는 몇 가지 기본 HTML 태그 사용에 대해 이야기하고 싶습니다 그래서 우리는 가장 중요한 것을 보게 될 것입니다 귀하의 웹 사이트에서 사용하게 될 일반 HTML 태그와이를 사용하여 꽤 잘 보이는 사이트를 정의합니다 이 비디오가 끝날 때까지 HTML 내부에 많은 콘텐츠를 배치하는 방법에 대한 좋은 아이디어가 있습니다 브라우저에 표시하십시오

내가 보여주고 싶은 첫 번째 태그는 실제로 우리 문서의 머리 부분에 올라갈 것입니다 제목 바로 위에 여기에 넣을 것입니다 지금은 HTML 파일의 기본 골격을 가지고 있습니다 HTML 파일의 가장 단순한 버전과 비슷합니다 내가하고 싶은 한 가지는 메타 태그라고하는 메타 태그를 정의하는 것이며 메타 태그는 기본적으로 파일에 대한 정보를 정의하는 태그 그래서 그것은 우리에게 메타 데이터를 제공하므로이 부호를 사용하지 않고이 메타 태그를 정의 할 것입니다

그리고 기본적으로 이것을 사용하여 내 웹 페이지의 문자 인코딩을 정의합니다 그래서 이것은 기본적으로 웹 브라우저에이 문서의 내부에서 사용하고있는 문자의 유형을 말하고 있습니다 그래서 나는 말할 수 있습니다 문자 집합은이 따옴표와 동등합니다 그냥 말할거야

UTF – 8 그러면 내 문서의 문자 세트가 utf-8로 정의됩니다 정말 공통된 캐릭터 세트와 같습니다 내가 사용하고있는 캐릭터 세트입니다 그래서 내가 말했듯이, 이것은 메타 태그이며, 우리의 파일에 관한 정보를 정의하는데 사용됩니다 나는 하나 더 메타 태그를 정의 할 것이고 이것은 메타 설명 태그가 될 것입니다

따라서이 태그를 사용하여 기본적으로 저희 웹 사이트 및이 태그에 대한 설명은 웹 브라우저와 같은 것들에 의해 사용될 수 있습니다 예를 들어, Google 이 메타 태그를 파일로 볼 수 있으며 검색 페이지에 정보를 표시하는 데 사용할 수 있습니다 일반적으로 Google에서 여러 번 검색하면 그들은 그것의 작은 묘사 같이이고 나는 파일에서이 꼬리표를 사용하고있다 그래서 나는 말할 수있다 메타와 나는 이름이 같다고 말할거야 설명과 지금 내가 말할거야 내용은 평등하게 그리고 이제는 내 웹 사이트에 대한 설명을 입력 할 수 있으므로 정말 멋지다고 말할 수 있습니다

웹 사이트 및 이제 우리는이 멋진 웹 사이트와 같은이 설명이 있고 나는이 태그를 끝내고 끝낼 것입니다 그래서 너희들에게 보여주고 싶다 하나의 개념 또는 아시다시피, HTML의 한 가지 이제 HTML 속성에 이러한 HTML 태그가 있습니다 여기는 메타 태그입니다

이것은 메타 태그이지만이 태그 안에는 속성이라는 것이 있습니다 때때로 사람들은 그것들을 속성이라고 부릅니다 때로는 사람들이 재산이라고 부릅니다 기본적으로이 태그에 몇 가지 정보를 전달합니다 따라서 메타 태그가 있고이 태그에 맞춤 정보를 제공하고 있습니다

이 메타 태그의 내부에는 내가 찾고자하는 정보 유형이 있습니다 그래서 설명을 정의하고 그것을 설명해야한다고 말하고 있습니다 그래서이 HTML 태그에서 많은 시간을 지나칠 수 있습니다 속성 또는 속성 그리고 이러한 태그는 이러한 속성과 속성을 사용하여 작업을 수행 할 수 있습니다 따라서이 메타 태그 작업은 파일에 대한 메타 데이터를 정의하는 것이고 우리가 그것을 전달할 때 이러한 속성이나 속성 메타 데이터를 정의하는 데 필요한 정보를 제공합니다

우리의 HTML 태그 안에는 많은 시간이 있습니다 우리는 다른 속성을 가지려고합니다 태그에 다른 정보를 제공해야합니다 그러니 마음 속에 두세요이 메타 태그는 당신이 이것을 좋아하기 때문에 그것을 보여주는 좋은 일을합니다

하나는 두 가지 속성을 취한다 그래서 그것들은 지금 우리 문서의 머리 부분에서 정의 할 수있는 두 개의 태그입니다 우리 문서의 본문으로 들어가서 재미있게 시작할 것입니다 그래서 문서의 본문은 우리가 실제처럼 모든 것을 넣을 수있는 곳입니다 웹 사이트 콘텐츠 그래서 웹 사이트에서 볼 수있는이 모든 것들은 일반적으로 몸 안쪽으로 가야합니다

이제 첫 번째 태그입니다 너를 보여주고 싶다 기본적으로 헤더를 정의하거나 웹 사이트에서 제목과 같이 사용할 수있는 태그이므로 여기에이 태그가 있습니다 안녕하세요 전 정말 좋아하지 않기 때문에 그냥 없애 버릴 겁니다

웹 사이트에 두통을주고 싶다고 가정 해 봅시다 그래서 나는 여기에 내 웹 사이트의 제목처럼 잘 정의하고 싶었다 제목 태그라는 것을 사용할 수 있습니다 그리고 우리가이 표제 꼬리표를 쓰는 방법은 수업 기호와 함께이고 나는이 H를 사용하고 나서 H를 사용할 것입니다 저는이 숫자에 1부터 6까지의 숫자를 줄 수 있습니다

그래서 그것을 2로 줄 수 있습니다 3 4 5 또는 6 그리고 이것은 기본적으로 우리 웹 사이트의 헤더를 뱉어 내십시오 그래서 머리글 1은 이것이 마이크의 것임을 말합니다 웹 사이트 및 나는이 결말표를 여기서 사용할거야 그래서 이것은 태그의 예입니다

내부에 텍스트 입력이 필요할 것입니다 그리고 지금 내가 여기로 가서 내 페이지를 새로 고침 할 때 마이크의 웹 사이트가 나타나고 멋지고 크다는 것을 알 수 있습니까? 그래서 나는 내 웹 사이트에서이 멋진 큰 머리글을 가지고 있고 그것을 알고있다 텍스트가 정말 크고 정말 좋아 보인다 그리고 h1을 정의하는 것 외에도, 이것을 h2로 만들 수도 있습니다

그리고 이제 이것을 h2로 만들면 조금 더 작아 질 것입니다 그래서 당신은 그것이 조금 줄어든 것을 볼 수 있습니다 그리고 이것을 h4로 만들 수 있습니다 그리고 그것은 더욱 더 줄어들 것입니다 과 나는 h6까지 줄곧 갈 수있다

hTML이 정의 할 수있는 가장 작은 크기의 머리말은 꽤 작은 머리말이 될 것입니다 언제든지 좋아하는 것을 발표하거나 좋아하는 타이틀을 원할 때마다 어쩌면 이 헤더와 헤더를 사용할 수있는 문서의 섹션은 일반 텍스트보다 조금 더 커 보이고 굵게 보일 것입니다 헤더가있는 것 외에도 h2로 남겨 두는 편이 좋을 것입니다 나는 내 웹 사이트의 단락처럼 정의 할 수있는 일반 텍스트 정보도 정의 할 수 있습니다 기사 나 웹 페이지처럼 많은 글을 쓰고 있다면 단락을 사용하고 싶을 것입니다 그렇습니까? 웹 사이트에 텍스트를 넣고 싶습니다

그래서 저는 단락 태그라고 불리는 것을 만들 수 있고 단락 태그는 바로 될 것입니다 P로 끝나는 태그가 필요합니다 그리고 지금 내가 쓰는 모든 텍스트는 그 자신의 단락 안에 들어가서 이렇게 쓸 수 있습니다 단락과 이제 내 페이지를 새로 고침 할 때 이것이 자신의 단락에서 나타난 것을 볼 수 있습니다 그리고 단락에 대해 멋진 점은 자동으로 형식 자체를 정렬하므로 실제로이 바로 아래 다른 단락을 만들 수 있습니다

그래서 우리는 이것이 다른 것이라고 말할 수 있습니다 단락과이 단락은 자동적으로 그 자체의 공간을 만들어줍니다 이 단락 아래 좋아요 우리는이 단락을 가지고 있습니다

그리고 나서 우리는이 단락을 가지고 있습니다 이 단락 안에 많은 텍스트를 넣고 일반적으로 텍스트 블록처럼 쓸 때마다이 단락을 사용하려고합니다 단락 태그 이제이 단락 안에있는 요소 중 일부 스타일을 지정할 수도 있습니다 여기이 단어를 굵게 표시하기를 원한다고 가정 해 봅시다 글쎄, 나는 또 다른 특별한 HTML 태그를 사용할 수있다

그것은 과감한 태그 다 그리고 이것은이 단어를 활로 만들 것입니다 그래서 나는 사인보다 덜 할 수 있고 대담한 사인은 그냥 B입니다 그리고 나서 끝내고 싶니? 이렇게 열리고 닫힌 굵은 태그의 내부 우리는 웹 사이트에 단락 안에 또는 다른 장소 안에 텍스트를 넣을 수 있습니다 우리는 대담 해지고 싶다 이제이 페이지를 새로 고치면 단락이 굵게 표시됩니다

다른 태그도 사용할 수 있습니다 그래서 대담하게 만들지 않고 이탤릭체로 만들 수 있습니다 그래서 저는 B 대신에 눈을 쓸 수 있습니다 이제 대담한 텍스트 대신이 텍스트를 기울임 꼴로 표시하고 실제로 포함시킬 수 있습니다 이 태그들은 서로 안에 있으므로 굵은 태그와 이탤릭 태그를 사용할 수 있으므로이 굵게 태그를 사용하고 이 다른 끝나는 굵게 태그 및 굵게 태그 안쪽에 가져 가겠습니다

기울임 꼴 태그를 달아서 단락을 넣을거야 이제 우리는 대담한 이탤릭체를 갖게 될 것입니다 그런 단락 그래서 그냥 단어 중 하나를 기울임 꼴로 표시하고 동시에 단어로 작성 그래서 그것은 당신에게 정말 좋은 방법입니다 특정 단어를 기울임 꼴로 표시하거나 특정 단어를 대담하게 표시 할 수 있으며 실제로 이러한 태그를 사용하여 쉽게 쉽게 찾을 수 있습니다

우리가 할 수있는 또 다른 일은 문서의 레이아웃을 제어 할 수 있다는 것입니다 따라서 HTML을 사용하는 것 중 하나는 웹 페이지를 배치한다는 것입니다 매우 구체적인 방법으로 나는 그 일이 어떻게 일어나는지 보여줄 수 있습니다 그래서 HTML이 웹 페이지를 레이아웃 할 때, 기본적으로 우리가 여기서 정의한 레이아웃을 본문 내부에서 취합니다 웹 페이지에 여기에 표시합니다

문서의 요소가있는 순서는 브라우저에 표시 될 순서입니다 그래서이 단락을 잘라내어 머리글 위에 여기 붙여 넣으면 내 문서 레이아웃과 구조에 반영됩니다 이제 단락이 웹 사이트 헤더보다 웹 사이트 헤더 위에 오게 될 것입니다 그러면이 단락들이 그 아래에있게 될 것입니다 그래서 당신이 주문하는 방식입니다

HTML 내부의 태그는 웹 사이트에 표시되는 방식입니다 그리고 다른 것은 HTML이 반드시 신경 쓰지 않는다는 것입니다 이 파일을 포맷하는 방법 그래서 다른 말로하면 HTML은 공백을 신경 쓰지 않습니다 여기에 여분의 라인이 있습니다 당신은 괜찮다고 생각할 것입니다

단락과 제목 사이에 두 줄의 여백이 추가 될 것입니다 바로 여기에이 공간이 모두 있기 때문입니다 그러나 사실은 그렇지 않습니다 페이지를 새로 고칠 때 아무 일도 일어나지 않습니다 HTML은 자체적으로이 태그를 사용하여 스스로를 출력하므로이 태그에 상관하지 않습니다

공백은 파일 안에 있습니다 이 태그 안에 무엇이 있는지 정말 신경 써야합니다 그래서 우리가 공백을 만들고 싶다고 상상해보십시오 이 머리글을 다시 집어 넣을거야 그래서 나는 조금 더 읽기 쉽다

실제로 새 줄을 만들 수 있었으므로이 머리말 뒤에 여기에이 줄을 넣으려고합니다 새 줄을 만들고 싶었습니다 나는 break라고 불리는 또 다른 HTML 태그를 사용할 수 있으며 break 태그는 기본적으로 HTML 문서에 새로운 라인을 생성 할 것이다 그래서 나는 BR의 수업 기호를 할 수 있습니다 그러면 우리는 슬래시를 할 것입니다

우리는 더 큰 표시를 할 것입니다 그리고 제가이 페이지를 새로 고침 할 때 여러분은 보게 될 것입니다 제목과이 첫 단락 사이에 우리는이 공간이 여기에 있음을 볼 수 있으며이 중 많은 부분을 사용할 수 있습니다 멋진 태그는 원하는대로 만들 수 있습니다 둘 중 하나를 만들면 이제는 훨씬 더 아래로 갈 수 있습니다 따라서 이러한 중단 태그는 실제로 문제를 일으킬 수 있습니다

내가 사용할 수있는 또 다른 태그를 가로 룰 탭이라고하며 가로 룰 탭은 기본적으로 웹 사이트 바로 직선으로 콘텐츠를 분리하는 데 도움이 될 것입니다 그래서 나는 그 꼬리표를 만들 수있다 인사라고 말하면 슬래시와 나는 더 큰 표시를 할 것이고, 그래서 당신은이 HR 태그가 그와 비슷하다는 것을 알게 될 것입니다 우리가 전에 사용했던 Br 태그와 이것은 또 다른 특별한 유형의 HTML 태그입니다 그래서 이것은 하나의 태그라고하는 태그입니다

바로이 헤더에서 두 번입니다 하나의 태그가 있습니다 그리고 우리는이 다른 끝 태그를 가지지 만 때로는 태그가 될 것입니다 예를 들어 실제로 두 개의 태그가 필요하지 않은이 가로 규칙 탭과 같은 경우 내부에 들어갈 필요가없는 것처럼 그리고 그것은 단지 하나의 태그와 많은 시간이 될 것입니다 이 단일 태그를 사용하면 이러한 방식으로 형식을 지정하게됩니다

그래서 당신은 이름을 쓸 것이고 우리는이 끝 기호를 사용할 것입니다 실제로 어떤 경우에는이 슬래시를 제거 할 수 있지만 기술적으로 올바르므로 계속 사용합니다 HTML을 사용하면 휴식 시간 대신 여기를 볼 수 있습니다 우리는 수평선을 가질 것입니다 그리고이 수평선은 기본적으로 우리가 우리를 갈라 놓을 수있는 것입니다

콘텐츠를 넣을 수있는 권리는 여기에 다른 콘텐츠처럼 넣을 수도 있고 스타일에 맞게 지정할 수도 있습니다 거기에 이중 줄이 있어도 가로 룰은 페이지 전체에서 계속됩니다 또한 텍스트의 크기를 제어하는 ​​데 사용할 수있는 몇 가지 다른 태그가 있습니다 여기이 단락 아래에 이 단어 중 하나를 더 크게 만들고 싶다고합시다 예를 들어,이 부분을 더 크게 만들고 싶다고 가정 해 봅시다

크고 작은 두 개의 태그를 사용할 수 있습니다 텍스트가 조금 더 크거나 작습니다 그래서 나는 큰 태그를 여기에서 할 수 있고 나는 끝 태그를 할거야 따라서이 태그는 다른 모든 태그와 마찬가지로 작동합니다이 큰 태그 내부에 들어가는 것이 실제로 더 커질 수 있습니다

이제 이걸 여기에서 보시오 내 페이지를 새로 고침 할 때 실제로 약간 더 커질 것입니다 그리고 당신은 그것을 볼 수 있습니다 그리고 저는 똑같이 할 수 있습니다 이것과 관련된 것은 여기에 태그입니다

이 사실을 실제로 보여주기 위해 더 크게 만들자 이 페이지를 새로 고침하면 이 태그도 커질거야 그래서 그것은 그렇게 커지지 않습니다 그러나 이것을 여러분에게 사용할 수 있습니다 텍스트가 어떻게 보이는지 제어하십시오

어쩌면 당신은 약간의 텍스트가 조금 더 크거나 작게되기를 원할 것입니다 나는 똑같은 일을 할 수있다 하지만 작은 태그를 사용하여 여기 내 말에 이 작은 태그를 붙이 겠어 그래서 우리는 작고 다시 말할 것이고, 끝낼 것입니다 과 이제 내 오른쪽을 지켜봐

이것은 더 작아 질 것입니다 그래서 당신은 그것이 조금 줄어든 것을 볼 수 있습니다 큰 태그와 작은 태그를 사용하면 웹 사이트의 텍스트 크기를 제어하는 ​​데 도움이됩니다 subscript와 superscripts라고하는 다른 태그들 그래서 이것은 첨자 나 위첨자와 같은 형식을 취하는 데 사용할 수 있습니다 특히 수학과 같은 것을한다면 이런 식으로 뭔가를 쓰고 싶을거야

그래서 나는이 단락으로 가서 아래 첨자와 위 첨자를 만들겠습니다 그래서 저는 타입을 좋아하고 싶다고 상상해 봅니다 우리가 말할 수있는 물에 대한 화학 공식 h2o 그러나 이것 역시 실제로 실제로는 아래 첨자가되어야합니다 그것은이 작은 태그를 사용할 수 있도록 H보다 아래로 너무 작게 너무 작아야합니다 나는 이것을 서브 태그로 둘러 쌀 수있다

이제 조금 더 작아 질 것입니다 그래서 우리는 여기에 h2o가 있음을 알게 될 것입니다 따라서 형식이 올바르게 지정되었습니다 나는 또한 위첨자로 같은 것을 할 수있다 또 다른 좋은 예는 수학과 같아서 아마 10을 쓰고 싶을 것입니다

10 ^ 2와 같은 제곱 (squared) -이 위 첨자를 사용할 수 있습니다 태그를 붙이면 위 첨자가됩니다 이제 우리는 10 제곱이됩니다 그래서 이들은 모두 당신이 기본적으로 사용할 수있는 작은 HTML 태그와 같습니다 귀하의 웹 사이트에 텍스트 서식을 지정하십시오

그리고 HTML이 처음 작성되었을 때 귀하는 웹 사이트가 단지 모든 텍스트 였음을 이해해야합니다 그래서 요즘 우리는 웹 페이지에 이미지와 비디오 및이 모든 다른 것들을 가지고 있습니다 일반적으로 HTML은 텍스트를 쓰는 데 사용되었으며 일부 이미지와 다른 것들이있었습니다 하지만 막 다루는 HTML 태그가 많이 있습니다 서식 지정하기 그래서 이것들은 모두 편리하게 올 수있는 태그 단락의 텍스트 서식을 지정하거나 단락의 텍스트를 서식 지정하는 데 사용할 수 있습니다

다른 요소 내부의 태그 그래서 나는 단락처럼이 태그를 사용할 수 있음을 알 수 있다고 생각하지 않으려면이 태그를 사용할 수 있습니다 귀하의 웹 사이트에 텍스트가있는 곳이라면 어디에서나 헤더에서이를 사용할 수 있습니다 그렇지 않으면 다른 곳에서 사용할 수 있습니다 원하는 기본 HTML 태그가 있으므로 분명히 우리가 배울 수있는 태그가 많이 있으며 더 많은 태그를 사용할 수 있습니다 하지만 당신이하고 싶은 것은 실제로 기본에 대한 핸들을 얻는 것입니다

그래서 이것은 헤더와 같은 HTML의 기본 요소와 같습니다 수평 규칙은 단락을 나눕니다 기본 사항 처리하기 그리고 이러한 것들을 사용하여 다른 웹 사이트를 개척하고 더 복잡한 것으로 나아갈 때처럼 연습하십시오 기본 사항을 알고 있기 때문에 HTML을 사용하는 것이 좋습니다 이 튜토리얼에서는 HTML로 주석에 관해 이야기하고 싶습니다

이제 주석은 기본적으로 HTML 내부에 작성할 수있는 작은 텍스트 조각입니다 브라우저에서 무시할 수 있으며 일반적으로 주석의 목적은 읽거나 다른 사람이 읽는 것입니다 개발자가 읽을 수 있도록 HTML 코드 내부에 HTML 주석을 쓸 수 있으며 웹 브라우저에서 완전히 무시됩니다 하지만 예를 들어 나중에 코드로 돌아 가면 자신에게 약간의 알림을 남기거나 약간의 코드 블록이 무엇을하는지 설명 할 수 있습니다 다른 개발자에게 파일을 제공하면 주석을 사용하여 작은 노트를 제공 할 수 있습니다 HTML 내부에서 주석을 사용하는 방법을 보여줄 것입니다

그런 다음 주석 우수 사례에 대해서도 이야기 할 것입니다 그래서 당신이 어떻게 코멘트를 HTML에서 가장 좋은 방법으로 사용하는지는 코멘트를 만들 수있는 방법입니다 매우 구체적인 구문을 사용하므로 적은 수의 기호를 사용하여 주석을 만들 수 있습니다 느낌표와 두 개의 하이픈 그래서 지금 내 텍스트 편집기에서 볼 수 있습니다 내가 주석을 실제로 바꾼 것처럼 여기에 두 번째로 넣을 때 이제 우리는 의견을 듣고 있으므로 입력 한 텍스트는 회색으로 표시됩니다

그래서이 텍스트는 여기의 텍스트와 다르게 보입니다 기본적으로 그것은 단지 괜찮은 것입니다 이제 HTML 주석이 있습니다 내가 지적하고자하는 것 중 하나는이 주석을 아래의 모든 코드에서 만들었습니다 이 작은 논평으로도 바뀌었다

이제 내가하고있는 일은 주석을위한 시작 태그를 만드는 것입니다 따라서 주석은 이러한 여는 태그와 닫는 태그 안에 들어가야하며이 주석 태그를 닫을 수 있습니다 하이픈, 그리고 더 큰 표시 이제 이러한 태그 내부의 내용은 주석이 될 것이며 여러 줄에 걸쳐 주석을 실행할 수 있습니다 그래서 나는 주석을 만들 수있다 당신은 우리 텍스트의 몇 개의 다른 라인에 걸쳐 그것을 안다

그리고 나는 코멘트가 근본적으로 단지있다라고 말했다 브라우저에서 렌더링하지 않을 특수 텍스트 일반적으로 브라우저는 브라우저를 보지 않을뿐만 아닙니다 그들은 단지 일종의 그들을 무시하고 여기에서, 당신은 단지 작은 것을 넣을 수 있습니다 나는 이것에 관해 작업 할 필요가 있거나, 말할 수있는 것처럼 말할 수있었습니다 너는 이것을 표시하지 않는다는 것을 안다, 너는 정말로, 나는 너가 말하고 싶은 어떤 덧글이라도 중요하지는 않지만 댓글은 유용 할 수 있으며 댓글을 사용하는 방법을 알고 싶어합니다

주석을 사용하여 주석 처리 할 수도 있습니다 특정 코드 조각 예를 들어 내가 이것을 원하지 않는다고 가정 해 봅시다 이 수평 규칙에서 H2가 나타납니다 그래서 그것은이 웹 사이트의 머리글과 같습니다 이것을 받아 들여 코멘트로 둘러 쌀 수 있습니다

기본적으로 내 웹 사이트에는 표시되지 않으며 브라우저가 무시하기 때문에 볼 수 있습니다 그래서 HTML을 쓰는 사람들은 주석을 쓰는 것 외에도 작은 노트를 쓰는 것을 좋아합니다 그들은 또한 코드의 작은 부분을 주석으로 처리하는 주석을 사용합니다 그래서 그것은 유용합니다 맞습니까? 이 코드는 이제 브라우저에서 렌더링되지 않으므로 그래서 만약 내가 다른 코드를 시험해보고 싶다면, 다른 것을 시도하십시오

이 코드를 주석으로 처리 할 수 ​​있으며 여전히 HTML 파일 내부에있을 것입니다 하지만 브라우저에서 사용하지 않을거야 많은 사람들이 할 또 다른 일은 그들이 왜 그런 말을하는지에 대한 이유를 넣을 것입니다 그래서 여러분은 단지 이 일을 다시하거나 너는 그런 뜻인지 알거야 여기에있는 내용을 다시 작성하면 주석 내에 백업을 원할뿐입니다

이것이 주석의 기본 사항입니다 그들은 정말 간단하지만 지금도 정말 강력합니다 한마디로 나는 경고의 종류를 추측한다 이것은 내 개인 의견과 같이 이야기하는 것과 같다 나는 당신이 코멘트를 사용할 때, 당신은 그들을 간절히 사용할 필요가 있다고 생각한다

나는 어떤 사람들은이 모든 것을 쓰는 나쁜 습관을 가지고 있다고 생각한다 정말로 긴 코멘트는 일을 설명하고 일을하고, 당신은 개인적으로 알고 있습니다 나는 코멘트의 목적이 코드로 설명 할 수없는 것을 설명하는 것이라고 생각한다 그래서 때때로 사람들은 지저분한 코드를 작성합니다 그래서 그들은 지저분한 잔소리를 쓸거야

HTML을 누른 다음 그것은 단지 이런 식으로 오, 이것은 헤더입니다처럼되고있는 위에 코멘트를 쓸거야 한편, 코드는 마치 완벽한 재앙을 알고 있습니다 정말 지저분 해 나는 HTML이 스스로를 말하게하는 것을 크게 믿는다 그리고 나는 그것을 채택하기위한 괜찮은 철학이라고 생각한다 HTML이 그 자체로 말할 때 당신은 깨끗하고 읽기 쉬운 글을 써야합니다

HTML과 그런 식으로 누군가가 당신의 HTML 문서를보기 위해 간다 모든 것이 명확하기 때문에 설명을위한 설명 있잖아? 당신은 지저분한 코드를 쓴 사람이되고 싶어하는 것을 원하지 않는다 누구 한테 도움이되지 않기 때문에 권리 확실한 이 코드 라인이 무엇을하고 있는지를 알려주는 설명이 있지만 거기에 들어가거나 수정해야하는 경우에는 도움이되지 않습니다 댓글을 사용하기 전에 당신이하고있는 일을 설명하려고합니다

귀하의 HTML 주석을 사용하여 HTML로 설명 할 수없는 것들에 사용되며 그들은 내가 말한 것처럼 사용할 수 있습니다 코드 줄을 주석 처리하고 잠시두기 만하면 브라우저에서 숨길 수 있습니다 정말? 이것은 모든 종류의 제 견해와 저에게 종류에 대한 의견을 말하고 있지만 주석을 사용합니다 생산성을 높이려면 HTML 파일에 추가해야합니다 이 튜토리얼에서는 스타일 및 색상에 대해 이야기하고 싶습니다 HTML로 할 수있는 멋진 것들 중 하나는 실제로 개별 요소의 스타일을 지정할 수 있고 스타일을 지정할 때입니다

HTML 요소를 사용하면 스타일 속성이라는 것을 사용할 수 있으며 실제로 각 HTML 요소에 특정 스타일 정보 제공 이제 HTML 스타일링에 대해 이야기 할 때 당신이 얻을 수있는 CSS라는 제목의 또 하나의 주제가 있습니다 스타일 시트 그래서이 수업에서 스타일에 기본 CSS를 사용할 수있는 방법을 소개하고자합니다 이제 이러한 HTML 요소 중 일부 이것은 CSS에 대한 전체 과정을 의미하지 않습니다 실제로이 초안 아카데미 과정은 실제로 HTML 용으로 만 사용됩니다

우리는 CSS에 관해서 만 이야기하는 과정이 있지만 지금은 알고 있습니다 나는 당신을 주제로 소개하고 싶다 일부 HTML 스타일 지정하기 여기에서 볼 수 있습니다 나는이 헤더를 여기에 가지고있다 그리고 나서이 파일을 여기에두고 실제로이 두 가지 색 속성을 부여 할 수 있습니다

나는 텍스트에 색을 칠할 수 있으며 실제로 배경색도 지정할 수 있습니다 이 강의에서는 HTML의 요소에 기본 색상을 추가하는 방법을 보여 드리겠습니다 그러나 다시 한번, 이것이 CSS에 관한 완전한 과정과 같은 것을 의미하지 않는다는 것을 명심하십시오 이것은 스타일링에 대한 모든 과정을 의미하지 않습니다 너에게 소개 할거야

그래서이 단락에서 나는이 절을 속성으로 전달할 수 있습니다 따라서 태그를 정의하는 것 외에도 HTML에서 특정 정보를 HTML 태그에 지정할 수도 있습니다 이것들은 속성 또는 속성과 같이 호출되거나 일부 사람들은 매개 변수라고 부릅니다 나는 이걸 무언가에게 줄거야 스타일은 스타일을 입력하기 때문에 동등하고 지금은이 따옴표 안에 있습니다 이 요소에주고 싶은 몇 가지 다른 스타일 속성을 입력 할 수 있습니다

그 중 하나가 색상이고이 단락의 텍스트 색상을 조정할 것입니다 나는 콜론을 할 수 있고 이제는 기본적으로 원하는 색상을 입력 할 수 있습니다 파란색을 사용하자 그것은 내가 좋아하는 색 중 하나이기 때문이다 이제이 페이지를 새로 고침하면 여기의이 단락이 파란색으로 바뀌 었음을 알 수 있습니다

그래서 단지 지루한 검은 색 대신 푸른 색으로 바꿀 수 있습니다 과 이제는 빨간색 일 것이므로 다른 색상을 사용할 수 있으며 텍스트의 색상을 변경할 수 있습니다 배경색이라고하는 것을 변경할 수도 있습니다 그래서 색상을 빨간색으로 변경하는 것 외에도 배경색을 어쩌면 파란색으로 이제 타이핑 할 수 있습니다 배경 – 색상과 나는 다른 색상으로 전달할 수 있습니다

그럼이게 파란색으로 만들어 보자 이제는이 단락의 텍스트가 빨간색으로 표시되고 배경색은 파란색으로 표시됩니다 그 것처럼 따라서 이러한 다양한 색상 조합을 사용하여 텍스트의 배경을 제어하고 텍스트의 색상 및 이러한 속성 및 기타 요소를 사용할 수도 있습니다 예를 들어,이 머리글 안에서이 똑같은 것을 사용할 수 있습니다

나는 말할 수 있었다 스타일, 나는 이것이 우리가 지나가고있는 속성 일 뿐이라는 것을 기억합니다 저는 색깔을 말할 수 있습니다 이제 우리는 이것을 초록색으로 만들 것입니다 그래서 나는이 물건을 초록색으로 만들 수있다

그리고 나는 또한이 컨테이너 꼬리표에이 스타일을 사용할 수있다 그래서 여기 우리는이 body 태그를 가지고있다 이 스타일을 줄 수도있어 스타일을 말할 수 있으며 배경색을 지정하지 않는 이유는 무엇입니까? 그래서이 배경 색상을 하늘색, 배경을 말할 것입니다 색깔 연한 파란색과 이제 보게 될 것은 전신입니다

그래서 우리 HTML의 전체 본문 그래서이 모든 것들이 파랗게 바뀔 것입니다 그리고 그것은 정확히 무슨 일이 일어나므로 이것을 사용할 수 있습니다 웹 사이트의 배경을 제어하는이 body 태그 내부의 배경색 그리고 우리가 시체의 배경을 만들었지 만 눈에 what 것입니다 하늘색 이 단락의 배경을 파란색으로 만들었 기 때문에 우리가 몸에서 가져온 스타일을 무시하고있어 그래서이 스타일 속성을 사용하여 HTML 요소의 기본 스타일과 요소 스타일 지정에 대해 자세히 알고 싶다면 JAF 아카데미에는 CSS에 관해 이야기하는 전체 과정이 있습니다

여기서 우리는 HTML을 스타일링하는 모든 것들에 들어가게됩니다 그러나 지금 당장은 HTML을 배우려고 노력 중이며 HTML을 먼저 배우는 것이 좋습니다 이 기본 색상 스타일을 사용하여 웹 사이트의 모양을 바꿀 수 있다는 것을 알고 있습니다 이제 내가 사용할 수있는 모든 색상을 찾으러 갈 수있는 웹 사이트를 보여 드리고자합니다 그래서 이것은 w3 학교라고하는 웹 사이트이고 당신은 w3 학교 색상 목록과 같은 Google 검색을 할 수 있습니다

이 모든 CSS 색상 목록을 제공합니다 다시 한번 말하지만, CSS에 대해 너무 걱정하지 마십시오 그 스타일 태그의 내부에서 사용할 수 있다는 것을 알아 두십시오 그래서 이것은 색상의 이름과 같은 완전한 목록 일 뿐이며 이름을 전달하고 싶지 않으면 그래서 그 스타일 태그 중 하나 안에 아쿠아처럼 말할 수있는 것처럼 배경 아쿠아 텍스트를 색칠합니다 이 16 진수 태그를 거기에 넣을 수도 있습니다

그럼이 녀석을 복사해서 색 이름 대신 넣고 그대로 쓸 수있어 그게 바로 몇 가지 기본 사항입니다 HTML에서 색상 및 스타일 사용하기 HTML을 배우려고하는 경우 너무 걱정하지 마십시오 스타일을 지정하는 것 뿐이지 만 요소 스타일링의 기본 사항을 보여 주기만하면됩니다

젖은 치아와 함께 일하기 시작하다 HTML 내부 스타일링 이 튜토리얼에서는 레이아웃을 위해 다양한 HTML 태그를 사용하는 방법에 대해 이야기하고자합니다 웹 사이트의 구조 이제 우리는 body와이 HTML 태그와 같은 기본적인 HTML 태그를 살펴 보았습니다 머리글과 단락과 같은 것들도 아주 기본적인 HTML로 보았습니다 이 자습서의 태그

우리 페이지에서 컨텐트를 형식화하는 데 사용할 수있는 태그에 관해 이야기하고 싶습니다 그래서이 꼬리표는 우리 웹 사이트에 다른 내용을 다른 단면도로 레이아웃하는 데 도움이 될 것입니다 정말로 HTML을 쓰고있을 때 당신이 그 권리를 사용하고 있는지 확인하고 싶습니까? 태그를 레이아웃하여 가장 일반적인 실수 중 하나 인 페이지를 새로 작성하십시오 HTML을 만드는 개발자는 올바른 태그를 사용하지 않고 자신이 가지고있는 HTML 태그를 모두 사용하지 않는다는 것입니다 자신의 페이지를 레이아웃 할 수 있음 많은 사람들은 올바른 태그를 사용하지 않을 것입니다 또는 특정 HTML 태그에 대해 알지 못해서 페이지를 레이아웃하지 않을 수도 있습니다

아니면 그냥 시간을내어 사용하는 느낌이 들지 않습니다 그러나이 튜토리얼에서는 웹 페이지 레이아웃에 사용해야하는 모든 태그를 보여 드리고자합니다 그래서 내가 보여주고 싶은 첫 번째 것은 몸 안의 코드 몇 개를 레이아웃하는 것입니다 이제 대부분의 웹 페이지에는 뚜렷한 부분 일반적으로 머리글이 있고 머리글은 맨 위처럼 보이며 일반적으로 머리글은 모든 페이지에있는 요소입니다 귀하의 웹 사이트는 탐색 메뉴와 같을 수 있습니다

어쩌면 브랜딩 정보가있을 수 있습니다 따라서 웹 사이트의 이름과 로고가 같을 수 있으며 웹 사이트의 다른 부분을 좋아할 링크가 있습니다 나는 당신이 웹 사이트의 헤더가 어떻게 보이는지 알기 전에 웹 사이트를 본 적이 있다는 것을 의미합니다 다음 섹션은 주요 섹션입니다 이것은 마치 웹 사이트의 고기와 뼈와 같습니다

이것은 모든 내용이 갈 곳입니다 어쩌면 당신은 당신이 기사의 다른 단면을 몇몇 심상 있을지도 모른 기사 같이 가지고있을 것입니다 도대체 무엇이 그것은 메인과 같습니다 섹션의 세 번째 섹션은 바닥 글이며, 대부분의 웹 사이트는 내려가는 길 다시 몇 가지 추가 탐색 링크가 있습니다 어쩌면 일부 브랜딩 정보 일부 소셜 미디어 페이지를 좋아하는 링크 일 수 있지만 대부분의 웹 사이트는 기본 3 가지를 구현할 예정입니다

섹션 구조 머리글 기본 및 바닥 글 및 HTML에 우리가 사용할 수있는 태그가 있습니다 그 모든 섹션을 내 몸 안에 여기에 이렇게 정의하십시오 머리글을 정의하여 시작하겠다 헤더 태그는 다음과 같이 두 가지로 만들 것입니다 이제 우리 웹 사이트의 헤더에 넣으려는 코드는 여기에 올라갈 것입니다

이제 여기, 나는 갈기를 만들어서 다른 태그들을 갈기 갈기 찢어 놓을거야 그리고 당신이하고 싶은 것은 웹 사이트의 모든 주요 내용을 여기에 넣는 것입니다 마지막으로 꼬리표 인 마지막 태그를 사용할 수 있습니다 그래서 바닥 글과 다시 이 바닥 글을 닫아 기본 3 개의 태그 레이아웃을 갖도록하겠습니다 헤더가 있습니다

우리는 주를 가지고 있으며 우리는 바닥 글을 가지고 있으며 이들은 모두 형제 요소입니다 그래서 그들은 모두 모두 같은 부모 요소를가집니다 HTML을 사용할 때마다이 body 태그와 좋은 연습은이 특정 영역에 대한 코드를 분리하는 것입니다 그래서 당신은 당신의 웹 사이트 헤더에 대한 모든 코드를 넣고 싶습니까? 꼬리말 내부의 꼬리말에있는 메인 태그 안의 메인에 대한 헤더 태그 내부 우리가 정의 할 수있는 다른 태그 안에도 정의 할 수 있습니다 어떤 것들은 내 머리글 태그의 내부를 상상해보십시오 나는 탐색 메뉴는 웹 사이트의 헤더에 여러 번 표시 될 수 있습니다

네비게이션 링크는 홈 페이지와 같습니다 그런 다음 About page Contact Us 페이지를 작성하십시오 nav 태그라고하는 무언가의 내부에있는 탐색 요소이며이 nav 태그는 탐색 요소를 저장하는 데 사용됩니다 그래서 당신이 좋아했다면, 당신은 당신의 웹 사이트 내의 다른 링크 목록을 알고 있습니다 그럼 너는 그들을이 nav 태그 안에 넣을 수있어 분명히이 비디오의 요점은 네비게이션 태그 나 네비게이션 목록을 만드는 법을 보여주기위한 것이 아닙니다

구조에 사용할 필요가있는 것을 보여주고 싶습니다 그래서 나는이 정보를 구조화하는 방법을 보여줄 것입니다 그래서 어쩌면 탐색 목록이나 탐색 링크와 같은 탐색 항목이 내부로 들어갈 것입니다 태그가 있으면 HTML 내부에 특수 태그가 있습니다 이 메인 내부에서 사용할 수있는 다른 태그가 있습니다

그래서 내가 블로그 웹 사이트와 블로그 웹 사이트를 가지고 있었다고 상상해보십시오 나는 많은 블로그 게시물을 가지고 있었다 음, 내가 할 수있는 한 가지는 기사 태그라고하는 것을 사용하는 것입니다 그래서 기사 태그를 만든 다음 그 기사 태그 안에 넣을 수 있습니다 기사라는 태그를 만들 수 있도록 블로그 게시물을 쓸 수있었습니다

여기 아래로 우리는 이걸 닫을거야 그래서이 기사 태그 안에는 기사의 모든 텍스트를 넣을 수 있고 그러면 브라우저는 알 수 있습니다 좋아요 여기 안에 기사가있을거야

섹션이라고하는 다른 태그를 사용할 수도 있습니다 그래서 일반적으로 블로그를 쓰고 있다면 귀하의 웹 사이트에 다른 섹션이 있으므로이 섹션 태그를 사용하여 기사 또는 실제로 귀하의 웹 사이트의 모든 부분을 분할 할 수 있습니다 다른 섹션으로 따라서 섹션 태그는 article 태그와 함께 사용할 필요가 없습니다 그러나 그들은 단지 실제로 잘 어울립니다 그리고 그것은 의도적으로 섹션과 섹션을 말할 수 있습니다 이 코드를 닫으면 블로그 게시물의 첫 번째 섹션과 같은 코드가 여기에 포함될 수 있습니다

아마 다른 섹션이있을거야 다시 말하자면,이 섹션 컨테이너를 원하는만큼 만들 수 있도록이 섹션을 닫을 수 있습니다 웹 사이트의이 섹션에 대한 모든 콘텐츠를 넣을 수 있습니다 그리고 보통 다른 섹션이있을 때마다 섹션 헤더를 포함 시켜서 정리할 수 있습니다 h1 또는 h2 또는 h3과 마찬가지로 지금 갖고 싶어하는 헤더 또한 HTML 내부에서 헤더를 사용하는 것에 대해 이야기하고 싶습니다

문서 및 이것은 필요한 일이 아니지만 일반적으로 HTML 페이지 또는 HTML 기사를 배치하는 경우 헤더를 어떻게 사용하고 있는지 조심하고 싶습니까? 그래서 일반적으로 하나의 헤더와 하나의 헤더가 메인 페이지와 같을 웹 페이지에 있습니다 웹 사이트의 제목과 그 머리글 아래에 웹 사이트의 다른 섹션을 정의하는 머리글이 있습니다 그래서 너는 이것을 가질지도 모른다 맨 위 머리말 하나 다음에 머리말 두 개가 있고 다른 머리말이 2 개 있고 여기에 다른 머리글이 필요한 경우 그 중 한 섹션은 헤더 세 개를 사용합니다 따라서 사람들은 계층 구조와 같은 방식으로 헤더를 사용할 것을 권장합니다

그래서 헤더 1과 헤더 2를 갖고 싶습니까? 헤더 2 및 그런 다음 여기에 다른 헤더 3이 들어 있습니다 따라서 이런 종류의 계층 구조로 웹 사이트의 헤더를 정의하고 싶을 것입니다 그렇게하지 않으면 웹 사이트의 실적을 변경하지 않는 것처럼 필수 사항은 아닙니다 하지만 그게 최고야 웹 사이트를 디자인 할 때 많은 개발자가 사용하게 될 많은 사람들을 연습하십시오

그리고 우리는 웹 사이트의 구조처럼 레이아웃하는 것에 대해 이야기하고 있기 때문에 내 생각에 그 태그를 사용하면 레이아웃을 도울 때 사용할 수있는 또 다른 태그가 마음에 들었습니다 Google의 웹 사이트는 사이드 태그에서 호출 된 다음 사이드 태그는 기본적으로 모든 콘텐츠에 사용할 수있는 태그입니다 그게 직접은 아니야 페이지의 주요 내용을 좋아하는 것과 관련 있습니다 사이드 태그에서 사용하려는 시나리오의 좋은 예는 광고와 같을 수 있습니다

그래서 많은 웹 사이트는 당신이 구글 애드 센스를 사용하고 있거나 당신이 알고있는 것처럼 광고를 가질 것입니다 귀하의 웹 사이트에 광고가있는 것이면 무엇이든 사용할 수 있으며 사이드 태그를 사용하여 그 태그와 제쳐 태그를 정의 할 수 있습니다 기본적으로이 콘텐츠가 페이지에 있으며 사용자에게 표시되는 것입니다 하지만 웹 사이트의 핵심 콘텐츠와 직접 관련이있는 것은 아닙니다 그래서 그들은 단지 당신이 당신의 웹 사이트 레이아웃을 돕기 위해 사용할 수있는 다른 태그들입니다 웹 사이트의 기본 구조를 만들 때 태그를 사용하는 것이 좋습니다

많은 사람들이하는 일 중 하나는 마치 일종의 사용과 같을 것입니다 웹 사이트 레이아웃을위한 일반 컨테이너 태그 그래서 그들은 HTML이 자신의 웹 사이트를 레이아웃하기 위해 정의한 특정 HTML 태그와 당신이 알고있는이 태그들을 사용해서 이렇게 지정하는 것은 내 웹 사이트의 섹션이며 내 웹 사이트의 다른 섹션입니다 왜 모든 섹션을 정직하게 정의해야합니까? 태그 사용하기 이렇게하면 반드시 웹 사이트의 모양과 느낌을 바꿀 필요는 없습니다 헤더를 사용하지 않고 웹 사이트의 기본 머리글과 바닥 글을 만들 수 있습니다 또는 꼬리말 꼬리표, 그 꼬리표의 목적은 조직을 위해 행동 할 것이다 것입니다 따라서 HTML 파일을 작성하는 경우 목표 중 하나는 가능한 한 파일을 읽을 수 있도록 만드는 것입니다 그래서 당신이 읽을 수 있기를 원하는 파일을 쓸 때 나중에 또는 다른 개발자와 이들을 사용할 때 HTML 태그에 이러한 구조 태그 무슨 일이 일어나고 있는지 쉽게 알려줍니다

맞아요 그래서 당신의 HTML을 볼 수 있습니다 나는 괜찮은 것처럼 말할 수 있습니다 여기에 헤더가 있습니다 오, 여기에 주요 그래서 이것은 핵심 내용이 모두있는 곳입니다

괜찮아 여기 기사가 있는데 두 번째 섹션으로 이동해야합니다 여기 두 번째 섹션이 있습니다 단지 더 쉽게 파일을 읽으면 조직이 조직화되고 다시 태그가 만들어집니다 이 구조 태그는 반드시 웹 사이트의 모양이나 느낌을 변경하지는 않지만 매우 유용한 또 다른 이유입니다 그들은 유용한 검색 엔진 최적화 및 검색 엔진 최적화를위한 것입니다 기본적으로 귀하의 웹 사이트를 보는 방법은 검색 엔진

그래서 많은 것들이 실제로는 그보다 더 많습니다 그러나 당신의 위치에는 좋은 검색 엔진 최적화가있는 경우에 같이 기본적인 생각 같이 종류의 그것 같이이다 그렇다면 Google과 같은 검색 엔진은 정말 쉽습니다 귀하의 사이트를 통해 읽을 수 있고 그것이 무엇에 관한 것인지 그리고 이러한 매우 구체적인 것을 사용할 때를 파악할 수 있습니다 HTML 태그 그것은 Google 같이 당신의 웹 사이트로 들어가고 당신의 웹 사이트의 구조를 파악하고 숫자를 그린 것을 매우 쉽게한다 이 HTML 태그를 사용할 때 웹 사이트의 모든 콘텐츠가있는 곳 Google과 같은 무언가가 파일에 쉽게 들어가서 기사가 어디에 있는지 파악하고 다른 기사를 찾아 낼 수 있습니다 당신의 웹 사이트의 단면도는 귀하의 웹 사이트가 어떻게 배치되어 있는지 그리고 그 정보를 귀하의 웹 사이트를보다 잘 보여줄 수있는 방법 많은 사람들이 HTML 태그의 능력을 과소 평가합니다

그래서이 비디오가이 태그들로 하여금 당신을 가질 수있는 힘을 지켜보고있는 당신들에게 그런 종류의 것을 주입시키고 싶습니다 확실히 이런 것들을 웹 사이트 레이아웃에 사용하고 싶습니다 그들이 중요하기 때문에 중요하지 않다는 말을하는 사람들의 말을 듣지 마십시오 그것이 HTML html에 포함 된 이유입니다 말도 안되는 언어입니다

거기에 털이 많지 않습니다 그래서 HTML이 무언가를 정의 할 때, 당신은 그것이 중요하다는 것을 알고 있습니다 어쨌든 나는 항상 당신의 파일을 배치하는 것이 좋습니다 너 같은 이런거야 당신이 원하지 않는다면이 다른 태그들은 조금 시간이 걸릴 것이라고 생각합니다 하지만 검색 엔진과 같이 파일의 가독성과 가능성을 높일 수 있습니다

이 튜토리얼에서는 링크를 사용하는 방법에 대해 이야기하고 싶습니다 HTML 링크는 가장 인기있는 HTML 요소 중 하나이며 귀하의 웹 사이트를 인터넷의 다른 웹 사이트에 연결하여 내 사용자가 googlecom을 좋아할 수있는 링크를 만들거나 Facebookcom 또는 내 웹 사이트의 다른 페이지에 연결할 수 있습니다 따라서 탐색 목록처럼 구축하고 싶다면 나는 사용자가 클릭 할 수있는 나의 웹 사이트의 다른 페이지에 대한 링크를 가질 수 있습니다

그런 다음 당신은 또한 그 페이지로 이동할 수 있습니다 이미지 또는 PDF와 같은 파일에 연결하고 해당 링크를 만들면 사용자가 해당 이미지 또는 PDF를 볼 수 있습니다 그래서 링크를 만드는 법을 보여 드리겠습니다 우리는 a라는 특수 HTML 태그를 사용해야합니다 이 태그에 정보를 전달해야하는 경우 우리는 H ref라는 이름을 부여해야하며 href는 기본적으로 우리가 연결하고자하는 곳입니다

그래서 링크를 만드는 가장 쉬운 방법은 외부 링크처럼 생성하는 것입니다 웹 사이트에없는 페이지로 연결 상상해보십시오 googlecom과 같은 링크를 만들고 싶었습니다

이 href 안에 googlecom에 주소를 입력하면됩니다 HTTP 콜론 슬래시는 슬래시를 슬래시 당신은 당신이 이것을 포함해야합니다 HTTP 또는 HTTPS는 사용자가 좋아하는 링크를 포함시키지 않을 때 많이 포함됩니다 ww-whatever 그러나 href를 작성하고 링크를 만들 때 이동하려는 위치에 대해 매우 구체적이어야합니다 그래서이 부분을 포함해야 할 것입니다

Wwm 그래서 우리가 효과적으로 해낸 것은이 링크 속성에이 주소에 링크하기를 원한다는 것입니다 어느 것이 Google이고 지금은 이것을 닫을 것이고 나는 실제로 이 전체 태그를 닫아서이 닫는 태그를 만들 수 있습니다 이제 여기에 태그를 넣을 수 있습니다 예를 들어 말할 수 있도록이 링크의 텍스트 Google의 홈페이지가되었습니다 또한이 링크 태그 내부에 텍스트 이외의 것을 넣을 수 있으므로 실제로 넣을 수있는 텍스트를 넣을 필요가 없습니다

HTML 요소가 있으므로 여기에 머리글처럼 넣을 수 있습니다 예를 들어 그래서 우리가 그렇게하지 않으면 머리말을 붙일 수 있습니다 이제 내 페이지를 새로 고침하면 여기에이 오래된 링크가 있음을 알 수 있습니다 이 큰 머리글 하나입니다 우리가 그것을 클릭하면 우리를 google

com을 클릭하면이 링크를 클릭하면 Google로 이동 한 것을 확인할 수 있습니다 구글의 홈페이지 맞지? 그래서 우리는 Google에 여기 있습니다 그래서 당신이 링크를 만들 수있는 방법입니다 기본적으로 여기에 올 웹 사이트로 이동할 수 있습니다 URL 표시 줄 복사 HTTP 또는 HTTPS 부분을 포함하여이 부분을 링크의 href로 가져 오면 거기에 연결할 수 있습니다

우리가 할 수있는 또 하나의 것이 있습니다 내가 알아야 할 한 가지는 웹 사이트에서 멀리 이동하는이 링크를 클릭 할 때입니다 그래서 나는 이것을 클릭하고 어떤 경우 Google에서 갑자기 Google을 사용하고 있습니다 특정 상황에서 링크를 클릭하면 사용자가 웹 사이트를 탐색하지 못하도록 할 수 있습니다 예를 들어 새 탭에서이 탭을 열어 놓고 원하는대로 할 수 있습니다

이 우리가 말할 수 있도록 다른 속성에 태그를 달아 라 우리는 표적이이 따옴표와 동등하고 이제는 안에 있다고 말하고 싶습니다 우리는 링크의 밑줄을 말하고 싶습니다 승인 따라서이 밑줄 공백 값을이 대상 속성에 전달할 때 기본적으로 브라우저에 새 탭에서이 링크를 열도록 지시합니다 이제 Google을 열면 새로운 탭으로 열리 며 여전히 웹 사이트를 열어 놓았습니다

따라서 이것이 더 좋게 만들 수있는 한 가지 방법입니다 그리고이 링크 안에는 내가 원하는 HTML 요소를 넣을 수 있으므로 h1처럼 넣을 수 있습니다 어쩌면 우리는이 홈페이지를 과감하게 만들고 싶었을 것입니다 여기서 대담한 태그를 넣을 수 있습니다 당신은 정말 창조적이되고 서로 다른 스타일의 서로 다른 스타일을 좋아할 수 있습니다

너는 그렇게 두려워하지 말고 싶다 태그 내부에있는 HTML 요소는 사용자가 원하는 것을 분명히하기 때문입니다 우리가 할 수있는 또 다른 일은 웹 사이트의 다른 페이지에 링크 할 수 있다는 것입니다 그래서 나는 그 링크에 대한 텍스트를 없애 버릴거야 나는 또한이 표적 공란을 제거 할 것이다

내 파일 탐색기에서 내 작은 파일 트리를 살펴보면이 indexhtml과 현재 사용중인 파일 인 파일 나는이 페이지 도트 HTML과이 페이지 3 도트 HTML을 가지고 있는데 이들은 모두 다른 것과 같다 내 웹 사이트에있는 웹 페이지 따라서 주어진 웹 사이트에는 여러 웹 페이지가 있습니다 당신은 페이지에 대한 블로그에 있다면 블로그 기사와 같은 묶음이있을 수도 있습니다

웹 사이트에 대한 HTML 파일이 두 개 이상있을 것입니다 그리고 우리는 실제로 그 파일들 사이를 링크 할 수 있습니다이 링크 속성을 사용하면 그렇게 할 수 있습니다 그래서이 href에서 Google과 같은 절대 주소를 사용하여 링크하는 대신 내 웹 사이트의 해당 페이지에 연결할 수 있습니다 상대 URL 사용 예를 들어이 페이지에 액세스하려면 페이지 2에 링크하고 싶다고합시다 현재 나와있는 페이지와 두 페이지가 같은 디렉토리에 있기 때문에 나는 단지 페이지 쌍둥이 이름을 타이핑 할 수있다

그래서 나는 여기처럼 말할 수있다 페이지 두 점은 HTML로 표시되고 브라우저는 자동으로 두 번째 페이지로 이동한다는 것을 알게됩니다 그래서 여기 저기 두 페이지를 말할 수 있습니다 이제 브라우저에서 두 번째 페이지에 대한 링크가 있음을 알 수 있습니다 그래서 이것을 클릭하면 두 페이지로 넘어 가서 두 페이지 안에 있음을 알게 될 것입니다

이미 여기에 링크를 설정했습니다 그래서 여기 2 페이지에 나는 인덱스 HTML에 나를 다시 연결시키는 또 다른 링크가있다 그리고 이것은 우리가 만들 수있는 방법이다 우리 사이트의 네비게이션 이제 2 페이지에서 끝났습니다 홈 페이지로 돌아가서이 두 페이지 사이를 탐색 할 수 있습니다

내 웹 사이트에서 나는 페이지 3에 대한 또 다른 링크를 만들 수 있으므로이 페이지 바로 아래에서 바로이 두 가지 작업을 수행하십시오 이번에 또 다른 링크를 3 번 ​​페이지로 만들 것입니다 한 가지 주목할 점은 페이지 3이이 디렉토리 안에 있다는 것입니다 3 페이지에 대한 링크를 원한다면 3 페이지는 dyrone 폴더 안에 있습니다 HTML 3 페이지 만 말할 수는 없습니다

브라우저가 알지 못할 것이기 때문에 이 페이지 3은 어디에 있어야하는지 정확히 알려야합니다 우리가있는 현재 파일에 비례하여 내가 말할 수있는 한 포워드 슬래시 페이지 3과 이것이 무엇을 말할 것인가? 우리는 하나의 디렉토리로 가고 싶고 우리는 페이지 3이라는 이름의 디렉토리 하나 안에있는 페이지에 링크하고 싶다 HTML 이제 우리는 3 페이지에 대한 링크를 가져야 만합니다 나는 이것을 클릭 할 수 있고 우리는 3 페이지를 가져올 것이다 이것이 웹 사이트의 다른 페이지에 연결할 수있는 방법입니다

웹 사이트에서 파일에 대한 링크를 만들 수도 있습니다 그래서 우리의 경우에 우리는이 작은 고양이 그림을 가지고 있습니다 그리고 이것은 단지 귀여운 고양이 같았습니다 실제로 우리는 우리 웹 사이트에있는 고양이의이 그림에 링크하십시오, 그래서 여기 저의 인덱스 파일로 갈 것입니다 이 HTML 파일에 액세스하는 것과 같은 방식으로이 그림에 액세스 할 수 있으므로 dyrone 대신 고양이 그림을 같은 디렉토리에 두어 고양이와 고양이를 말할 수 있습니다 그러면 jpg 파일이됩니다

이것을 고양이에게 바꾼다 그리고 이제이 고양이 사진에 대한 링크가 있어야합니다 이렇게 나는 그것을 고양이의이 그림으로 데려 갈 것이고 나는 고양이를 볼 수있다 그래서 당신에게 링크 할 수있는 방법입니다 외부 웹 사이트 웹 사이트의 다른 페이지 및 웹 사이트의 파일 그래서 jpg 웹 사이트에 PDF 또는 워드 문서를 저장 한 경우 링크 할 수도 있습니다

그것은 중요하지 않으며 HTML에서 링크를 사용하는 기본 사항 중 하나입니다 이 튜토리얼에서는 웹 사이트에서 이미지 사용에 관해 이야기하고 싶습니다 사람들이 웹 사이트를 가질 때 가장 많이하는 일 중 하나는 이미지를 그곳에 올려 놓는 것입니다 그래서 오늘 저는 우리가 이야기 할 수있는 이미지로 작업하는 기본을 보여 드리겠습니다 이미지 크기 조정 및 기본적으로 HTML 페이지에 배치 그래서 여기 이미지 태그를 만들겠습니다

이미지 태그는 기본적으로 서명보다 적습니다 나는 G 다 이 이미지 태그 안에 우리는 실제로 두 개의 정보를 제공해야합니다 우리가이 이미지 태그를주는 첫 번째 일은 이 이미지 태그가있을 때 표시 할 이미지 위치 기본적으로 실제 이미지에 연결해야합니다 그리고 나서 HTML은 그 이미지를 잡고 웹 사이트에 올려 놓을만큼 똑똑 할 것입니다

그래서 저는 SRC가 소스와 동일하다는 것을 말할 수 있습니다 그리고이 따옴표와이 따옴표 안에 들어 있습니다 우리는 이미지의 위치를 ​​넣고 싶다 이제이 작업을 수행하는 가장 기본적인 방법 중 하나는 인터넷에있는 이미지로 연결하는 것입니다 따라서 인터넷에 많은 이미지가 있습니다

실제로이 소스의 이미지에 주소를 넣을 수 있습니다 태그를 붙이면 이미지가 표시됩니다 브라우저가 여기에 있습니다 나는 공룡의 그림을 몇 개 가지고 있고 여기에 공룡이 많이있다 여기 정말 무서운 t-rex처럼이 이미지를 볼 수 있습니다

이 이미지는 그와 관련된 주소 같은 것을 알 수 있습니다 이 이미지는 분명히 마치이 미친 주소와 비슷하지만이 이미지에 주소를 복사 할 수 있습니다 그런 다음 붙여 넣기 만하면됩니다 이 소스 속성을 사용하면 그 나쁜 소년을 여기에 붙여 넣을 수 있습니다 우리는이 멋진 이미지를 얻었습니다

소스를 지정하는 것 외에도 이미지를 사용하려면 하나 이상의 속성을 지정할 수도 있습니다 alt라고 부르는 alt 속성은 기본적으로 이미지를 찾을 수없는 경우 표시됩니다 그래서 문제가 될 때가 있습니다 HTML은 연결하려는 이미지가 어느 것과도 같습니다 삭제되었거나 브라우저에 없거나 브라우저에서로드 할 수 없습니다 예를 들어, 그 무서운 공룡은 마치 그 사람이 자신의 웹 사이트에서 빼낸 것처럼 사라졌습니다

그러면 더 이상 나타나지 않을 것입니다 그래서이 alt 태그를 백업과 같이 가지고 있습니다 따라서이 텍스트 안에 어떤 텍스트를 넣을 지 대체 태그 이미지가 나타나지 않고 항상 alt 태그가있는 좋은 연습 방법 인 경우에도 표시됩니다 이 문장을 꽤 문장적인 문장 하나처럼 만들면 정말 말할 수 있습니다 무서운 디노, 이제 이미지와 평범한 텍스트 같은 것을 묘사하는 것과 같습니다

항상 alt 태그가 있는지 확인하고 싶을 때 이미지가 있으면 태그 하나만 남을 것입니다 따라서 HTML은 종료 태그에 시작 태그와 같은 두 개의 태그를 갖게됩니다 그리고 우리는 거기에 이미지가있는 케이스가 아닌 물건들을 넣을 것입니다 우리는이 슬래시를 단지 할 수 있습니다 우리는 더 큰 표시를 할 수 있습니다

이제 태그가 완료 될 것입니다 따라서이 이미지는 단 하나의 이미지 태그 일 뿐이며 분명히 꽤 긴 URL입니다 이제이 작업을 수행하면이 이미지를 가져 와서 웹 사이트에 표시해야합니다 그래서이 디노는 실제로 당신이 볼 수있는 커다란 크기입니다 슈퍼 무서운,하지만 지금은 우리 가이 이미지를 우리의 웹 사이트에 있으므로 우리는이 이미지에 연결할 수 있습니다 우리가 할 수있는 또 다른 일은 실제 컴퓨터에있는 이미지에 대한 링크입니다

따라서 인터넷에있는 이미지에 연결하는 대신 나는 내가 좋아하는 이미지에 링크 만 할 수있다 너는 나 자신을 안다 그래서 나는이 출처를 없애고 여기에 내 작은 파일 나무에있는이 그림을 가지고있다 그냥이 귀여운 고양이 야 나는 실제로이 고양이 그림을 가져다가 인터넷에서 그 그림을 그렸던 것처럼 내 웹 사이트에 삽입 할 수 있습니다

근원 안에 있기 때문에 나는 고양이의 이미지와 연결될 것입니다 그래서 우린 그냥 고양이 도트 JPG가 될거야 이제 alt를 변경하여 정말 무서운 공룡처럼 정말 귀여운 고양이로 바꿀 수 있습니다 내 페이지를 새로 고침하면 고양이 사진을 볼 수 있습니다 그래서 여러분이 공룡 그림을 보았을지도 모르는 문제들 중 하나 지금이 고양이 그림과 함께하면 그것들은 큰 이미지와 같고 특히 공룡 그림과 같이 종류가 큽니다

그것은 거대했다 전체 그린처럼했다 이미지로 할 수있는 일 중 하나는 이미지의 크기를 조정하는 것이고이 이미지 태그에 몇 가지 속성을 추가 할 수 있습니다 그래서 소스를 정의하는 것 외에 alt 텍스트를 정의하면 너비와 높이, 너비와 높이를 정의 할 수 있습니다 이미지 그래서 나는 이것을 호소 할 수있다 너는 알고있다 실제로 그것이 평등하게 될 것이라고 말할 수 있습니다 우리는 아마 100 정도라고 말할 수 있습니다

이것은 백 권리 일 것입니다 그래서 우리가 조금씩 줄이면 100이 의미하는 바를 의미합니다 100 픽셀 픽셀은 HTML에서 기본적으로 정의와 같이 사용할 수있는 측정 단위입니다 크기와 픽셀은 설명이 어렵습니다 크기가 너무 커서 설명이 쉽지 않습니다

표준 단위, 즉 픽셀은 다른 크기 일 수 있습니다 보고있는 화면의 해상도에 따라 100 픽셀이기 때문에 대부분의 웹 페이지에서 같은 거리가 될 것입니다 그러나 센티미터 또는 인치와 같은 절대 측정 거리와는 다릅니다 그래서 저는 100 픽셀 너비와 100 픽셀 높이를 말할 수 있도록 이것을 염두에 두십시오 이제 내 페이지를 새로 고침 할 때 고양이는 조금 더 작아서 조금 더 잘 볼 수 있습니다

그러나 우리에게는 고양이가 보인다는 또 다른 문제가 있습니다 끔찍한, 오른쪽 내 말은 조금 씩 웃어서 너는 내가 높이 내에서 이것을 제거하면 내가 실제로 이미지의 종횡비 변경 이제 이미지를 새로 고침하면 실제로 이미지가 키가 크다는 것을 알 수 있습니다 그래서 이미지의 너비와 높이를 다르게 정의 할 때 동일한 화면 비율을 유지하고 싶습니까? 당신이 할 수있는 것은 당신이 당신의 이미지의 종횡비가이 고양이에서이 고양이에 대해 무엇인지 알아내는 것입니다 jpg 이 이미지의 종횡비가 300 x 200이므로 여기에서 볼 수 있습니다

300 픽셀 x 200 픽셀이므로 300과 200이 같아집니다 당신은 종횡비를 알고 있습니다 그리고 같은 종횡비를 유지할 수 있습니다 우리 안에있는 우리의 높이, 그래서 다시 넣으십시오 우리는 그것을 200으로 만들 수있다

100에 의해 100 그리고 이것은 우리에게 종횡비와 마찬가지로 정확합니다 그것은 300에서 200까지 같은 비율입니다 이제 이미지 크기를 조정하면 멋지 네요 크기가 조금 작지만 같은 가로 세로 비율과 같은 크기입니다 그래서 이미지의 크기를 조정할 수있는 방법입니다

당신 그리고 이미지와 함께 다른 것들을 사용할 수도 있습니다 그래서이 이미지를 예를 들어 링크와 결합 할 수 있습니다 그래서 여기에 올 수 있고 링크 태그를 만들 수 있습니다 우리는 단지 이봐, 우리는 이것을 href라고 여기 안에 나는 무엇이든 넣을 수 있었다

내가 원했던 링크 그래서 예를 들어, 나는 이것을이 공룡 그림처럼 연결할 수 있습니다 공룡의 URL을 거기에 넣으십시오 이 링크를 닫을 수 있고 이미지를 클릭하면됩니다 공룡에 대한 사진을 볼 수있게 해주므로 클릭 가능한 이미지를 만들 수 있습니다

당신은이 이미지들로 많은 것을 할 수 있으며 당신은 다른 이미지들 안에 그것들을 끼워 넣을 수 있습니다 HTML 태그로 다른 HTML 태그 안에 이미지처럼 넣을 수 있습니다 당신이 원하는 곳 어디든지 둘 수 있습니다 이미지는 강력하고 절대적으로 당신이 당신의 웹 사이트에서 그것을 사용하고 있는지 확인하고 싶어합니다 이 속성을 모두 포함해야합니다

이것은 정말로 중요합니다 많은 사람들이 게으르다가 거기에 넣지 않지만 정말 중요합니다 예를 들어 내가이 고양이 jpg와 근원을 없애 버렸다면 이제는 그것이 무엇인지 알게 될 것입니다 대체 텍스트를 제공하여 정말 중요합니다 귀하의 웹 사이트 인 콩테 (Conte)가 함께있을 수 있습니다

이미지 링크가 깨졌습니다 이 튜토리얼에서는 웹 사이트에서 동영상을 사용하는 방법에 대해 이야기하고 싶습니다 컴퓨터에 저장 한 비디오를 어떻게 가져올 수 있는지 보여 드리겠습니다 귀하의 웹 사이트에 넣은 다음 YouTube 비디오를 귀하의 웹 사이트에 어떻게 포함시킬 수 있는지 보여 드리겠습니다 여기 정상적인 비디오부터 시작해 보겠습니다

나는 이것을 가지고있다 튜토리얼 도트 mp4 비디오 및 이것은 하나의 자습서는 트래픽 Adam II에 대해 수행 한 것으로서 내 웹 사이트에이 자습서를 포함시켜 실제로 사용할 수 있습니다 HTML 비디오 태그이고 그냥 비디오처럼 될 것입니다이 태그는 source라는 속성을 제공 할 것입니다 SRC는이 따옴표와 동등하고 안에 있습니다 동영상의 위치를 ​​입력하고 싶습니다

내 경우에는 현재 파일의 비디오 경로가 상대 경로이므로 그냥 튜토리얼에서 P를 누른 다음이 비디오 태그를 닫을 수 있습니다 실제로 끝 동영상 태그가 필요합니다 이제 한 가지 할 일은 이러한 동영상 태그 안에 텍스트를 넣는 것입니다 사용자 브라우저가 특정 형식의 동영상을 표시 할 수없는 경우 표시되는 텍스트입니다 대부분의 브라우저가 동영상을 표시 할 수있는 것처럼 드문 경우입니다

그러나 비디오가 어떤 이유로 든 실패 할 경우 여기에 입력 한 모든 텍스트가 표시됩니다 내가 여기 내 웹 사이트로 간다면 페이지를 새로 고침 할 수 있으며 동영상이 표시되고 표시됩니다 그러나 문제는이 비디오를 클릭하면 실제로 재생할 수 없다는 것입니다 그래서 나는 비디오를 계속 클릭하지 않고 계속 누르고 있습니다 왜냐하면 우리는이 비디오에 비디오 컨트롤을주지 않았기 때문입니다

그래서 나는 여기서 내려올 수 있습니다 실제로이 속성에 다른 속성을 부여 할 수 있습니다 컨트롤과 여기에 컨트롤을 입력하는 한 이 비디오는 비디오 컨트롤을 가질 수 있습니다 그래서 때로는 웹 사이트에 비디오를 저장하기를 원할 수도 있습니다 그냥 일반 비디오 태그를 사용할 수 있지만 비디오를 제어 할 수있게하려면 이제 재생 버튼을 클릭하면됩니다

비디오의 다른 부분으로 건너 뛸 수있는 비디오를보고 있습니다 여기는 내가 볼 수있는 볼륨을 제어 할 수있다 이제 우리는이 비디오를 완전히 제어 할 수 있습니다 내가 할 수있는 또 다른 일은 비디오의 크기를 제어하는 ​​것입니다 이 크기를 다른 크기로 지정하려면 비디오가 약간 크다는 것을 알 수 있습니다

나는 이것을 할 수있어서이 두 속성에 너비를 줄 수 있고 높이도 줄 수있다 이제 동영상의 화면 비율을 유지하고 싶습니다 그래서 저는 이것을 폭과 높이를 줄 것입니다 내가 사용하고있는 너비에 맞게 자동으로 조정하여이 너비를 줄 수 있습니다 300이고 300 픽셀입니다

이제 페이지를 새로 고침하면 동영상은 300 픽셀이됩니다 그래서 좀 더 작아서 좀 더 쉽게 볼 수 있고 당신은 할 수 있어요 이 width 속성을 사용하여 너비와 높이를 제어하십시오 내가 할 수있는 또 다른 일은 동영상의 미리보기 이미지를 조정하는 것입니다 따라서 페이지를 새로 고침하면 동영상의 첫 번째 장면과 같은 그림이 표시됩니다

하지만 특정 미리보기 이미지가있는 경우 여기에서 사용할 수도 있습니다 여기를 클릭하면 포스터와이 따옴표 안에 기본적으로이 이미지 파일을 전달할 수 있습니다 그래서 여기에 이 미리보기 이미지가 있으며 이는 실제로 YouTube에서 해당 이미지의 미리보기 이미지입니다 그래서 실제로 색인 색인 HTML 파일을 다시 열어 볼 수 있습니다

여기에 넣을 수 있습니다 엄지 손가락 Jpg 이미지로 이동하고 내 페이지를 새로 고침하면 해당 미리보기 이미지가 동영상에 사용됩니다 그래서 사실 좀 더 크게 만들게 해줘 따라서 비디오에서 첫 번째 이미지처럼 첫 번째 장면을 보여주는 대신 실제로 엄지 손톱을 주면 정말 유용 할 수 있습니다 당신이 할 수있는 또 다른 일은 내가 자동 응답을 할 것인지를 지정하는 것입니다

자동 재생, 이제이 페이지를 열면 비디오가 자동으로 재생되기 시작합니다 그래서 특정 종류의 유용 할 수 있습니다 상황 당신은 또한 내가 루프를 말할 수 있도록 이것을 반복 할 수 있습니다 비디오가 끝날 때까지 마치 비디오 재생이 끝났을 때 실제로 돌아 다니기 때문에 루프가 돌아가고 끝나면 재생을 시작하여 볼 수 있습니다 내가 끝까지 여기까지 갔을 때 주위를 돌아 다니기 시작했다

그래서 그것들은 당신이 알고있는 작은 몇 가지입니다 당신이 그것을 넘겨 줄 수있는 속성이 더 있습니다 나는 그들 모두에 들어 가지 않을 것입니다 그래서 당신의 컴퓨터에 로컬로 저장된 비디오를 가져 와서 이제 웹 페이지에 추가 할 수 있습니다 YouTube 동영상도 포함 할 수 있습니다

그래서 이것은 많은 사람들이 아마 많은 비디오를하기를 원할 것입니다 이것은 YouTube에 저장되어 있습니다 원하는대로 웹 사이트에 포함시키고 싶다면 YouTube에서 실제로이 작업을 쉽게 처리 할 수 ​​있습니다 나는이 공룡 비디오를 가지고있다 그리고 내가 원한다면 이 공룡 비디오를 내 웹 사이트에 삽입하십시오

실제로 YouTube에 올 수 있습니다 이 공유 버튼을 클릭 한 다음 여기를 클릭 할 수 있습니다 삽입 할 수있는 옵션이 있어야합니다 그래서 여기에 내가 할 수있게 해줄거야 클릭하여 퍼가기를 클릭하면 실제로 볼 수있는 HTML 코드가 생깁니다

이것은 HTML 태그입니다 iframe이라고합니다 기본적으로 iframe 태그는 다른 웹 사이트를 들여다 볼 수있게 해줍니다 따라서 YouTube 웹 사이트를 YouTube 웹 사이트에로드하는 것이 좋을 것입니다 그러면 해당 동영상을 중심으로 좋아할 것입니다

나는 iframe에 대해 이야기하는 전체 HTML 비디오를 만들 예정입니다 너무 걱정하지 마세요 이 코드를 복사 한 다음 붙여 넣을 수 있다는 것을 알고 있습니다 YouTube는 실제로 옵션을 제공하므로 선택을 취소하거나 다른 옵션을 확인할 수 있습니다 플레이어에게 비디오 타이틀 및 기타 작업을 제어하거나 표시합니다

그래서 나는 이것을 복사 할 것이고, 이제 우리는 우리가 여기에 올 수있다 HTML 이 코드를 모두 붙여 넣을 수 있습니다 우리는 YouTube 동영상을 사용할 수있게 될 것이며 YouTube 동영상에 대한 멋진 점 중 하나는 YouTube 플레이어가 전체 화면 YouTube 버튼처럼 보이도록 제어합니다 YouTube 볼륨 버튼과 그 모든 것들을 좋아합니다 YouTube에서 동영상을 퍼가는 경우 정말 멋지게 보입니다

이 동영상으로 너비와 높이를 변경할 수 있으므로이 두 값을 모두 수정할 수 있습니다 그 (것)들을 더 크거나 더 작게 만드십시오 이것이 동영상 사용의 기본 사항입니다 제 생각에는 대부분의 유스 케이스가 비디오를 가지고 있거나 귀하의 웹 사이트에 올리시겠습니까, 아니면 귀하의 웹 사이트에 YouTube 동영상을 올리시겠습니까? 그것은 당신이 그 두 가지를 모두 할 수있는 방법입니다 이 튜토리얼에서 HTML로 목록을 만드는 것에 대해 이야기하고 싶습니다

이제 HTML을 사용하면 항목 그룹을 나열 할 수 있으며이를 수행 할 수있는 몇 가지 태그를 제공합니다 어쩌면 이름 목록이나 단계 목록을 나열해야 할 수도있는 시나리오가 많이 있습니다 레시피와 HTML의 특정 태그를 사용하여 목록을 포맷하고 실제로보기 좋게 만들 수 있습니다 내가 말했듯이 정의 할 수있는 몇 가지 유형의 목록이 있습니다 기본적으로 어떻게 목록을 정의 할 수 있습니까? 목록의 첫 번째 유형은 순서가 지정되지 않은 목록이라고하며 특정 순서가없는 목록입니다

그래서 상상해보십시오 우리는 여러 품목의 목록을 만들고 있습니다 특정 순서로 진행할 필요가 없었습니다 정렬되지 않은 목록을 만들 수 있습니다 그래서 ul을 타자하면 닫는 태그가 필요할 것입니다

그리고 우리는이 정렬되지 않은 목록의 내부를 막을 것입니다 목록 항목을 정의 할 수 있습니다 따라서이 두 태그는 기본적으로 목록의 컨테이너와 내부에 있습니다 목록 항목이라는 것을 만들 것입니다 목록의 각 항목에 대해이 항목이 필요합니다

항목 태그를 나열하는 태그 모음이며 여기서 우리는 원하는 항목을 작성할 수 있습니다 그래서 예를 들어 과일 목록처럼 쓸 수 있어요 그래서 우리는 사과 오렌지와 바나나 맞아, 나는 다른 과일들과 내가 원한다면이 목록 항목을 조금 더 복잡하게 만들 수도 있습니다 그래서 나는 링크처럼 여기에 뭔가를 포함 할 수 있으므로 링크를 만들 수 있습니다 그것에게 href를 줘라

그리고 내가 실제로이 사실을 알려주지 않을 것이다 그럴 필요가 없으면이 링크를 닫아서 이 태그 안에있는 HTML 태그는 내부에서 원하는 모든 것을 실제로 할 수있는 항목을 나열합니다 이제 페이지를 새로 고침하면 멋진 목록이 있음을 알 수 있습니다 그래서이 모든 항목을 나열하고 있습니다이 링크는 링크이며 이것은 순서가없는 목록이기 때문에

목록에있는 각 목록 항목을 표시하는 작은 원 마커가 있습니다 이것이 순서없는 목록을 정의하는 방법이지만,이 목록의 항목을 정렬하려면 어떻게해야합니까? 맞습니다 조리법에 요리법이나 무언가를 쓰고 있다고 상상해보십시오 매우 단계를 따라야합니다 특히 원하는 단계를 건너 뛰지 않아도됩니다

우리는 정렬 된 목록과 정렬 된 목록을 찾습니다 우리는 단지 오 L을 입력하면 주문 목록에 나타납니다 이제이 목록에있는 모든 항목을 주문할 것입니다 그래서 1 2 3처럼 주문했습니다 각 요소에 할당 된 특정 순서가 있으며 순서는 기본적으로 이러한 목록 항목이 순서 목록의 내부에 나타나는 순서입니다

실제로 목록의 스타일을 변경할 수 있습니다 그래서 우리는 숫자가 모두 나열되어 있음을 알게되었습니다 실제로 타입을 변경할 수 있으므로 타입을 지정할 수 있고 타입을 지정할 수 있습니다 그래서 기본 유형은 이처럼 하나가 될 것이지만 대신 1을 말하면 자본은 그걸 의미 할거야 알파벳순으로 듣는 것뿐입니다

그래서 우리는 B와 C가 같습니다 나는 또한 소문자 a를 할 수 있으며 그것은 소문자로 될 것입니다 내가 할 수있는 대문자 I와 로마 숫자가 될 것입니다 또는 소문자 I을 할 수 있습니다 로마 숫자는 소문자입니다

따라서 내부에있는 항목의 유형에 따라 목록의 스타일을 바꿀 수 있습니다 이 목록을 포함시킬 수도 있으므로 목록 항목 안에 목록을 넣을 수 있습니다 그럼이 오렌지 안에리스트를 넣자 내가 또 다른 오와 L을 만들 수 있도록 순서대로 목록을 우리는 이것을 닫을 것이고 다른 목록 항목을 정의 할 수 있으므로 항목 1과 같이 말할 수 있습니다 이제 우리는이 목록에 목록을 올릴거야

그래서 오렌지 목록 항목 내부 우리는 또 다른 목록을 가지고 있으며, 따라서 원하는 목록을 모두 포함시킬 수 있으며 그렇게하는 것이 매우 유용 할 수 있습니다 그래서 정렬 된 목록과 정렬되지 않은 목록은 가장 인기있는 두 가지 유형의 목록입니다 HTML과 90 %는 그 사람들과 만 일할 것이지만 실제로는 다른 목록이 있습니다 존재하고 나는 단지 그것에 대해 너희들에게 말하기를 원한다 인기가 없기 때문에 아마 이걸 보지 않을거야

그러나 적어도 당신은 그것이하는 일을 배우기 위해 일종의 일종의 일을 할 수 있습니다 따라서 설명 목록이라고하며 특별한 유형의 목록입니다 항목을 나열한 다음 해당 항목을 설명 할 수 있으므로 이러한 DL 태그로 설명 목록을 만들 수 있습니다 나는이 것을 닫고 여기에서 우리는 목록 항목을 정의 할 수 없다 설명 용어를 정의 할 것입니다

그래서 이것이 DT가 될 것이고 목록 항목처럼 작동합니다 그래서 여기에 입력 할 수 있습니다 사과와 기술 용어 외에 설명 용어를 설명 할 수 있으므로 설명 용어를 설명 할 수 있으며 DD를 입력하면됩니다 과 우리는 이것을 끝낼 것이고, 여기에서 나는 내가 그렇게 말할 수있을 정도로 사과를 기술 할 수있다 – 그들은 빨간색이나 뭐 그리고 지금 내 웹 사이트로 가면이 사과가 있다는 것을 알 수 있습니다

목록의 항목을 클릭 한 다음 바로 아래에 설명이 있으므로 다른 항목을 추가 할 수 있습니다 오렌지 설명이있는 몇 가지 항목이 있습니다 이렇게하면 원할 경우 유용 할 수 있습니다 설명이있는 목록 항목이 있습니다 그래서 그것들은 목록의 세 가지 기본 유형입니다

내가 대부분 말했듯이, 아마 당신은 단지 순서가 매겨진 목록이나 정렬되지 않은 목록을 사용하고있을 것입니다 또는 적어도 당신이 볼 수있는 가장 인기있는 것이지만 설명 목록은 존재하며 그들은 또한 유용합니다 이제는 HTML로 다른 목록을 만들기 시작할 수 있습니다 이 튜토리얼에서는 HTML로 테이블을 만드는 것에 대해 이야기하고 싶습니다 기본적으로 테이블은 정보를 형식화하고 사용자에게 표시하십시오 그래서 당신이 뭔가를 사용한다면 Microsoft Excel 또는 Google 시트를 사용하면 기본적으로 테이블 작업을 수행하고 있으며 여기서는 HTML에서 수행하는 작업을 여기 방금 여러 테이블의 이미지를 뽑아 보았는데 이것들은 단지 예일뿐입니다

HTML로 테이블을 만들 때 만들 수있는 것들 중에서이 테이블의 정보를 레이아웃 할 수 있습니다 체재 그래서 우리가 테이블을 만들 수있는 방법은 HTML 테이블 태그를 사용하는 것입니다 이것은 복잡한 태그의 일종입니다 따라서 테이블에 들어가는 모든 구성 요소에주의를 기울이고 싶습니까? 그래서이 테이블 태그를 만들고 그런 다음 엔딩 태그가 필요할 것입니다 그래서 여기서 우리는 우리가 들어가기를 원하는 모든 것을 우리 안에 넣을 수 있습니다

테이블과 테이블의 가장 기본적인 레이아웃은 테이블 행을 정의하는 것입니다 그래서 테이블 행은 테이블의 수평 부분과 같습니다 그것은 테이블에 하나의 항목이고 우리는 테이블 행 태그를 사용하여 테이블 행을 정의 할 수 있습니다 그래서 TR 및 TR의 종료 태그 그래서 이것은 수평 행 하나의 엔트리처럼 표현할 것입니다 우리 테이블에 테이블의 개별 데이터를 정의 할 수 있습니다 다른 말로하면 테이블의 각 열에 대한 개별 데이터는 데이터 표라고하는 것을 사용합니다

그래서 테이블 데이터는 이 태그 안에 들어가서 하나의 데이터를 만들 수 있습니다 이걸 전화 할께 그건 내 테이블에 하나의 열을 나타내는 것입니다 그래서 이것은 하나의 열과 같고 다른 테이블 데이터를 넣으면 테이블의 다른 열과 같을 것입니다 그래서 나는 이것을 복사 할 것이고 우리는 그것을 아래에 붙여 넣을 것이다 이것도 전화 할게 과 나는 똑같은 일을 할거야

우리는 하나 더 할 것이고 우리는 그것을 세 가지라고 부를 것입니다 그래서 지금 내 웹 사이트에 올 때 하나의 정보 행에 세 개의 항목 또는 열이있는 기본 테이블을 가져야합니다 그게 제가 가진 바로 그 것입니다 그래서 나는 단지 1 2와 3을 가지고있다

바로 여기에 내가 할 수있는 것은 내 테이블에 다른 행을 삽입 할 수 있다는 것입니다 초기 테이블 행 바로 여기 내가 원한다면 나는 이것을 복사 할 수 있었고 바로 아래에 붙일 수있다 이제 우리가하는 일은 또 다른 행을 정의하는 것입니다 따라서 페이지를 새로 고치면이 두 행이 있음을 알 수 있습니다

그럼 우리는 이것을 4로 바꾸지 않겠습니까? 5 & ​​6 그리고 테이블의 행이 여기에있는 것처럼 형식화되어 있음을 볼 수 있습니다 이 행이 먼저 지정되었으므로 표에 처음으로 표시됩니다 그런 다음이 행을 지정했는데 이제는 두 번째로 표시됩니다 이것이 테이블에 데이터를 추가하는 기본 사항이지만, 한 걸음 더 나아갈 수 있습니다 따라서 데이터를 정의하는 대신 데이터의 헤더를 정의 할 수 있습니다

그래서 나는 다른 테이블 행을 만들거야 과 여기 테이블 행을 유지할 것입니다 그러나 테이블 데이터를 정의하는 대신 테이블 헤더를 정의 할 것입니다 그래서 TD 대신에, 그것은 일이 될거에요

그리고 저는 이것들을 모두 바꿀 것입니다 이제 테이블을 변경하여 테이블의 각 열의 제목이나 제목처럼 보이게 할 것입니다 그래서 나는 num1 num2와 같이 말할 수있다 과 넘버 3 기본적으로, 그들은 세 개의 숫자를 나열해야합니다 굵게 표시되어 있으므로 서로 다른 열 제목을 알면 여기에 각 열에 대한 정보가 있습니다

테이블에 관한 다른 것들 중 하나는 그들이 실제로 유연하다는 것입니다 그래서 내가 여기에 와서 다른 테이블이나 칼럼에 테이블에 추가하고 싶다면, 내가해야 할 일은 단지 우리가 다른 테이블 데이터 엔트리에 넣을 수있는이 사람을 복사해서 3과 1/2처럼 말할 수 있습니다 이제이 세 가지 외에도 테이블에 다른 항목을 추가 할 것입니다 하지만 우리는이 테이블 헤더와 같은 엔트리를 가질 필요가 없습니다 원하는 항목을 넣을 수 있습니다

그리고 테이블에 대한 또 다른 멋진 점은 스스로 크기를 조정한다는 것입니다 그래서이 창을 작게 만들면 이 표의 텍스트가 당신이 테이블을 압축 할 수 있도록 멋지게 감싸는 것처럼 그리고 당신은 여전히이 모든 것을 가질 것입니다 정보 및 그 아래의 정보가 실제 정보를 수용하기 위해 실제로 움직이는 것을 볼 수 있습니다 그래서 테이블은 실제로 매우 반응적이어서 많은 것을 정의 할 수 있습니다 표 행과 원하는만큼 많은 표 데이터가 있으며 실제로 캡션을 추가 할 수있는 또 다른 기능이 있습니다

자막은 표의 전체 제목과 같습니다 그래서 여기 테이블 태그 밑에, 이것들을 넣을거야 캡션 태그 그리고 이것은 테이블의 제목과 같습니다 숫자 목록 과 이제이 테이블에 멋진 캡션이 생깁니다

그래서 당신은 캡션이 테이블 위의 가운데 오른쪽에 오른쪽처럼 앉아있는 것을 볼 수 있습니다 많은 사람들이 무엇을 할 것인가는 헤더처럼 만들 것이므로 헤더를 만들 수 있습니다 – 과 이제 우리 테이블을위한 멋진 큰 제목이 될 것입니다 그래서 정말 좋아 보인다 이것이 테이블 사용의 기본 사항입니다 사람들이하고 싶은 또 다른 일은 테이블 헤드와 테이블 바디를 정의하는 것입니다

HTML의 표를 읽는 사용자 그래서 예를 들어 지금 당장은 테이블이되어야한다는 것은 명백한 것이 아닙니다 표제와 이것이 테이블의 내용과 같다고 여겨지는 것은 명백하지 않습니다 그래서 두 가지를 분리 할 수 ​​있습니다 표 머리와 표 본문을 지정하여 섹션 실제로 오른쪽 바로 아래에 바로 여기 있습니다

이 자막은 테이블 머리를 정의 할거야 그래서 저는 티 헤드와 그 다음 아래에, 나는 단지 내가이 일이라고 말할거야 과 이제 좀 더 들여다 볼 것입니다 그러면 테이블의 헤더에있는 모든 정보가 될 것입니다 이제 우리는 테이블 몸체라고하는 또 다른 태그를 만들 수 있고 그것은 똑같은 일이 될 것입니다

그냥 말할거야 T 몸과 그런 다음 T 바디를 테이블 아래쪽으로 끝낼 것입니다 과 다시 한번, 나는 이런 것들을 들여 쓰기 만 할 것입니다 그래서보기가 더 쉬워졌습니다 그래서 테이블은 머리와 몸으로 배열되어 있습니다

당신은 테이블이 보이는 방식을 바꾸지 않는다는 것을 알게 될 것입니다 그것을 포맷하고 그것을 조금 더 잘 조직하십시오 이제는 콜 스팬 (call span)이라고 불리는 것으로 제어 할 수있는 테이블로 할 수있는 것이 하나 더 있습니다 통화 스팬은 열 범위를 나타냅니다 그래서 예를 들어, 나는 여기에 이걸 가지고있다 권리? 그리고 이것은 테이블에 있습니다

테이블을 볼 때 테이블에서 정확히 하나의 열을 차지한다는 것을 알 수 있습니다 그래서 그것은 하나의 컬럼을 차지하고 두 번째 컬럼에서는 2와 3을가집니다 하지만 난 실제로 하나 이상의 열을 가져 와서 여기 테이블 데이터에 올 수 있고 말할 수 있습니다 호출 간격은 이러한 따옴표와 동일합니다 정수 값을 넣으면됩니다

예제 2와 이제이 테이블 데이터 조각은 테이블에서 두 개의 열을 차지합니다 그래서 지금 보자 페이지를 새로 고침 할 때 하나를 차지합니다 이제 2 명을 차지하고 있습니다 따라서이 항목은 테이블에서 두 개의 열을 차지하고 다른 모든 항목은 측면으로 푸시됩니다

그래서 나는 또한 3과 이제는 이렇게 세 개의 열을 차지하므로 각 열의 수를 제어 할 수 있습니다 개별 테이블 데이터가 사용되어 테이블의 모든 부분을 제어 할 수 있습니다 이것이 테이블 사용의 기초입니다 올바른 태그를 사용하고 있는지 확인하고 싶습니다 나는 적어도 나를위한 테이블은 언제나 같았다는 것을 의미한다

이런 종류의 태그가 너무 많아서 위력을 발휘하지 못한다 그러나 당신이 그 (것)들을 잘 들여 눕히고 당신이 그 (것)들을 편성 해 유지하는 한 당신은 아무 문제도 있어야하지 않는다 이 튜토리얼에서 HTML에서 컨테이너에 대해 이야기하고 싶습니다 이제 HTML의 컨테이너는 기본적으로 다른 태그를 래핑하는 태그 세트 HTML 요소로 시작 태그와 끝 태그를 정의한 다음 태그 내부에 정의 할 수 있습니다 나는 다른 HTML 엘리먼트들을 넣을 것이다 일반적으로 HTML을 작성할 때 래퍼 태그처럼 HTML 태그를 래핑하는 것이 좋습니다 이것은 기본적으로 모든 HTML을 저장하는 태그 집합과 같습니다

보다 고급 HTML을 사용하기 시작하면 CSS와 같은 것을 보게됩니다 기본적으로 웹 페이지의 스타일을 지정하는 데 사용할 수있는 언어입니다 일반적으로 특정 다양한 요소로 스타일링하면 래퍼 요소와 그 내부의 모든 요소에 적용 할 수 있습니다 그 스타일을 이어받습니다 저는 CSS와 스타일링에 너무 몰두하고 싶지는 않지만, HTML로 많은 것을 알고 있습니다

전체 컨테이너와 같은 요소들로 묶는 것이 좋습니다 이 강의에서는 HTML로 된 두 개의 인기있는 컨테이너에 대해 divs와 span에 대해 이야기하고 싶습니다 그리고 그것들은 컨테이너로 사용할 수있는 HTML 태그의 두 세트입니다 div 또는 span 내부에 다양한 HTML 요소를 넣을 수 있습니다 그리고 나서 당신은 내가 들어 오기 전에 그것들을 감싸는 것과 같을 것입니다

Divs와 범위 나는 너희들에게 여러 가지 방법에 대해 이야기하고 싶다 HTML 요소가 표시되고 이것은 div와 span 사이의 차이를 이해하는 사람들에게 중요한 개념입니다 HTML에 대해 이야기 할 때 일반적으로 중요한 개념 따라서 HTML에는 요소를 표시하고 염두에 두는 두 가지 기본 방법이 있습니다 두 개 이상있다

당신은 다른 여러 가지로 들어갈 수 있습니다 HTML을 알고 싶은지를 알아야하는 두 가지 방법과 같은 두 가지 주요 방법은 블록 및 인라인 따라서 CSS는 블록 요소라고하는 것을 표시 할 수 있으며 인라인으로 표시 할 수 있습니다 요소는 이제 CSS 또는 HTML 블록 요소입니다 페이지의 전체 너비를 차지하는 요소 그래서 그들은 페이지의 블록과 같고 인라인 요소는 그들이 필요로하는만큼의 공간으로 서로 나란히 앉아서 인라인 요소를 가질 수 있습니다 그러나 블록 요소가 페이지의 전체 너비를 차지하므로 블록 요소를 서로 바로 옆에 놓을 수는 없습니다

이제 다른 HTML 태그가 다르게 표시됩니다 그래서 일부 태그는 블록 태그입니다 다른 태그는 인라인 태그입니다 단락 대 링크 따라서 HTML 내부에 두 개의 링크를 만드는 경우 링크 만 만들면됩니다

실제로 아무 것도 연결할 필요가 없습니다 정말로 중요하지 않습니다 링크 1과 여기 다른 링크를 만들거야 나는 이걸 복사 할거야 내 페이지를 새로 고침 할 때이 링크를 2라고 부릅니다

이 링크는 실제로 링크가 실제로 서로 옆에 앉아있는 것을 볼 수 있습니다 그래서 링크 1은 링크 2 바로 옆에 앉아 있는데 이것은 두 개의 인라인 요소의 좋은 예입니다 그래서이 링크들은 단지 많은 것을 차지하기 때문에 서로 옆에 앉을 수 있습니다 오른쪽 링크가 필요한 페이지의 공간은이 공간을 필요로합니다 그래서 내가 텍스트와 링크를 더 길게 만든다면 그것은 단지 많은 공간을 차지할뿐입니다 이제 더 많은 공간을 차지해야 할 것입니다

그러나 우리는 여전히 그 옆에 링크를 붙일 수 있습니다 이것들은 내가 인라인이라고 말한 것과 같다 CSS 요소를 사용하여 서로 나란히 배치하거나 좋은 비유로 같은 줄에 앉을 수 있습니다 이제 두 개의 HTML 단락을 만들겠습니다 그래서 HTML 단락이 블록 요소의 좋은 예일 때, 나는 단락 하나를 만들 것입니다

그럼 여기서 다른 단락을 만들거야 과 사실 이걸 갈거야 그래서 당신이 알아 차릴 수있는 것은이 링크 들과는 달리 그들이 서로 옆에 앉아있는 방식입니다 이 두 단락은 그렇게 할 수 없을거야 그래서 우리는 단락 1을 여기에서 볼 수 있습니다

이 파일에는 2 단락을 기입하기에 충분한 공간이 있지만 거기에 가지 않을거야? 문제가되지 않는 것처럼 제 1 단락을 얼마나 작게 만드는지는 중요하지 않습니다 2 단락을 가기 위해 얼마나 많은 공간이 여기에 있습니까? 이것이 블록 요소이기 때문에 절대로 넘어 가지 않을 것입니다 그래서 블록 요소들 내가 말했듯이, 그들은 페이지의 전체 너비를 차지한다 그래서 그들은 다음 요소로 하여금이 인라인 요소 아래로 가도록합니다 그러지 마

따라서 이러한 인라인 요소를 사용하면 파일에서 바로 옆에 요소를 저장할 수 있습니다 HTML 블록의 두 가지 주요 디스플레이 유형의 차이점은 그 개념을 이해하는 한 인라인 디스플레이는 블록 요소의 개념과 인라인 요소를 사용하면 span과 div가 무엇에 사용되는지 이해할 수 있습니다 따라서 span과 div의 큰 차이는 span이 인라인이라는 것입니다 컨테이너와 div는 블록 컨테이너이므로 스팬을 만들 수 있습니다이 스팬 태그를 사용하면됩니다 그리고 우리는 끝을 낼 수 있습니다

여기에 몇 개의 텍스트를 넣을 수 있습니다 그래서 한 번 스팬을 말한 다음 다른 스팬을 여기 아래로 만듭니다 Span two와주의 할 점은 페이지를 새로 고침 할 때입니다 이 두 기간은 즉,이 두 기간의 요소 또는 텍스트가 서로 바로 옆에 표시됩니다 권리 이 범위는 인라인 컨테이너입니다

두 개의 div를 만들면 div를 만듭니다 과 나는 똑같은 짓을 할 것이다 그래서 여기에 텍스트를 넣을 것입니다 우리는 div 1과 div 2를 말할 수 있습니다 과 이제 페이지를 새로 고침하면이 div가 다른 행에 있음을 알 수 있습니다

따라서 인라인 요소 인 스팬과는 다릅니다 이 div는 블록 요소입니다 따라서 div는 블록이므로 같은 줄에있을 수 없습니다 div 1은 화면의 전체 너비를 차지합니다 그러나이 범위는 줄을 서기 때문에 가능합니다

div와 span의 큰 차이점은 div가 인라인 또는 블라인드 요소는 블록 요소이며 인라인 요소에 걸쳐 있으며 이들은 모두 컨테이너입니다 따라서 span과 div를 컨테이너로 사용할 수 있습니다 그래서 이것들은 텍스트를 보유하거나 CSS에 들어가기 시작할 때 다른 HTML 요소처럼 유지됩니다 실제로 적용 할 수있는 HTML 스타일을 지정하는 방법은 다음과 같습니다 이 기간에도 스타일을 지정합니다

따라서 스핀 div를 사용할 수있는 또 다른 이유는 컨테이너입니다 그러나 div는 블록 요소입니다 그래서 당신이 div에 넣는 것은 페이지의 블록 요소처럼 될 것입니다 이것이 div와 span의 기본 사용법입니다 너는 이것들이 많이 사용 된 것을 볼거야

아마 div가 span보다 약간 더 많이 사용된다고 생각합니다 단지 사촌입니다 span을 사용하는 상황은 div보다 좀 더 구체적입니다 일반적으로 HTML과 같이 전체 컨테이너를 정의하는 경우 HTML로 컨테이너를 사용하는 사람들을 볼 때 div와 많은 시간을 사용하기를 원할뿐입니다 그들은 div에 물건을 포장 할거야

div는 블록 요소라는 것을 기억하십시오 그래서 div 안에 들어가는 것은 화면의 전체 너비를 차지할 것입니다 블록 요소이므로 자체가 너비를 차지합니다 이 튜토리얼에서는 HTML로 입력 태그를 사용하는 것에 대해 이야기하고 싶습니다 이제 입력 태그는 기본적으로 페이지에 요소를 추가 할 수있게합니다

사용자가 정보를 입력 할 수있는 곳 그래서 이들은 텍스트 박스 또는 텍스트 영역과 같은 것들입니다 확인란 라디오 버튼을 사용하면 사용자가 정보를 입력하기 위해 상호 작용할 수있는 사이트의 모든 요소를 ​​알 수 있습니다 이제 HTML에서 이러한 요소를 정의 할 때 catch가 있습니다 우리는 실제로 그것들을 기능화하지 않고 있습니다 그래서 내가 HTML로 정의했기 때문에 내 웹 사이트에서 텍스트 상자처럼 정의했다면 텍스트 상자가 있기 때문에 다른 사람이 입력 할 수 있음을 의미하지는 않습니다

정보와 당신은 그걸로 물건을 할 수있을거야 이 텍스트 상자를 통해 사용자로부터 정보를 얻고 싶습니다 JavaScript라는 언어를 사용해야합니다 하지만이 과정의 범위를 벗어납니다 우리는 단지 HTML을 배우려고 노력하고 있습니다

그래서 저는 여러분에게 실제 HTML을 보여줄 것입니다 텍스트 상자 및 텍스트 영역과 같은 요소를 정의하는 데 사용할 수있는 요소 및 그런 다음 원하는 경우 자바 스크립트를 배우고 그로부터 의견을 얻는 방법을 배울 수 있습니다 그래서 여기 아래로 나는 첫 번째 입력과 대부분의 모든 입력을 정의 할 것이다 같은 태그를 사용할거야

그래서이 입력 태그를 사용하여 입력을 말할 수 있고이 입력 태그를 전달해야합니다 HTML 속성 그래서 나는 그것을 줄 필요가있다 우리가 말할 수있는 정보가 무엇인지 말해 줄 필요가 있습니다 입력하고 싶습니다 HTML로 받아 들일 수있는 다양한 입력 유형 목록이 있습니다

하지만 가장 기본적인 것이 텍스트 일뿐입니다 그래서 이것은 기본적으로 우리를위한 텍스트 상자를 만들 것이며 입력은 하나의 태그 그것은 하나의 태그와 같습니다 그래서 우리는 여기서 끝내고 있습니다 다른 태그가 마음에 들지 않습니다 내 페이지를 새로 고침 할 때 다른 끝 태그가 없습니다

우리는이 텍스트 상자가 여기에 있다는 것을 보게 될 것입니다 그리고 저는 실제로 여기에서 원하는 것을 입력하기 만하면됩니다 기능적인 텍스트 상자가 될 것입니다 내가 할 수있는 또 다른 일은 암호를위한 텍스트 상자를 만드는 것입니다 그래서 웹 사이트에서 실제로 일반적으로 사용되는 것은 사용자가 암호를 입력하도록하는 것입니다

할 수있는 일은 실제로 텍스트 상자에 입력되는 텍스트를 숨길 수 있다는 것입니다 그래서 타입 텍스트를 말하기 대신에 타입 패스워드를 말할 수 있습니다 그러면 제가 여기 올 때 어떻게되는지보실 수 있습니다 나는 이 텍스트 상자에 정상적으로 입력 할 수 있지만 여기에 입력하면 이러한 것들을 다룹니다 그래서 지금은 작은 점들과 같아서 거기에 입력 된 내용을 실제로 볼 수 없습니다

그래서 이것은 텍스트 상자에서 입력을 숨기는 HTML과 비슷합니다 우리가 할 수있는 또 다른 일은이 텍스트 상자 안에 기본 내용을 정의하는 것입니다 value 애트리뷰트를 정의하고 이제는 디폴트 값을 정의 할 수있다 너를 입력해라 사용자 이름? 어쩌면 이것은 사용자 이름 프롬프트와 같을 것이고, 이제이 텍스트가 자동으로 포함되어있는 것을 보게 될 것입니다

아무것도하지 않아도 텍스트 상자 안에 이제 저는 또한 a라는 것을 정의 할 수 있습니다 텍스트 영역과 텍스트 영역은 입력과 비슷하지만 하나의 단일 행을 갖는 대신 우리는 텍스트를 추가 할 수있는 거대한 블록을 가질 수 있습니다 따라서 이것은 기술적으로 입력 태그가 아닙니다 자체 태그 유형을 가지고 있기 때문에 방금 호출되었습니다 텍스트 영역과 여기에 우리는 두 개의 태그를 만들 수 있습니다

따라서 닫는 태그가 필요할 것입니다 이 텍스트 영역은 텍스트를 넣을 수있는 큰 것입니다 이 두 블록과는 달리 이 텍스트 영역은 조금 더 크고 우리는 실제로 크기를 조정하여이 텍스트 영역을 가져 와서 제 페이지에서 훨씬 더 커졌습니다 그런 다음 원하는 내용을 입력 할 수 있습니다 그것은 기본적으로 많은 텍스트를 입력 할 수있는 장소가 될 것입니다

텍스트 영역에 대한 일부 속성을 정의 할 수도 있습니다 그래서 여기에 지정된 수의 행이나 열을 줄 수 있습니다 그래서 여기 로즈는 그리고 이제 우리는 아마 우리가 10 열처럼되기를 원할 수 있다고 말할 수 있습니다 우리는 열 행이 추락하고 있다는 것을 기억하십시오 열 및 우리가 이것을 30 개로 만들지 만, 정말 분명합니다 그리고 이제이 텍스트 영역은 그처럼 크게 커질 것입니다

그래서 가로 세로 30 칸, 세로 10 칸입니다 알다시피, 그곳에서 어떻게 작동하는지보고 싶을뿐 아니라 텍스트 이미지의 기본 텍스트도 정의 할 수 있습니다 그래서 이 두 텍스트 영역 태그 안에는 입력 할 수있는 것이 있습니다 ~에 들어가다 단락을 클릭하면 텍스트가 기본적으로 여기에 표시됩니다 그래서 그 부분은 텍스트 영역이며 꽤 재미 있습니다

다른 커플이있어 우리가 볼 수있는 입력 태그가있어서 받아 들일 수있는 다양한 유형의 입력이 있습니다 그리고 저는이 가치를 실제로 제거 할 것입니다 텍스트와 같은 것을 받아들이는 것 외에도 날짜와 같은 것을 받아 들일 수 있습니다 그래서 많은 시간에 당신은 생일이나 어떤 것을 입력하는 것처럼 누군가를 가질 수 있습니다

그리고 당신은 지금 볼 수 있습니다 브라우저는 우리에게이 작은 날짜 입력과 같이 표시하고 있습니다이 작은 달력 위젯을 얻으면이 모양이 달라집니다 다른 브라우저에서 그러나 대부분이 입력 유형을 사용하는 경우 사용자가 입력 할 내용을 제어 할 수 있습니다 그래서 날짜 이외에 우리는 이메일과 전자 메일은 실제로 텍스트 상자와 매우 비슷합니다

우리는 또한 범위처럼 할 수 있습니다 그래서 이것은 숫자의 범위와 같을 수 있습니다 그리고 당신은 우리가이 작은 슬라이더를 여기에서 볼 수 있습니다 우리는 또한 파일을 할 수 있습니다 따라서 사용자가 파일을 업로드하기를 원하는 웹 사이트에서 많은 시간을 보내고 실제로이 파일이 내 작은 파일을 열어 놓는 것을 볼 수 있습니다 브라우저를 클릭하면 열어 볼 수 있으며 파일의 이름을 가져 오는 것이 좋습니다

자바 스크립트 나 다른 프로그래밍 언어가 없다는 것을 알 것입니다 실제로 이러한 파일을 업로드 할 수는 없지만 실제 입력을 제공 할 수 있음을 지적하십시오 이 파일에 대한 프롬프트를 표시하고 다양한 버튼 유형을 정의하여 에이 체크 박스와 여기 우리는 라디오 박스를 정의 할 수있는 작은 상자를 가지고있다 사실, 저는 여러분에게 체크 박스와 라디오 버튼의 차이점을 보여주고 싶습니다

두 개의 확인란이있는 경우 같은 시간에 둘 다 확인할 수 있습니까? 그래, 두 개의 라디오 버튼이 있다면 그리고 그 이름에 속성이라는 이름을 붙이면 라디오 버튼에 이름을 붙여서 말할 수 있습니다 버튼, 우리가 똑같은 이름을 줄거야 한 번에이 라디오 버튼 중 하나를 실제로 클릭 할 수 있습니다 따라서 이름이 같은 경우 한 번에 하나씩 만 클릭 할 수 있습니다 그래서 체크 박스 그래도 같은 이름을 가진 한 라디오 버튼으로 원하는만큼 클릭 할 수 있습니다

한 번에 하나씩 만 확인할 수 있습니다 다른 버튼을 정의하여 제출 버튼처럼 정의 할 수도 있습니다 HTML 폼과 같은 폼이 있다면 사람들이 가지고있는 인기있는 버튼입니다 제출 버튼을 정의하여 제출을 말할 수 있으며 이제 제출을 위해이 작은 버튼을 얻을 것입니다 실제로 이러한 다양한 입력 유형이 있으며 여기에이 웹 페이지가 열려 있습니다

에 대한 웹 페이지입니다 W3schools 및 기본적으로 그냥 HTML에 대한 모든 입력 형식을 정의합니다 그래서 주소는 wz 학교 통신 네 슬래시 ​​태그 s입니다 / att는 밑줄 문자를 밑줄 쳤다 이 좋은 목록이 있습니다 그리고 여러분이 가질 수있는 다양한 유형의 입력을 모두 나열합니다 그래서 당신은 버튼 체크 박스 색 날짜 파일 텍스트 URL과 같은 것을 볼 수 있습니다

정보를 입력하는 데 사용할 수있는 텍스트 상자 나 단추 또는 작은 요소와 같은 유형을 알고 있습니다 HTML에서는 하나 이상의 HTML 요소에 대해 이야기하고 싶습니다 양식이라고 불리는 양식은 기본적으로 이러한 모든 입력을 저장하는 데 사용되는 요소입니다 그래서 일반적으로이 양식 요소를 사용하는 사람들을 보면 퍼팅 할 것입니다 이 입력 태그는 여기 안에 있습니다

따라서 폼은 사용자 입력을 묶는 래퍼와 비슷합니다 전에 항상 사용자로부터 동의 입력을 받기를 원할 때처럼 말하기 전에 HTML 외에도 다른 언어가 필요할 것입니다 일반적으로 양식이 편리 할 것입니다 양식을 사용하면 웹 서버를 좋아할만한 정보를 제공 할 수 있습니다 그러나 지금 당장 걱정할 필요는 없습니다

양식 태그가 많은 시간을 갖고 있다는 사실을 알고 있으면 이러한 다양한 입력에 대한 래퍼 역할을합니다 잘하면 너희들, 너는 그걸로 뭔가 알아 냈어 이러한 다양한 입력 태그에 대해 약간의 소개를 할 수 있습니다 이제 사용자가 웹 사이트의 스타일을 지정하여 사용자가 정보를 입력 할 수 있습니다 이 튜토리얼에서는 iframe을 다음과 같이 사용하는 방법에 대해 설명 할 것입니다

HTML iframe은 실제로 다른 웹 사이트를 표시 할 수있는 HTML 요소입니다 웹 페이지의 내부에서 완전히 다른 웹 사이트를 자신의 웹 페이지에 효과적으로 포함시킬 수 있습니다 매우 멋집니다 따라서 사이트의 어느 곳에서나 iframe 태그를 만들 수 있으며 그것은 바로 그 프레임입니다 그런 다음이 속성을 전달해야합니다

어떤 출처이고 이것은 당신이 퍼 뜨리기를 원하는 웹 사이트와 같을 것입니다 내 경우에는 왜 우리는 초안 아카데미 웹 사이트를 작성하지 않습니까? 과 이 iframe 태그를 닫을 수 있습니다 닫는 iframe 태그가 필요할 것입니다 따라서 여기에 하나의 태그가 필요할 것입니다 이제이 iframe 태그 내부에 일부 텍스트를 넣을 수 있으며이 텍스트는 귀하의 웹 사이트에있는 사용자가 표시 할 텍스트입니다

iframe을 볼 수 없습니다 그래서 iframe을 지원하지 않는 브라우저가 iframe을 지원하지 않습니다 또는 iframe을 볼 수없는 곳에서 일부 옵션을 토글 한 것일 수도 있습니다 기본적으로이 코드는 볼 수없는 경우에 표시됩니다 이제 내가 여기로 향하면이 페이지를 새로 고칠 수 있고이 작은 창 안쪽에 초안 아카데미 홈페이지가 표시되지만 초소형 원하는 경우 여기로 내려와이 iframe의 크기를 조정하여 너비 특성 및 우리는 그것을 천 가지로 만들 것이고 높이 속성을 부여 할 수도 있습니다 그리고 우리는 이것을 800처럼 만들 수 있습니다

이제이 iframe은 훨씬 더 커야합니다 이제 전체 웹 사이트를 볼 수 있습니다 그래서이 웹 사이트는 문자 그대로 내 웹 사이트에 삽입되어 웹 사이트의 모든 다른 페이지로 이동할 수 있습니다 정상적인 웹 사이트처럼 작동하지만 웹 사이트 내부에 있습니다 당신이 할 수있는 또 다른 일은 경계를 제어 할 수 있다는 것입니다

이 iframe을 여기에서 보면, 조금 닮은 것을 볼 수 있습니다 여기 경계선 이 작은 회색 막대와 같습니다 보기 힘들지 만 그걸 없애고 싶다면 우리가 말할 수있는 또 다른 속성이 있습니다 프레임 테두리는 0과 같아서 이제는이 작은 테두리를 제거합니다

따라서 iframe은 웹 사이트 내부에 더 많이 삽입 된 iframe은 정말 훌륭하며 모든 웹 사이트에 iframe을 사용할 수 있습니다 그러나 많은 웹 사이트가 큰 웹 사이트처럼 많은 일을 할 수 있다는 사실은 다른 웹 사이트를 막을 것입니다 웹 사이트가 자신의 웹 사이트를 iframe으로 사용하지 못하게합니다 내가 이걸 만들려고한다면 Amazon과 같은 iframe, 예를 들어 Amazon com 그런 다음 페이지를 새로 고침하면 아무것도 표시되지 않습니다 맞아, 아마존을 iframe으로 사용할 수 없다

그 이유는 웹 사이트가 iframe으로 사용되지 못하도록 설정되어 있기 때문입니다 좋은 이유가 있습니다 나는 그 문제 중 하나 또는 iframe은 누군가 다른 웹 사이트가 다른 웹 사이트로 그 사람의 웹 사이트 그래서 나는 웹 사이트를 만들 수 있고 단지 내 웹 사이트에 아마존의 웹 사이트의 iframe을 가지고 있고 사람들을 속일 수있다 내 웹 사이트를 방문하면 아마존이라고 생각할 것입니다 그래서 그들은 아마존에있을 것입니다

이것은 멋지다 한편, 그들은 내 웹 사이트에 있으며 자신의 데이터를 갖고 싶거나 그들에게 악의적 인 것을하는 것을 알고 있습니다 그래서 이것이 사람들이 iframe을 갖고 싶어하지 않는 이유 중 하나입니다 하지만 내 경우에는 트래픽 Adam e-comm을 좋아하는데, 사람들에게 내가 허락하는 데 아무런 문제가없는 것처럼 그것이 나에게 유용하다 예, iframe의 기본 사항입니다 내가 말했듯이 너도 알지

크기를 조정하여 주변을 이동할 수 있으며 웹 사이트에서 실제로 유용한 기능이 될 수 있습니다 이 튜토리얼에서는 HTML의 메타 태그에 대해 이야기하고자합니다 그래서 내 웹 사이트의 머리에 여기에이 메타 태그가 있다는 것을 보게 될 것입니다 그리고 이것은 일반적으로 대부분의 메타 태그에 포함되는 메타 태그입니다 HTML 및 문자 세트 바로 내 파일의 문자 집합을 지정하는 중입니다

이 메타 태그 이외에 우리는 또한 다른 것을 정의 할 수있다 메타 태그와 메타 태그는 HTML 파일의 헤드에 있으며 헤드는 기본적으로 파일에 대한 정보 또는 파일과 구성이 다른 것과 같은 메타 태그가 사용됩니다 메타 데이터 따라서 메타 데이터는 데이터에 대한 데이터와 유사하므로 메타 태그를 사용하여이 특정 웹 페이지에 대한 정보를 정의 할 수 있습니다 다른 메타 태그 중 일부를 보여 드리겠습니다 사용 방법, 유용한 이유 등을 이야기하겠습니다

새로운 메타 태그를 만들겠습니다 우리는 이것을 이름, 그래서 이름을 알려 주면 전화 할거야 설명이 이렇게 우리의 웹 사이트에 대한 전체 설명처럼 여기에있을거야 나 입력 할거야 콘텐츠가 메타 태그의 콘텐츠가 될 것이므로 여기에 입력 할 수 있습니다

귀하의 설명 및 대부분의 웹 사이트는 설명이있을 것이며 이것은 예를 들어 검색 엔진에서 사용할 수있는 것입니다 귀하의 웹 사이트가 무엇에 관한 것인지 파악할 수 있도록 도와주세요 그래서 당신이 당신의 웹 사이트가하고있는 것에 대한 좋은 설명을 주면 검색 엔진은 그 정보를 거의 페이지가 어디에 있어야하며 페이지 순위와 물건을 좋아하는지, 그리고 사람들이 일반적으로 말하는 것처럼 보이는 일반적인 규칙을 생각해보십시오 설명을위한 백 육십 오 문자는 좋은 종류와 같습니다 음, 설명이 너무 길어서 같은 설명을 200 자로 말하면 대부분의 검색 엔진이 그냥 무시해 버릴 수도 있고, 심지어 당신의 검색 순위와 마찬가지로 당신을 처벌 할 수도 있습니다

설명은 매우 중요합니다 당신이 그것을 간결하게 유지하는지 확인하십시오 우리가 사용할 수있는 또 다른 메타 태그는 저자를 위해 메타 이름을 말할 수 있고 이것은있을거야 저자 그리고 실제로 나는이 태그를 닫지 않았다고 생각합니다 네, 그럼 이것들을 모두 닫을 수 있습니다

그런 다음 다시 콘텐츠를 정의 할 수 있습니다 그래서 이것은 저자가 누구인지 등고선을 정의 할 것입니다 또한 몇 가지 키워드를 정의 할 수 있습니다 그래서 이게 될거야 키워드 및 다시 내용 그래서 쉼표로 구분 된 목록처럼 키워드를 저장할 수 있도록 당신이 말할 수있는 HTML, 알지? 지도 시간 너는 알고있다

교통 아담은 그런 물건을 먹는다 따라서이 긴 키워드 목록을 정의하는 것입니다 그리고 다시, 검색 엔진이 귀하의 사이트를 돕기 위해 그러한 키워드를 사용할 수있는 것처럼 이 키워드 태그가있는 것들 중 하나가 많은 사람들이 그곳에 여러 개의 키워드를 집어 넣고 그들의 페이지를 Google 또는 Yahoo!에서 순위를 얻으세요 인위적으로 이렇게 모든 페이지가 순위가 매겨 지듯이 그 사이에, 그들은 키워드 꼬리표에 인 키워드와 무관했다 그래서 아마도이 시점에서 대부분의 검색 엔진을 생각합니다 키워드 태그를 보면서 신경 쓰지 마세요

그러나 우리가 사용할 수있는 메타 태그와 다른 메타 태그가 있으면 좋을 수 있습니다 그리고 이것은 실제로 매우 중요하며, 이것은 귀하의 웹 사이트가 어떻게 표시되는지를 제어합니다 우리는 이름과 그냥 뷰포트라고 불리는데 여기에는 몇 가지 복잡한 옵션이 있습니다 그래서 우리는 단지 내용을 말할 수 있고 당신은 타이핑하기를 원합니다 기본적으로 그냥 이렇게 우리가 너비와 너비를 정의하는거야

장치 너비 및 그때 머리 글자 척도 10과 동일 따라서 HTML 파일을 볼 때 HTML 파일에서 볼 수있는 무언가입니다 기본적으로 HTML 파일은 컨트롤입니다 당신은 어떠한가요 웹 사이트가 다른 기기에 표시됩니다 그래서 여기에 여기가 없으면 모바일 장치처럼 웹 사이트를 보러갔습니다

그런 다음 웹 사이트는 데스크톱에서와 같이 표시됩니다 그래서 정말 축소되고 정말로 멀리 떨어져있는 것처럼 보이고 많은 사람들이 자신의 웹 사이트를 디자인 할 것입니다 모바일에서 실제로보기 이 라인업을 여기에 포함시키지 않았다면이 웹 사이트를 모바일 장치에서 실제로보기 좋게 디자인 한 것과 같습니다 그 다음에 휴대 기기에서 웹 사이트를 표시하는 경우 해당 휴대 기기에 웹 사이트가 표시되지 않습니다 데스크톱은 실제로 축소 된 것처럼 보이기 때문에 좋지 않습니다

따라서 장치 너비와 같이 너비를 정의합니다 그래서 그것을보고있는 현재의 장치는 HTML이 스크린의 크기와 비슷한 종류가되도록합니다 그래서 이것은 또 다른 중요한 메타 태그입니다 그래서 이것들은 기본적인 것들입니다 귀하의 웹 사이트에서 사용할 수있는 메타 태그가 있으며, Google 검색 및 일종의 검색을 더 할 수있는 몇 가지 방법이 있습니다 가능한 모든 메타 태그와 마찬가지로 하지만 4 ~ 5 개의 메타 태그가 웹 사이트에서 가장 많이 사용되고 가장 중요하다고 생각합니다

이봐 요, 고마워 동영상을 즐긴 경우 좋아요를 남겨주세요

MAGAZINE LAYOUT IN ADOBE INDESIGN TUTORIAL – PHOTOSHOP & INDESIGN – Adobe InDesign Tutorial

오늘 나는 주위에 기초한 튜토리얼을 가지고있다 Adobe InDesign의 잡지 레이아웃 오는 인쇄 및 웹보기 용 바로 지금 어때 사람들은 어서 오세요? 그래픽을 저장하십시오

잘 지내기를 바랍니다 오늘 나는 6 명의 머리에서 움직여야했다 한 주에 간단히 말해서 업로드를 최대 5 회까지 6 일 동안 알맞은 콘텐츠를 만들 수 없다 일주일 거기 그래픽 디자이너 인하는 동안 낮에는 시간이 충분하지 않아서 언제든지 내가 가지 않을거야 오늘 토요일과 일요일에 떠 다니는 그러나 다른 가입자 덕분에 우리가 봤던 제안

기본 레이아웃 및 내보내기로 설계되었습니다 잡지를 사용하는 경우 긴 튜토리얼과 나는 나의 많은 것을 안다 구독자는 할 수 없을 가능성이 큽니다 우리가 자주 디자인 할 수있는 것을 사용하되 좋아한다 다양한 범위의 이 채널의 그래픽 디자인은 당신은 어도비 InDesign의 팬이 아니야

나는 더 많은 일러스트 레이터와 포토샵 튜토리얼뿐만 아니라 많이 파이프 라인에 더 많은 목록이 있습니다 원하는 경우 구석에 시간이 멈 춥니 다 이 튜토리얼의 특정 부분을 참조하십시오 이 튜토리얼이 도움이된다는 사실을 알게되었습니다 아래의 댓글 섹션에서 당신이하지 않은 보안 그래픽을 구독하십시오

이미 앉아서 레이아웃 완료 잡지 / 웹 사용은 천천히 당신이 다른 때 절판하고 선택할 수있는 문서 만들기 웹 사용을 위해 여기에서 생성하십시오 그러나 가장 최근의 웹처럼 설명에 게시 링크 아래에서 프린트 문서를 사용하고 이 잡지의 다음 이유를보아야합니다 나는 지불 할 전형적인 포드를 사용한다 이 경우 여러 연령대로 퍼뜨렸다 인쇄 프로젝트는 나중에 보게 될 것입니다

InDesign 자습서에서 나는 단지 디자인 저는 포토샵에서 일하면서 InDesign에서 텍스트를로드하고로드합니다 이것은 웹보기를위한 것이므로 보는 것은 아닙니다 본문에 대해 걱정해야한다 화면이 흐릿하게 인쇄 됨 리를 사용하여 그것을 염두에두고 만들었습니다 Photoshop의 모든 항목과 전송 된 항목 InDesign에 넘기는 파일 나는 a3 풍경을 만들었을뿐입니다

포토샵에서 300 PPI의 문서 그 다음에 반으로 나눠 줘 내가 한 번 잡지 페이지 크림에 나는 여기에서 일할 수 있었다 잡지 왼쪽 섹션보기 왼쪽 페이지와 오른쪽 보호가 한 번 행복했던 오른쪽 페이지 JPEG로 개별 저장 makanan 디자인 및 상자 도구 사용 파일로 이동하여 내 파일 배치 그 자리에 우리는 웹용 잡지를 내보내고 있습니다 너는 몇 가지 다른 선택이있다 당신이 뭘하고 싶은지에 따라 예를 들어 SWF 파일에는 h2가 있습니다

Sarah와 같은 애니메이션 그러나이 잡지의 클라이언트 대화 형 PDF 버전을 사용하고 싶었습니다 스프레드를 선택하고 모두 JPEG 손실 설정뿐 아니라 나를 위해 잘 작동하는 최대 알파 에있는 링크에서 잡지를 계산했습니다 아래에서 설명 할 내용은 다음과 같습니다 인쇄용 잡지를 만드는 방법 Adobe 조금 더 상세한 InDesign 이제 심층적으로 잡지 레이아웃 용 InDesign 문서 인쇄물은 파일로 이동하고 우리가 분명히 필요로하는 인쇄용 문서 인쇄 옵션을 선택하려면 여기를 클릭하십시오 너가 적합 할 필요가있는 페이지의 수 그러나 당신이되고 싶은 많은 페이지들 잡지는 또한 앞뒤 페이지 삭제를 추가 할 수 있습니다

페이지의 후기 단계에서 쉽게 각 개인의 크기로 넣을 수있다 4 페이지로 나갈거야 오늘과 오리엔테이션에서 나는 가로로 배치하거나 네 개의 열을 묘사 나는 종종 3 권이나 잡지사를 사용하지만 어떤 사람들은 2 개 또는 심지어는 4 개의 열은 완전히 디자이너를 사용하고 싶다면 추가되는 3mm 블리드 전체 문서 주변 측정 값이 9 밀리미터라면 리비아 디자인을 닫아야합니다 다시 열어 맨 위에있는 InDesign으로 이동하십시오 왼쪽 모서리 환경 설정 및 다음 측정 및 증분 InDesign 잡지 문서가 생성되었습니다

그것은 다음과 같이 보일 것입니다 안내하는 페이지의 줄 그들은 인쇄하지 않을거야 그래서 추가 못생긴 페이지는 레이아웃으로 이동 한 다음 여기에서 귀하의 옵션 잡지 디자인에 대한 내 방법 사용 print 나는 CD를 만들 것이다 Photoshop을 사용하거나 이전에 아트 워크를 릴리스하십시오 유형이 아닌 것은 무엇이든 추천합니다 탱크를 추가하려는 로고 및 로고를 Adobe InDesign에 직접 넣으십시오

그때 옛날 품질과하지 픽셀 화되고 인쇄된다 포토샵 나는 a3 문서를 만든 다음 우리는 그것을 90도 회전시킬 것입니다 조경 사건 나는 우리의 300 PPI를 생성했다 그런 다음 가이드를 중간에 추가합니다 하나씩 두 부분으로 나누어 라 VNA 용 그런 다음 가장자리에 가이드를 추가합니다

문서를 6 밀리미터 늘리십시오 각각을 보상 해 줄 것입니다 Adobe InDesign에서 3mm 블리드 프린터의 중앙 집중식 출혈 그들은 외부의 모든 것을 잘라 냈다 주요 콘텐츠 및 출혈 일단 행복하고 나서 각각 자른거야 그들을 평평하게하고 개별 JPEG로 네이티브 InDesign이 상자를 만듭니다

페이지를 가로 질러 이렇게 다음에 가라 제자리에있는 파일 KO 파일 및 그것을 떨어 뜨려 그것에 맞게 그렇게 완벽하게 이 아이콘이 보일 때까지 기다려라 상자 리드 이미지를 복제하려면 여기 다른 쪽 상자 안에 이제 텍스트를 추가 할 수 있습니다 상자 도구를 사용하여 이미지 및 로고 파일 가져 오기 모든 텍스트를 선택하고 너의 앞에 선을 만들기 위해 올라 가라 다른 방법으로 인쇄하려면 파일을 보내십시오

그대로두고 그것을 포장 할 수 있습니다 Adobe InDesign과 함께 글꼴 파일 파일을 내보내거나 인쇄 할 문서 선택한 Adobe PDF 인쇄 및 그런 다음 OK를 누르면 최신 버전 사용 애크로뱃과 이것들은 설정입니다 이 창에서 사용할 압축 나는이 설정을 여기에서 사용한다 고품질 친구를 위해 내가 선택한 자르기 표시를위한 모든 단일 옵션 여기 당신과 이야기하는 것이 가장 좋습니다 이전에 인쇄 회사에있을 수도 있습니다

특정 향수 설정 또는 인쇄 요약 섹션 (있는 경우) 잡지 문서에 관한 경고 완료되면 여기에 표시됩니다 내보내기 및 미리보기가 있어야합니다 그것은 어도비 아크로뱃에서 열립니다 그래서 어떻게 프로모션을 했니? Adobe에서 잡지 레이아웃 만들기 InDesign이 도움이된다면 알려주십시오 아래의 댓글 섹션과 같은 것을 삭제하십시오 이야기 구독하기

내 5 개의 업로드 동영상 중 그래픽이 모두 사라졌습니다 주당 및 다음 번에 디자인 할 때까지 오늘의 특징은

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에서 사냥꾼이다 그리고 나는 다음에 너를 볼거야!

Double Exposure Effect – Photoshop Tutorial

안녕하십니까? 오늘의 비디오에서 이 이중 노출 효과 이미지를 어떻게 만들 었는지 보여 드리겠습니다 여기에서 볼 수있는 어도비 포토샵 사용 좋아, 환상 그래서! IT에합시다! 좋아, 나는 어도비 포토샵을 열어 보겠습니다

내가 사용할 이미지를 가져다가 여기서 열어서 이제 모델을 선택해야합니다 그래서 빠른 선택 도구를 선택하겠습니다 모델 인물을 빠르게 선택하겠습니다 이렇게 그런 다음 빠른 선택을하는 동안 마우스 오른쪽 버튼을 클릭하여 깃털을 선택합니다 여기에 0

5px 깃털을 넣을거야 OK를 누릅니다 좋아, 이제 모델 이미지를 선택하고 CTRL + J를 누를 것이다 이제 새로운 레이어에 추가했습니다 나는 그것을 모델명으로 삼을 것이다

여기에서 이걸 지우겠습니다 좋아, 지금이 이미지의 배경을 더 크게 만들고 우리가 효과를 낼 수있는 충분한 공간을 갖길 원해 그래서 자르기 도구를 선택하겠습니다 여기에서 조금 더 확장 해 보겠습니다 여기도 이 체크 표시를 클릭하여 변경 사항을 적용합니다

좋아, 이제 여기서 조정할거야 솔리드 컬러를 선택하겠습니다 지금은 흰색을 유지하고 OK를 누르면됩니다 나는 그것을 가지고 모델 레이어 아래에 놓을 것이다 배경에 BG로 이름을 지정하겠습니다

좋아, 이제 모델 레이어를 선택하겠습니다 여기는 채도가 없으므로 CTRL + SHIFT + U를 누를 것입니다 또는 다음으로 갈 수 있습니다 : Image, Adjustment and Desaturate 이제, 내가 사용할 두 번째 이미지를 열어 보겠습니다 내가 가져 가서 새 탭에서 열고 여기에있는 다른 탭으로 드래그하겠습니다 나는 그것을 Mountain이라고 부를 것입니다

불투명도를 50 % 정도로 변경하겠습니다 이렇게하면 작업을 시작하기 전에 교체 할 위치를 볼 수 있습니다 이제 이 구름들이 다른 방향으로 있기를 원합니다 그래서 나는 CTRL + T를 누를 것이다 그런 다음 마우스 오른쪽 버튼을 클릭하고 가로로 뒤집기를 선택합니다

이제 나는 내가 원하는 곳에 구름이있습니다 또한 나는이 꼭대기에있는 산 꼭대기를 여기에두고 싶다 그래서 나는 이미지를 더 크게 만들기 위해 shift와 drag를 누를 것이다 그리고 내가 원하는 곳에 이미지를 대치하겠습니다 이 체크 표시를 한 번 클릭하겠습니다

불투명도를 다시 100 %로 변경하겠습니다 이제 모델 레이어를 선택하겠습니다 CTRL을 누르고 모델을 선택하기 위해 그것을 클릭합니다 이제 산 레이어를 선택하겠습니다 그런 다음이 레이어 마스크 아이콘을 한 번 클릭하겠습니다

당신이 볼 수 있듯이 이것은 모델의 실루엣을 생성 할 것입니다 좋아요, 이제이 모델 레이어의 복사본을 만들겠습니다 그래서 나는 ALT를 눌러 사본을 만들어 그것을 산 레이어 위에 올려 놓을 것입니다 Blending 모드를 Lighten으로 변경하겠습니다 우리는 여기에 멋진 효과를 얻을거야

하지만 나는 그것의 불투명도를 약 50 % 이제 레이어 마스크를 적용 해 보겠습니다 그래서 나는 가서이 레이어 마스크 아이콘을 한 번 클릭 할 것이다 여기서 레이어 마스크를 선택하겠습니다 그런 다음 브러시 도구를 선택하겠습니다 불투명도 40 % 검은 색은 내 전경색입니다

이 영역에서 삭제를 시작하겠습니다 좋아, 이제 산 레이어를 선택하겠습니다 그리고 내가 그 레이어 마스크에 있는지 확인하겠습니다 모델의 얼굴을 나타 내기 위해 여기에서 삭제를 시작하겠습니다 좋아요

이제 BG 레이어를 선택하겠습니다 나는 그것을 두 번 클릭하겠습니다 여기에서 색상을 샘플로 채 웁니다 확인을 누릅니다 이제 산 레이어를 선택하겠습니다

CTRL + J를 눌러 복제합니다 레이어 마스크를 가져다가 삭제하겠습니다 나는 그것을 혼합하여 Lighten에 바꿀 것이다 그리고 당신이 볼 수 있듯이 이것은 구름과 함께 멋진 효과를 창출 할 것입니다 이미지에서 볼 수있는 다른 부분이 아직 있습니다

그래서 블랙 레이어 마스크를 적용 해 보겠습니다 내 키보드에서 ALT를 누르고이 레이어 마스크 아이콘을 한 번 클릭하면 이제 내 브러쉬를 선택하겠습니다 내 전경색으로 흰색으로 구름의이 부분 만 볼 수 있도록 여기에서 솔질하기 시작합니다 좋아, 이제이 상단 레이어를 선택하겠습니다 조정하고 단색을 선택하겠습니다

나는 부드러운 핑크색을 고를거야 나는 Ok를 누를거야 블렌딩 모드를 곱하기로 바꿀 것입니다 불투명도를 약 20 %로 설정하겠습니다 이제 스탬프 표시 레이어를 만들겠습니다

그래서 나는 ALT + CTRL + SHIFT + E를 누를 것이다 나는 그것을 desaturate거야 그래서 나는 갈 것이다 : Image, Adjustment and Desaturate 블렌딩 모드를 Soft Light로 바꿀 것입니다 불투명도를 약 30 % 그리고 그게 다야 이 튜토리얼을 마음껏 즐기 셨으면 좋겠습니다 그리고 그것은 당신에게 조금 도움이되었습니다 구독 및 의견을 잊지 마세요

그것을 엄지 손가락으로 보여주고 공유하십시오 더 많은 튜토리얼이 올 때까지 기다린다 사실 다음 튜토리얼에서 여기서 내가 볼 수있는 다른 이중 노출 이미지를 어떻게 만들었는지 보여 드리겠습니다 다 좋아 시청 해주셔서 감사합니다 좋은 하루 되세요

[자막ON] [Coding Tutorial] 햄버거 버튼 만들기 Part3 (CSS 디자인, 제이쿼리)

HTML 구조를 <div class="mobile-btn"></div> 요렇게만 해도 만들 수 있어요 하지만 햄버거 버튼만 만들게 아니고 실전에서는 펼쳐지는 메뉴도 만들어야 하니까 <span>을 사용해서 만듭니다

[영어공부] (동사) inherit 물려받다, 유전되다, 상속하다 우리는 부모님들한테 상속받은게 거의 없지만 그래도 하고 싶은거 하면서 재밌게 열심히 살아봅시다~!! 인라인 요소 : 크기가 못 가져요 위아래 마진 못 가져요 그래서 display 속성을 block 또는 inline-block으로 변경해야 합니다 너무 너무 중요합니다~!!!! [영어공부] transparent 투명한, 속보이는, 솔직한 배경색상의 값으로 transparent를 사용할 수 있습니다 none을 사용하면 안됩니다

왜? none은 색상값이 아니니까요~ background-color: transparent 대신에 opacity: 0 로 해보세요 문제가 생깁니다 한번 해보세요 CSS 실력이 좋으면 제이쿼리 실력의 기본은 충분히 빨리 익힐 수 있습니다 CSS first~!!! cursor: pointer를

mobile-btn span에 넣어 보세요 작동은 되나 뭔가 이상한 점을 발견하실 거에요 어떤 현상이 일어나는지 확인하신 분은 댓글로 알려주세요 영상 함께 보시는 분들과 팁을 공유해요~ㅎㅎ 수고하셨습니다~!! 지금은 미래 비전이 불투명해서 불안하시겠지만 제 영상의 프론트엔드 퍼블리싱을 공부하시는건 앞으로 먹고 사는데 꽤 경쟁력 있는 스킬을 가지시는 겁니다 밥 잘 챙겨 드시고 화이팅~!!