홈페이지>CGI 소스 코드>기타 카테고리
다운로드
front end

웹 개발 저장소입니다.

준비 : 이 콘텐츠를 이용하려면 학생은 인터넷 접속이 가능한 컴퓨터, HTML 5를 지원하는 웹 브라우저(Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera 등), 텍스트 편집기(VSCode 등)가 있어야 합니다. .) 및 호스팅 플랫폼(무료 또는 유료).

  • https://www.frontendmentor.io/
  • https://daily.dev/
  • https://getcssscan.com/css-box-shadow-examples
  • https://whirl.netlify.app/
  • https://flexboxfroggy.com/
  • https://courses.cs.washington.edu/courses/cse154/flexboxducky/
  • http://www.flexboxdefense.com/
  • https://cssgridgarden.com/
  • https://gridcritters.com/
  • https://caniuse.com/
  • https://www.magicpattern.design/tools/blob-generator
  • https://meyerweb.com/eric/tools/css/reset/
  • https://html5boilerplate.com/
  • https://www.color-hex.com/color-palette/22942
  • https://www.greatfrontend.com/pt-BR
  • https://echarts.apache.org/en/index.html

웹사이트란 무엇입니까?

웹사이트에 대해 이야기할 때, 이 용어는 영어로 네트워크를 의미하고 월드 와이드 웹을 의미하는 "web"과 장소를 의미하는 "site"라는 두 단어의 조합이라는 것을 알 수 있습니다. 이런 의미에서 웹사이트나 사이트는 URL을 통해 인터넷에서 접근할 수 있고 특정 언어로 프로그래밍된 일련의 페이지가 있는 장소입니다.

이 주제를 더 잘 이해하기 위해 예를 살펴보겠습니다. Trybe의 블로그에 액세스하기 위해 인터넷 브라우저에 blog.betrybe.com 주소를 입력하면 브라우저는 인터넷에서 이 웹사이트가 있는 위치를 찾습니다. 그런 다음 서버에 요청이 이루어집니다.

웹페이지를 구성하는 모든 텍스트, 이미지, 스타일 파일은 이 서버에 저장됩니다. 그런 다음 서버는 이 문서 세트를 브라우저에 반환하여 사용자가 화면에 표시되는 내용을 표시할 수 있도록 합니다.

웹사이트는 다양한 형태와 콘텐츠를 제공할 수 있습니다. 일부 옵션에는 다음이 포함됩니다. 제품을 구매하고 판매할 수 있는 Mercado Livre 및 Amazon과 같은 가상 매장; 회사와 개인이 자신을 소개하고 고객이 찾을 수 있도록 사용하는 기관 웹사이트 및 포트폴리오 그리고 당신이 읽는 것과 같은 블로그.

또한 웹사이트는 정적 또는 동적 웹사이트로 분류될 수도 있습니다. 정적 웹사이트는 일반적으로 HTML, CSS, JavaScript를 사용하여 개발됩니다. 내용이 더 간단하고 데이터베이스와 상호 작용이 없습니다.

동적 웹사이트는 HTML, CSS, JavaScript를 활용하는 것 외에도 PHP와 같은 보다 강력한 프로그래밍 언어를 사용합니다. 이러한 사이트에는 데이터베이스에 연결된 기능이 있습니다. 이런 방식으로 액세스된 각 페이지는 특정 데이터를 가져올 수 있습니다.

웹 디자인

웹 디자인을 사용하면 웹 사이트 개발을 위한 인터페이스의 중요성, 풍부한 웹 페이지 구축에 사용되는 기술의 진화(웹 1.0, 웹 2.0, 웹 3.0 및 웹 4.0), 인터페이스의 진화(미적, 기능적, 구조적)를 관찰해야 합니다. ).

따라서 웹 사이트를 구축하기 위해 풍부한 인터페이스를 만드는 것의 중요성을 이해하고, 최종 사용자를 위한 최고의 탐색 및 사용성 경험을 목표로 하고, 과거에 온라인 사이트를 구축하는 데 사용된 일부 기술을 알아야 합니다. 이 비전을 통해 기존 시장 동향을 관찰하고 인터페이스 개발의 새로운 동향을 살펴보세요.

색상 팔레트:

  • https://paletadecolores.online/pt/magenta/
  • https://simpleicons.org/
  • https://colorhunt.co/
  • https://coolors.co/
  • https://colors.muz.li/
  • https://www.toptal.com/designers/colourcode/
  • https://lospec.com/palette-list
  • https://mycolor.space/
  • https://www.pantone.com/articles/color-palettes
  • https://atmos.style/color-generator
  • https://github.com/EmilHvitfeldt/r-color-palettes
  • https://www.color-hex.com/color-palettes/
  • https://visme.co/blog/website-color-schemes/
  • https://colorpalettes.com/
  • https://colorpalettes.net/

그라데이션:

  • https://www.grabient.com/
  • http://gradientsguru.com/
  • https://www.eggradients.com/
  • https://uigradients.com/#Zinc
  • https://webgradients.com/
  • https://cssgradient.io/

웹 개발

기본적으로 웹 개발은 인터넷용 페이지 코딩을 의미합니다. 그러나 이 작업은 소스 코드를 편집해야만 수정할 수 있는 정보를 제공하는 정적 페이지를 생성하기 위한 기본 도구인 HTML 및 CSS를 사용하는 것 이상입니다.

반대로 웹사이트의 페이지는 동적일 수 있습니다. 이는 소스 코드를 방해하지 않고 표시된 내용을 변경할 수 있음을 의미합니다. 이를 가능하게 하기 위해 웹사이트의 동적 부분은 데이터베이스에 저장되며, 이 콘텐츠를 검색해야 할 때마다 액세스됩니다.

이 기능을 사용하면 비즈니스 규칙, API(응용 프로그래밍 인터페이스) 등을 사용하는 복잡한 응용 프로그램을 개발할 수 있습니다. 따라서 웹 개발, 클라이언트측 코딩(프론트엔드) 및 서버측 코딩(백엔드)에 초점을 맞춘 활동이 구분됩니다.

현재 웹 및 모바일 애플리케이션에 가장 많이 사용되는 구조인 REST API를 사용한 API 예입니다. RESTful API 라고도 합니다.

웹 응용 프로그램은 웹 사이트의 수가 점점 늘어나고 있습니다. 즉, 웹의 대부분을 구성하는 전통적인 문서와 텍스트 및 이미지의 정적 링크가 아닌 데스크톱 응용 프로그램을 모방합니다. 예를 들어 온라인 워드 프로세서, 사진 편집 도구, 매핑 웹사이트 등이 있습니다. JavaScript를 기반으로 HTML4를 그 기능의 한계까지 밀어붙였습니다. HTML5는 HTML, XHTML, XML 개체 및 문서를 표현하고 상호 작용하기 위한 크로스 플랫폼, 언어 독립적인 규칙인 DOM(문서 개체 모델)에 대한 새로운 API(응용 프로그래밍 인터페이스)를 지정합니다.

이러한 새로운 API를 사용하면 그림, 비디오 등과 같이 서버에서 보낸 개체를 끌어서 놓을 수 있습니다.

HTML 페이지가 DOM의 개체를 통해 JavaScript에 노출되는 이러한 새로운 인터페이스를 사용하면 제대로 문서화되지 않은 특수 효과보다는 고도로 지정된 패턴을 사용하여 애플리케이션을 더 쉽게 작성할 수 있습니다.

훨씬 더 중요한 것은 Adobe Flash 또는 Microsoft Silverlight와 같은 독점 표준과 경쟁할 수 있는 무료(사용 및 구현) 개방형 표준의 필요성입니다. 이러한 기술이나 기업에 대해 어떻게 생각하시든, 우리는 웹이 제조업체의 손에 있는 사회, 상업 및 커뮤니케이션을 위한 필수적인 플랫폼이라고 믿습니다.

이미 수백만 개의 웹페이지가 사용되고 있으므로 이를 계속 재생산하는 것이 필수적입니다. 따라서 HTML5는 수백만 개의 웹 페이지에서 사용하는 ,

및 기타 새로운 마크업과 같은 기존 마크업을 브라우저가 처리하는 방법을 계속 정의하는 HTML4의 파생물입니다.

인터페이스

인터페이스 라는 용어는 연구 분야에 따라 여러 가지 의미를 가질 수 있습니다. 정보기술 분야에서 인터페이스란 외부의 도움 없이는 자연스럽게 통신할 수 없었던 두 시스템 간의 통신 가능성을 의미한다.

HCI는 사람과 컴퓨터 사이의 상호 작용에 대한 연구입니다. 컴퓨터 과학, 예술, 디자인, 인간공학, 심리학, 사회학, 기호학, 언어학 및 관련 분야를 포괄하는 학제간 과목입니다. 인간과 기계 사이의 상호 작용은 소프트웨어와 하드웨어로 구성된 사용자 인터페이스를 통해 이루어집니다.

인간-컴퓨터 상호작용은 인간이 사용할 수 있는 대화형 컴퓨팅 시스템의 설계, 평가 및 구현과 이를 둘러싼 주요 현상에 대한 연구와 관련된 학문입니다.

예 3: 이메일로 메시지 보내기

 이메일 보내기

[HTML5] 멀티미디어 태그

디지털 미디어라는 용어는 물질적 기반으로 구성되는 아날로그 미디어와 반대되는 개념입니다. 비닐 표면의 작은 홈에 소리가 녹음되고 바늘이 이 홈을 통과하면 소리가 재생됩니다. 디지털 미디어에서는 물리적 지원이 실질적으로 사라지고 데이터가 숫자 또는 숫자 시퀀스로 변환되므로 디지털이라는 용어가 사용됩니다. 이러한 방식으로 소리, 이미지, 텍스트는 실제로 데이터 공유, 저장 및 변환이 가능한 일련의 숫자입니다. 가장 넓은 의미에서 디지털 미디어는 디지털 기술을 기반으로 한 일련의 통신 수단 및 장치로 정의할 수 있으며, 이는 서면, 음성 또는 시각적 지적 저작물의 디지털 배포 또는 통신을 가능하게 합니다. 일반적으로 디지털 미디어라고 불리는 소비자와의 브랜드 커뮤니케이션 전략에 사용되는 전자적 출처의 수단입니다.

Flash는 항상 웹 페이지에 비디오와 음악을 추가해야 하는 사람들에게 가장 실행 가능한 대안이었습니다. 거의 모든 브라우저에 있었고 지금도 존재하며 큰 문제 없이 사용할 수 있는 형식을 갖고 있었습니다.

플러그인에 호출을 추가하면 작동합니다.

브라우저 불일치로 인해 ; 명령은 플러그인을 사용하기 위한 특정 명령으로, 많은 속성을 복제합니다. Flash와 같은 플러그인은 많은 불안정성을 유발하여 브라우저가 닫힐 수도 있는 오류를 발생시킨다는 점은 말할 것도 없습니다.

이 모든 것 때문에 HTML 5에는 불필요한 플러그인과 명령의 사용을 피하기 위해 언어 고유의 새로운 지원이 제공됩니다. 현재는 마치 이미지인 것처럼 간단한 호출만 하면 파일이 실행됩니다.

 <비디오 컨트롤 src="video.mp4" width="426" height="240">

새 명령에서 나타나는 문제는 일부 브라우저에서 제대로 작동하지 않는 src 속성을 사용한다는 것입니다. 그리고 모든 사람이 모든 브라우저에서 페이지를 열 수 있도록 하려면 다른 유형의 속성을 사용해야 합니다. 따라서 태그에는 속성을 ​​사용하는 것이 일반적입니다.

요소는 여러 번 사용할 수 있으며 각 브라우저에 대한 비디오 형식을 정의하여 도달 범위를 넓힐 수 있습니다.

동영상

">
 < video width =" 426 " height =" 240 " controls >
  < source src =" video.mp4 " type =" video/mp4 " >
  < source src =" video.webm " type =" video/webm " >
  < source src =" video.ogg " type =" video/ogg " >
 video >

오디오

">
 < audio controls >
 < source src =" audio.mp3 " type =" audio/mpeg " >
 < source src =" audio.ogg " type =" audio/ogg " >
 < source src =" audio.wav " type =" audio/wav " >
 audio >

가능한 코덱은 여러 가지가 있으며 더 넓은 범위를 확보하려면 최소한 두 가지 버전을 내보내야 합니다.

참고 : 코덱은 미디어 파일을 인코딩하고 디코딩하는 데 사용되는 프로그램입니다. 저장을 선호하여 원본 형식을 압축하고, 재생 중에 압축을 풀어 이미지나 오디오로 다시 변환합니다.

언급된 모든 오디오 및 비디오 예제는 디렉토리의 문서를 통해 가져옵니다. 문제는 YouTube나 Vimeo와 같은 사이트에 이미 호스팅된 비디오를 어떻게 가져오느냐입니다. 그리고 두 가지 솔루션(문서를 통해 또는 서버를 통해) 중 어느 것이 가장 유리한가요?

비디오 가져오기

YouTube 및 Vimeo에서 비디오를 가져오는 방법을 단계별로 살펴보겠습니다!

[HTML5] 테이블 태그

HTML5가 등장하기 전까지 테이블은 페이지 레이아웃을 디자인하는 리소스로 사용되었습니다. 디자이너들은 이미지와 텍스트를 표시하기 위해 테이블을 그리드로 사용했으며, 널리 사용되면서 웹 사이트 디자인의 주요 형태가 되어 풍부한 모습을 만들어 냈습니다.

그러나 오늘날 테이블의 사용은 실제로 휴대폰, 태블릿 등과 같은 새로운 미디어를 위한 더 나은, 더 접근하기 쉽고, 유연하고 기능적인 웹사이트의 구축을 방해하고 있습니다.

이러한 테이블은 데이터베이스에서 오는 정보인 테이블 형식 데이터를 표시하기 위한 리소스로 HTML 5에 여전히 존재합니다. 새 버전의 HTML을 사용하면 표 없이도 웹사이트를 만들 수 있으므로 컴퓨터처럼 큰 화면에 나타나며 작은 스마트폰 화면에도 잘 적응하는 동적 레이아웃을 만들 수 있습니다. 나중에 HTML5 및 CSS3를 사용하여 반응형 레이아웃을 구축하는 방법을 살펴보겠습니다.

table 명령은 언어에서 제거되지 않았지만 사용이 제한되었습니다. 반면에 이 리소스를 사용하는 웹사이트가 여전히 여러 개 있으므로 필요한 경우 이러한 유형의 페이지를 유지 관리할 수 있도록 작동 방식을 이해하는 것이 중요합니다.

테이블을 삽입하는 명령은

입니다. 행을 시작하려면 태그를 도입하고 테이블 행을 나누는
셀을 도입해야 합니다. 내용을 굵게 표시하여 테이블 행을 나눕니다. 이 모든 명령은 각각
, 및 로 종료됩니다. 

 < table >
  < tr >
    < td >  td >
    < td >  td >
   tr >
 table >

명령에는 테이블 형식 지정에 도움이 되는 일련의 속성이 있습니다. 주요 내용은 다음과 같습니다.

align="" center , left , right 및 양쪽 justify 의 세 위치에 테이블을 정렬합니다.
bgcolor="" 테이블의 색상을 결정합니다
border="" 테두리의 크기를 결정합니다. 0이면 테두리를 표시하지 않습니다.
cellspacing="" 셀 사이의 간격을 결정합니다.
colspan="" 두 개 이상의 테이블 열 사이의 그룹화를 결정합니다(옆으로).
rowspan="" 테이블에 있는 두 개 이상의 행 사이의 그룹화를 결정합니다. (아래쪽과 위쪽 방향)
cellpadding="" 텍스트와 셀 테두리 사이의 간격을 결정합니다.

캡션처럼 테이블을 기준으로 중앙에 텍스트를 표시합니다.

규칙 속성

테이블 내에 표시될 내부 행을 선택하려면 태그 내에서 RULES 속성을 사용합니다. 이 속성의 보완은 다음과 같습니다.

및 와 같은 특수 태그로 정의된 열 그룹과 가로 섹션 사이의 행
none 전체 줄이 없습니다.
all 테이블의 각 열과 행 사이의 모든 행을 표시하려면(기본값)
rows 테이블의 각 행 사이에 있는 수평선의 경우
cols 테이블의 각 열 사이의 수직선에 대해
groups

몇 가지 예를 참조하세요.

">
 < table border rules =" all " 6 >
">
 
">
 
 
">
 
 
">
 
 
 양식 태그
 HTML 양식 부분은 사용자가 HTML 페이지에 입력하는 데이터를 채우는 데 매우 중요합니다. 이 데이터의 수집은 이 데이터를 데이터베이스(MySQL, PostgreSQL, MongoDB, OracleDB 등)에 저장하고 쿼리하는 백엔드 프로그래밍 언어(PHP, JavaScript, Python, Java 등)를 사용하여 백엔드에서 수행됩니다. .). 양식 태그를 살펴보겠습니다.
 로그인 양식(상용구) : 


	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form >
	Login: < br >
	< input type =" email " name =" email " > < br >
	Senha: < br >
	< input type =" password " name =" senha " > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
 type 속성을 통해 사용된 input 유형을 정의할 수 있으며, name='' 속성을 통해 프로그래밍 언어를 통해 전송된 데이터를 처리할 수 있습니다.
 로그인 양식(상용구) - PHP 사용 : 

	Login:

	

	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form action =" processa.php " >
	Login: < br >
	< input type =" email " name =" email " required > < br >
	Senha: < br >
	< input type =" password " name =" senha " required > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
 등록 양식(상용구) : 

	  Nome Completo:

	  

	  
      Email:

	  

	  Senha:

	  

	  Repita a senha:

	  

	  	
	  Sexo:

	   Masculino

	   Feminino

	  
	  Interesses:

	   Futebol

	   Video-games

	   Academia

	  
	  Estado

	  

	
	  Comente!

	  


	  
       
   
">
 < html >
  < head >
    < title > Cadastro  title >
   head >
  < body >
     < h2 > Cadastre-se  h2 >
       < form action =" processa.php " >
	  Nome Completo: < br >
	  < input type =" text " name =" nome " required > < br >
	  
      Email: < br >
	  < input type =" email " name =" email " required > < br >
	  Senha: < br >
	  < input type =" password " name =" password " required > < br >
	  Repita a senha: < br >
	  < input type =" password " name =" password " required > < br >
	  	
	  Sexo: < br >
	  < input type =" radio " name =" sexo " value =" masculino " > Masculino < br >
	  < input type =" radio " name =" sexo " value =" feminino " > Feminino < br >
	  
	  Interesses: < br >
	  < input type =" checkbox " name =" interesse " value =" futebol " > Futebol < br >
	  < input type =" checkbox " name =" interesse " value =" video-games " > Video-games < br >
	  < input type =" checkbox " name =" interesse " value =" academia " > Academia < br >
	  
	  Estado < br >
	  < select name =" estado " >
	    < option value =" RJ " > RJ  option >
	    < option value =" SP " > SP  option >
	    < option value =" MG " > MG  option >
	    < option value =" ES " > ES  option >
	   select > < br >
	
	  Comente! < br >
	  < textarea name =" comentario " >  textarea > < br >

	  < input type =" submit " value =" Cadastrar " >
        form >
    body >
 html >
 name 동일한 경우에만 무전기 간에 input 할 수 있습니다. 이렇게 하면 이 정보를 그룹화할 수 있으며 그 중 하나만 표시됩니다.
 checkbox 사용하면 선택할 옵션을 두 개 이상 선택할 수 있습니다.
 와 함께
  유형과 해당 속성을 정의할 수 있습니다.
  •  button
  •  password
  •  text
  ,  및 ">
 < button type =" button " > Clique Aqui  button >
 즉, 탐색용 버튼을 만드는 경우  사용하세요. 양식에서 데이터를 제출하는 버튼을 만드는 경우  또는 
 의사 클래스 정의
 :hover 요소 위로 마우스를 가져가면 요소가 변경됩니다.
 :active 요소를 클릭하여 변경합니다.
 :link 방문하지 않은 모든 링크를 변경합니다.
 :visited 방문한 모든 링크를 변경합니다.
 :focus 포커스가 있는  요소를 변경합니다.
 :checked 표시된 모든  요소를 변경합니다.
 :disable 비활성화된 모든  요소를 변경합니다.
 :enabled 활성화된 모든  요소를 변경합니다.
 :empty 자식이 없는 모든 
 요소를 변경합니다.
 :first-child 활성화된 각  요소를 변경합니다.
 :enabled 활성화된 각  요소를 변경합니다.
 :first-child 상위 요소의 첫 번째 하위 요소인 각 
 요소를 변경합니다.
 :first-of-type 상위 요소의 첫 번째 
 요소인 각 
 요소를 변경합니다.
 :in-range  요소를 지정된 범위 내의 값으로 변경합니다.
 :invalid 모든  요소를 잘못된 값으로 변경합니다.
 :lang(language) " it "으로 시작하는 lang 속성 값으로 각 
 요소를 변경합니다.
 :last-child 상위 요소의 마지막 하위 요소인 모든 
 요소를 변경합니다.
 :last-of-type 상위 요소의 마지막 
 요소인 모든 
 요소를 변경합니다.
 :link 방문하지 않은 모든 링크를 변경합니다.
 :not(selector) 
 요소가 아닌 모든 요소를 ​​변경합니다.
 :nth-child(n) 상위 요소에서 순서가 지정된 각 
 요소를 변경합니다.
 :nth-last-child(n) 마지막 하위 요소부터 계산하여 상위 요소부터 순서가 지정된 각 
 요소를 변경합니다.
 :nth-last-of-type(n) 마지막 자식부터 계산하여 부모 요소의 두 번째 
 요소인 각 
 요소를 변경합니다.
 :nth-of-type(n) 상위 요소의 두 번째 
 요소인 모든 
 요소를 변경합니다.
 :only-of-type 상위 요소의 유일한 
 요소인 
 요소를 변경합니다.
 :only-child 상위 요소의 유일한 하위 요소인 모든 
 요소를 변경합니다.
 :optional "required" 속성 없이  요소를 변경합니다.
 :out-of-range atr을 사용하여  요소를 변경합니다.        
        
확장하다

    



    

        

            추가 정보
        

        
    





    

        

            관련 애플리케이션
        

        
    





    

        

            추천
        

        
    






    

        

            관련 정보
            전체