본문 바로가기
반응형

HTML기초7

[HTML&CSS] 자유주제 홈페이지 제작 – 영화관 웹사이트 만들기 HTML과 CSS를 활용하여 영화관 홈페이지를 만들어 보았습니다. 이 프로젝트는 웹 개발의 기본 구조인 HTML5 문서 구성과 CSS 스타일링을 학습하고, 반응형 디자인까지 경험해보는 것을 목표로 하였습니다. 주요 섹션은 개봉 예정 영화 소개, 극장 안내, 티켓 예매, 스토어 상품, 이벤트, 혜택 정보로 구성되어 있습니다. 1. 프로젝트 개요이 홈페이지는 영화관 소개 및 예매 사이트를 주제로 구성하였습니다. 사용자가 원하는 정보를 손쉽게 찾을 수 있도록 메뉴바를 구성하고, 시각적인 요소(이미지 + 텍스트)를 조화롭게 배치하였습니다. 전체 페이지는 그리드 레이아웃을 기반으로 구성되며, 모바일 환경에 최적화된 반응형 웹도 적용하였습니다. 2. HTML 코드 설명1) 기본 구조 ( 내부) ... .. 2024. 7. 16.
[HTML/CSS] float 속성과 요소의 위치 지정 방법 총정리 웹 페이지의 요소를 자유롭게 배치하고 시각적인 레이아웃을 구성하기 위해 사용하는 float, clear, position, 시멘틱 태그에 대해 정리하였습니다. 실습 예제와 함께 구성해 실무와 학습에 도움이 되도록 정리하였습니다. 1. float 속성float 속성은 요소를 왼쪽(left) 또는 오른쪽(right)에 띄워서 배치할 수 있도록 해주는 속성입니다. 주로 이미지나 박스를 문단 옆에 배치할 때 사용됩니다.img { float: right;} 위 코드는 이미지를 오른쪽에 배치하며, 주변 텍스트는 왼쪽에 흐르듯 정렬됩니다. 2. clear 속성clear 속성은 float 속성에 의해 흐르는 레이아웃을 무효화하여 아래 요소가 float 영향을 받지 않도록 만듭니다.#box3 { clear: left.. 2024. 7. 8.
[CSS 기초] 마진 vs 패딩 차이, 박스 모델 완벽 이해하기 CSS에서 요소의 여백과 레이아웃을 조정하는 가장 기본이자 중요한 개념인 margin, padding, 그리고 박스 모델(Box Model)에 대해 정리해보았습니다. 1. 마진(Margin)이란?마진은 HTML 요소의 바깥쪽 여백을 설정하는 속성입니다.요소와 요소 사이의 간격을 조절할 때 사용하며, 외부 여백이라고도 부릅니다. 1) 주요 특징인접한 다른 요소와의 거리를 조절합니다.음수 값도 허용되며, 이를 이용해 요소를 겹치게 할 수도 있습니다.단위는 px, %, em 등이 사용됩니다..margin-example { margin: 10px; /* 모든 방향 */ margin-left: 20px; /* 왼쪽만 */ margin: 10px 20px; /* 위아래 10px, 좌우 20px */} #CSS.. 2024. 7. 5.
[HTML/CSS 기초] 웹폰트, 텍스트 스타일, 자간·행간, 목록 디자인까지 총정리 HTML과 CSS를 활용해 텍스트 스타일을 더욱 세련되게 꾸밀 수 있는 방법에 대해 정리해보았습니다. !important 우선순위 설정부터 웹폰트 적용, 텍스트 장식, 그리고 목록 스타일 지정까지 다양한 속성을 알아보았습니다. 1. !important 사용법CSS에서 !important는 스타일 우선순위를 강제로 높이고 싶을 때 사용합니다. 일반적으로 인라인 스타일보다 강력하게 적용됩니다.h1 { color: brown !important;}레드향 위 예제에서는 style 속성으로 green을 지정했지만, !important가 적용된 brown이 우선 적용됩니다. #CSS우선순위 #important사용법특정 스타일을 강제로 적용하고 싶을 때 사용하는 우선순위 지정 키워드입니다. 2. CSS 외부 스타일.. 2024. 7. 4.
[HTML/CSS 기초] 멀티미디어 태그, 폼 태그, 레이아웃 구조, CSS 문법 총정리 1. CMD 도스 명령어 요약CMD 명령어는 윈도우 운영체제에서 시스템 작업을 자동화하거나 문제를 해결할 때 유용하게 사용됩니다. 대표 명령어는 다음과 같습니다.CD, DIR, COPY, DEL: 파일과 디렉터리 관련 작업 수행ECHO, PAUSE, REM: 배치 파일에서 사용되는 제어 명령TASKLIST, TASKKILL, SHUTDOWN: 시스템 관리IPCONFIG, PING, NETSTAT: 네트워크 확인 및 점검#CMD 명령어: 윈도우 명령 프롬프트에서 사용되는 시스템 제어 명령어들입니다. 다양한 작업을 명령줄로 빠르게 수행할 수 있습니다. 2. 멀티미디어 태그 사용법1) 이미지 태그 src: 이미지 파일 경로alt: 이미지가 없을 경우 대체 텍스트width, height: 크기 조절 2) 오디.. 2024. 7. 3.
[HTML] 멀티미디어 삽입과 폼 요소 태그 정리 웹 페이지를 더욱 풍부하게 만들기 위해서는 이미지, 오디오, 비디오 등 다양한 멀티미디어 요소를 삽입할 수 있어야 합니다. 또한 사용자로부터 입력을 받을 수 있는 폼(Form) 요소도 웹 페이지 구성에 있어 매우 중요한 부분입니다. 이 글에서는 HTML로 멀티미디어를 삽입하는 방법과 폼 요소를 구현하는 방법을 정리하였습니다. 1. 멀티미디어 사용하기→ 웹 페이지에 이미지, 음악, 영상 등을 삽입할 수 있는 기능입니다. 1) 이미지 삽입: 웹 문서에 이미지를 삽입할 때 사용합니다. 2) 주요 속성src: 이미지 파일의 경로를 지정합니다.alt: 이미지를 불러오지 못할 경우 보여줄 대체 텍스트입니다.width, height: 이미지의 크기를 지정합니다. 하나만 설정하면 비율에 따라 자동 조정됩니다.3) 외부.. 2024. 7. 2.
반응형

티스토리툴바