웹사이트 제작 꿀팁 23가지: 초보도 쉽게 배우는 비법 공개!

웹사이트 구축에 대한 쓸모없는 정보를 알려드리겠습니다.

  이전 영상에 담지 못했던 정보입니다.

 색상부터 시작해 보겠습니다.

 hsl은 색조를 사용하여 코딩하는 것이 훨씬 쉽고 직관적입니다.

 색조는 색상환에서 각도로 측정한 색상 위치입니다.

 그런 다음 색상을 더 화려하게 또는 덜 화려하게 만들어 조작할 수 있으며 마지막으로 L 값을 사용하여 더 어둡거나 더 밝게 만들 수 있습니다.

  호버에 더 밝은 색상이 필요하다고 가정해 보겠습니다.

 색상환이나 타사 웹사이트를 열 필요가 없습니다.

 코드로 밝기를 높이면 됩니다.

 마찬가지로  채도와 밝기를 조정하여 필요한 만큼 많은 음영을 만들 수 있습니다.

 이것은 다크 모드를 위해 디자인할 때 매우 유용 하지만 나중에 더 자세히 설명하겠습니다.

 이 공식을 사용하여 색상 조합을 만들 수 있습니다.

  목표는 색조 값을 변경하여 많은 색상을 테스트하는 것입니다.

 다크 모드 색상도 생성하고 hsl이기 때문에 처음 네 가지 색상을 얻으면 필요한 만큼 많은 음영을 만들 수 있습니다.

 여기의 수학은 정말 간단합니다.

  채도와 밝기를 조정하여 기본 및 보조 색상을 만든 다음 이동하여 3차 및 강조 색상을 만듭니다.

 기본 색상에 이 두 가지를 연결하여 기본 색상의 좌우 60°를 만듭니다.

 120° 아크를 만듭니다.

 이는 색상 휠 에서 기본 색상 사이의 거리입니다.

   웹사이트에서 이것으로 조정할 수 있습니다.

 이 웹사이트를 방문하여 버튼을 한 번만 클릭 하면 모든 이미지를 webp 형식으로 변환할 수 있습니다.

 동일한 이미지 품질이지만 크기는 절반입니다.

 더 작은 장치에 맞게 이미지를 잘라서 한 단계 더 나아갈 수도 있습니다.

   모바일 장치에서 작은 이미지를 로드하려면 먼저 기본 이미지를 그림 요소로 래핑한 다음 미디어 쿼리가 있는 소스 요소를 사용하여 작은 이미지를 추가하여  아이콘과 일러스트레이션에 적용합니다.

 svg를 사용해 보세요.

 매우 가볍고  다른 HTML 요소 와 마찬가지로 온갖 작업을 할 수 있으며 다크 모드에도 반응합니다.

 이 웹사이트에서 다운로드하거나 figma를 사용하여 더 많은 사용자 정의 색상을 찾아 편집할 수 있습니다.

 이 한 줄의 코드를 사용하여 웹사이트를 사용자 시스템 색상 구성표에 맞게 조정할 수 있습니다.

 여기에서 전경색과 배경색을 전환하고 hsl을 사용하여 강조색의 밝기를 높여 대비를 높였습니다.

 강조 색상을 사용하면 어두운 배경에서 어떻게 보이는지 더 많이 제어할 수 있습니다.

 HTML에서 지정하지 않아도 favicon doic 파일은 브라우저에서 자동으로 요청되므로  로고를 ico 파일로 변환하여 루트 또는 공용 폴더에 넣기만 하면 됩니다.

 콘텐츠 편집 가능 속성을 사용하면  사용자가 모든 HTML 요소를 편집할 수 있습니다.

 웹페이지 FAQ 섹션에 적용하여 사용자가 자신의 질문에 대한 답변을 제안할 수 있습니다.

 inert 속성을 사용하면 요소와 그 안의 모든 것이 작동 하지 않습니다.

 모든 것이 계속 표시되지만 버튼과 링크는 작동하지 않습니다.

 입력 필드가 비활성화되고 화면 판독기가 이를 무시합니다.

 요소가 특정 비율을 유지해야 하는 경우 이렇게 설정하면  반응성이 유지됩니다.

 썸네일이나 이미지 갤러리에 매우 유용합니다.

 먼저 팝업에 원하는 모든 것을 작성한  다음 모든 것을 dialog 태그로 묶습니다.

  이렇게 하면 모든 것이 숨겨집니다.

 팝업을 트리거하는 버튼을 추가해 보겠습니다.

  이제 ID가 있는 팝업을 가져와 내장된 show modal 함수를 사용하여 표시합니다.

 모달을 닫으려면 Esc를 누르거나 버튼을 추가하고 내장된 close 함수를 사용할 수 있습니다.

 한 줄만으로 목록 스타일을 매우 창의적으로 지정할 수 있습니다.

 CSS의 경우 가상 선택자가 필요 없고 텍스트를 마커와 정렬하려고 할 필요도 없습니다.

 입력 요소의 입력 모드 속성을 사용하면   더 나은 사용자 경험을 위해 모바일 기기에서 가장 적합한 가상 키보드를 불러올 수 있습니다.

 텍스트 밑줄 오프셋 속성을 사용하면 밑줄의 위치를 ​​조정하여 실제로 밑줄 텍스트를 읽을 수 있습니다.

 예  를 들어 호버 상태가 있다고 가정해 보겠습니다.

 멋지고 다 좋지만 터치 스크린에서 문제를 일으킬 수 있습니다.

 이를 수정하려면 미디어 쿼리 내부에 호버 효과를 래핑하고 터치 스크린용 별도 버전을 만들 수 있습니다.

 접을 수 있는 요소를 만들려면 버튼이나 가상 요소가 필요하지 않습니다.

  요약에 표시되는 텍스트를 넣고 숨겨진 요소는 그대로 두면 해당 요소를 숨기기 위해 모든 것을 세부 정보 태그 내부에 래핑하면 됩니다.

  공통 속성을 공유하는 객체를 다루는 경우 로그 대신 테이블을 사용해 보세요.

  더 깔끔하고 체계적인 보기를 얻을 수 있습니다.

 Alt 키를 사용하여 복제하려면 위아래로 이동하고 Alt 키를 누른 상태에서 위아래로 이동하여 이동합니다.

 Alt 키를 누른 상태에서 클릭하면 여러 커서를 추가할 수 있습니다.

  Ctrl D와 유사한 요소를 선택합니다.

 선택 항목을 래핑하려면 이 플러그인을 설치하세요.

  래핑할 항목을 선택한 다음 Alt 키를 누르세요.

 기본적으로 W는 P를 얻습니다.

 요소는 쉽게 원하는 대로 변경할 수 있지만  이 플러그인을 설치하면 태그 이름을 쉽게 바꿀 수 있습니다.

 여는 태그만 업데이트하면 닫는 태그가 자동으로 변경됩니다.

 먼저 X 또는 Y AIS에서 요소를 회전합니다.

 큰 변화가 아닌 것처럼 보일 수 있지만  관점을 추가하면 요소와의 거리를 설정하여  회전 강도를 제어하여 호버에 대한 자세한 정보를 표시할 수 있습니다.

 내장된 HTML 요소를 사용하면 도구 설명 텍스트를 title 속성과 이와 같은 기본 정보에 넣기만 하면 됩니다.

 모든 HTML 요소와 함께 작동합니다.

  이와 같은 기본 입력 필드가 있다고 가정해 보겠습니다.

 이와 같은 옵션을 추가하기만 하면 자동 완성 기능이 있는 드롭다운을 추가할 수 있습니다.

 사용자는 CSS나 JavaScript 없이 입력하고 제안을 받을 수 있습니다.

 pre- 태그를 사용하면  모든 공백과 줄 바꿈을 그대로 두고 HTML에 작성된 대로 텍스트를 정확하게 표시할 수 있습니다.

 주로 코드 블록 및 기타 임의의 항목에 사용됩니다.

 일반적으로 동아시아 문자의 발음을 표시하는 데 사용되지만  창의력을 발휘하여 다른 방식으로도 사용할 수 있습니다.

 진행률 표시줄을 만들기 위해  div를 만들거나 CSS를 작성할 필요가 없습니다.

  기본 진행률 태그를 사용하여 최대값을 다음과 같이 설정하기만 하면 됩니다.

 100이고 여기에 입력한 값에 따라 막대가 해당 지점으로 이동합니다.

 미터 태그에도 동일한 작업을 수행할 수 있습니다.

  기술적으로는 여러 가지가 있지만 지금은 설명하기가 너무 게으릅니다.

  다행히 이 비디오의 스폰서인 Brilliant가 있습니다.

 그들은 복잡한 주제를 간단한 방법으로 설명하는 데 탁월합니다.

 Brilliant는 최고 수준의 기관에서 수상 경력에 빛나는 연구원과 전문가 팀이 제작한 수학, 과학, 코딩 및 기타 다양한 분야의 대화형 수업을 제공합니다.

   수업에는 개념을 가지고 놀 수 있는 대화형 문제 해결 활동이 가득합니다.

 이 방법은 강의 비디오를 보는 것보다 6배 더 효과적인 것으로 입증되었습니다.

  제가 정말 좋아하는 수업 중 하나는 코드로 생각하는 것입니다.

  루프와 변수에서 중첩 및 조건문에 이르기까지 필수 코딩 요소가 가득하여 코딩 여정을 위한 좋은 시작점입니다.

 이미 기본 사항에 익숙하다면 바로  고급 주제를 탐색할 수 있습니다.

 Brilliant는 말 그대로 모든 것을 갖추고 있으며 30일 동안 무료로 모두 사용해 볼 수 있습니다.

 brilliant.

org를 방문하거나 설명의 링크를 클릭하면 연간 프리미엄 구독료가 20% 할인됩니다.