HTML156 CSS 개요 CSS는 우리가 웹 페이지를 스타일하기 위해 사용하는 언어이다. CSS란 무엇인가? CSS는 Cascade Style Sheet 의 약자이다 CSS는 HTML 요소가 화면, 종이 또는 다른 매체에 어떻게 표시되는지 설명한다 CSS는 많은 작업을 절약한다. 여러 웹 페이지의 레이아웃을 동시에 제어할 수 있다 외부 스타일시트는 CSS 파일에 저장된다 왜 CSS를 사용할까? CSS는 다양한 장치 및 화면 크기에 대한 디스플레이의 디자인, 레이아웃 및 변형을 포함하여 웹 페이지의 스타일을 정의하는 데 사용된다. 나의 첫 CSS 예제 문단입니다. 위의 코드를 실행한 결과가 아래 그림이다. CSS는 큰 문제를 해결하였다. HTML은 웹 페이지를 포맷하기 위한 태그를 포함하도록 의도되지 않았다! HTML은 다음과 같.. 2023. 6. 26. HTML 웹 스토리지 API(HTML Web Storage API) HTML 웹 스토리지, 쿠키보다 더 좋다. HTML 웹 스토리지란 무엇인가? 웹 스토리지를 사용하면 웹 응용 프로그램이 사용자의 브라우저 내에 로컬로 데이터를 저장할 수 있다. HTML5 이전에는 애플리케이션 데이터가 모든 서버 요청에 포함된 쿠키에 저장되어야 했다. 웹 스토리지는 웹 사이트 성능에 영향을 미치지 않고 보다 안전하고 많은 양의 데이터를 로컬에 저장할 수 있다. 쿠키와 달리 저장소 제한은 훨씬 크고(최소 5MB) 정보는 서버로 전송되지 않는다. 웹 스토리지는 오리진별(도메인 및 프로토콜별)이다. 모든 페이지는 한 원본에서 동일한 데이터를 저장하고 액세스할 수 있다. HTML 웹 스토리지 오브젝트(Web Storage Objects) HTML 웹 저장소는 클라이언트에 데이터를 저장하기 위한 .. 2023. 6. 25. HTML Drage and Drop API HTML에서 모든 요소를 drag and drop을 할 수 있다. HTML Drag & Drop 드래그와 드롭은 매우 일반적인 기능입니다. 개체를 "잡아서" 다른 위치에 끌어서 놓는 기능이다. HTML Drag&Drop 예제 W3Schools 이미지를 직사각형으로 끌어서 놓는다 W3Schools 이미지를 직사각형으로 끕니다: 위의 코드를 실행하면 아래 그림과 같다. 아래 w3schools.com 이미지를 사각형에 드래그앤드롭을 한 결과가 아래 그림이다. 위의 예제에 대해 하나씩 설명해 나가보자. 요소를 드래그할 수 있게 만들기 첫째: 요소를 끌 수 있도록 하려면 draggable 특성을 true로 설정합니다: 드래그 대상 설정하기-dragrstart()와 setData() 그런 다음 요소를 끌 때 수행할.. 2023. 6. 24. HTML 위치 API(Geolocation API) HTML 지리 위치 API는 사용자의 위치를 찾는 데 사용된다. HTML 사용자 위치 찾기 HTML 지리 위치 API는 사용자의 지리적 위치를 가져오는 데 사용된다. 이렇게 하면 개인 정보가 손상될 수 있으므로, 사용자가 승인하지 않으면 해당 직위를 사용할 수 없다. HTML 위치 API 활용하기 getCurrentPosition() 메서드는 사용자의 위치를 반환하는 데 사용된다. 아래 예제는 사용자 위치의 위도 및 경도를 반환한다: 버튼을 클릭하여 좌표를 확인합니다. 위치찾기 위의 코드를 실행하면 사용자 위치 정보가 아래 그림과 같이 표시된다. Geolocation이 지원되는지 확인한다 지원되는 경우 getCurrentPosition() 메서드를 실행한다. 그렇지 않은 경우 사용자에게 메시지 표시 ge.. 2023. 6. 23. 이전 1 ··· 18 19 20 21 22 23 24 ··· 39 다음
