본문 바로가기
반응형

1인칭 학습 시점_웹개발/HTML&CSS11

[HTML&CSS] 자유주제 홈페이지 제작 – 영화관 웹사이트 만들기 HTML과 CSS를 활용하여 영화관 홈페이지를 만들어 보았습니다. 이 프로젝트는 웹 개발의 기본 구조인 HTML5 문서 구성과 CSS 스타일링을 학습하고, 반응형 디자인까지 경험해보는 것을 목표로 하였습니다. 주요 섹션은 개봉 예정 영화 소개, 극장 안내, 티켓 예매, 스토어 상품, 이벤트, 혜택 정보로 구성되어 있습니다. 1. 프로젝트 개요이 홈페이지는 영화관 소개 및 예매 사이트를 주제로 구성하였습니다. 사용자가 원하는 정보를 손쉽게 찾을 수 있도록 메뉴바를 구성하고, 시각적인 요소(이미지 + 텍스트)를 조화롭게 배치하였습니다. 전체 페이지는 그리드 레이아웃을 기반으로 구성되며, 모바일 환경에 최적화된 반응형 웹도 적용하였습니다. 2. HTML 코드 설명1) 기본 구조 ( 내부) ... .. 2024. 7. 16.
[CSS] Flexbox와 그리드 레이아웃 이해하기 HTML과 CSS에서 레이아웃을 구성하는 방식은 다양하지만, Flexbox와 Grid는 특히 반응형 웹과 복잡한 UI 설계에서 자주 사용되는 핵심 기술입니다. 오늘은 Flexbox의 정렬 속성과 그리드 레이아웃의 구현 방법, 고정형 및 가변형 레이아웃 구성까지 정리해보았습니다. 1. Flexbox 배치 방식Flexbox는 요소를 수평 또는 수직 방향으로 정렬할 수 있도록 도와주는 CSS 속성입니다. 정렬 방식은 크게 align-items와 justify-content 속성을 활용합니다. 1) align-items : 교차축(세로축) 기준 정렬align-items: flex-start; /* 시작점 기준 */align-items: flex-end; /* 끝점 기준 */align-items: ce.. 2024. 7. 12.
[CSS] 트랜지션과 반응형 웹 디자인 이해하기 웹 사이트를 사용자 친화적이고 세련되게 만들기 위해 꼭 알아야 할 CSS 속성 중 하나는 트랜지션입니다. 또한 다양한 기기에서도 잘 보이도록 제작하는 반응형 웹 역시 현대 웹 디자인의 필수 요소입니다. 이번 글에서는 트랜지션 속성과 반응형 웹 제작의 핵심 개념인 미디어 쿼리에 대해 정리하였습니다. 1. 트랜지션 속성요소의 스타일 변화에 부드러운 애니메이션 효과를 적용할 때 사용하는 속성입니다. CSS의 transition 속성을 사용하면, 배경색, 크기, 위치 등 스타일이 변경될 때 즉각 바뀌는 것이 아니라 서서히 변화하게 만들 수 있습니다. 1) 기본 문법transition: 속성 지속시간 지연시간 타이밍함수; 예시:.box { transition: all 0.3s ease-in-out;}all : .. 2024. 7. 11.
[HTML/CSS] 선택자, 꼬리말 & 트랜지션 효과까지 한눈에 정리 CSS를 활용하여 웹 요소에 정교하게 스타일을 적용하기 위해서는 선택자와 트랜스폼(transform), 트랜지션(transition) 등의 속성을 잘 이해하는 것이 중요합니다. 이번 포스팅에서는 선택자와 꼬리말(::before, ::after), 그리고 요소의 변화 효과에 대한 예제를 함께 정리하였습니다. 1. CSS의 선택자 요소CSS 선택자는 HTML 문서에서 특정 요소를 선택하고, 그 요소에 스타일을 적용할 때 사용합니다. 2. 자식 요소 선택자자식 선택자는 특정 요소의 직계 자식 요소에만 스타일을 적용할 수 있게 해줍니다.ul > li { color: blue;}> 기호는 부모 > 자식 관계만을 대상으로 하며, 손자 요소는 해당되지 않습니다. 3.기타 요소 선택자CSS에서는 다양한 선택자를 통해.. 2024. 7. 10.
[HTML/CSS] 그라데이션부터 가상 클래스까지 – 스타일링 기초 총정리 웹 페이지를 더 풍부하고 유연하게 꾸미기 위한 CSS 속성 중에서 그라데이션 효과, 선택자 응용, 그리고 가상 클래스에 대해 정리하였습니다. 실습 예제와 함께 개념을 익히면 HTML/CSS의 스타일링에 한층 더 익숙해질 수 있습니다. 1. 그라데이션 효과 주기1) 그라데이션(Gradient)그라데이션은 두 가지 이상의 색상을 부드럽게 연결하여 배경에 색상 변화를 주는 시각 효과입니다..grad3 { background: linear-gradient(to left top, rgb(247, 0, 255), rgb(26, 171, 255));}.grad4 { background: linear-gradient(38deg, rgb(47, 68, 255), rgb(0, 255, 115));}to left top.. 2024. 7. 9.
[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.
반응형

티스토리툴바