![]()
video info 화면 구성 (코드 적용하기 전 화면) 코드 .info .metadata .titleAndButton { display: flex; } .info .metadata .titleAndButton .title { font-size: var(--font-large); font-weight: 500; margin-right: var(--padding); } .info .metadata .titleAndButton .moreBtn { } .info .views { font-size: var(--font-small); color: var(--grey-dark-color) } css 공부 리스트의 점없애는 코드 list-style-type: none;
![]()
완성된 헤더부분 코드 header { display: flex; justify-content: space-between; padding: var(--padding); background-color: var(--white-color); color: var(--black-color); font-weight: bold; } header .logo { font-size: var(--font-large); } header .logo i { color:var(--red-color); } header .icons .fa-magnifying-glass{ margin-right: var(--padding); } 비디오 플레이어 부분 (코드 적용하기 전 화면) 코드 .player { text-align: center; }..
![]()
Mobile First 모바일 화면을 먼저 구성하고 반응형 웹페이지로 확장시켜 만든다. 화면 구성 헤더 비디오 플레이어 화면 비디오에 관련된 정보 화면 (타이틀 -> 2줄 / 버튼 클릭 시 3줄로 변환) 스크롤링 화면 (비디오는 움직이지 않고 고정) 브라우저 사이즈가 커지면 화면이 유동적으로 움직이다가 재배치
![]()
https://jsbin.com/?html,output JS Bin Sample of the bin: jsbin.com https://replit.com/~ Log In Run code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter. replit.com https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, p..
