본문 바로가기
반응형

[R&D] 프로그래밍/Web (HTML, CSS)16

[HTML/CSS] 웹 페이지에서 이미지와 비디오 사용하기 컴퓨터 화면에서 보여지는 웹 페이지는 이미지와 비디오를 포함한 다양한 미디어 요소들을 활용하여 사용자에게 보다 풍부한 시각적 효과를 제공합니다. 이번 블로그 포스트에서는 HTML/CSS를 사용하여 웹 페이지에서 이미지와 비디오를 사용하는 방법에 대해 알아보고, 간단한 예제도 함께 보겠습니다. 이미지 사용하기 이미지 파일 포맷 웹 페이지에서 사용하는 이미지는 다양한 파일 포맷으로 제공됩니다. 그 중에서도 주로 사용되는 파일 포맷은 다음과 같습니다. JPEG(Joint Photographic Experts Group): 사진 등의 복잡한 이미지를 저장할 때 사용되며, 용량이 큰 편입니다. PNG(Portable Network Graphics): 그래픽 등의 간단한 이미지를 저장할 때 사용되며, 용량이 작은 .. 2023. 2. 24. 00:14
[HTML/CSS] HTML과 CSS로 반응형 웹 페이지 만들기 반응형 웹 페이지 반응형 웹 페이지는 모바일, 태블릿, 데스크탑 등 다양한 디바이스에서 웹 페이지가 제대로 보이도록 만드는 것을 말합니다. 반응형 웹 페이지를 만드는 가장 일반적인 방법은 미디어 쿼리를 사용하는 것입니다. 미디어 쿼리는 특정 디바이스의 화면 크기, 해상도 등을 확인하여, 그에 따라 다른 스타일을 적용하는 방법입니다. 미디어 쿼리를 사용하여 반응형 웹 페이지를 만들면, 하나의 웹 페이지에서 모바일, 태블릿, 데스크탑 등 다양한 디바이스에서 동일한 사용자 경험을 제공할 수 있습니다. 예제 코드 이번 포스트에서는 간단한 예제 코드를 사용하여 반응형 웹 페이지를 만들어 보겠습니다. 이 예제 코드는 Python을 사용하여 작성된 Flask 애플리케이션입니다. Flask 설치 먼저 Flask를 설치.. 2023. 2. 23. 00:57
[HTML/CSS] HTML5와 CSS3에서 추가된 기능 HTML5에서는 새로운 폼 요소, 콘텐츠 모델 등이 추가되어 웹 문서의 레이아웃을 만들 때 주요 태그들이 표준화되어 유지보수 및 가독성에 용이해졌습니다. 또한 CSS3에서는 그리드 레이아웃, 변환과 전환, 그림자와 경계선 등의 기능이 추가되어 기존보다 풍부한 시각적인 효과를 줄 수 있게 되었습니다. HTML5 시맨틱 태그 HTML5에서는 시맨틱 태그(semantic tag)가 새롭게 추가되었습니다. 시맨틱 태그는 의미론적인 구조를 가진 태그로, 기존의 div와 span 태그 대신 사용될 수 있습니다. 시맨틱 태그를 사용하면 웹 페이지의 구조를 더욱 명확하고 의미 있는 구조로 작성할 수 있습니다. 예를 들면, header, nav, section, article, aside, footer 등의 태그는 각각.. 2023. 2. 22. 01:43
[HTML/CSS] HTML과 CSS 기초 문법과 구조 HTML은 웹 페이지의 구조를 정의하며, CSS는 해당 구조를 디자인합니다. 이번 글에서는 HTML과 CSS의 기초 문법과 구조에 대해 알아보고, 간단한 예제 코드를 통해 학습해보겠습니다. 1. HTML 기초 문법 1.1. HTML 문서의 기본 구조 HTML 문서는 기본적으로 다음과 같은 구조를 가집니다. 문서 내용 : 문서의 형식을 정의합니다. HTML5를 사용한다는 것을 나타냅니다. : HTML 문서의 시작을 알립니다. 이 문장은 빨간색입니다. 외부 스타일 시트 CSS 파일을 따로 만들어 HTML 문서에서 불러와 사용하는 방법입니다. 2.3. CSS 예제 코드 /* 제목 스타일 */ h1 { color: blue; font-size: 30px; text-align: center; } /* 단락 스타일.. 2023. 2. 21. 11:28
728x90
반응형

티스토리툴바