본문 바로가기
반응형

css15

[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
반응형