전체 글40 [html 기초] 19. 반응형 웹 디자인 기초 - 뷰포트와 미디어 쿼리 이번 포스팅에서는 반응형 웹 디자인의 기초 중 하나인 뷰포트와 미디어 쿼리에 대해 알아보겠습니다. 이론부터 실습까지, 다양한 화면 크기에 맞게 웹 페이지를 최적화하는 방법을 자세히 학습해 봅시다. 자동목차 이론: 뷰포트와 미디어 쿼리란? 뷰포트는 웹 페이지가 표시되는 영역을 의미합니다. 웹 페이지는 뷰포트의 크기에 따라 다르게 보일 수 있습니다. 반응형 웹 디자인에서는 태그를 이용하여 뷰포트를 제어합니다. 미디어 쿼리는 CSS의 기능 중 하나로, 뷰포트의 크기에 따라 다른 스타일을 적용할 수 있게 합니다. 이를 통해 화면 크기에 따라 웹 페이지의 레이아웃을 변경할 수 있습니다. 실습: 뷰포트와 미디어 쿼리 사용하기 아래의 코드는 뷰포트와 미디어 쿼리를 이용하여 화면 크기에 따라 배경색을 변경하는 웹 페이.. 2023. 12. 11. [html 기초] 18. HTML5의 새로운 특징 - 지역 저장소, 관련 API 이번 포스팅에서는 HTML5의 새로운 특징 중 하나인 지역 저장소와 관련 API에 대해 알아보겠습니다. 이론부터 실습까지, 웹 페이지에서 데이터를 효율적으로 저장하고 관리하는 방법을 자세히 학습해 봅시다. 자동목차 이론: 지역 저장소란? HTML5의 지역 저장소(Local Storage)는 웹 브라우저에 데이터를 저장하는 기능입니다. 이를 통해 웹 페이지가 사용자의 정보를 저장하고, 이후에 다시 불러올 수 있습니다. 지역 저장소는 쿠키와 비슷하지만, 저장 용량이 더 크고 서버로 자동 전송되지 않는다는 차이점이 있습니다. 실습: 지역 저장소 사용하기 아래의 코드는 지역 저장소를 이용하여 사용자의 이름을 저장하고 불러오는 간단한 웹 페이지의 예시입니다. Save Load 3. 코드 설명 localStorag.. 2023. 12. 11. [html 기초] 17. 자바스크립트와 상호작용 - 효율적인 HTML 이벤트 처리 이번 포스팅에서는 HTML과 자바스크립트의 상호작용, 특히 HTML 이벤트 처리에 대해 알아보겠습니다. 이론부터 실습까지, 웹 페이지가 사용자의 행동에 반응하는 방법을 자세히 학습해봅시다. 자동목차 이론: HTML 이벤트란? HTML 이벤트는 웹 페이지에서 일어나는 특정한 동작을 의미합니다. 이에는 사용자가 버튼을 클릭하거나, 입력 폼에 텍스트를 입력하는 등 다양한 동작이 포함됩니다. 이러한 이벤트가 발생하면, 자바스크립트를 이용하여 그에 따른 특정한 동작을 실행할 수 있습니다. 실습: HTML 이벤트 처리하기 아래의 코드는 사용자가 버튼을 클릭하면 'Hello, World!'라는 메시지를 띄우는 간단한 웹 페이지의 예시입니다. Click me! 코드 설명 onclick: 이 속성은 사용자가 HTML 요.. 2023. 12. 10. [html 기초] 16. CSS와 HTML 연동하기 - 스타일시트 기초 이번 포스팅에서는 CSS와 HTML을 연동하는 방법, 즉 웹 페이지에 스타일을 적용하는 기초적인 방법에 대해 알아보겠습니다. 이론부터 실습까지, 웹 페이지를 더욱 아름답게 만드는 방법을 자세히 학습해 봅시다. 자동목차 이론: CSS란? CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 정의하는 언어입니다. CSS를 이용하면 웹 페이지의 배경색, 폰트, 레이아웃 등을 쉽게 제어할 수 있습니다. CSS와 HTML 연동하기 CSS를 HTML에 적용하는 방법은 크게 세 가지입니다: 외부 스타일시트, 내부 스타일시트, 인라인 스타일입니다. 외부 스타일시트: CSS 코드를 별도의 .css 파일에 작성하고, HTML 파일에서 이를 연결합니다. 내부 스타일시트: HTML 파일 내의 CSS와 .. 2023. 12. 9. [html 기초] 15. 임베디드 요소 - iframe을 사용한 외부 콘텐츠 통합 이번 포스팅에서는 HTML의 iframe을 이용한 외부 콘텐츠 통합 방법에 대해 알아보겠습니다. 이론부터 실습까지, 웹 페이지에 다른 웹 페이지를 삽입하는 방법을 자세히 학습해봅시다. 자동목차 이론: iframe 이란? HTML의 태그는 웹 페이지 내에 다른 HTML 페이지를 임베드하는 데 사용됩니다. 이를 통해 웹 페이지에 YouTube 동영상, Google Maps 등의 외부 콘텐츠를 쉽게 삽입할 수 있습니다. 실습: iframe 사용하기 아래의 코드는 Google Maps를 웹 페이지에 삽입하는 간단한 예시입니다. 코드 설명: iframe 태그의 속성 src: 임베드할 웹 페이지의 URL을 지정합니다. width와 height: iframe의 너비와 높이를 지정합니다. style: CSS를 이용하여.. 2023. 12. 9. [html 기초] 14. 인터랙티브 요소 - Details, Summary 그리고 기타 요소들 이번 포스팅에서는 HTML의 인터랙티브 요소 중 details, summary 그리고 기타 요소들에 대해 알아보겠습니다. 이론부터 실습까지, 사용자와 상호작용하는 웹 페이지를 만드는 방법을 자세히 학습해 봅시다. 자동목차 이론 HTML에서는 사용자와 상호작용하는 다양한 요소들을 제공합니다. 이번 섹션에서는 그중그리고 기타 인터랙티브 요소들에 대해 알아보겠습니다. 실습 아래의 코드는 details와 summary 요소를 활용한 간단한 FAQ 페이지의 예시입니다. 질문1 여기에 질문에 대한 답변을 적습니다. 질문2 여기에 질문에 대한 답변을 적습니다. 코드 설명 : 클릭하면 내용이 펼쳐지거나 닫히는 요소입니다. 내부에는 질문에 대한 답변이 포함됩니다. : details 요소의 제목을 나타냅니다. 이 요소를 .. 2023. 12. 8. [html 기초] 13. 오디오와 비디오 삽입하기 - 멀티미디어와 HTML 이번 포스팅에서는 HTML을 이용하여 웹 페이지에 오디오와 비디오를 삽입하는 방법에 대해 알아보겠습니다. 이론부터 실습까지, 멀티미디어 요소를 효과적으로 활용하는 방법을 자세히 학습해 봅시다. 자동목차 이론 HTML5에서는 오디오()와 비디오() 태그를 도입하여 웹 페이지에 직접 멀티미디어 요소를 삽입할 수 있게 되었습니다. 이를 통해 플러그인 없이도 오디오와 비디오 콘텐츠를 재생할 수 있습니다. 실습 아래의 코드는 오디오와 비디오 요소를 웹 페이지에 삽입하는 간단한 예시입니다. Your browser does not support the video tag. Your browser does not support the audio element. 코드 설명 : 비디오를 재생하는 태그입니다. width와 h.. 2023. 12. 8. 이전 1 2 3 4 5 6 다음