Save Game Scores using localStorage. JavaScript/CSS Game: #2.16 the hidden Gems

웹 API는 일종의 마술입니다 Storage API와 약간의 JavaScript를 사용하여 간단한 게임을 만드는 방법을 보여 드리겠습니다

[음악 연주] 안녕! 오늘 Web Storage API와 JavaScript 간의 연락에 대해 이야기 해 보겠습니다 우리는 게임에서 점수 숫자를 영구히 유지하기 위해이를 사용합니다 점수를 저장하십시오 저는 Anatol이고 FrontEnd 개발의 좋은 부분을보고 있습니다 [음악 연주] 이전 에피소드 중 하나에서 이미 간단한 게임을 만들었지 만 점수 표는 현재 세션에서만 유지됩니다

게임으로 탭을 닫으면 모든 데이터가 사라집니다 세션에 관계없이 점수를 유지하기 위해 Web Storage API 또는 쿠키 쿠키는 특정 웹 브라우저의 정보를 저장하는 데 사용되는 작은 텍스트입니다 도메인 상태 정보와 사용자의 탐색 활동을 기억하도록 설계되었습니다 JavaScript API에서 사용할 수있는 메소드는 get, getAll, set, remove, getAllCookiesStores입니다

대부분의 브라우저는 도메인 당 쿠키 50 개를 초과하지 않으며 도메인 당 4KB를 초과하지 않습니다 게다가 여러 유형의 하이재킹 사용자 데이터를 사용할 수 있습니다 (XSS, XST, XSRF) Web Storage API의 저장소 인터페이스는 세션 저장소 또는 특정 도메인의 로컬 저장소 sessionStorage는 localStorage와 유사하지만 유일한 차이점은 localStorage에는 만료 집합이 없으며 페이지가 저장 될 때 sessionStorage에 저장된 데이터가 지워집니다 세션이 끝납니다 sessionStorgare에서 다음 메소드를 찾을 수 있습니다 : key, getItem, setItem, removeItem, clear 또한 길이 속성을 사용할 수 있습니다

저장된 데이터의 한도는 브라우저마다 다르며 모바일에 따라 다릅니다 및 데스크톱 버전 또한 사용자는이 한도를 변경할 수 있습니다 W3C는이 제한을 도메인 당 5MB 값으로 설정할 것을 권장합니다 또한 "jsperf"메트릭에 따르면 localStorage는 쿠키보다 빠르게 작동합니다

따라서, 내 선택은 분명하다 나는 localStorage를 선호한다 코드를 보자 [음악 연주] 구현은 매우 쉽습니다 localStorage가 사용 가능한지 확인하십시오

그렇다면 "득점 – 점수"항목을 얻으십시오 그것에서 null이 아닌 경우 Best Scores 테이블에 사용하십시오 이제 게임이 끝나면 "Fap-Scores"항목에 보관 된 업데이트 된 점수를 localStorage에 저장하십시오 그렇게 간단합니다

페이지를 다시로드 해 봅시다 예, 점수는 그대로 있습니다 그래서 그게 전부입니다 다른 웹 API와 약간의 자바 스크립트를 조합하여 직접 만들 수 있습니다 작은 멋진 게임

진정해, 안 그래? [음악 연주] 내 코드는 인터넷에서 사용할 수있는 GitHub 문서에 있습니다 더 많은 정보를 얻으려면 열심히 노력하십시오 [음악 연주] 이 비디오가 마음에 들면 "좋아요"하고 친구와 공유하거나 다른 에피소드를 시청하고 시청하십시오 [음악 연주] 이번 주 동안의 모든 것입니다 보고 지켜봐 주셔서 감사합니다

[#6] CSS Einführung: Kontakt Formular stylen

soooo를 전체 이론을 중지하십시오! 오늘은 CSS를 사용하여 문의 양식을 작성합니다

나는 그것을 위해 부트 스트랩을 사용할 것이다 그것이 당신을 괴롭히지 않는다면, 해당 비디오를보십시오 이 시점에서, 우리는 지난 번에 멈췄다 먼저 Bootstrap CSS 파일을 작성합니다 나는 제목 꼬리표 밑에서 그렇게한다

"머리"에 우리는 그것을 볼 수 있습니다 아직 부트 스트랩 특정 클래스에 액세스하지는 않았지만 그럼에도 불구하고 디자인은 어쨌든 바뀝니다 그 때문이야 부트 스트랩은 <html> 및 <body> 스타일과 같은 일반 태그입니다

내 자신의 CSS 파일을 만들 수도 있습니다 나는 그것을 "stylecss"라고 부른다 여기에 우리 자신의 디자인을 만들 것입니다 나는 그것을 통합 할 수있다

같은 구문 "stylecss"만 부트 스트랩 특정 클래스를 통합하여 시작합니다 양식을 최대한 동적으로 유지하는 데 도움이됩니다 나는 그것을 잠시 동안 할 것이고, 내가 왜 나중에 설명하는지 설명 할 것이다 해냈다

그것이 내가 그것을 보는 방법입니다 좋아 보인다 페이지의 줄 바꿈도 작동하는지 테스트 해 보겠습니다 여기부터입니다 너무 좁다

더 이상 서로 옆에 맞지 않으며 서로 부러집니다 이것이 바로이 부트 스트랩 특정 클래스를 포함시킨 이유입니다 정확히 그게 뭐야? 일단 컨테이너 클래스 전체 내용 그러나 그것은 역 동성과는 아무런 관련이 없습니다 중요한 것은 각각의 중첩 된 "열"클래스가있는 "행"클래스입니다

기억하십시오 : 너비의 최대 12 배 1 여기에 나는 여섯 번을 두 번이나 먹는다 따라서 주소 데이터와 양식 데이터가 나란히 표시됩니다 전체 너비를 사용하십시오 각 경우에 사용할 수 있습니다

조금 더 큰 개별 입력 필드는 7, 7 및 더 큰 메시지 : 11 여기서 7, 7, 11을 볼 수 있습니다 그리고 입력 필드를 모양대로 보이게하려면 나는 "form-control"클래스를 사용했다 부트 스트랩 부분까지 내 style

css을 지금 수정하고 싶습니다 추가 변경 먼저, 컨테이너를 편집하고 싶습니다 이를 위해 저는 "큰"클래스를 만듭니다 내부 거리에 대한 값을 제공합니다

이것은 "패딩"으로 가능합니다 100px 위 아래로 나는이 "큰"클래스를 지적한다 컨테이너 클래스에 추가됩니다 결과적으로 텍스트는 이제 100 픽셀 아래로 슬라이드됩니다

"패딩 바닥"은 볼 수 없지만 여기에도 있습니다 100 픽셀 추가되었습니다 다음으로, 나는 전체 "섹션"을 여기에 벽지로 원한다 실수 그래서 모든 것이 너무 흐린 흰색으로 보이지 않습니다 이를 위해 나는 새로운 클래스를 정의한다

나는 그 "접촉"이라고 부른다 나중에 배경 이미지가 상대적으로 어두워 야합니다 그래서 나는 글꼴 색상 흰색 당신이 그것을 잘 읽을 수 있도록 그건 그렇고, 이것은 서면의 속기 방법입니다 그래서 나는 또한 여섯 번 "f" 나는 또한 "흰색"이라고 쓸 수 있습니다

모든 것이 동일합니다 아웃 이미지가 상대적으로 위치해야합니다

"배경"명령으로 선택됩니다 여기에서는 "img"폴더의 그림을 참조합니다 "Kontaktjpg" 중간에 고정해야합니다

여기서 "고정"은 브라우저 창을 기반으로합니다 "background-size : cover"를 사용하면 이미지의 크기가 자동으로 조정됩니다 브라우저 창이 크기가 조정됩니다 "연락처"클래스를 "섹션"에 지정합니다 그리고 한번 살펴 봅시다

아름다운 🙂 그런데 배경 이미지는 웹 사이트에서 라이센스가없는 이미지입니다 "Thestocksim" 다음 나는하고 싶다 이 제목 섹션을 여기에서 편집하십시오

그게이 작품이야 그 안에 <h2> 제목이 있습니다 및 단락 그래서 저는이 수업을 "제목"이라고 부릅니다 먼저 "title"클래스에서 제목을 정의하십시오

첫 번째는 조금 커야합니다 28px, 상대적인 위치, 그리고 이번에는 "마진 (margin)"과 함께 마진을 용서합니다 15 픽셀 아래로 뿐만 아니라 내부의 거리 예를 들어, "텍스트 변환"으로 설정할 수 있습니다 광고 제목은 대문자로 표시되어야합니다

"소문자"는 모든 것을 소문자로 변환합니다 이제 자라났습니다 다음은 문단입니다 그래서 "title p"

여기서 글꼴 크기를 조정합니다 폰트의 가중치, 즉 폰트의 넓이를 표시합니다 Sooo 조금 더 커 완벽한 다음은 주소 데이터와 입력 필드입니다

나는 클래스 "input"이라고 부른다 "정렬되지 않은 목록"으로 시작하십시오 모든 것이 나중에 여기에 추가 될 것입니다 및 "정렬되지 않은 목록" 중첩되어 있습니다 여기서 다시 외부 거리 20 픽셀 및 목록 항목 나는 또한 무언가를 끌어 내려야한다

또한 "마진"값에 대한 약자 표기법이 있습니다 이것은 다음과 같이 할 수 있습니다 : 즉, 위 아래로 15 픽셀을 의미합니다 왼쪽 및 오른쪽으로 0 픽셀 나는 또한 글꼴 크기를 조정하고 같은 "무게" 그것은 일관성이 있습니다 지금은 15 픽셀 사이입니다

그리고 나를 괴롭히는 것은 다른 모든 것은 흰색 인 반면 링크는 파란색으로 바뀝니다 그래서 "input li a" "color : white" 하나는 논리적으로 글꼴을 사용합니다 레이블을 사용자 정의하십시오

라벨이 정렬됩니다 "행"클래스 (행 입력)의 "양식"아래에 있습니다 그래서 나는 다음과 같이 쓸 수있다 "입력 양식 레이블" 다른 글꼴을 용서하십시오 크기 14 픽셀 같은 "font-weight"를 다시 가져옵니다

그것은 단지 작은 변화를 일으킬 것입니다 조금 더 얇아졌습니다 "데이터 입력"텍스트를 아직 읽을 수 없습니다 그래서 나는해야한다 또한 흰색의 색상

데이터 입력은 "전설" 그래서 나는 말할 필요가있다 "양식 전설"input 전설 양식 색상 : 흰색

가장자리에있는 정보 : 나는 어디서나 "리"또는 그냥 "ul"또는 "p" 그러나 귀하의 웹 사이트가 나중에 만료되지 않을 가능성이 매우 높습니다 이 문의 양식 이다 그러나 그들은 또한 다른 단락과 다른 표제를 가지고있다 정의했다 그리고이 글을 쓸 때,이 정의는 "

title"클래스에만 적용됩니다 나중에 다른 클래스와 헤드 라인 "h2"를 정의 할 수 있습니다 매우 다른 것처럼 보입니다 다음 이 "form-control"클래스를 약간 편집하고 싶습니다 나는 그것을 전혀 좋아하지 않는다

그래서 내가 "양식 제어"클래스 과 나는 흰 글꼴 색이 필요합니다 우리는 이유를 알게 될 것이다 나는이 "상자 그림자"를 제거하고 싶다 그건 그렇고 여기가 바로 이것입니다 이 파란색 프레임

그건 전혀 맞지 않아 나는 원한다 흰 테두리 다른 종류의 "배경"명령으로 작업합니다 즉 "rgba"와 함께 나는 그 위에 검은 배경을두고 싶다

검정색은 RGB의 0,0,0입니다 이 "a" 알파 값을 나타냅니다 그래서 배경이 얼마나 강한 지 보여줍니다 나는 20 %를 말한다 그는 80 % 투명합니다

그리고 다음과 같은 일이 발생합니다 여기서 검은 색의 매우 강한 투명한 배경을 봅니다 이제 글꼴 색이 선명합니다 나는 흰 글자를 써야한다 그렇지 않으면 나는 아무것도 보지 못한다

이 입력란을 클릭하면 해당 입력란에 있음을 알 수 있습니다 들판에 도착했다 나는 지금 어떤 의견도 내지 않는다 작은 흰색 커서는 약간보기가 어렵습니다 우리는 이미 "hover"selector를 알고 있습니다

그러나 또 다른 것이 있습니다 즉 "초점" 그리고 여기에서는 값만 변경합니다 투명성 20 ~ 60 %

그는 훨씬 덜 투명하다 여기를 클릭하면 너 내가 지금 어디에 있는지 분명히 알 수있어 경우에 따라, 나는 또한 이름 필드 수 있습니다 "자동 초점"을하십시오 그리고 여기

지금 페이지를 새로 고침하면이 필드에 커서가 자동으로 표시됩니다 이 별표는 여기에 있습니다 예를 들어 빨간색으로 색칠 할 수 있습니다 그것을 위해 <span> 클래스를 용서합니다 "빨강"이라고 부르세요

그래서 "붉은 색"을 위해 나는 특정한 색깔을 용서한다, 나는 가지고있는 소리 이미 선택되었습니다 그러면 당신은 그것들을 더 잘 볼 수 있습니다 어떤 경우에는 단추가 누락되었습니다 아직 할 수 없어 인식하고 있습니다

따라서 "btn"클래스는 버튼을 정의합니다 그리고 무엇보다도 약간 큰 글꼴 크기 : 14 픽셀 with "cursor : pointer"나는 커서를 얻는다 클릭 손과 닮았다 "font-weight"는 약간 더 커질 수 있습니다 거리 10 픽셀 밖 위쪽으로

짧은 맞춤법을 다시 채우기 : 5 픽셀 위아래로 좌우로 15 픽셀 과 또한 흰색으로 장식해야합니다 "양식 제어" 여기서 저는 알파 값으로 다시 작업합니다 20 %를 다시 선택합니다 여전히 Button 클래스를 할당해야합니다

버튼이 있습니다 그리고 우리는 그 결과를 살펴볼 것입니다 예, 이제 버튼처럼 보입니다 '마우스 오버'효과 만 아직 실종 상태입니다 이제는 더 이상 읽을 수 없기 때문입니다

그러나 그것은 더 이상 로켓 사업이 아닙니다 "btn : 가져가" 여기 또 다른 투명성 가치를 생각해 봅시다, 60 % 우리는 색깔이 빠져있는 것을 보았습니다 흰색을 가져 가자 모든 것이 꽤 좋아 보입니다

나를 괴롭히는 것은, 당신은 여전히이 흰색을 매우 심하게 읽을 수 있습니다 너를 지금 원해 셀렉터 "호버"와 "포커스"두 가지가 추가로 표시됩니다 즉 "전에"와 "후에" 당신이이 벽지에 너무 강하지 않도록 집중된 그런 그레이닝 효과를 사용하고 싶습니다

나는 너에게 그림을 보여줄 것이다 나는 그것을 "img"폴더에 압축했다 이것을 "곡물"이라고합니다 나는 당신이 그것을 지금도 볼 수 있기를 바랍니다 그것은 매우 작습니다

나는 그것을 확대 할 것이다 네, 어쩌면 당신은 그것을 인식 할 수 있습니다 왼쪽 상단에 검은 색 픽셀이 있습니다 3 개의 백인으로 둘러싸인 나는이 사진을 찍을 것이다 이 그릿 이미지를 이제 전체 배경 이미지에 걸쳐 배포하고 x 축과 y 축의 거울

이렇게하면 두 번째 픽셀이 모두 검은 색이됩니다 어떻게 끝내야하는지 보여 드리겠습니다 이를 위해 "연락처"클래스를 약간 변경합니다 우리의 배경 그림이 포함되어 있습니다 이제 "이전"선택기를 사용하고 있습니다

이 곡식 효과는 그것입니다 나는 상대적으로 그러나 절대적으로 그 위치를 정하지 않는다 그래서 나는 그렇게 말한다 나는이 곡물을 왼쪽 상단 구석에서 시작하고 싶다 전체 너비와 전체 높이를 악용하려고합니다

이번에는 절대 위치 지정 나는 텍스트의 형태로 문자열의 형태로 내용을 원하지 않는다 오직 그림 만 가져와 물론 그것을 지정해야합니다 다시 "background : url ()"명령을 통해

'이미지'가 호출되었습니다 "Koernungpng" 이제는 "반복"이라고 말해야합니다 그런 다음 x 축과 y 축에 자동으로 미러링됩니다 그리고 한번 살펴 봅시다

인식하기는 어렵지만 효과는 매우 가벼워 야합니다 하지만 지금 우리가 알아 차리는 것은 텍스트는 이제 배경으로 떨어졌습니다 그는 곡물과 겹쳐져있다 그리고 물론 위대하지 않습니다 그래서 지금 우리가 그것을 전면에 가져와야하는 이유입니다

하지만 우리가하기 전에 나는 아직도 그것을 넣는다 그것의 "후"명령 사진이 너무 밝습니다 그렇기 때문에 흰색 텍스트를 그렇게 심하게 읽을 수 있습니다 여기서 나는 처음으로 같은 일을한다

왼쪽 상단에서 다시 시작합니다 전체 너비 및 전체 높이 아무것도 삽입하지 않음 ( ""), 절대 위치 이제 "배경"명령으로 작업하고 다시 손쉽게 넣을 수 있습니다 투명 검정색 50 % 가시, 50 % 투명

이제 모든 것이 훨씬 더 어둡게되었습니다 그리고 나는 이것을 더 잘 알 것이다 내가 배경으로 말했듯이 이제는 하나입니다 CSS 명령 즉, "z- 색인" 내가 "1"을 용서한다면 텍스트가 자동으로 사라진다

첫 번째 (제일) 수준으로 웹 사이트를 여러 단계 또는 계층으로 상상해보십시오 "position : relative", 왜냐하면 제목은 컨테이너를 기준으로 동작해야하기 때문입니다 어쩌면 전체가 조금 더 중심에 위치 할 수도 있습니다 순간에 그것은 서있다 매우 왼쪽 또 다른 외부 정리

60 픽셀을 다시 내립니다 높이를 조금 늘리십시오 그래서 지금은 최전방에서 배경이 조금 더 어둡기 때문에 명확하게 볼 수 있습니다 우리는 중간에 중심을 두었습니다

이제 주소 데이터와 입력 필드를 동일하게 처리해야합니다 여기서 입력 필드부터 시작합니다 먼저 "z- 색인"을 맨 위에 놓으면 다시 볼 수 있습니다 그리고 우리는 상대적으로 자신을 다시 자리 매김해야합니다 그래서 그것은 또한 앞으로 나아갔습니다

완벽한 그리고 저를 괴롭히는 마지막 것 이 총알은 여기에 있습니다 나는 그것을 갖고 싶지 않습니다 나는 그것을 더 의미있는 그림으로 대체한다 그리고 아마도 당신은 아직도 기억하고 있습니다

부트 스트랩쪽에 있다고 이른바 "glyphicons"가 주었다 그리고 저는 그것을 지금 정의합니다 이것은 HTML에 직접 있습니다 그리고 나는 그것을 놓을 것이다 여기에 전에 "<span>"클래스를 사용합니다

"glyphicon"과 각 클래스 나는 이미 알아 냈다 "Glyphicon 도로" 그래서 지금은 복사합니다 전화의 경우, 전자 메일 및 링크 이제는 각 클래스 만 변경합니다 "이어폰"은 전화 아이콘을 제공합니다

"봉투"봉투 전자 우편으로 및 "지구본" 글로브 아이콘을 제공합니다 어떻게 보이는지보세요 여기 사진이 있습니다 그러나 교란 여전히 "정렬되지 않은 목록"의이 "지점"입니다

그리고 부트 스트랩 클래스가 있습니다 이 목록 항목이 사라집니다 그리고 그 클래스는 호출됩니다 "목록-스타일이 적용되지 않은" 완벽한

결과에 매우 만족합니다 이제 여기에 바닥 글을 설치할 수 있습니다 그 위에 탐색 용 헤더가 있습니다 그러나 지금은 충분해야하는 연락 양식을 위해 이 비디오는 CSS로 할 수있는 것에 대한 통찰력을 제공했습니다

부트 스트랩 개념에 참여하십시오 알다시피, 그것은 매우 논리적이고 어렵지 않습니다 이제는 처음에 보인다 직접 웹 사이트를 쓰고 싶지 않은 경우 기성 템플릿에 의존합니다 그는 여러 곳에서 그것을 발견합니다

네트워크 예를 들어,이 문의 양식은 수정 된 것일뿐입니다 버전 "통합"템플릿 주제에 대한 링크는 비디오 설명에서 찾을 수 있습니다 다음 비디오에서는 연락처 양식으로 숨을 쉬게됩니다

이를 위해 우리는 데이터베이스와 스크립팅 언어 PHP가 필요합니다 다음에 보자

Responsive web design | css media query | html viewport

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

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

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

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

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

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

Helvetica Fonts CSS Override Tutorial by Makis.TV

이 비디오에서는 FireFox 및 Chrome에서 Helvetica 글꼴을 덮어 쓰는 방법을 보여 드리겠습니다 우리는 Makis에 대해 쓴 단계별 튜토리얼을 따라갈 것입니다

TV 이것이 Helvetica 글꼴이 FireFox에서 어떻게 보이는지, 꽤 끔찍한가? 그리고 이것은 우리가 오버라이드를 적용 할 때 어떻게 보일까요 여기에 우리가 간다! FireFox 메뉴로 이동하여 "도움말"- "문제 해결 정보"를 선택하십시오 "응용 프로그램 기본 사항"에서 "폴더 표시"를 선택하십시오

새 폴더를 만들고 이름을 "크롬"으로 지정한 다음 열기 그런 다음 새 텍스트 문서를 만들고 "userContentcss"로 이름을 바꾸고 좋아하는 편집기 (예 : 메모장)로 엽니 다 여기서 우리는 모든 마술을 할 수있는 코드 라인을 삽입 할 것입니다 MakisTV 기사 및 코드 "@font face

"로 이동하십시오 그런 다음 "userContentcss"에 붙여넣고 파일을 저장하고 닫습니다

FireFox를 다시 시작하고 테스트 페이지로 이동하여 글꼴 모양을 확인하십시오 글꼴은 지금 훨씬 좋아 보인다! 다음은 Chrome 브라우저입니다 다시 한번이 글꼴이 얼마나 못생긴지 살펴보십시오 MakisTV "Helvetica Fonts Override"기사로 이동하십시오

그런 다음 [Windows 키]를 누르고 "% APPDATA %"를 입력하고 Enter 키를 누릅니다 새 창이 열리면 Backspace를 눌러 한 폴더 뒤로 이동하십시오 그런 다음 "Local"- "Google"- "Chrome"- "User Data"- "Default"- "User StyleSheets"을 선택하고 메모장과 같은 편집기로 "Customcss"를 엽니 다 이제 MakisTV 기사로 돌아가서 "@ font-face

"코드를 선택하여 Customscss에 복사하여 붙여 넣으십시오 파일 저장 후 닫기 알림 : 재정의를 적용하려면 Chrome을 다시 시작할 필요가 없습니다

차이점을 말할 수 있습니까? 다시 한 번,이 페이지가 어떻게 보 였는지와 재정의가 적용된 후 어떻게 보이는지 보아라 어떤 사랑 표시 : LIKE AND SUBSCRIBE;) WWWMAKISTV

Tutorial CSS – Cursor

안녕, 내 이름은 Bruno Correa Zimmermann이고 나는 Maria Eduarda Romagna입니다 우리는 학생입니다

연방 교육 과학 연구소에서 인터넷을위한 컴퓨터 과학 기술 과정 Rio Grande do Sul Bento Gonçalves 캠퍼스의 기술 그리고이 튜토리얼에서는 이름이 말하는대로 커서를 수정하는 데 사용되는 CSS라는 커서의 속성에 대해 설명합니다

PHP02.0 PHP Tags, Comments, and Output Validation

안녕하세요 이 비디오에서는 PHP 태그에 대해 이야기하고 싶습니다

의견 및 확인 먼저 PHP 태그에 대해 이야기 해 보겠습니다 이전 몇 개의 동영상에서 PHP 태그를 사용하는 것을 보았지만 우리가 이미 보았던 것을 통해 돌아가서, PHP 태그는 가장 자주 양식에서 사용됩니다 그들은 <? php로 시작한 다음?>로 끝납니다 그래서 본질적으로 꺽쇠 괄호 처음에는 물음표가 찍힌 다음 PHP로 시작합니다

이 가장 일반적인 유형의 PHP 태그입니다 때로는 긴 PHP 태그라고도하지만 그들은 또한 가장 보편적으로 받아 들일 수 있습니다 거의 모든 PHP 설정에서 활성화됩니다 실제로이 태그가 PHP 태그 유형이 될 수 있습니다 비디오에서 사용하고 실제로 어떤 종류의 일을 할 때나 자신을 가장 자주 사용합니다

PHP 작업 그들이 일반적으로 일하는 방식은 다음과 같은 PHP 태그 세트를 넣는 것입니다 이 PHP 태그 안에 우리가 원하는 모든 PHP 문을 넣을 수 있습니다 예를 들어, echo 문은 이전에 사용한 적이있는 문장입니다 예제를 사용하고 꽤 광범위하게 여기에서 예를 들어 잠시 동안 계속 사용합니다 사케

그래서 echo라는 테스트일지도 모른다 아마도 HTML break 태그를 그 시점에서 그 에코의 출력 그래서 이것은 PHP를 사용하는 꽤 일반적인 종류입니다 태그 물론 PHP 태그의 기본 목적은 우리가 할 수있는 방법을 제공하는 것입니다 우리의 파일에서 PHP 코드는 PHP 컴파일러, PHP 서버에 인식 할 수 있도록 PHP 코드와 그 밖의 다른 점을 쉽게 구분할 수 있습니다

HTML, CSS, JavaScript 및 기타 유형의 코드와 같은 파일이 Google 파일에있을 수 있습니다 그 물론 서버가 그 차이점을 알 수 있어야합니다 서버가 어떤 부분이 모호하지 않게 인식 할 수 있도록 코드 유형 PHP를 사용하여 PHP로 실행해야하는 부분을 알고 있어야합니다 그 다음엔 그렇지 않아 서버가 단순히 통과하는 PHP; 실행을 시도하지 않고 단지 그것을 포함한다

실제 출력과 같습니다 내가 말했듯이, 이것은 PHP의 가장 일반적인 유형입니다 태그를 사용합니다 그러나 짧은 태그가 사용되는 경우가 있습니다 PHP 짧은 태그는 잠시 전에 사용했던 일반 태그처럼 보이지 않는 경우를 제외하고는 태그의 시작 뒤에 PHP 문자 이 짧은 태그를 좋아하는 많은 사람들이 분명히 이 태그 집합의 각 시작 부분에 PHP를 입력하지 않아도됩니다

그래서 약간의 장점이 있습니다 그러나 짧은 태그의 단점은 보편적으로 이용 가능하지는 않습니다 PHP 서버를 둘 다 인식하도록 설정할 수 있습니다 일반 태그와 이러한 짧은 태그가 있지만 모든 서버가 그렇게 설정되어 있지는 않습니다 모든 사람이 아닙니다

서버는 짧은 태그를 인식하고 사용할 수 있도록 구성됩니다 자신의 것이면 서버를 설치하면 확실히 설정 옵션을 사용할 수 있습니다 쉽게 충분히 하지만 공유 호스팅 환경에서 일하고 있다면 PHP 서버의 구성을 실제로 제어하지 못했을 가능성이 있습니다 이 짧은 꼬리표는 너를 이용할 수 없을지도 모른다

그래서 나는 일반적으로 너를 사용하지 않는다 그들 내 개발에 관한 프로젝트를 세우는 것보다 더 실망스러운 것은 아무것도 없다 컴퓨터에서 어쩌면 내가 자신에게 짧은 태그를 사용하도록 허용했는지 알아 내고, 그런 다음 실제 제작 서버에 짧은 태그를 배치하려고 할 때 사용할 수 없으며 코드로 돌아가서 모든 것을 다시 정상 태그 따라서 짧은 태그는 여기에 있지만 가능한 한 당신은 가끔씩 사용하는 것을 보았을 것입니다

일반 태그만큼이나 보편적입니다 실제로 PHP 태그를 작성할 때 – 우리는 이미 만든이 PHP 스크립트에서 옵션을 호출했습니다 tags_examplephp -이 파일에 예제를 사용하여 여러 세트를 사용할 수 있습니다 PHP 태그가 필요할 수도 있습니다

그래서 여기, 예를 들어, 물론 저는 이미 하나의 일반 PHP 태그 세트를 넣습니다 여기서 "이 테스트는 텍스트"라는 텍스트를 반향 출력합니다 그 다음에 휴식이 있습니다 내가 원한다면 확실히 다른 PHP 세트를 넣을 수 있습니다 태그를 아무 문제없이 사용할 수 있습니다

나는 "이것은 또 다른 시험"이라고 말할 수 있습니다 그 후 휴식 태그 실제로 PHP 태그를 작성할 때뿐만 아니라, 그 (것)들의만큼 다른 사본 또는 PHP 꼬리표의 많은 다른 세트에서 우리 필요하지만 우리는 한 줄에있을 수 있도록 설정할 수도 있습니다 내가 넣은 PHP 태그의 두 세트의 경우입니다하지만 제가 원한다면 다시 여러 줄에 걸쳐 놓습니다

어쩌면 여기에 내가 할 수있는 것 PHP를 사용하여 정렬되지 않은 목록을 출력 할 수 있습니까? 그래서 한 세트의 PHP 태그 하지만 그 안에 여러 개의 echo 문이 있습니다 우리는 거기에 갈

내 세미콜론을 잊지 마라 줄 끝에서 PHP 문장은 항상 세미콜론으로 끝납니다 뭔가 그걸 따라 선은 잘 될 것입니다 PHP 태그는 같은 줄에 포함될 수 있습니다

이리 PHP 태그에는 여러 줄이 포함될 수 있습니다 둘 중 하나만 작동합니다 벌금 지금 내 웹 브라우저로 이동하여 새로 고침하면 모든 것을 볼 수 있습니다

마치 평범한 오래된 HTML 인 것처럼 렌더링됩니다 실제 코드를 보면 여기서 생성되는 것은 PHP가 세계에서 가장 예쁜 코드는 아닙니다 출력하지만 여전히 근본적으로 유효합니다 여기에 대해 더 자세히 얘기하겠습니다 조금

실제로 출력되고있는 "this is a test"휴식을 볼 수 있습니다 그곳에 거기에 내 짧은 태그가 표시됩니다 짧은 태그가 실제로있는 이유 여기에 내 서버가 실제로 허용하도록 구성되어 있지 않기 때문에 표시됩니다 일반 텍스트처럼 출력됩니다

그리고 여기에 내 순서가없는 목록이 있습니다 그 안에 출력되는 두 개의 목록 항목 내 짧은 태그가 실제로 존재하지 않기 때문에 내 서버에 의해 인정되면 나는 잠시 동안 여기에서 그들을 제거 할 것이다 우리가 끝내고 실제로 우리는 PHP 태그를 넣고 있습니다 PHP 태그의 스타일은 싱글 라인이나 멀티 라인이 될 수 있다는 사실 외에도, PHP 태그는 PHP 스크립트의 어느 부분에도 PHP 태그를 넣을 수있는 옵션이 있습니다

우린 필요합니다 지금은 실제로 내 PHP 태그를 몸 안에 넣고 있습니다 그래서 우리는 PHP echo 문이 실제로 출력을 볼 수있게되었습니다 우리는 PHP를 통해 점점 더 많은 일을하는 법을 배웁니다 우리는 이러한 PHP 태그를 넣는 범위를 넓힐 것입니다

나는 예를 들어, 머리 부분에 PHP 태그가 있습니다 어쩌면 나는 약간의 임베디드가있다 CSS는 내가 머리 부분에 여기에 올렸고, 아마 내가하고 싶다, 말하자면, 정렬되지 않은 목록에 대해 약간의 스타일을 지정하십시오 그 정렬되지 않은 목록을 위해서 아마도 나는 배경색을 지정하면 쉽게 넣을 수 있습니다 내 색 회색으로

우리가 있습니다 그래서 정렬되지 않은 목록에 회색 배경이 있습니다 앞으로도 우리가 동적으로 원하는 상황을 우연히 목격한다면 해당 순서가 지정되지 않은 목록에 배경색을 지정하면 그 시점에서 이점이있을 수 있습니다 실제로 PHP 태그를 사용하여 배경의 실제 색상을 출력합니다 그 안에 내가 할 수있는 특별한 경우는 회색으로 하드 코딩하는 대신에 실제로 할 수 있습니다

PHP 구문을 여기에 넣으십시오 이 경우에는별로 흥미롭지 않습니다 그냥 갈거야 색상 회색을 반향 출력하는 PHP 구문이어야하므로 본질적으로 동일하게 끝납니다 마치 회색으로 입력 한 것처럼 회색으로 하드 코딩 된 것처럼 보이지만 내 문서의 머리 부분에 PHP가 있습니다

미래에 가능성을 열어줍니다 동적으로 배경 색상을 선택하는 것과 같은 일을 할 수 있다는 것입니다 보시다시피, 작동합니다 똑같은 방식으로 일반 HTML 파일에서 PHP 태그를 사용할 수 있습니다

일반적으로 어떤 코드도 생각하지 않습니다 예를 들어, 실제 doctype과 우리 문서의 맨 위에 HTML 태그를 엽니 다 PHP에서 드문 경우는 없습니다 파일의 HTML 부분이 실제로 시작되기 전에 실제로 일부 PHP 처리를 수행하십시오 에서 이 특별한 경우에는 아무것도 넣지 않을 것입니다

난 그냥 PHP를 떠날거야 태그가 참조로 정렬되거나 가능하다는 것을 알리는 메시지로 표시되지만 미래는 실제로 우리가 꽤 많이 끝내는 곳 중 하나입니다 우리의 PHP 작업, HTML 문서 자체의 개방 doctype 전에 우리는 심지어 옵션을 사용하면 PHP 태그를 HTML 태그 안에 넣을 수 있습니다 그래서 여기에 내 문서의 여는 본문 태그에서 인라인 CSS를하고 싶다면 어쩌면 다른 배경색, 예를 들어 스타일이 배경색과 같다고 말할 수 있습니다

당연히 저에게 빨간 배경을 줄 것입니다 와우, 밝다 그리고 그냥 내가 머리 부분에 포함 된 CSS를 사용했을 때처럼, 미래의 상황 우리가 실제로 어떤 색인지를 결정할 수있게 해주는 것이 유리했습니다 PHP로 여기서 출력 할 것이고, 실제로 PHP 코드를 내부에 넣을 수 있습니다 CSS는 HTML 태그의 속성 내에 있습니다

그래서 실제적으로 꽤 많은 embed가 있습니다 일어나는 일종의 그래서 내가 다시 말하면 빨간색 또는 아마 여기 – 실제로, 나는 바뀔 것이다 노란색으로; 우리는 다른 밝은 색으로 우리의 눈을 태울 것입니다 우리는 거기에 갈

당신 잘 작동하는 것을 볼 수 있습니다 말 그대로, HTML 파일의 어디에서나 우리는 능력을 가지고 있습니다 우리가 사용하도록 구성된 다른 종류의 PHP 태그를 넣고 PHP는 다른 위치에서 수행해야하는 작업을 수행 할 수 있습니다 문서의 각기 다른 부분에서 지금 당장은 물론이 모든 것이 아마도 어리석은 것처럼 보이고 실제로 우리가하는 일 때문에 여기있는 것이 아니라고 말할 수는 없습니다 우리는 PHP를 사용하여 우리가 쉽게 할 수있는 것들을 간단하게 보여줍니다

또는 더 쉽게, 그냥 타이핑 이 시점에서 이것은 매우 어리석은 일입니다 미래에는 PHP에 대해 더 많이 배우고 조건부와 같은 것을 배웁니다 PHP가 의사 결정을 내리는 문장, 어떤 조건에 따라이 일을하거나 다른 일을하십시오 PHP가 우리의 요청 및 응답과 상호 작용하는 것을 배울 때, 우리가 많이 배울 때 PHP가 가지고있는 다른 기능들,이 문서의 다른 부분들 모두에 PHP가 포함되어 있습니다

그런 어리석은 짓을 그만두고 실제로 뭔가가 될 것입니다 강력하고 매우 유용합니다 하지만 우리는 여기에 시작과 우리는 지금 막 절대 기초를 배우고있다, 우리는 가고있다 여기서 시작하고 몇 가지 다른 것들과 함께 당신이 바보 같은 모범이라고 부를지도 모릅니다 실제로 이러한 시작 스크립트의 상당 부분이 될 것입니다 그러나 그들은 우리가 앞으로 나아갈 때 뭔가

이것이 PHP 태그에 대한 기본적인 개요입니다 그들은 정규 양식과 짧은 양식 짧은 형태는 좋은 것이 있기 때문에 사용을 권장하지 않습니다 기회가 주어지면 허용되지 않을 상황에 처하게됩니다 정규 서식 일반적으로 PHP 태그가 가장 좋습니다

우리가 작성한 PHP 태그를 쓸 때 한 줄 또는 여러 줄에 걸쳐있을 수 있습니다 PHP 태그를 작성할 때 문서의 어느 부분 에나 삽입 할 수있는 능력 우리가 파일에서 어느 곳에서나 PHP 태그를 적게 가질 수 있습니다 우리가 필요로하는 것처럼 이 짧은 비디오에서 다음 이야기를하고 싶습니다 나는 PHP 주석에 대해 조금 이야기하고 싶었다

HTML과 같이 독자적인 스타일의 주석이있는 것처럼, CSS는 독자적인 스타일의 주석을 가지고 있으며, JavaScript는 자체적으로 PHP를 가지고 있습니다 물론 PHP에도 양식이 있습니다 우리가 일종의 문서로 사용할 수있는 여러 가지 형태의 주석 PHP 주석 – 여기에 당신을 위해 그들을 설명하기 위해 몇 가지 던져 보겠습니다 품종

가장 일반적인 유형 중 하나는 단 일행 C 스타일 PHP 주석입니다 기본적으로 두 개의 // 기호 다음에 주석을 넣기를 원합니다 이 방법은 실제로 작품은 PHP 컴파일러가 두 가지를 볼 때마다 //됩니다 // 그 시점부터 모든 것을 가정합니다 그 라인의 끝 부분이 주석이 될 때까지 컴파일러는 그 모든 자료를 무시할 것이다

그래서 여기에이 경우에는 두 줄을 // 줄의 시작 부분에 넣은 다음 아무것도 넣지 않습니다 PHP에 관한 한 전체 라인은 본질적으로 그렇지 않습니다 있다 그것은 그것에 반응하거나 아무 것도하지 않을 것입니다 우리는 또한 한 줄 주석은 줄 끝 부분에 주석을 추가합니다

그래서 내 순서없는 목록을 시작하는 내 echo 문장에서 나는 "이것은 ul "을 시작합니다 그 특별한 경우에 PHP는 앞으로 나아가서 처음에는 echo 문이 있지만 일단 double에 도달하면 // 다시 나타납니다 그 시점에서부터 줄 끝까지의 모든 것이 주석이고 그것 모두에 반응하지 마라 PHP에서 한 줄 주석은 #을 사용하여 만들 수도 있습니다 같은 기본 아이디어, 두 번 대신 #가 // 한 줄 주석으로 작동합니다

이것은 또한 단일 행입니다 논평 다른 줄의 끝에 포함될 수 있으므로 여기에 넣을 수 있습니다 결말 ul 그리고 double //과 마찬가지로 PHP는 #부터 #까지 모든 것을 무시합니다

라인의 끝, 그래서 기능적으로 #와 double은 동일하다; 그들은 정확하게 똑같은, 그것은 두 가지 스타일의 글쓰기입니다 너는 선호한다 PHP에서 일반적으로 사용되는 또 다른 유형의 주석이 있으며 여러 줄 주석입니다 여러 줄 주석은 / *로 시작하고 * /로 끝납니다 어떤 것 double처럼 //, C 또는 C ++로 작업을했다면 아마 이미 익숙 할 것입니다

이 의견 스타일 PHP에서는 이것을 블록 주석이라고하며, 다시 한 번 코멘트 PHP 코드에 내용을 삽입 할 수있는 방법을 제공합니다 그러나 PHP 컴파일러가 실제로 그것을 무시할 수있는 방법으로 그렇게하는 것입니다 의 장점 블록 주석은 여러 행이 될 수 있다는 것을 의미합니다

이 행은 두 줄 이상 될 수 있습니다 긴 우리가 원하는 경우 한 줄 주석을 사용하여 동일한 기본 주석을 수행 할 수 있습니다 하지만 우리는 4 개 또는 5 개 모두 앞에 이중 // 또는 #을 넣어야했습니다 당신이 그것을 세는 방법에 따라,이 라인의 블록 주석 기호를 사용하면 처음에 오프닝을 넣을 수 있고, 마지막에 닫을 수 있고, 다음과 같이 쓸 수 있습니다

다른 특별한 기호에 대해 걱정할 필요없이 원하는만큼 많은 콘텐츠를 제공합니다 이것이 PHP에 넣을 수있는 세 번째 유형의 주석입니다 내가 점프하면 그 시점에서 내 브라우저로 돌아가서 새로 고침합니다 실제로 코드를 살펴 본다면 PHP 서버에 의해 생성되고 내 브라우저로 전송되면, 이것이 내가 얻는 것입니다 그 근본적으로 우리가 이전에 보았던 것과 똑같은 것을 보았습니다

당신이 그 의견을 찾지 못한다면 그들 중 아무도 실제로 존재하지 않습니다 내가 말했듯이, PHP 서버는 실제로 존재하지 않는 것처럼 주석을 무시합니다 즉, 어떠한 방법으로도 웹 브라우저로 전송되는 출력으로 변환되지 않습니다 뭐든지 주석의 형태로 PHP에 두는 일은 실제로 출력, 실제로는 웹 브라우저로 보내지 않습니다 그래서, PHP 주석은 실제로 있습니다

거기 개발자 PHP 주석을 볼 수있는 유일한 사람들은 사람들이다 누가 실제로 최종 사용자를 포함하지 않을 PHP 코드를보고 있습니다 그만큼 최종 사용자는 PHP 주석의 내용을 보지 않아야합니다 그것을 일반인과 비교한다면 HTML 주석 : 여기에 PHP 태그를 사용하지 않고 일반 HTML 주석을 넣으면 브라우저로 가서 새로 고침하고 다운로드 한 코드를 살펴보면 HTML 주석이 있습니다

따라서 HTML 주석에 입력 된 내용은 사용자 PHP 주석에 포함 된 것은 아닙니다 HTML과 PHP 주석의 차이점 주석은 단지 주석이 아님을 기억해야한다는 점에서 중요합니다 그만큼 적절한 유형의 설명이 파일의 적절한 위치에서 사용되어야합니다 우리가 PHP 태그 집합 안에 HTML 주석을 넣으려면 오류로 간주됩니다

왜냐하면 HTML 주석은 PHP 내부에서 인식되지 않습니다 이와 유사하게 PHP 주석을 사용한다면 문서의 일반적인 HTML 부분에 PHP 태그 집합 외부 (예 : if) 여기에 PHP 태그 외부의 HTML 부분에서 "이것은 PHP 주석입니다"라고 말하고 싶었습니다 내가 실제로 가서 브라우저에서 보았을 때 나는 실제로 그 주석을 볼 것이다 문서의 HTML 부분에 PHP 주석이 더 이상 존재하지 않기 때문에 표시된다 의견으로 인정 받았다

HTML 주석을 사용하지 않고 문서의 HTML 부분에 속하며 PHP 주석은 PHP 부분에 속합니다 귀하의 문서 둘은 실제로 혼합 될 수 없습니다 여기서 마지막으로 얘기하고 싶은 것은 유효성 검사입니다 과거에 PHP CSS를 사용해 본 경험이 있다면 W3C의 HTML 유효성 검사기를 사용하여 코드가 있는지 확인하는 방법 서면이 정확합니다

여기 내 브라우저에서 validatorW3org에 가면 물론 W3C의 유효성 검사기, 여기 유효성 검사기에서는 과거에는 HTML 파일을 업로드하여 업로드 할 수 있었지만 실제로 글을 쓸 때 실수를했는지에 대한 피드백을 제공합니다 귀하의 HTML 코드 PHP로 작업 중이므로이 옵션은 실제로 작동하지 않습니다

우리는 더 이상 실제로 PHP 파일을 선택하여 업로드한다면 많은 많은 유효성 검사 오류와 그 이유가 꼭 그런 것은 아닙니다 우리 HTML에 문제가 있습니다 문제는 HTML 유효성 검사기가 인식하지 못한다는 것입니다 PHP 코드를 이해하지 못합니다

PHP로 작업 할 때 유효성 검사를하고 싶을 때 자신을 확인하고 HTML에 관한 한 올바르게 작업하고 있는지 확인하십시오 우리가 실제로해야 할 일은 유효성 검사기에서이 세 번째 옵션을 사용하는 것입니다 입력 이것이 우리가 할 수있게하는 것은 실제로 우리의 출력을 복사하여 붙여 넣는 것입니다 PHP가 실행되어 그 출력을 검증 할 수 있습니다

방법은 다음과 같습니다 작동 할 것이다 내 태그 예제로 돌아가서 소스 코드를 살펴 보겠습니다 내 PHP의 실행에 의해 생성 된, 내가 그것을 복사하는 경우 유효성 검사 서비스에 붙여 넣은 다음 코드를 확인하여 진정한 의미를 얻을 수 있는지 확인하십시오 우리의 HTML 코드가 맞는지 아닌지의 시점에서 그리고 당신이 여기에서 볼 수 있습니다

내 문서가 HTML 5로 성공적으로 검사되었습니다 두 가지 경고가 있습니다 그 두 가지 경고는 이러한 방식으로 HTML 5 유효성 검사를 수행 할 때 항상 얻게되는 경고입니다 그들은 단순히 HTML 5 적합성 검사기가 실험적이라고 말합니다 기능 – 아직 베타 버전에 속합니다

우리가 얻는 다른 경고는 우리 파일이 실제로 UTF 문자로되어 있다고 보장 할 수는 없습니다 UTF-8 문자 인코딩 우리가 실제로 파일을 업로드하지 않았기 때문에 그 문자 인코딩을 실제로 사용하고 있지 않습니다 대신에 일부 코드를 붙여 붙여 복사했습니다 실제로 아무 것도 모른다 그 코드가 나온 원본 파일에 대한 것이므로 이것은 유효성 검사기가 할 수 없다

PHP로이 유효성 검사를하고 싶을 때, 이것은 그것은 완료되어야합니다 여전히 매우 유용한 도구입니다 기억해야합니다 조금 다르게, 일할 때와는 약간 다른 방식으로 진행됩니다 순수하고 정적 인 HTML 파일을 가지고 있기 때문에 물론 여기에 우리는 사실을 우회해야합니다

유효성 검사기는 PHP 코드를 인식하지 못합니다 정말로, 거기있는 유일한 것은 우리를위한 것입니다 HTML에 관한 한 유효성 검사는 PHP 코드 실행 결과입니다 이것이 실제로 우리가하는 방식입니다