Responsive web design | css media query | html viewport

이것은 html 웹 페이지입니다 응답하는 이제 내가 어떻게 반응하는지 보여 줄거야

이렇게 더 작은 장치에서 완벽하게 작동합니다 화면 너비 변경시 atomaticalley 변경 요소의 스타일링 이제 스타일 시트에서 미디어 쿼리 코드를 삭제했습니다 이제 기본 스타일로 표시되는 웹 페이지 더 작은 장치에서는 읽을 수 없다 더 작고 더 큰 장치에서 읽을 수 있도록하기 위해 미디어 쿼리를 사용합니다 이제는 휴대 전화 및 안드로이드 기기와 같은 기기에서 읽을 수 있도록 해 드리겠습니다

이것은 태블릿의 화면 크기입니다 ibrowser inspector에서 view-port를 확인할 수도 있습니다 (ctrl + shift + I) 이것은 모바일 화면 너비입니다 이제 코드로 되돌아갑니다 이것은 스타일 시트이다

내가 사용한 수업에 대한 설명은 이전 비디오 링크를 확인하십시오 이제는 미디어 쿼리를 사용하여 더 작은 장치에서 웹 페이지를 읽을 수있게했습니다 미디어 쿼리는 @media 화면으로 시작합니다 최대 또는 최소 미디어 장치 너비 또는 높이 사용을 피하십시오; 값 다음에 표시하다 중괄호 사용 이 중괄호 안의 요소를 정의하기 시작합니다 우선 부모의 모든 너비 설정 집단 내지 100 %; 그런 다음 하위 요소의 스타일을 변경합니다 이제는 평소와 같이 요소를 정의하십시오

지금 이것은 읽을 수있다 사이드 바, 메인 컨텐츠 및 오른쪽 사이드 바 모두 100 % 너비로 설정됩니다 이제 링크, 로고 및 사이트 제목을 정의 할 수 있습니다 헤더 부분에 4 개의 div 엘리먼트가있다 그래서 그것을 읽기가 어렵게 만드는 것은 어렵다

링크 엘리먼트가 바닥에 고정된다

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

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

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

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

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

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

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

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

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

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

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

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

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

Basic HTML for Web Design : Web Design Alt Text

나는 이미지를위한 대체 텍스트에 대해 이야기하기 위해 약간의 시간을 갖고 싶다 그리고 이것들은 정말로 중요하다

많은 브라우저가 사람들이 설정할 수없는 이미지 나 설정을 표시하지 않기 때문에 이미지를 표시하고 이미지에 텍스트가 있으면 그들에게 우리가 바로 여기에이 로고 살펴 보겠습니다 것을 놓칠 수 있기를 원하고 나는이 없습니다 죄송합니다 샘플 로고입니다 이미지 파일과 비슷하지 않습니다 당신이 알고있는보고있는 장애인은 그곳에 이미지가 있다는 것을 볼 수 없었습니다 샘플 로고는 대체 텍스트 또는 대체 텍스트를 추가하려고합니다

그래서 우리는 간다 여기서 이미지가 바로 여기에 jpeg와 같은 샘플을 가진 이미지 소스가 있습니다 그리고 우리 대체 텍스트를 추가하고 싶습니다 그래서 우리는 단어 alt를 문자 alt equals에 입력 한 다음 인용문을 입력합니다 마크를 추가하고 샘플 로고를 추가하고 싶습니다

그래서 그들은 그 이미지가 실제로 샘플이라는 것을 압니다 심벌 마크 그리고 그들이 독서와 같은 것을 가지고 있다면, 당신은 그것을 알고 있습니다 로고와 함께 시작한다고 말할 수있는 페이지가 있습니다 샘플 로고를 입력 한 다음 텍스트로 이동하십시오

그리고 당신은 텍스트가 거기에 있음을 볼 수는 없지만 if 우리는 빈 공간 대신 ​​이미지를 숨기려고했습니다 html 텍스트 샘플 로고

Basic HTML for Web Design : Right & Center Align Horizontal Rules in HTML

이제 수평 규칙을 왼쪽에 정렬하는 방법을 보여 줬습니다 그러나 그것은 정말로 귀하의 웹 페이지의 오른쪽에도 쉽게 할 수 있습니다

유일한 차이점은 해야 할 일은 수평 규칙에서 왼쪽으로 정렬하도록 설정 한 것입니다 왼쪽에서 오른쪽으로 맞 춥니 다 저장하면이 페이지가 새로 고침됩니다 그리고, 이제 보여줍니다 페이지의 오른쪽에있는 여기에 있습니다

이제 기본값으로 되돌리려면 align 속성을 모두 가져 오거나 센터로 정의 할 수 있으므로 알 수 있습니다 중앙 정렬됩니다 그래서 나는 그것을 구할 것이다 나는 그것을 다시 볼 것이고 그것은해야한다 중심에 서십시오

HTML Head element | MTA Web Design Fundamentals | Cardiff Met

head 요소는 웹 페이지에 대한 메타 데이터를 포함합니다 페이지는 표시되지만 웹 페이지 자체에는 표시되지 않습니다

head 요소 내에 title 태그를 추가하는 방법을 이미 살펴 보았습니다 브라우저 제목 표시 줄 또는 탭에 나타나는 제목 다른 두 가지 중요한 head 요소에 포함 된 요소는 링크 및 스크립트입니다 링크가 지정하는 데 사용됩니다 페이지에 사용되어야하는 스타일 시트에 대한 링크 후반부 이 과정은 스타일 시트와 스타일 시트 언어 CSS를 탐구합니다

계단식 스타일 시트 – 자세히 지금은 스타일 시트에 대한 링크를 추가하겠습니다 몇 가지 기본 서식을 제공합니다 link 태그는 두 개의 속성을 필요로합니다 rel은 관계, 여기 그것은 우리가 연결하고있는 스타일 시트이므로, 우리는 "stylesheet"의 속성에 속성을 지정하십시오

다른 필수 속성은 URL입니다 스타일 시트 자체에 우리는 이것을 "href"속성으로 지정합니다 이제이 페이지를 저장하면 스타일 시트를 추가하는 효과를 볼 수 있습니다 여기에 이전이 있고, 여기에 뒤에 있습니다

그래서 우리는 몇 가지 간단한 형식을 배경 스타일을 변경하고 글꼴을 변경했습니다 하지만 우리는 분명히 그것의 외관을 개량하기 위하여 일하는 제비 뽑기 일 링크 요소를 앵커 요소 또는 "a"요소와 혼동해서는 안됩니다 "a"는 하이퍼 링크를 만드는 데 사용되고, link는 스타일 시트에 링크하는 데 사용됩니다 에 대한 예를 들어 "Wales"라는 단어를 Wikipedia for Wales I에 연결하려면 앵커 태그 인 "a"태그를 사용합니다

스크립트는 페이지에 자바 스크립트를 추가하는 데 가장 일반적으로 사용됩니다 자바 스크립트는 웹 페이지를 대화 형으로 만드는 기술 우리는 다루지 않습니다 javascript는이 과정에 있지만 예제로 간단한 스크립트를 추가해 보겠습니다 페이지

스크립트 태그를 열고 간단히 말하면 경고를 표시합니다 "hello world" 그 파일을 저장하면 "hello world"라는 팝업 메시지가 나타납니다 스크립트는 JavaScript 파일을 별도로 연결하는 데 더 일반적으로 사용됩니다 예를 들어 Fotorama라는 스크립트를 사용하여 사진 갤러리를 생성하기도합니다

그래서 나는이 HTML 태그에 스크립트 태그를 포함시킬 것이다 스크립트를 입력 한 다음 SRC를 지정하여 파일의 소스 스크립트는 닫을 때 태그가 필요합니다 JavaScript 파일에 대한 링크를 지정합니다 일부 오래된 브라우저는 지원하지 않을 수 있습니다

JavaScript 또는 사용자가 JavaScript를 비활성화했을 수 있습니다 noscript 태그를 사용할 수 있습니다 스크립트를 사용하지 않는 사용자에게 콘텐츠를 제공합니다 그래서 나는 단지 "당신의 브라우저가 스크립트를 사용할 수 없도록 설정하면 스크립트가이 사진들을 갤러리로 볼 수 있습니다 "그래서 내 브라우저에서 스크립트를 비활성화하십시오

자주하지 않으려 고합니다 텍스트는 noscript 요소에 나타납니다

Basic HTML for Web Design : Setting Fonts in HTML

이제 전체 웹 페이지의 글꼴을 정의하는 것이 매우 쉬울 것입니다 이미 가지고있는 "GO (진행)"버튼에서 내 로고와 일치하는 좋은 산 셰리프를 선택하십시오

과 그래서 나는 나의 페이지의 맨 꼭대기에 여기 올라갈 것이고, 나는 나의 머리글과 나의 이미지를 가지고있다 여기, 나는 첫번째 이미지 다음에, 정말로 첫 번째 텍스트에 이르기를 원한다 이리 그리고 여기에서 필자는 글꼴 서체를 정의 할 것입니다 그래서 나는 여기에 들어가서 할거야

font face = "helvitica, arial", 그리고 나는 페이지의 맨 아래로 갈 것입니다 그 태그를 닫으려고 우리는 / 폰트를 작성하고 저장합니다 그러면 여기를 새로 고칩니다 이미 완료되었습니다

이 모든 본문은 이제 산 세리프가되어 약간 일치합니다 좋아, 그래서 좋아 보인다

Basic HTML for Web Design : Web Design Background Image Creation

이제 웹 사이트에 배경 이미지를 넣기 위해 노력할 것입니다 그러나 우리가 그렇게하기 전에, PhotoShop에서 실제로 배경 이미지를 만들겠습니다

이 기회를 활용하겠습니다 파일 크기와 RGB 스펙트럼 및 기타 필요한 것들에 관해서 이미지를 웹에 업로드하는 동안 명심하십시오 그래서 우리는 시작할 것입니다 나는 새 문서를 만들거야 그것을 백 픽셀로 100 개 만들자

그래서 그건 너비와 높이 그리고 여기서 우리는 결의안을 볼 것입니다 그리고 몇 가지가 있습니다 이미지의 해상도를 확인할 수있는 여러 가지 방법 그러나 웹 사이트의 표준은 1 인치당 72 픽셀 또는 PPI가 있습니다

실제로, 실제로는 매우 작습니다 다른 이미지 파일로 그러나 인터넷에서 볼 수 있기 때문에 실제로는 볼 수 없습니다 텔 그것은 단지 컴퓨터 화면에 있습니다

너도 알다시피, 이걸 인쇄하면된다 모든 것이 고르지 않게 보일 때 픽셀을 볼 수 있습니다 그리고 나서 컬러 모드에서 인쇄용 CNYK와는 대조적으로 RGB가되도록 할 것입니다 과 그레이 스케일이되기를 원한다면 그레이 스케일이 될 수도 있지만, 우리는 단지 할 것입니다 지금 당장 RGB

나는이 파일을 만들고 내 배경 이미지를 말할 것입니다 나는 희미한 노란색 폴카 도트를 원한다고 말할 것입니다 그래서, 그냥 던지기 만 할거야 이게 당신을 위해 정말 빠릅니다 그리고 거기에 노란색 폴카 도트가 있습니다

그거야 내 배경 이미지로

Basic HTML for Web Design : Change Single Text Color in HTML

그래서 우리는 우리의 기본적인 텍스트 색상을 꽤 많이 가지고 있고 우리의 활성 색상과 방문한 링크 및 기타 링크 이제 한 단어 만 바꾸고 싶다고 가정 해 봅시다 단락의 텍스트 색상 그리고 그렇게하기 위해 우리는 들어갈 것입니다 – 그래서 우리는 온 몸을가집니다

텍스트를 검정색으로 설정하면 문서의 모든 텍스트가 표시되지만 그렇지 않습니다 의미심장 한 것이 아닙니다 여기 두 번째 단락에서 두 번째 줄을 말하자 우리는 그 문장을위한 글꼴의 색깔을 바꾸고 싶다 그래서 우리는 여기에 들어가서 윗줄, 꺽쇠 괄호, 글꼴, 공백, 색, 인용 부호 및 글꼴 색상을 입력하십시오

우리는 원한다 ff0033을 한 다음 다른 인용 부호와 꺽쇠 괄호를 사용하겠습니다 그리고 나서 우리가되고 싶은 문장 (붉은 색), 그래서 빨간색 문장 뒤에, 우리는 다른 꺽쇠 괄호를 사용하고, / font로 그 태그를 닫을 것입니다 우리는 간다 그리고 우리는 그것을 살릴 것이고, 우리는 텍스트로 가서 미리 볼 것입니다

그리고 여기 두 번째 단락에서 두 번째 줄에 해당 텍스트가 빨간색으로 변경되었습니다 그리고 너 한 글자, 한 단어 또는 한 번에 단락으로이 작업을 수행 할 수 있습니다 당신이 컨테이너 사이에 가지고있는 것

Basic HTML for Web Design : Removing Image Borders in HTML

이제 우리는 색상과 이미지에 대해 조금 알았습니다 우리는 다시 버튼을 링크로 사용할 때 이전에 만든 버튼 그래픽 텍스트

그리고 기억한다면 주변에 정말 추한 경계가있었습니다 어떤 디자인에서는 괜찮 았지만,이 버튼은 정확하지 않았습니다 그리고 만약 당신이 바로 여기 보이는, 너는 내 단추, 내 링크 색을 분홍색으로 바꿨다 이제 경계선이 버튼이 분홍색으로 변했습니다 그래서, 제가하고 싶은 것은이 링크에 들어가서 그냥 제거하는 것입니다

그 국경의 그리고 우리가 여기에 들어가면 바로 링크 자체에 대한 제 텍스트가 있습니다 링크가있는 AA thref이고 이미지 소스가 있습니다 그리고 우리가 이미지 안에 들어가면 소스 브래킷, 실제 이미지 바로 다음에 border라는 단어를 입력하십시오 과 그것이하는 일은 경계가 얼마나 넓어야 하는지를 알려주는 것입니다

그리고 우리는 0으로 설정하면 테두리가 없어야합니다 그래서 우리는 그것을 구할 것입니다 다시 여기로 들어가서 새로 고침하고 경계선이 사라진 것을 보아라