본문 바로가기
728x90
반응형

분류 전체보기291

비주얼 스튜디오 코드_75 animation 한 글자씩 애니메이션 적용 html markup article > div > h2안에 span 사이에 한 글자씩 넣기 article 6까지 마크업한다. css 편집 #header css edit transiton : all 은 모두 움직이는 속도를 주지만 움직이고 싶은 명령어만 지정해서 속도를 넣을 수 있다. #dot edit @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } ol,li,ul,dd,dt,dl{ list-style: none; } a{ text-decoration: none; } .clearfix::before, .clearfix::after{ display: block; content: ""; clear: both.. 2023. 7. 12.
비주얼 스튜디오 코드 74_ 하이시네마 footer 하이시네마_ 공지사항, 푸터란 만들기 html 마크업 .help는 세개의 박스를 옆으로 띄워야하기 때문에 .help안에 clearfix를 넣는다. .help css 편집 .help 안에 세개 박스 편집하기 article의 마지막 아이의 border를 0주어 박스를 삭제한다. . 클래스를 지정해줬으니 이름을 넣어줘도 된다. article > .help_box3 .notice html markup ● dl : 타이틀과 데이터를 싸고 있는 박스 ● dt : 타이틀 작성 ● dd : 데이터 작성 >> 영어사전에 많이 사용되는 형식이다. .notice css edit 기준값이 다르기 때문에 정렬이 다르다. 정렬을 맞춰줘야한다. position을 띄워서 기준점을 맞추어준다. a tag edit .card html .. 2023. 7. 11.
비주얼 스튜디오 코드 73_animation 화면이 움직이면 글자가 바운딩해서 나타남 https://cdnjs.com/ cdnjs - The #1 free and open source CDN built to make life easier for developers Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library fil cdnjs.com parallax08 이어서 하기 css animation.. 2023. 7. 11.
비주얼 스튜디오 코드 72_parallax08 화면이 움직이면 글자가 바운딩해서 나타남 html mark up css 편집 #header 편집 #dot 편집 #header 편집 @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } a{ text-decoration: none; color: #222; } li{ list-style: none; } .clearfix::after,.clearfix::before{ display: block; content: ""; clear: both; } #contents{ text-align: center; } #contents > div{ width: 100%; height: 100vh; display: flex; align-items: cent.. 2023. 7. 11.
비주얼 스튜디오 코드 71_하이시네마_컨텐츠(유투브 영상 삽입) #contents openig html 마크업 opening css 편집 이미지를 포토샵에서 열어서 포토샵의 위치를 보고 background-position으로 좌표값 넣어주면 이미지가 나온다. ir_pm으로 안에 글자를 없애준다. 바 이미지 넣기 (위치는 bottom center) 이미지 배율 100%로 하려면 background-size: 100%; 설정 opening 배경이미지 넣기 100%로 사용을 했으니 #opening에 배경을 넣는다. .opening 에 padding:100으로 변경해준다. div float 띄워서 옆으로 나열하기 h3 p태그 날짜 css 편집 반응형 넣기 화면크기960PX 화면크기780PX 화면크기600PX 새로운영화 컨텐츠 만들기 #new html 마크업 #new css편.. 2023. 7. 10.
비주얼 스튜디오 코드 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.
728x90
반응형

티스토리툴바