Basic HTML for Web Design : Transparent Backgrounds in GIF Images

이제 백그라운드 이미지가 생겼으니, 어떻게하면 좋을지, 왜 우리는 이러한 배경에 투명한 gif를 사용해야하는지 그 중 하나만 있기 때문에 투명한 gif를 사용하면 정말 쉽습니다 그리고 이것은 지금 웹 페이지

투명 GIF가 아닙니다 실제로 흰색 바탕에 그것 우리가이 배경색을 회색으로 변경하면 회색이됩니다 CCCCCC 우리는 여기로 가서 새로 고침 할 것입니다

배경색이 변경되었지만 변경할 수 없습니다 당신이 볼 수없는이 바둑판 식 배경 이미지에 실제 흰색이 있기 때문에 그것을보십시오 하지만 거기에 가서 배경 도트 파일을 투명하게 바꾸려면 하나는 내가 만들었습니다 그리고 여기로 다시 들어가서 새로 고침하세요 이제 볼 수 있습니다

둘 다 볼 수 있습니다 배경 타일의 뒤에 회색과 노란색 점 그리고 나는 사과를합니다 정말 못생긴 페이지입니다 어떻게 완료했는지 보여줄뿐입니다

하지만 그건 투명한 gif를 사용하면 실제 배경을 변경할 수 있다는 이점이 있습니다 색상을 문서에 넣으면 파일 자체로 돌아갈 필요가 없습니다 PhotoShop에서 변경하십시오

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

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

Basic HTML for Web Design : Set Background Colors in Web Design

이제 배경색을 추가 할 예정입니다 따라서 로고가 변경되었습니다

색깔이있는 로고로 작업하고 있거나, 색깔이있는 배경으로 로고를 사용하고 있습니다 그래서 우리는이 종류의 파란 – 녹색과 일치하도록 배경색을 변경하고자한다고 가정 해 봅시다 나는 거기에있다 그래서 우리는 들어간다 우리는 몸을 가지고있다

텍스트 색상을 다음과 같이 설정했습니다 지금 당장은 검은 색이고, 그 다음에 들어가기를 원한다 BG 글자를 추가합니다 배경색, 다른 것과 같음, 따옴표 및 이 코드가 있어야하는 16 진수 코드는 B6A7입니다 그게 아니야

잘못했다 그것은 A7A37B입니다 나는 여전히 옳지 않다 알았어 A7A37B, 좋아, 그리고 끝

인용문, 거기에 우리가 간다 우리는 그것을 구하고, 여기에 와서 재충전을 할 것입니다 그건 틀린 색이지만, 배경을 바꾸 었다는 것을 알 수 있습니다 색깔 나는 방금 잘못된 코드를 적어 두었다고 생각한다

나는 이것이 실제로 생각된다고 생각한다 B 대신에 E가되자 해보자 아니, 더 좋지는 않지만 배경을 바꿨다 색상, 나는 앞으로 가서 그것을 찾아서 고칠 것입니다

이 작업을 수행 할 수있는 또 다른 방법이 있습니다 아마도 훨씬 쉬울 것입니다 나중에 살펴 보도록하겠습니다하지만 투명하게 만들면됩니다 gif가 배경색 위에 떠있게됩니다

Basic HTML for Web Design : Justified Paragraphs in HTML

이제 p-align 기능을 사용하여 텍스트를 정당화 할 수 있습니다 그리고 내가 할 일은 당신이 실제로 우리가하고있는 것을 볼 수 있도록 우리 단락의 쇠고기 종류에

하지만 여기에 들어가서 p-align을 할 수 있습니다 왼쪽, 오른쪽 또는 가운데와 반대로 우리는 justify를 입력하십시오 그리고 저는 이것을 계속하고 싶습니다 나는 끝 태그를 벗을거야 만약 나는이 두 단락에 끝 태그를 사용한다

이 세 단락 모두를 정당화 할 것이다 함께 그래서 우리는 그것을 구할 것입니다 이리 와서 새로 고침 그리고 오, 마치 그 것처럼 보입니다

정당하지 않다 그래서 제가 할 일은 p-align을 수행하는 것입니다 시원한 신이 옳다고 하다 그 단락에서

그리고 나도 이것에 던져 버릴거야 재미있을뿐입니다 저장하고 새로 고침을 계속하십시오 이리 이제 그들은 모두 정당화되었습니다

그리고 좋은 점은, 바로 그것이 가장자리 그러나 원하는 경우 넓게 만들 수 있습니다 원한다면 초소형으로 만들 수도 있습니다 텍스트 보상을 위해 움직인다

Basic HTML for Web Design : Web Design Script for Text Color

이제 우리는 색상에 대해 텍스트에 색상을 추가하는 방법을 배울 것입니다 우리는 우리의 웹 사이트로 되돌아 가자

우리가이 텍스트를 바로 여기 있다고 가정 해 봅시다 검은 색 대신에 갈색으로, 단락 본문으로 들어가서 몸으로 들어가서 이것이 진행됩니다 본문 캡션 내의 모든 텍스트가되도록 시체 받침대 안에 들어가서 글자 뒤에 등호, 괄호, 숫자 뒤에 "text"라는 단어를 입력하십시오 기호를 입력 한 다음 16 진수 코드에 대해 "666600"을 말한 다음 다른 끝괄을 말한 다음 우리는 그것을 구할 것이다 여기 새로 고침을하면 텍스트가 보입니다

눈에 띄지 않습니다 변화하지만 검은 색에서 갈색으로 변했고 여기서 다시 들어갈 수있었습니다 그냥 "000000"검은 다시 텍스트를 변경하십시오 저장하십시오 여기로 가서 새로 고침해라

그곳에는 검은 색으로 돌아 왔습니다

Deconstructing a Flexbox Layout Quiz – Responsive Web Design Fundamentals

여기 또 다른 도전이 있습니다 표시되는 레이아웃은 Flexbox를 사용하여 만듭니다

화면에 표시되는 모든 다른 색상 요소의 경우, 프레젠테이션 작성 이 레이아웃을 만드는 데 필요한 요소를 정렬합니다 나는 당신에게 첫 번째 요소를 보여줄 것이다 밝은 녹색 상자를 가린다 위는 뷰 윈도우의 전체 너비이므로 100 % 보이게됩니다 이것은 일반적인 것으로 보일 수 있습니다

탐색 막대는 페이지 상단에 나타납니다 그래서 저는 그것을 0으로 분류 할 것입니다 이제 계속하고 나머지는 채워야합니다

Basic HTML for Web Design : HTML Tables Without Borders

이제 저는 테두리를 꺼내서 블록 사이에 공백을 넣을 것입니다 테이블 행 자체

그리고 이것은 그냥 떠 다니는 사각형처럼 보일 것입니다 흰색 배경입니다 그리고 나는 그것이 정말 좋기 때문에이 초록색을 유지할 것입니다 그래서 제가 할 일은 저의 탁자에있는 배경색을이 초록색으로 바꾸는 것입니다 ccffcc

당연히 나는 동등한 인용문 번호가 필요하다 나 자신보다 앞서 뛰고있다 갖다 여기 공간을 우리가 가서 나는 앞으로 나가서 세 가지 모두에 내 색을 빼고 싶다 이 헤더 열 중 및 oops

이제 경계를 0으로 설정하고 셀 간격을 지정하려고합니다 그리고 이건 행 열 사이에 그 공간을 제공 할 것입니다 오히려 행과 열 나는 그것을 설정할 것입니다, 10 픽셀을하고, 저장을하십시오 이리로가, 잘 바뀌 었어

다시 분홍색으로 그냥 오래 된 분홍색을 제거하겠습니다 저장해 그리고 새로 고침과 무언가 내가 여기서 한 일은 내가 의도 한 것이 아니며 실수로 배경색을 설정했는지 내 국경 색깔과 같아 그럼 우리가 할 수있는 일은, 배경색을 바꿀 수 있습니다

흰색으로 그리고 나서 나는 테이블에 들어가 그 배경색을 멋진 민트 그린으로 바꿀 수 있습니다 그것은 오, 나는 그것이 지금 무엇인지 잊어 버렸습니다 우리는 다시 그 회색을 다시 할 것입니다 과 이제 당신은 배경을보실 수 있습니다, 테두리 색이 있습니다, 실제로 배경입니다

색상을 선택한 다음 표 셀은 고유 한 배경색입니다 그리고 나는 복사하고 붙여 넣으세요 우리가 찾는 것은 우리가 찾는 모습입니다

Basic HTML for Web Design : Web Design Script Text Links

이제 우리 사이트의 텍스트 링크를 만들 것입니다 예를 들어, 귀하의 웹 사이트에서 다른 페이지 (예 : expertvillage

com)로 링크하십시오 너는 웹 사이트에 간다 거기로 올라가서 URL에 들어가면 바로 그 모든 것을 복사 할 것입니다 그런 다음 텍스트 파일에 들어가서 로고 아래에 텍스트를 넣으려고합니다 링크

그리고 그것을 시작하기 위해 코드는 끝 괄호, a, 공백, href, 같음, 그리고 나서 인용 부호 그리고 나서, 나는 그 URL에 붙여 넣기 만하면됩니다 브라우저 그리고 다른 괄호와 다른 끝 괄호를 사용하십시오 그리고 여기, 우리는 우리가 실제 링크를 원할 텍스트를 넣으십시오

전문가 마을에 가야지 그리고 너는 그것을 닫고 싶다 그리고, 당신이 원한다면 연결은 진짜로 작동하지 않을 것입니다 전체 페이지를 링크로 만드십시오 너는 그 끝 대가 있어야한다

그래서 우리는 슬래시, a, href, 또 다른 꺽쇠 괄호는 저장을 누르고 기본 페이지로 돌아가서 새로 고침합니다 페이지 중간에 링크가 있습니다 색상과 밑줄 만 보입니다 그게 우리가 나중에 변경할 수있는 모든 것,하지만이 링크를 클릭하면, 전문가 마을