![]()
index.html 코드 YouTube (eng) MY RECORDS 좋아하는 LP 소개, 자주 가는 레코드샵, 나의 음악 취향 조회수 15만회 2년전 #LP #레코드샵 #musicismylife 4.7천 공유 저장 Report KYURIN 규린 구독자 11.5만명 구독 UpNext 2021 KYEJEOL LIVE of BIG Naughty KYEJEOL LIVE 조회수 15만회 [LENIVERSE] EP.18 LE CAFÉ 2편 LE SSERAFIM 조회수 27만회 [playlist] 빈티지 러브 (Vintage Love) 리플레이LEEPLAY 조회수 9.8만회 style.css 코드 :root{ /* Color */ --white-color: #fff; --black-color: #140a00; --..
![]()
actions 화면 구성 전 모습 코드 .actions { display: flex; justify-content: space-around; padding: var(--padding) 0; } .actions button { display: flex; flex-direction: column; font-size: var(--font-small); background-color: var(--white-color); color: var(--grey-dark-color); } .actions button i { margin: 0 auto; margin-bottom: calc(var(--padding)/2); font-size: 20px; } .actions button i.active { color:var(-..
![]()
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줄로 변환) 스크롤링 화면 (비디오는 움직이지 않고 고정) 브라우저 사이즈가 커지면 화면이 유동적으로 움직이다가 재배치
