전체 글

[HTML&CSS] Grid - CGV 영화 이벤트 정보 만들기😈

HTML&CSS를 활용하여 CGV 영화 이벤트 정보 만들기 ⭐️ Grid를 사용하면 간단한 방법으로 동일한 형태를 정렬하여 배치할 수 있다. http://www.cgv.co.kr/culture-event/event/defaultNew.aspx#1 영화 그 이상의 감동. CGV www.cgv.co.kr 전체 코드 CGV 특별관, 특별한 재개봉 2022.09.01~2022.09.03 개봉작 사용 설명서 [공조2: 인터내셔날] 무비 스펙트럼트 카드 2022.09.01~2022.09.03 VIP가 쏘는 영화 쿠폰백 2022.09.01~2022.09.03 [늑대사냥] 필름마크 2022.09.01~2022.09.03 [아바타] 필름마크 2022.09.01~2022.09.03 [귀멸의 칼날: 장구저택] 2022.09..

[HTML&CSS] CGV 영화 순위 목록 만들기😈

HTML&CSS를 활용하여 CGV 영화 순위 목록 만들기 ⭐️ float를 사용하지 않아도, align-items과 position을 사용하여 간단하게 배치할 수 있다. https://www.cgv.co.kr/ 영화 그 이상의 감동. CGV www.cgv.co.kr 예매 정보가 바꼈군.. 영화 포스터 모서리 둥글게하기(이미지 모서리 둥글게 넣기) 영화 포스터 위에 시청 연령 이미지 (이미지 위에 이미지 넣기) 영화 포스터 위에 영화 순위(이미지 위에 글씨 넣기) 1 공조2-인터내셔날 95% | 예매율 38.5% 전체 코드 1 공조2-인터내셔날 95% | 예매율 38.5% 2 늑대사냥 99% | 예매율 11.1% 3 알라딘 98% | 예매율 6.5% 4 탑건-매버릭 99% | 예매율 5.8% 5 시맨틱 9..

[HTML&CSS] 04. 레이아웃 포지셔닝 - position

position static 요소를 일반적인 문서 흐름에 배치 top, right, bottom, left, z-index 속성이 아무런 영향 X float 기준점 원래 있던 위치를 기준점에서 이동 문서의 시작점을 기준점으로 하여 이동 absolute를 줄 경우 width를 지정하지 않으면 폭은 content 크기만큼 크기를 잡음 visibility .hidden { visibility: hidden; } z-index position 속성이 static이 아닌 요소와 그 자손 요소의 Z축 순서를 지정 초록색을 앞으로 빼고 싶다면?? satic이면 안 됨 z-index 를 이용하여 숫자가 크면 클 수록 위로 치고 올라온다. clip 요소의 어느 부분이 보이는지를 정의한다. position이 absolut..

[CSS] 04. 레이아웃 포지셔닝 - float

float 해당 요소를 자신을 감싸고 있는 컨테이너의 왼쪽이나 오른쪽에 배치하도록 설정 * float 해제하는 방법 - float된 요소의 부모 태그에 강제로 높이 값을 지정(단점 : 반응형시 자동 높이 값 설정 불가) - float된 요소의 부모 태그에 overflow:hidden을 적용(단점 : 해당 요소 안의 컨텐츠를 박스 외부로 표현해줄 수 없음) - float된 요소의 부모 태그에 overflow:auto를 적용(단점 : 특정 브라우저에서 스크롤 바가 표시) - float된 요소의 부모 태그에 float을 또 설정(단점 : 가운데 배치 불가능) - float된 요소의 다음에 나오는 태그에 clear:both를 지정(단점 : clear:both가 적용된 요소에는 margin-top 적용 불가) -..