5 MIN TUTORIAL – Responsive Web Design – SIMPLE EASY

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

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

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

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

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

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

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

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

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

Sketch Tutorial Web Design: Team Page Design Concept

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

그렇지?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Leaned Single-Arm Lateral Raise (Exercise Tutorial) // Fitness Penpal

[기울어 진 단일 암 (single-arm) 경사 벤치의 뒤쪽을 똑바로 세워서 한 개 또는 두 개의 노치를 조정 한 다음 시트는 직각을 형성한다 벤치와 팔 위쪽에 또는 뒤쪽으로 너의 옆에 누워

덤벨을 단단히 잡고, 약간의 팔꿈치를 구부리고 빠른 측면 운동을 시작하십시오 어깨 관절의 통제하에 체중을 낮추고 reps에 대해 반복하십시오 이것은 강조하는 좋은 움직임입니다 삼각형의 내측 머리와 때때로 발생하는 운동량의 사용을 막는다

서 측면 측면

Learn Html Beginner’s Guide-How to Nest List Elements in Html-Web Design and Development Tutorial

이제 여기에서 보았던 목록 요소 중첩에 집중 해 보겠습니다 이 '프런트 엔드'목록 항목처럼이 항목은 'html', 'css', 'css3', 'html5'로 세분됩니다

첫 번째 주문 목록 인 '프런트 엔드'이며 두 번째 주문 목록입니다 또는 'Responsive'의 경우에 당신은 그것이 이제 세분되어 있음을보고 있습니다, 'Responsive'는 첫 번째 주문 목록 항목 및 'Bootstrap', 'Foundation'등은 두 번째 주문 목록입니다

목 그리고 '백 엔드'가 첫 번째 주문 목록 항목이고 'php'인 경우 'mysql' 그것들은 2 차 목록 항목이고,이 부분에서도이 것들이 뒤 따른다 이것은 첫 번째 순서 목록 요소 인 '디자인'이며 'Photoshop', 'Illustrator', 그것들은 2 차 하위 또는 2 차 목록 항목입니다 즉, 우리는 목록을 중첩합니다 즉, 다른 목록에 목록을 주입합니다

그래서, 그 일을하는 방법, 그 '목록 요소의 중첩'을하는 방법? 그래서 우리는 이제 보러 갈거야 이제이 경우 <ol> 유형과 마찬가지로 <ol>은 Ordered List, Ordered list의 경우, 여기에서 "Front End"에서 보았습니다 4 개의 목록 항목입니다 그래서 이제 여기에 이걸 주입해야합니다 우리가해야 할 모든 것 이 '프론트 엔드'요소 뒤에 다른 목록 항목을 추가해야하며 것은 순서가없는 목록이었다 글 머리 기호로 된 텍스트 형식을 볼 수 있습니까? 그것들은 채워진 원들입니다 우리가 여기에서 채점 한 채워진 서클들, 그래서 이것은 이것이 순서가없는 목록이라는 것을 의미합니다 순서가 지정된 목록에 나타나는 목록은 순서가 지정되지 않은 목록입니다

그래서 우리 모두 이 순서 목록 항목에 정렬되지 않은 목록이 있어야합니다 그래서 여기에 정렬되지 않은 목록 내가 여기서하고있는 것은이 것을 복사하고 붙여 넣는 것이다 이제 이것이 HTML 항목, CSS 항목, 이것이 CSS3 항목이며 이것은 HTML5 요소입니다 그리고 'Responsiveness'의 경우, 이제 우리는 똑같은 것이 여기에 있다는 것을 알게 될 것입니다

그래서 우리가 할 일은이 부분을 복사하여이 'Responsive'항목 뒤에 붙여 넣는 것입니다 그래서 나는 'CTRL + V'를 눌러 단축키로 항목을 붙여 넣기 만하면됩니다 처음 두 가지 옵션을 변경하고 있습니다 불필요한 것들을 지켜보십시오 필요하지 않으므로 삭제하는 중입니다 여기에서도 같은 일이 일어납니다 우리가해야 할 모든 것 먼저이 것을 재배치하는 것이고,이 백엔드 목록 항목 이후에 우리는 이것을 누를 것입니다

'CTRL + V'를 다시 붙여 붙여 여기에 순서없는 목록을 소개합니다 우리는 여기서 'php', 'MySql'을 작성합니다 필요하지 않은 나머지 두 가지 그 일은 잘립니다 그리고 마지막 부분 인이 '디자인'부분도 똑같은 일이 일어났습니다 여기, 'CTRL + V', 포토샵, 일러스트 레이터를 눌러주세요

그것들을 소개하고, 그 다음 우리는이 두 항목의 나머지 부분을 '디자인' 분절 이제 우리가 여기서하고있는 일은 우리가 파일을 만들고 저장하는 것입니다 우리가 인터넷 브라우저로 가서 페이지를 다시로드 할 때, 우리는 Microsoft와 다른 점은 무엇입니까? 우선, 이것은 번호 매기기 목록 1,2,3,4 이고 글 머리 기호 버전이있는 정렬되지 않은 목록입니다 번호가 지정된 순차 목록입니다 텍스트 및 글 머리 기호 버전으로 정렬되지 않은 목록입니다 우리가해야 할 일은 변화시켜야합니다 기본값

그래서 우리는 이것을 요구하지 않을 것입니다 <ol type = "A"> 여기, 우리는 가지고 있지 않습니다 실제로이 경우에이 유형을 언급하기 위해 여기에 기본적인 것을 사용하고 있습니다 여기에 어떤 유형도 언급 할 필요는 없으므로 우리가하는 모든 작업을 기본값으로 사용하고 있습니다 항목을 여기에 나열하고 기본 번호 매기기 형식을 지정한 다음 '파일', '저장'으로 이동하십시오

이동 인터넷 브라우저, 다시로드하고 번호가 매겨진 목록이 변경되었음을 알 수 있습니다 알파벳에서 번호 매기기 형식으로 비트는 여전히 문제가 있습니다 이제 동그라미 부분이므로 제거해야하는 모든 것 우리가이 목록에 도입 한 정렬되지 않은 목록의 '서클 유형' 그래서, 우리가 코드로 돌아갈 필요가 있고 우리가 여기서 한 일을 볼 때 우리는 언급해야합니다

this, <ul type = "disc"> 비슷한 항목이 현재 항목을 나열하기 위해 이월됩니다 여기 'CTRL + S'를 누르거나 '파일', '저장', 브라우저로 이동, 다시로드 여기서 똑같은 것을 볼 수 있습니다 여기는이 순서 목록입니다

이것은 여기에 넘버링 된 포맷이고, 이것은 디스크 타입을 가진 정렬되지 않은리스트이며, 그리고 여기까지 그래서 이것이 목록 요소의 중첩이라고합니다 그래서 모두 당신은 주문 목록에 정렬되지 않은 목록을 소개하고 있습니다 이처럼, 너 html 부분을 쪼개고 싶은 경우 여기에 원하는 수의 목록 항목을 생성 할 수 있습니다 더 세분화 된 목록 항목, 즉 다른 목록 항목을 내부에 도입하고 있음을 의미합니다 이 'Html'부분 또는이 'Bootstrap'부분 또는 'Foundation'부분의 내용 우리는 그것을 가져올 수도 있고 아니면 여러 번 앞으로 나갈 수도 있습니다

그래서 친구, 이것은 html 요소의 목록으로 알려져 있으며 이것은 실제로 Nesting으로 알려져 있습니다 목록 요소의 이 튜토리얼을 보아 주셔서 감사 드리며 다음 튜토리얼에서 HTML 요소의 테이블에 대해 논의하고 있어야합니다 고맙습니다…

Photoshop Tutorial Web Design Simple Banner

먼저 새 문서를 만듭니다 (Ctrl + N) 전경색에 색상 코드 7e7e7e 설정 그림판 도구를 사용하십시오

클릭하여 색상 제공 속도가 너무 빠르면 025 또는 05로 속도를 선택할 수 있습니다 전경색으로 색상 변경 보기>보기> 격자로 이동하십시오 그리드는 그래픽 디자인을위한 완벽한 정렬 도구입니다

사각형 도구로 사각형 상자 만들기 클릭하여 드래그하여 도형을 만듭니다 [스타일] 메뉴에서 [그라디언트 오버레이]를 선택합니다 전경색 흰색으로 설정합니다 브러쉬 도구 사용 (B) 레이어 썸네일 (도형 1)을 Ctrl + 클릭하여 선택 영역을 만들고 새 레이어 만들기 Elliptical Marquee Tool 사용 페인트 통 도구를 사용하고 원 선택을 클릭하십시오 레이어 1에서 레이어 2 이동 그런 다음 혼합 모드를 오버레이로 변경하십시오

블렌딩 모드를 오버레이로 변경하십시오 배경 위에 새 레이어 만들기 어두운 색을 전경 색으로 변경하십시오 브러쉬 도구를 사용하여 그림자 만들기 크기를 조정하려면 Ctrl + T를 누릅니다 복제 레이어 (Ctrl + J) Horizontal Type 텍스트를 추가하는 도구 새 레이어를 만듭니다

전경색을 흰색으로 설정하십시오 브러시 도구를 사용하여 빛 만들기 크기를 조정하려면 Ctrl + T를 누릅니다 Ctrl + 클릭하여 레이어 썸네일 (모양 1)을 클릭하여 선택 항목을 만듭니다

Web Design and Development Tutorial for Beginners – Basic Html – Changing Background and Font Color

이제 Html의 경우 중요한 또 다른 항목 인 table으로 진행할 수 있습니다 그럼, 테이블이 뭐지? 형태? 테이블은 실제로 데이터를 저장하는 데 사용되거나 통계를 유지 보수하는 데 사용됩니다 보고서

그래서 앞에서 말했듯이, 테이블은 다음과 같은 점에서 매우 중요한 역할을합니다 HTML 요소입니다 그러나 Html의이 테이블 속성으로 이동하기 전에 놀랍습니다, Html에서 흥미로운 것 지금까지 브라우저를 들여다 보면 기본 페이지 색상이 흰색 인 동안 기본 글꼴 색상이 검정색임을 확인하십시오 그래서 지금, 무엇을 변경하고 싶다면이 속성을 변경하고 싶습니까? 그래서, 변화에 대해 생각해 봅시다

이 페이지의 배경색 및 기본 글꼴 색을 지정합니다 몸으로 가서 추가하십시오 'bgcolor'로 알려진 속성 이제 우리가해야 할 일은 재산이 여기에 쓰여졌 기 때문에, 그리고 색깔의 경우에는, 우리가해야 할 모든 것 Photoshop 문서를 열고 Adobe Photoshop으로 이동 한 다음 원하는 곳에서 선택하십시오 이 경우처럼 색상을 선택하면 배경 페이지 색상으로 표시됩니다

이것은 16 진수 형식의 색상 코드입니다 우리가해야할 일은이 코드를 복사하는 것뿐입니다 그런 다음 여기로 와서 해시 태그를 제공하고 복사 한 색상 코드를 붙여 넣습니다 이리 이 색 코드를 얻으려면 Windows 페인트 또는 다른 그림 소프트웨어를 사용할 수 있습니다

이 코드를 복사하여이 상황에서 여기에 배치하면됩니다 이제이 글꼴 색상을 변경하십시오 여기서해야 할 일은 속성이있는 또 다른 태그입니다 이것은 '글꼴 색상'으로 알려져 있습니다 우리가 여기서하는 모든 일 우리는 우리의 페이지에 맞는 글꼴 색을 선택하고 있습니다

우리 밝은 배경을 선택했기 때문에 더 어두운 글꼴 색을 제공해야합니다 그러면 우리가해야 할 일은이 색상 코드를 다시 복사하거나 '확인'을 누르거나 '취소'또는 무엇이든간에 여기에 해시 태그를 제공하고 다음을 사용하여 붙여 넣습니다 'Ctrl + V' 자, 여기에 '글꼴'태그를 열었습니다 그래서 우리가해야 할 일은 여기를 닫는 것뿐입니다

그리고 그것을 어디에서여셨습니까? 당신이 바로 열었습니다 'Body'태그 바로 아래에 있으므로 'body'바로 위에 여기에서 닫아야합니다 그래서 내가 여기에서하고있는 모든 일은 내가 여기있는 '글꼴'을 닫을 것이다 이제 '파일', '저장'을 할 것입니다 이번에는 인터넷 브라우저로 돌아와 다시로드하면 모든 것을 볼 수 있습니다

페이지 색상과 마찬가지로 이제는 할당 한 색상 코드로 변경되어 복사되었습니다 포토샵 문서에서 글꼴 색상뿐만 아니라 변경되었습니다