본문 바로가기
728x90
반응형

전체 글304

비주얼 스튜디오 코드 70_parallax07 화면이 이동하면서 글자들이 나오는 액션 html 마크업 css 편집 #contents css 편집 #header css 편집 #nav css 편집 dot 위치시키기 dot 모양 만들기 **parallax를 사용하지 않아도 링크를 걸면 해당 화면에 페이지로 이동하는 것을 볼 수 있다. @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } a{ text-decoration: none; } /* header */ #header{ position: fixed; width: 100%; height: 60px; background-color: rgba(255, 255, 255, 0.3); } #head.. 2023. 7. 10.
비주얼 스튜디오 코드 69_파노라마 회사소개02 .face3 html 마크업 .face3 css 편집 .pic에서 공통된 속성을 적용해주고 nth-of-type으로 각각 사진만 넣어준다. Co Company Android Apple Twitter Facebook YouTube Google What's New New n Articles What is Lorem Ipsum? Lorem: 텍스트 자동 완성 기능 Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, explicabo quia error perspiciatis eveniet deserunt assumenda corporis minima voluptas consequatur quibusdam consectetur quae numqua.. 2023. 7. 7.
비주얼 스튜디오 코드 68_ 하이시네마 탭메뉴_02 탭메뉴(영화차트 스와이퍼) 복습 swiper 접속 layout copy chart1 중간에 붙여넣기 swiper script 붙여넣기 위에서 이미 swiper const 지정을 했기 때문에 const 대신에 let swiper로 변경한다. 이미 지정된 const swiper는 const 삭제한다. loope 빼고 밑에 다 삭제하고 '.swiper' >' .swiper2 '로 변경 swiper-wrapper 마크업 reset.css에 여백초기화 부분에 figure, figcaption 추가하기 reset.css 에 .icon 스타일 추가하기 html 에 icon 이름을 넣어주면 reset에 넣은 icon 이미지가 들어간다. .chart1 css 편집 img를 100%로 지정하고 포스터를 기준으로 rank가.. 2023. 7. 7.
비주얼 스튜디오 코드 67_ 하이시네마 탭메뉴 탭메뉴 html 마크업 #movie css 편집 위아래 여백 100px 떨어뜨리기 movie 탭 li 편집 반응형 적용하기 media.css 편집 movie_title 사이즈 편집 화면크기 960px 화면크기 768px ir_su 살리기 reset.css 에서 ir_su 코드 가져오기 밑에 선 가상요소로 넣기 ::before로 넣어준다. active 가상요소 만들기 화면크기600px .row의 가상요소 만들기 탭메뉴 jquery script 영화포스터 만들기 swiper 링크 걸기 css, js 링크 html layout 복사해서 붙여넣기 swiper-slide 각 div 안에 이미지 넣기 .movie_chart1 css 편집 css setting .swiper-slide image 편집 reset.cs.. 2023. 7. 6.
비주얼 스튜디오 코드 66_ 사이드 닷 메뉴 닷메뉴_ active 값에 변화주기 css reset #header css편집 h1 편집 #contents css 편집 #dot css 편집 active 활성화 @charset "utf-8"; *{ padding: 0; margin: 0; box-sizing: border-box; color: #222; } li{ list-style: none; } a{ text-decoration: none; color: #222; } #header{} #header h1{ width: 100%; height: 60px; background-color: rgba(255, 255, 255, 0.5); position: fixed; left: 0; top: 0; text-align: center; line-height: .. 2023. 7. 6.
비주얼 스튜디오 코드 65_파노라마 회사 소개 1. 배경 - 영상 넣기 글꼴넣기 다른방법으로 폰트 넣기 font : 17px 1.4(줄간격) 폰트종류 body css편집 wrap에서 fixed 하기 object-fit: cover; 비율 맞추기 html 마크업 #circle css 편집 #circle 3d효과 지정 #circle html 세부 마크업 #circle article css 편집 위치 정하기 #circle html 세부 마크업2 #circle article h2 css 편집 #circle article .inner css 편집 article 숨겨주기 div 하나하나 편집해준다. face1 부터 편집 face1 html 마크업 div 6개가 필요하다. 폰트어썸 이미지를 넣어야하기 때문에 폰트어썸 링크를 걸어주자 i태그 밖에 p태그를 추가해준.. 2023. 7. 5.
728x90

티스토리툴바