작성된 코드를 직접 검토
마크업 언어, 논리 처리 없음.
중간에는 실용적인 의미가 없는 채우기 텍스트 조각이 있으며 레이아웃 등을 테스트하는 데 사용됩니다.
앞뒤를 태그라고 하고,
HTML 요소 참조 - HTML: HyperText Markup Language | MDN(mozilla.org)
헤드는 일반적으로 일부 제목 표시줄과 같은 웹 페이지의 본문에 렌더링되지 않습니다.
본문은 실제로 사용자에게 렌더링되며,
h1은 페이지 테마의 제목입니다.
웹 페이지 작성 기준은 버전에 따라 다를 수 있으므로 설명 시 형식 지정이 필요합니다.
폴더를 만들고 파일을 만들면 vscode가 열립니다.
하나를 입력할 수 있습니다! 그런 다음 탭,
본문을 입력하고 직접 탭하면 <> 항목을 작성하는 데 도움이 됩니다.
입력이 완료되면 바로 지금 브라우저에서 파일을 열면 됩니다.
h1에서 h6까지는 괜찮습니다.
Alt + shift + ↓는 vscode 라인을 복사할 수 있습니다.
주석 표준 형식.
lorem을 입력하고 탭을 누르면 예를 들어 많은 텍스트를 완성하는 데 도움이 됩니다.
그러면 10개의 단어가 생성됩니다.
p는 단락입니다.
단락 사이의 여백에 대해서는 인스펙터 개발자 모드를 마우스 오른쪽 버튼으로 클릭한 다음 여백이 여백을 제어하는 것을 볼 수 있는 행을 선택할 수 있으며 크기는 16px 이하입니다.
a는 속성 속성을 나타내고,
위는 속성을 추가한 후의 것으로, 다음 텍스트에 하이퍼링크를 추가하는 것을 의미합니다.
사용법은 첫 번째 태그에 기록됩니다.
이 한 문장을 더 작성하면 새 페이지에서 링크를 열 수 있습니다.
Tr 테이블 행, th 테이블 헤드, td 테이블 데이터.
우선, 여기에는 name="firstname"이라는 하나 이상의 유형이 있습니다. 즉, 입력한 후 제출이 있을 수 있고 제출이 백그라운드 서버와 상호 작용한 다음 제출이 이 이름 Interact에 저장됨을 의미합니다. 배경으로.
예를 들어 여기에 작업을 추가할 수 있습니다. 즉, 제출한 후 작업 뒤에 해당 파일 이름을 찾고 이 파일을 사용하여 제출 후 몇 가지 논리적 문제를 처리할 수 있습니다.
라인 브레이커, 시간 수평선
이것은 단지 버튼일 뿐입니다.
항상 맨 아래에 표시되며 여기에서 CSS 콘텐츠를 추가할 수 있습니다. 여기에서 여백을 1000으로 변경합니다. 즉, 다음 문과 이전 문 사이의 간격이 1000이므로 여기에 큰 공백이 있습니다.
제출을 클릭하면 여기에서 form.js 파일을 찾을 수 없습니다.
위의 버튼은 폼 안에 있고, 여기에 버튼도 따로 쓸 수 있습니다.
다음은 네트워크 또는 로컬 파일에 있을 수 있는 그림의 소스를 나타내는 그림 src를 가져오는 것입니다. 그런 다음 대체 그림이 정상적으로 표시되지 않을 때 표시해야 할 내용을 나타내는 텍스트입니다.
CSS 콘텐츠인 스타일 문장이 앞에 추가되어 그림의 너비가 항상 브라우저 페이지의 너비임을 의미합니다.
일부 단어를 인용하자면 CSS를 사용하면 더 멋질 수 있습니다.
HTML: 하이퍼텍스트 마크업 언어 | MDN(mozilla.org)
==================================================== ==================================================== ==================================================== =======================================
CSS
여기 뒤에 있는 세미콜론, 마지막 구성 요소는 생략할 수 있지만 추가하는 것이 가장 좋습니다.
기본 HTML을 먼저 준비하세요. 여기에서 그가 직접 사용할 것입니다! 초기 틀을 준비하자 머릿 속은 우리가 본 적 없는 많은 것들로 채워질 테니 일단 무시하고 제목만 찾아서 수정하고 본문을 작성하자.
처음 두 개가 더 일반적으로 사용됩니다.
이것은 두 번째 유형입니다.
세 번째 유형.
세 번째는 CSS 코드를 유지하는 데 더 번거로운 것입니다.
첫 번째가 가장 좋습니다.
여기에서 먼저 링크를 만들어야 합니다.
그런 다음 처리할 물건을 먼저 상자에 넣습니다.
여기서 우리는 클래스 상자를 사용하고 있습니다.
CSS 우리는 그의 첫 번째 구성 요소가 선택자라고 말했습니다. 다음은 세 가지 방법입니다.
먼저 색상을 수정하고 누구의 색상을 변경할지 명확하게 해야 합니다. 이는 선택기에 의해 결정됩니다.
위의 내용에 따르면 선택자에는 태그 이름이나 태그의 클래스 이름 또는 id 이름을 직접 쓸 수 있습니다.
이러한 방식으로 CSS가 작동하면 지정된 이름과 동일한 이름을 가진 모든 명령문에 대해 프로세스를 수행합니다.
동시에 id와 class의 경우 일반적으로 현재 HTML 파일인 class에서 id를 고유하게 만듭니다. 일반적으로 동일한 클래스는 클래스입니다.
CSS 선택기 - 웹 개발 학습 | MDN(mozilla.org)
위의 웹 사이트에는 많은 선택기가 있습니다.
여기에서 우리는 그가 양쪽 끝을 잡는 것을 원하지 않습니다.
그런 다음 외부에 클래스를 배치합니다. 이는 클래스가 중앙에 있기를 원하기 때문입니다. 배경색도 중앙에 있으므로 두 끝이 흰색입니다.
class div를 입력할 때 .class와 tab을 직접 입력할 수 있습니다.
첫 번째 문장이 짧아지고 두 번째 이닝이 중심이 됩니다.
일반적으로 사용되는 내장 색상 문자열 및 색상 변환 관련 항목이 있습니다.
글꼴 정보.
우선 세리프와 산세리프는 테두리 유무를 의미하는데 주로 L자나 모서리 부분이나 양끝에 따라 달라지는데, 세리프가 없으면 L 전체의 굵기가 같게 되고, 그러나 serif가 있는 것은 약간 다릅니다.
그리고 첫번째는 마지막 3개와 다릅니다.마지막 모서리 관련 지정외에도 2개가 더 있습니다.앞쪽이 폰트입니다. 하나, 두 번째 것을 사용하십시오.
그런 다음 일부는 인용 부호가 있고 일부는 그렇지 않습니다. 그 안에 두 단어가 있기 때문에 모호하지 않도록 전체를 나타 내기 위해 인용 부호로 묶습니다.
후자의 두 모노 스페이스는 고정 폭 글꼴을 나타내며 각 문자는 동일한 너비를 차지합니다.
더 많은 글꼴.
여기에서 전체 페이지의 색상을 수정할 수 있습니다. 즉, 본문을 작성하면 내부의 배경색이 지정한 색상으로 변경됩니다. 그런 다음 내부의 모든 텍스트 색상을 나타내는 색상을 수정할 수도 있습니다.
여기서 우선순위 문제가 있는데 본문에 지정한 우선순위가 상대적으로 낮은데, 즉 본문을 지정한 후 특정 글꼴에 대해 추가 지정을 하면 추가로 지정한 색상을 사용하게 된다. (본문이 아래 어디에 쓰여져 있는지는 중요하지 않습니다!)
글꼴을 수정합니다.
글꼴 크기를 수정합니다.
글꼴의 두께는 굵게 표시됩니다.
함께 단축할 수 있으며, 하단 라인은 상단 세 라인과 동일합니다.
위아래가 다르면 아래가 위를 덮게 됩니다.
box1 안에 h1을 지정하는 것도 가능합니다.
밑줄, 대문자, 글자 간격, 단어 간격을 수정합니다.
줄 간격을 수정합니다.
여기에서 텍스트의 두 단락이 인접할 때 중간 부분의 너비를 결정하는 방법은 두 단락의 텍스트의 더 큰 여백을 두 테두리 사이의 거리로 간주합니다.
대신에:
오른쪽 첫 번째 순서: 오른쪽 위 왼쪽 아래 순서,
두 번째는 Up=Down 5, Left=Right 10입니다. 위, 아래, 왼쪽, 오른쪽이 같으면 하나만 쓰세요.
세 번째는 왼쪽 위 = 오른쪽 아래
배경색에서 콘텐츠 부분만 추가되었음을 알 수 있습니다.
너비만 변경
유사.
위의 버튼을 클릭하고 웹 페이지를 클릭한 다음 해당 div 등을 선택할 수 있습니다.
따라서 아래 도구에서 이러한 상자의 너비를 관찰할 수 있습니다.
둥근 모서리.
여기서 점을 제거하고 싶습니다.
우리가 제공해야 하는 사진은 가공되어야 하며, 사진의 크기는 작아야 하며 여기에 배치되어야 합니다.
중앙 등에 표시할 수 있습니다.
일부 자체 포함 양식도 있습니다.
여기서 첫 번째 버튼은 몇 가지 공통 속성을 수정하는 것입니다.
그런 다음 호버가 두 번째 항목에 추가되어 마우스를 위에 놓았을 때의 상태를 나타냅니다.
여기서 활성은 클릭했을 때의 상태입니다.
버튼을 하나 더 추가하면 버튼의 태그로 작성되기 때문에 둘의 스타일은 동일합니다.
이를 나열하려면 하이퍼링크를 추가하십시오.
하이퍼링크의 기본 스타일이 파란색 밑줄임을 알 수 있습니다.
여기에서 밑줄을 수정 및 취소하고 색상을 추가한 다음 마우스를 위에 놓았을 때의 색상과 하이퍼링크를 클릭한 후의 색상을 가질 수 있습니다.
여기가 모두 빨간색 인 이유는 위를 보면 하이퍼 링크가 모두 #에 연결되어 있기 때문입니다. 여기 원래 웹 사이트에 #이 있습니다. 변경 사항이 없으며 방문 후 모두 이것을 가리키므로 모두 빨간색.
하나를 수정하면 더 이상 빨간색이 아닙니다.
그런 다음이 세 가지 배열을 변경하려면. 왼쪽과 오른쪽, 크고 작은 배열.
여기서 왼쪽에 하나를 추가하는 것은 쓸모가 없습니다. div이기 때문에 기본값은 전체 너비를 차지하는 것입니다. 따라서 첫 번째는 전체 너비를 차지하고 다음은 가장 왼쪽에서 시작합니다. 그것이 시작입니다.
그들이 차지하는 너비를 수정하십시오.
여기에 추가된 프레임 때문에 오른쪽이 맞지 않아서 다른 프레임으로 내려갔습니다. 그의 너비는 테두리를 계산하지 않기 때문에 테두리 부분이 33.3% 밖에 있습니다.
경계가 33.3% 안에 있다고 생각할 수 있습니다.
탭을 클릭하면 완성되며, id는 위의 main-blovk의 태그입니다.
두 단락을 더 추가합니다.
각 플로트를 다 사용한 후 지우기를 수행하고 위의 클래스를 만든 다음 다음을 수행하십시오.
지우기: 둘 다
여기에서 먼저 .list2 li은 모든 목록 항목을 대상으로 하고 nth-child(매개변수)는 모든 목록 항목을 대상으로 하며, 그중 하나 또는 일부, 특히 선택할 사람을 선택하고 매개변수를 입력합니다.
그런 다음 여기의 입력은 짝수, 즉 모든 짝수입니다. 홀수이면 홀수로 씁니다.
기본값은 정적입니다.
절대적인 경우인 top, left에서는 창 페이지에 상대적인 오프셋을 나타냅니다(전체 웹 페이지의 왼쪽 위 모서리가 원점으로 위쪽으로 슬라이드됨). 즉, 이 경우 그는 완전히 부유하게 된다.
상대적인 경우 원래 오프셋 이전에 위치가 있었으므로 원래 위치를 기준으로 오프셋이 수행됩니다.
참고로 그가 이동한 후에도 원래 차지했던 영역은 여전히 존재하며, 위의 절대 상황에서는 완전히 떠 있는 상태이므로 원래 영역을 유지할 필요가 없으므로 아래 영역이 직접 압착됩니다.
여기 상자는 상대적이지만 상쇄하지 않았습니다.
그러면 그 안의 h1과 h2는 절대값이 되는데, 이때 오프셋이 수행되며 상자의 왼쪽 위 모서리를 절대 오프셋의 원점으로 사용하게 됩니다.
그 이유는 상자를 상대적으로 변경하기 위해서입니다.
상자를 제거하고 상대적으로 변경하면 현재 웹 페이지가 맨 위로 슬라이드될 때 절대적으로 현재 웹 페이지의 왼쪽 상단 모서리를 기반으로 하는 절대값이 됩니다.
사실 위쪽과 왼쪽은 오프셋이 아니며, 위쪽 30px는 위쪽 방향에서 원점까지의 거리가 30임을 의미합니다.
이 고정은 창에 대해 고정됩니다.
CSS 콘텐츠는 HTML 그 이상입니다!
동영상에 나오는 링크 및 추천(영어를 이해하지 못하는 경우 오른쪽 상단의 언어 변경을 클릭하여 언어를 변경하십시오):
CSS 선택기
<색상> - CSS&콜론; 캐스케이딩 스타일 시트 | MDN
색상 값
HSL에서 RGB로 | RGB에서 HSL로 | 색상 계산기 | 16진수 색상 변환기
HSL, RGB, HEX 상호 변환
기본 텍스트 및 글꼴 스타일 지정 - 웹 개발 학습 | MDN
글꼴 기본 사항
CSS 글꼴 스택: HTML 및 CSS 코드가 포함된 웹 안전 및 웹 글꼴 제품군입니다.
Win/Mac에서 다양한 글꼴의 점유 통계
글꼴 선택 플랫폼
타이포그래피/타입 기술
Word Talk Word Smooth - 타이포그래피 테마 팟캐스트
서양서체, 서양서체2, 서양조판 3권을 추천합니다.
CSS를 사용하여 HTML 스타일 지정 방법 배우기 - 웹 개발 배우기 | MDN
많은 예제와 연습 문제가 있는 CSS 학습 사이트
==================================================== ==================================================== ==================================================== ===========================================
JS는 먼저 컴파일된 후 실행되는 C++와 달리 실행 중에 컴파일됩니다.
이것은 콘솔에도 쓸 수 있습니다.
딸깍 하는 소리
비어 있는.
문자열로 변환됩니다.
===인 경우 타입 변환을 하지 않고, 타입이 다르면 같지 않아야 함 == 타입 변환을 한 후 판단한다.
앞서 변수는 var와 let으로 선언할 수 있다고 했는데, 그 차이는 유효범위(scope)입니다. let은 다르고 선언 범위를 고려하며 현재 범위에서 선언된 경우에만 액세스할 수 있습니다.
상수를 선언하는 const, const에도 범위가 있습니다.
여기에서 점을 사용하여 개체에 액세스할 수 있으며 이 []를 사용할 수도 있습니다.
위의 이름은 개체 내부의 속성 이름으로 간주되며 특정 유형의 변수 "Simon"은 변수에 해당하는 값으로 간주됩니다.
Contact도 비슷한데, 속성 이름이기도 하고 어떤 타입의 변수이기도 하지만, 그 타입이 객체 타입이라는 점만 다를 뿐입니다. 그런 다음 이 개체의 값이 있습니다.
변수를 생성하는 두 가지 방법에 유의하십시오.
이와 같이 존재하지 않는 구성원에 직접 액세스하면 새로운 구성원이 생성됩니다.
가운데 세 개는 직접 비어 있습니다.
출력에 직접 액세스하면 undefined가 출력되지만 오류는 없습니다.
정의되지 않은 부분은 무시합니다.
pop은 마지막 요소를 삭제할 수 있고 shift는 첫 번째 요소를 삭제할 수 있으며 push는 추가할 수 있고 reverse는 반전할 수 있습니다.
unshift가 첫 번째 위치에 추가됩니다.
여기서 반환 값은 직접 작성된 함수입니다. 여기서 인수는 매개변수입니다.
다음은 반환하는 함수입니다.
따라서 위의 수락에 사용된 x는 함수입니다.
초보자용: JavaScript 빠른 시작_哔哩哔哩_bilibili
==================================================== ==================================================== ==================================================== ========================================
DOM
DOM 구조에서 보이는 대로 변경합니다.
이 플러그인은 웹사이트의 DOM 구조를 볼 수 있습니다.
HTML 작성 후
콘솔을 열고 js 코드를 입력하면 여기에서 문서를 얻을 수 있습니다. 그런 다음 문서 기능을 통해 바로 지금 트리의 모든 노드를 얻을 수 있습니다.
여기서는 찾을 수 있는 모든 바디, 즉 바디 배열을 직접 반환하므로 여기서 [0]으로 바디를 얻을 수 있습니다.
다음은 tag.classname입니다.
사실 셀렉터에 대해 이야기할 때 이것이 외부에서 내부로 레이어별로 진행된다고 했는데, 이는 태그가 li이고 클래스가 리스트라는 것을 의미합니다.
이것이 id에 의해 얻어지면 반환되는 것은 더 이상 컬렉션 배열이 아니라 단일 배열입니다. 일반적으로 id가 반복되지 않는다는 것을 보장하기 때문입니다.
이것은 실제로 CSS와 유사한 방법을 사용하여 HTML에서 특정 문장을 찾는 것입니다.
ALL이 있든 없든 차이점은 그렇지 않을 때 첫 번째 줄부터 아래로 검색하고 첫 번째 줄을 찾으면 반환하고 All로 모두 찾습니다.
이 쿼리를 얻을 때 더 일반적인 여러 다른 인터페이스의 병합으로 간주할 수 있습니다. 그리고 유형은 제한이 없습니다.위의 마지막 예에서 유형은 두 개의 레이어가 있으므로 더 정확합니다. 전에는 작동하지 않았습니다.
가져온 후 해당 속성을 가져온 다음 속성을 수정할 수 있습니다.
즉, 이렇게 재생하려면 모든 CSS 속성을 수정할 수 있습니다.
변경할 때 이름 지정 규칙이 약간 다릅니다.
이렇게 플레이할 수도 있습니다.
문장 추가:
선택한 후 여기에서 항목을 변경할 수도 있습니다.
HTML 코드에서 h1 클래스를 삭제할 때.
여기서 코드에서 그에 대한 클래스를 지정할 수 있습니다.
추가 사항이 있으며 당연히 삭제할 수도 있습니다.
이제 텍스트의 스타일을 수정하는 두 가지 방법이 있습니다. 하나는 직접 .style()을 지정한 다음 할당하고 수정하는 것입니다. 두 번째는 자신이 속해 있는 클래스를 수정하는 것으로, 클래스에 따라 CSS 속성을 작성하면 그에 따라 속성도 자연스럽게 수정된다.
Toggle은 스위치로 클래스에서 토글되면 클래스에서 제거되고 다시 클래스에 추가됩니다.
클릭 후 빨간색으로 변하는 동작을 구현하려면 이벤트 리스너를 추가해야 합니다.여기에 첫 번째 매개 변수는 모니터링 대상이고 여기에서 모니터링할 클릭 이벤트이며 클릭 이벤트가 발생한 후에 함수가 실행됩니다.
HTML의 텍스트 콘텐츠를 수정할 수도 있습니다.
이 물건을 직접 반품하는 것도 가능합니다
여기에서 textContent와 innerHTML의 차이점에 유의하십시오.
전자는 텍스트 내용만 반환하고, 후자는 <h1></h1>에 포함된 실제 내용을 반환하며, 여기에 포함된 내용에는 <em>도 함께 반환됩니다.
따라서 전자는 텍스트만 변경할 수 있는 반면 후자는 HTML 문을 텍스트에 직접 할당할 수 있습니다.
HTML의 속성을 가져옵니다.
여기에서 얻은 후에 수정할 수 있습니다. 예를 들어 속한 클래스를 수정합니다.
속성을 추가합니다.
메소드를 작성한 후 사용시 사이트 이름을 public open 멤버로 사용하고 직접 할당을 받으십시오.
정적 메서드는 개체가 아닌 클래스 이름을 사용하여 호출됩니다.
==============================================
HTML 스크립트 지연 속성 | 루키 튜토리얼(runoob.com)
webGL 렌더링,
WebGL 튜토리얼(yanhuangxueyuan.com)
캔버스 canvas_WebGL 컨텍스트(yanhuangxueyuan.com)
webGL은 렌더링을 위한 API 집합입니다. 어떻게 사용합니까?
DX를 배운 후 우리는 그리기 작업의 핵심이 컨텍스트라는 것을 알고 있으며 모든 API 호출은 그에게서 호출됩니다.
그래서 여기서 GL은 동일합니다.HTML과 CSS의 그리기 기능이 만족스럽지 않을 때 웹 GL의 API를 사용하여 원하는 그림을 실현할 수 있습니다.
그래서 그것을 사용하는 방법? 키포인트가 컨텍스트라고 해서 여기서 컨텍스트를 얻습니다 컨텍스트를 얻으려면 먼저 캔버스 객체가 필요합니다 캔버스를 가지고 나면 캔버스의 속성 중 하나가 컨텍스트입니다.
사실 컨텍스트를 파악한 후 렌더링은 주로 세 부분으로 구성됩니다. 카메라 준비, 장면의 개체 준비, 처음 두 부분을 렌더러에 가져오기입니다. 그냥 렌더링하세요.
테크니컬 아트의 성장으로 가는 길 - Games202 Homework (Extra 2), WebGL Basics-Knowledge
이전에 webGL 문서에서 직접 작성한 기사를 읽었는데, 기본적으로 이 정도면 충분합니다.
기본적으로 대략적인 이해를 하고 숙제를 하면서 찾아보세요.
.
202 숙제