반응형 web5 [Javascript] 화면 스크롤 감지해서 event 발생(header bar 투명도 조절하기) Netflix 만들기 Project 중 모르는 부분 정리 일부분 header bar 예시 : 해당 문서에서 스크롤 했는지 안했는지 감지하는 방법 document.addEventListener("scroll", scrollEvent); 스크롤를 했을 때 만약 제일 위쪽 화면을 보고 있지 않는다면 header bar 배경을 까맣게 제일 위쪽 화면을 보고 있다면 투명하게 만들기 if(document.documentElement.scrollTop > 0){ top_bar.classList.add("top-bar-down"); }else{ top_bar.classList.remove("top-bar-down"); } 이때 document.documentElement.scrollTop 은 상단에서 얼마큼 스크롤이 .. 2021. 1. 10. [css][html] 하이퍼링크 밑줄 없애기 / CSS Animation 구현시 마지막 상태 유지하는 방법 / Font Awesome의 아이콘 색상을 변경, 크기 변경 / overflow / object-fit / nth-child / HTML 주석 처리 / 자바 스크립트 주석.. 하이퍼링크 밑줄 없애기 .top-bar__tab { margin-right: 9px; text-decoration: none; } CSS Animation 구현시 마지막 상태 유지하는 방법 body { opacity: 0; animation: fadeIn 1.5s forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } 이미지 삽입 요소 Font Awesome의 아이콘 색상을 변경 HTML : CSS : .blackiconcolor {color:black;} fontawesome.com/icons?d=gallery&q=alert Font Awesome The world’s most popular and easiest to use .. 2021. 1. 6. [Web] css / html tag 태그 정리 - 3 - 글을 쓸 때도 직관적으로 쓰기 위한 태그 - 아래와 같은 태그들은 sementic html 로 직관적인 태그들이다. hello? // 짧은 단어를 쓸 때 유용 what is it? // 문단을 쓸 때 유용 // 이메일 - 직접 html에 css 추가시키는 태그 - 따로 css 파일 만들고 html 연결시키는 태그 - css : h1 바꿔주기 h1{ color:blueviolet; // 색깔 font-style: italic; // 날려쓰는 글씨체 font-size: 20px; // 사이즈 text-align: center; // 중앙 정렬 } html은 위에서 차례대로 실행시키기 때문에 겹쳐도 되나 나중에 나온 것을 결국 적용시킨다. 옆에 올 수 없음. 이렇듯 옆에 올 수 있는 것과 없는 것을 없는 .. 2020. 12. 25. [Web] css / html tag 태그 정리 - 2 - HTML 요소는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다. - 다른 글씨체로 표시 happy - HTML 요소는 준말 또는 머리글자를 나타냅니다. - time에 점선이 쳐지고 마우스를 위에 올리면 약어(my stylr)를 표시 Day time - 는 south korea 형광펜 표시 l like to live in south korea - 는 south korea 굵게 표시 l like to live in south korea - 는 south korea 밑으로 내려서 표시 는 south korea 위로 올려서 표시 - 제곱표시해줄때 유용 l like to live in south korea 25 - audio 태그 / controls 꼭 있어야함 / autop.. 2020. 12. 25. 이전 1 2 다음 반응형
