html/css 영화 소개 페이지

• 영화 소개 페이지
  
  

기능 상세 설명

• title 꾸며주기

border-top: 1px solid rgb(44, 44, 44); // 배경색과 맞춰서 선 안 보이게 함
border-bottom: 2px solid rgb(44, 44, 44); // title 아래에 선이 생기게 함

• 영화 포스터 정렬하기

display: flex;

flex -> Flexible Box의 줄임말
		컨테이너와 아이템을 포함하는 요소
컨테이너 : 아이템들을 포함하고 감싸주는 부모 역할
아이템 : 각 요소로 자식의 역할

• 영화 포스터에 마우스 올릴 시 확대 시킴

transform: scale(1.3); // 사진 전체 1.3배 확대
cursor: pointer; // 마우스 커서 포인터 모양 pointer로 지정

• 포스터 클릭 시 sub 페이지로 넘어감 (영화 상세 설명)

a href="연결할 페이지"

• X 아이콘에 마우스 올릴 시 확대, 클릭 시 이전 페이지인 영화 소개 페이지로 돌아감

onclick="location.href='이전 페이지'"

// 아이콘 css

float: right; // 오른쪽 정렬
margin-top: 30px;
margin-right: 35px;
font-size: large; // 아이콘은 폰트와 같이 사용됨
color: rgb(169, 48, 48); // 아이콘 색상

// 아이콘 호버 시

transform: scale(1.3);
cursor: pointer;

• play movie 버튼 클릭 시 새 창에서 영화 설명 및 영화를 볼 수 있는 페이지가 열림

onclick="window.open('연결할 사이트')"

onclick="location.href=''" -> 현재 창에서 열기
onclick="window.open('')" -> 새로운 창에서 열기